Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / tabRightCX.vue
@zhangdeliang zhangdeliang on 23 May 8 KB 初始化项目
  1. <template>
  2. <!-- 长效运维 -->
  3. <div class="tabRightCXPage" v-if="allData.tabShowWL == 5">
  4. <div class="allContent">
  5. <div class="selectTitle" style="margin-top: 15px">
  6. <div class="name">案件处置形式</div>
  7. <el-date-picker v-model="allData.GJtime" size="small" style="width: 120px" type="year" placeholder="选择时间" />
  8. <p style="color: #ffff; font-family: PingFang SC; font-size: 14px; font-weight: 400; margin-left: 20px">全部工单:</p>
  9. <el-switch v-model="allData.isOpen" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949; margin-right: 30px" />
  10. </div>
  11. <div class="staticPicture">
  12. <div id="chartOne"></div>
  13. </div>
  14. <div class="selectTitle" style="margin-top: 15px">
  15. <div class="name">政策法规</div>
  16. </div>
  17. <div class="policies" v-for="item in allData.policiesList" :key="index">
  18. <div class="title">
  19. <p class="titleName">{{ item.name }}</p>
  20. <p class="dateTime">{{ item.time }}</p>
  21. </div>
  22. <div class="policiesContent">{{ item.content }}</div>
  23. </div>
  24. <div class="selectTitle">
  25. <div class="name">民生留言</div>
  26. </div>
  27. <div class="noteContent">
  28. <div class="note" v-for="item in allData.noteList" :key="index">
  29. <div class="title1">
  30. <img style="width: 24px; height: 24px; margin-left: 15px" src="/src/assets/newImgs/user.png" />
  31. <p class="titleName1">{{ item.name }}</p>
  32. <p class="projectName1">{{ item.project }}</p>
  33. <p class="dateTime1">{{ item.time }}</p>
  34. </div>
  35. <div class="infoContent">{{ item.content }}</div>
  36. <div class="dividerLine"></div>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. </template>
  42. <script setup name="tabRightCXPage">
  43. import chartOption from '@/components/Echarts/pieChart_1.js';
  44. import changXiaoLayer from '@/assets/geojson/changXiaoLayer.json';
  45. import changXiaoIcon from '@/assets/newImgs/tuLi82X.png';
  46. import * as echarts from 'echarts';
  47. import { nextTick } from 'vue';
  48. import bus from '@/bus';
  49. const allData = reactive({
  50. tabShowWL: null,
  51. GJtime: null,
  52. GJtime1: null,
  53. isOpen: true,
  54. policiesList: [
  55. {
  56. name: '海绵城市二十条政策措施',
  57. time: '2023-09-10 10:00',
  58. content:
  59. '建设海绵城市是应对城市洪涝、水源枯竭、城市生态环境破坏等问题的重要手段。在构建海绵城市过程中,政策和措施的支持至关重要。下面我们来看看海绵城市建设中的二十条政策与措施......',
  60. },
  61. {
  62. name: '海绵城市建设管理条例',
  63. time: '2023-09-10 10:00',
  64. content:
  65. '为了规范海绵城市建设和管理,保护和改善城市生态环境,促进城市建设与生态系统和谐发展,根据《中华人民共和国城乡规划法》《建设工程质量管理条例》《城镇排水与污水处理条例》等有关法律法规,结合本市实际……',
  66. },
  67. ],
  68. noteList: [
  69. {
  70. name: 'XX微信号XX',
  71. time: '2023-09-10 10:00',
  72. project: '槐荫河海绵绿化工程',
  73. content: '周边空气质量还不错,水草植被茂盛,周边空气质量还不错。',
  74. },
  75. {
  76. name: 'XX微信号XX',
  77. time: '2023-09-10 10:00',
  78. project: '槐荫河海绵绿化工程',
  79. content: '周边空气质量还不错,水草植被茂盛,周边空气质量还不错。',
  80. },
  81. {
  82. name: 'XX微信号XX',
  83. time: '2023-09-10 10:00',
  84. project: '槐荫河海绵绿化工程',
  85. content: '周边空气质量还不错,水草植被茂盛,周边空气质量还不错。',
  86. },
  87. ],
  88. options: [
  89. {
  90. value: 1,
  91. label: '设备故障报警',
  92. },
  93. {
  94. value: 2,
  95. label: '指标超标预警',
  96. },
  97. ],
  98. });
  99. // 故障报警柱状图
  100. let chart = null;
  101. const initEcharts = () => {
  102. chartOption.floodOneMapPipePie.series[0].data = [
  103. { value: 2, name: '待处理' },
  104. { value: 12, name: '处理中' },
  105. { value: 10, name: '已处理' },
  106. ];
  107. if (!!chart) chart.dispose();
  108. chart = echarts.init(document.getElementById('chartOne'));
  109. chart.clear();
  110. chart.setOption(chartOption.floodOneMapPipePie);
  111. };
  112.  
  113. const tableData1 = ref([
  114. {
  115. code: '001',
  116. size: '监测站点1',
  117. qdCode: '设备故障',
  118. zdCode: '--',
  119. qdElevation: 1,
  120. zdElevation: 0,
  121. tlTime: '50分钟',
  122. },
  123. {
  124. code: '002',
  125. size: '监测站点12',
  126. qdCode: '设备故障',
  127. zdCode: '--',
  128. qdElevation: 1,
  129. zdElevation: 0,
  130. tlTime: '1小时2分钟',
  131. },
  132. {
  133. code: '003',
  134. size: '监测站点3',
  135. qdCode: '设备故障',
  136. zdCode: '--',
  137. qdElevation: 1,
  138. zdElevation: 0,
  139. tlTime: '15分钟',
  140. },
  141. {
  142. code: '004',
  143. size: '监测站点4',
  144. qdCode: '设备故障',
  145. zdCode: '--',
  146. qdElevation: 1,
  147. zdElevation: 0,
  148. tlTime: '11分钟',
  149. },
  150. {
  151. code: '005',
  152. size: '监测站点5',
  153. qdCode: '设备故障',
  154. zdCode: '--',
  155. qdElevation: 1,
  156. zdElevation: 0,
  157. tlTime: '14分钟',
  158. },
  159. ]);
  160. const addCXLayer = () => {
  161. let changXiaoLayerCircle = _.cloneDeep(changXiaoLayer);
  162. newfiberMapbox.addMarker(changXiaoLayer, changXiaoIcon, 'changXiao', true, [26, 28]);
  163. newfiberMapbox.RayLayerObj = new window.virtualSpaceObj.RayLayer();
  164. newfiberMapbox.pointlight(changXiaoLayerCircle, 'changXiaoCircle', 'rgba(202,102,102,1)');
  165. };
  166. onMounted(() => {
  167. bus.on('changeTableContent', val => {
  168. if (val == 5) {
  169. allData.tabShowWL = val;
  170. nextTick(() => {
  171. initEcharts();
  172. addCXLayer();
  173. });
  174. } else {
  175. allData.tabShowWL = null;
  176. // newfiberMapbox.removeLayer('changXiao');
  177. // !!newfiberMapbox.RayLayerObj && newfiberMapbox.RayLayerObj.remove();
  178. }
  179. });
  180. });
  181. onBeforeUnmount(() => {
  182. bus.off('changeTableContent');
  183. });
  184. </script>
  185. <style lang="scss">
  186. .tabRightCXPage {
  187. width: 100%;
  188. height: 100%;
  189. position: absolute;
  190. background: #00314e;
  191. border: 1px solid #094065;
  192. z-index: 115;
  193. .allContent {
  194. height: 750px;
  195. overflow: auto;
  196.  
  197. .staticPicture {
  198. margin: 30px 100px;
  199. #chartOne {
  200. height: 150px;
  201. width: 300px;
  202. }
  203. }
  204. .policies {
  205. margin: 10px 20px;
  206. .title {
  207. height: 36px;
  208. background: #003758;
  209. display: flex;
  210. justify-content: space-between;
  211. .titleName {
  212. color: #b4e7f2;
  213. font-family: PingFang SC;
  214. font-size: 14px;
  215. font-weight: 400;
  216. line-height: 36px;
  217. }
  218. .dateTime {
  219. color: #b4e7f2;
  220. text-align: right;
  221. font-family: PingFang SC;
  222. font-size: 12px;
  223. font-style: normal;
  224. font-weight: 400;
  225. line-height: 36px;
  226. }
  227. }
  228. .policiesContent {
  229. color: #00d1ff;
  230. font-family: PingFang SC;
  231. font-size: 14px;
  232. font-weight: 400;
  233. }
  234. }
  235. .noteContent {
  236. width: 488px;
  237. .note {
  238. margin: 10px 20px;
  239. .title1 {
  240. height: 36px;
  241. display: flex;
  242. justify-content: space-between;
  243. align-items: center;
  244. .titleName1 {
  245. color: #b4e7f2;
  246. text-align: right;
  247. font-family: PingFang SC;
  248. font-size: 14px;
  249. font-weight: 400;
  250. }
  251. .projectName1 {
  252. width: 132px;
  253. height: 25px;
  254. background: #004770;
  255. border: 1px solid #0073a5;
  256. border-radius: 25px;
  257. color: #00d1ff;
  258. font-family: PingFang SC;
  259. font-size: 12px;
  260. font-weight: 400;
  261. line-height: 25px;
  262. text-align: center;
  263. }
  264. .dateTime1 {
  265. color: #b4e7f2;
  266. text-align: right;
  267. font-family: PingFang SC;
  268. font-size: 12px;
  269. font-style: normal;
  270. font-weight: 400;
  271. line-height: 36px;
  272. }
  273. }
  274. .infoContent {
  275. color: #00d1ff;
  276. font-family: PingFang SC;
  277. font-size: 14px;
  278. font-weight: 400;
  279. }
  280. .dividerLine {
  281. height: 1px;
  282. border: 1px;
  283. margin: 5px 0 10px 0px;
  284. background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
  285. }
  286. }
  287. }
  288. }
  289. }
  290. </style>