- <template>
- <!-- 长效运维 -->
- <div class="tabRightCXPage" v-if="allData.tabShowWL == 5">
- <div class="allContent">
- <div class="selectTitle" style="margin-top: 15px">
- <div class="name">案件处置形式</div>
- <el-date-picker v-model="allData.GJtime" size="small" style="width: 120px" type="year" placeholder="选择时间" />
- <p style="color: #ffff; font-family: PingFang SC; font-size: 14px; font-weight: 400; margin-left: 20px">全部工单:</p>
- <el-switch v-model="allData.isOpen" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949; margin-right: 30px" />
- </div>
- <div class="staticPicture">
- <div id="chartOne"></div>
- </div>
- <div class="selectTitle" style="margin-top: 15px">
- <div class="name">政策法规</div>
- </div>
- <div class="policies" v-for="item in allData.policiesList" :key="index">
- <div class="title">
- <p class="titleName">{{ item.name }}</p>
- <p class="dateTime">{{ item.time }}</p>
- </div>
- <div class="policiesContent">{{ item.content }}</div>
- </div>
- <div class="selectTitle">
- <div class="name">民生留言</div>
- </div>
- <div class="noteContent">
- <div class="note" v-for="item in allData.noteList" :key="index">
- <div class="title1">
- <img style="width: 24px; height: 24px; margin-left: 15px" src="/src/assets/newImgs/user.png" />
- <p class="titleName1">{{ item.name }}</p>
- <p class="projectName1">{{ item.project }}</p>
- <p class="dateTime1">{{ item.time }}</p>
- </div>
- <div class="infoContent">{{ item.content }}</div>
- <div class="dividerLine"></div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script setup name="tabRightCXPage">
- import chartOption from '@/components/Echarts/pieChart_1.js';
- import changXiaoLayer from '@/assets/geojson/changXiaoLayer.json';
- import changXiaoIcon from '@/assets/newImgs/tuLi82X.png';
- import * as echarts from 'echarts';
- import { nextTick } from 'vue';
- import bus from '@/bus';
- const allData = reactive({
- tabShowWL: null,
- GJtime: null,
- GJtime1: null,
- isOpen: true,
- policiesList: [
- {
- name: '海绵城市二十条政策措施',
- time: '2023-09-10 10:00',
- content:
- '建设海绵城市是应对城市洪涝、水源枯竭、城市生态环境破坏等问题的重要手段。在构建海绵城市过程中,政策和措施的支持至关重要。下面我们来看看海绵城市建设中的二十条政策与措施......',
- },
- {
- name: '海绵城市建设管理条例',
- time: '2023-09-10 10:00',
- content:
- '为了规范海绵城市建设和管理,保护和改善城市生态环境,促进城市建设与生态系统和谐发展,根据《中华人民共和国城乡规划法》《建设工程质量管理条例》《城镇排水与污水处理条例》等有关法律法规,结合本市实际……',
- },
- ],
- noteList: [
- {
- name: 'XX微信号XX',
- time: '2023-09-10 10:00',
- project: '槐荫河海绵绿化工程',
- content: '周边空气质量还不错,水草植被茂盛,周边空气质量还不错。',
- },
- {
- name: 'XX微信号XX',
- time: '2023-09-10 10:00',
- project: '槐荫河海绵绿化工程',
- content: '周边空气质量还不错,水草植被茂盛,周边空气质量还不错。',
- },
- {
- name: 'XX微信号XX',
- time: '2023-09-10 10:00',
- project: '槐荫河海绵绿化工程',
- content: '周边空气质量还不错,水草植被茂盛,周边空气质量还不错。',
- },
- ],
- options: [
- {
- value: 1,
- label: '设备故障报警',
- },
- {
- value: 2,
- label: '指标超标预警',
- },
- ],
- });
- // 故障报警柱状图
- let chart = null;
- const initEcharts = () => {
- chartOption.floodOneMapPipePie.series[0].data = [
- { value: 2, name: '待处理' },
- { value: 12, name: '处理中' },
- { value: 10, name: '已处理' },
- ];
- if (!!chart) chart.dispose();
- chart = echarts.init(document.getElementById('chartOne'));
- chart.clear();
- chart.setOption(chartOption.floodOneMapPipePie);
- };
-
- const tableData1 = ref([
- {
- code: '001',
- size: '监测站点1',
- qdCode: '设备故障',
- zdCode: '--',
- qdElevation: 1,
- zdElevation: 0,
- tlTime: '50分钟',
- },
- {
- code: '002',
- size: '监测站点12',
- qdCode: '设备故障',
- zdCode: '--',
- qdElevation: 1,
- zdElevation: 0,
- tlTime: '1小时2分钟',
- },
- {
- code: '003',
- size: '监测站点3',
- qdCode: '设备故障',
- zdCode: '--',
- qdElevation: 1,
- zdElevation: 0,
- tlTime: '15分钟',
- },
- {
- code: '004',
- size: '监测站点4',
- qdCode: '设备故障',
- zdCode: '--',
- qdElevation: 1,
- zdElevation: 0,
- tlTime: '11分钟',
- },
- {
- code: '005',
- size: '监测站点5',
- qdCode: '设备故障',
- zdCode: '--',
- qdElevation: 1,
- zdElevation: 0,
- tlTime: '14分钟',
- },
- ]);
- const addCXLayer = () => {
- let changXiaoLayerCircle = _.cloneDeep(changXiaoLayer);
- newfiberMapbox.addMarker(changXiaoLayer, changXiaoIcon, 'changXiao', true, [26, 28]);
- newfiberMapbox.RayLayerObj = new window.virtualSpaceObj.RayLayer();
- newfiberMapbox.pointlight(changXiaoLayerCircle, 'changXiaoCircle', 'rgba(202,102,102,1)');
- };
- onMounted(() => {
- bus.on('changeTableContent', val => {
- if (val == 5) {
- allData.tabShowWL = val;
- nextTick(() => {
- initEcharts();
- addCXLayer();
- });
- } else {
- allData.tabShowWL = null;
- // newfiberMapbox.removeLayer('changXiao');
- // !!newfiberMapbox.RayLayerObj && newfiberMapbox.RayLayerObj.remove();
- }
- });
- });
- onBeforeUnmount(() => {
- bus.off('changeTableContent');
- });
- </script>
- <style lang="scss">
- .tabRightCXPage {
- width: 100%;
- height: 100%;
- position: absolute;
- background: #00314e;
- border: 1px solid #094065;
- z-index: 115;
- .allContent {
- height: 750px;
- overflow: auto;
-
- .staticPicture {
- margin: 30px 100px;
- #chartOne {
- height: 150px;
- width: 300px;
- }
- }
- .policies {
- margin: 10px 20px;
- .title {
- height: 36px;
- background: #003758;
- display: flex;
- justify-content: space-between;
- .titleName {
- color: #b4e7f2;
- font-family: PingFang SC;
- font-size: 14px;
- font-weight: 400;
- line-height: 36px;
- }
- .dateTime {
- color: #b4e7f2;
- text-align: right;
- font-family: PingFang SC;
- font-size: 12px;
- font-style: normal;
- font-weight: 400;
- line-height: 36px;
- }
- }
- .policiesContent {
- color: #00d1ff;
- font-family: PingFang SC;
- font-size: 14px;
- font-weight: 400;
- }
- }
- .noteContent {
- width: 488px;
- .note {
- margin: 10px 20px;
- .title1 {
- height: 36px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .titleName1 {
- color: #b4e7f2;
- text-align: right;
- font-family: PingFang SC;
- font-size: 14px;
- font-weight: 400;
- }
- .projectName1 {
- width: 132px;
- height: 25px;
- background: #004770;
- border: 1px solid #0073a5;
- border-radius: 25px;
- color: #00d1ff;
- font-family: PingFang SC;
- font-size: 12px;
- font-weight: 400;
- line-height: 25px;
- text-align: center;
- }
- .dateTime1 {
- color: #b4e7f2;
- text-align: right;
- font-family: PingFang SC;
- font-size: 12px;
- font-style: normal;
- font-weight: 400;
- line-height: 36px;
- }
- }
- .infoContent {
- color: #00d1ff;
- font-family: PingFang SC;
- font-size: 14px;
- font-weight: 400;
- }
- .dividerLine {
- height: 1px;
- border: 1px;
- margin: 5px 0 10px 0px;
- background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
- }
- }
- }
- }
- }
- </style>