<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>
