Browse Source

警情综合处置及企业自主管理修改

wangtao 3 years ago
parent
commit
9c325094b8
100 changed files with 10947 additions and 889 deletions
  1. 1 1
      .env.prod
  2. 13 0
      balbel.babelrc
  3. 9 0
      package.json
  4. 9 2
      proxy-dev.js
  5. 7 2
      proxy-pro.js
  6. 3 3
      public/index.html
  7. 17 0
      src/App.vue
  8. 0 0
      src/assets/img/enforce/2-Ïû·ÀÖ´·¨¶¯Ì¬---¸±±¾_08.png
  9. BIN
      src/assets/img/enforce/bg1_01.png
  10. BIN
      src/assets/img/enforce/bg1_02.png
  11. BIN
      src/assets/img/enforce/bg2_01.png
  12. BIN
      src/assets/img/enforce/bg2_02.png
  13. BIN
      src/assets/img/home/bg1_01.png
  14. BIN
      src/assets/img/home/bg1_02.png
  15. BIN
      src/assets/img/home/bg2_01.png
  16. BIN
      src/assets/img/home/bg2_02.png
  17. BIN
      src/assets/img/home/box-bg_01.png
  18. BIN
      src/assets/img/home/box-bg_02.png
  19. BIN
      src/assets/img/home/home_bg.jpg
  20. BIN
      src/assets/img/home/home_bg5.jpg
  21. BIN
      src/assets/img/icon/close.png
  22. BIN
      src/assets/img/icon/hz.png
  23. 11 0
      src/assets/img/icon/hz.svg
  24. BIN
      src/assets/img/icon/icon-qyzz.png
  25. BIN
      src/assets/img/icon/jy.png
  26. 16 0
      src/assets/img/icon/jy.svg
  27. BIN
      src/assets/img/icon/lc1.png
  28. BIN
      src/assets/img/icon/lc2.png
  29. BIN
      src/assets/img/icon/lc3.png
  30. BIN
      src/assets/img/icon/lc4.png
  31. BIN
      src/assets/img/icon/qx.png
  32. 33 0
      src/assets/img/icon/qx.svg
  33. BIN
      src/assets/img/icon/sadian.png
  34. BIN
      src/assets/img/icon/sqWater.png
  35. BIN
      src/assets/img/icon/szWater.png
  36. BIN
      src/assets/img/icon/unitWater.png
  37. BIN
      src/assets/img/qyzz/baogao.png
  38. 20 3
      src/assets/js/dataFormate.js
  39. 160 8
      src/assets/scss/common.scss
  40. 2 0
      src/assets/scss/element-ui.scss
  41. 172 2
      src/components/bar/index.vue
  42. 10 0
      src/components/category-enterprise/index.vue
  43. 89 1
      src/components/category-line/index.vue
  44. 16 3
      src/components/category/index.vue
  45. 195 0
      src/components/category/index2.vue
  46. 128 46
      src/components/fire-pie/index.vue
  47. 123 56
      src/components/funnel/index.vue
  48. 132 8
      src/components/gauge/index.vue
  49. 285 0
      src/components/gauge/index2.vue
  50. 285 0
      src/components/gauge/index3.vue
  51. 285 0
      src/components/gauge/index4.vue
  52. 285 0
      src/components/gauge/index5.vue
  53. 283 0
      src/components/gauge/indexcom.vue
  54. 738 238
      src/components/line-smooth/index.vue
  55. 3 1
      src/components/mixins/linstener.js
  56. 62 0
      src/components/mixins/linstener2.js
  57. 222 43
      src/components/mixins/map-data.js
  58. 215 0
      src/components/mixins/map-gaode-selfManagement.js
  59. 26 16
      src/components/mixins/map-gaode.js
  60. 171 0
      src/components/mixins/map-gaodecom.js
  61. 117 53
      src/components/radar/index.vue
  62. 189 16
      src/components/scatter/index.vue
  63. 11 2
      src/components/se-table/index.vue
  64. 75 0
      src/components/se-table/index2.vue
  65. 87 0
      src/components/shebei/index.vue
  66. 315 1
      src/components/water-gauge/index.vue
  67. 58 24
      src/components/wordCloud/index.vue
  68. 285 0
      src/components/yw/index.vue
  69. 37 8
      src/http/api.js
  70. 1 1
      src/http/axios.js
  71. 58 1
      src/main.js
  72. 6 2
      src/router/home.js
  73. 2 2
      src/router/index.js
  74. 3 0
      src/store/getters.js
  75. 32 1
      src/store/index.js
  76. 396 11
      src/views/Home.vue
  77. 1518 0
      src/views/Home2.vue
  78. 1398 0
      src/views/comprehensive-disposal copy.vue
  79. 767 207
      src/views/comprehensive-disposal.vue
  80. 26 11
      src/views/enforcement-dynamic.vue
  81. 34 10
      src/views/fire-data-analysis.vue
  82. 21 2
      src/views/fire-signs.vue
  83. 24 8
      src/views/head.vue
  84. 297 22
      src/views/rescue-station.vue
  85. 47 17
      src/views/security-plan.vue
  86. 825 48
      src/views/self-management.vue
  87. 268 0
      src/views/shuju.js
  88. 24 9
      src/views/water-sources.vue
  89. BIN
      vmh/favicon.ico
  90. 0 0
      vmh/index.html
  91. 0 0
      vmh/static/css/app.1fcfeb77.css
  92. 0 0
      vmh/static/css/chunk-0be04058.3a7f025c.css
  93. 0 0
      vmh/static/css/chunk-0eb5db59.5a9061c3.css
  94. 0 0
      vmh/static/css/chunk-252a6d5a.92361b4e.css
  95. 0 0
      vmh/static/css/chunk-2631af68.30b16478.css
  96. 0 0
      vmh/static/css/chunk-5d42b3d6.9c73fb1e.css
  97. 0 0
      vmh/static/css/chunk-6bc43a38.5bd36063.css
  98. 0 0
      vmh/static/css/chunk-75eecbf9.89769556.css
  99. 0 0
      vmh/static/css/chunk-8f77afe2.9934d39d.css
  100. 0 0
      vmh/static/css/chunk-ae6e3106.11a6b4a3.css

+ 1 - 1
.env.prod

@@ -1,3 +1,3 @@
 NODE_ENV='production'
-VUE_APP_BASE_URL = 'http://120.55.70.156:80/api'
+VUE_APP_BASE_URL = 'http://32.0.15.107:8080/api'
 VUE_APP_ENV_DESC = '正式环境'

+ 13 - 0
balbel.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    ["env"],
+    "stage-2"
+  ],
+  "comments": false,
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": [ "istanbul" ]
+    }
+  }
+}

+ 9 - 0
package.json

@@ -11,6 +11,7 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
+        "@videojs/http-streaming": "^2.12.0",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
         "echarts": "^5.1.1",
@@ -18,9 +19,17 @@
         "echarts-liquidfill": "^3.0.0",
         "echarts-wordcloud": "^2.0.0",
         "element-plus": "^1.0.2-beta.54",
+        "flv.js": "^1.6.2",
+        "hls": "0.0.1",
+        "jquery": "^3.6.0",
+        "react-native-webview": "^11.15.0",
+        "videojs-contrib-hls": "^5.15.0",
+        "videojs-flash": "^2.2.1",
         "vue": "^3.0.11",
         "vue-amap": "^0.5.10",
         "vue-router": "^4.0.0-0",
+        "vue-video-player": "^5.0.2",
+        "vuedraggable": "^2.24.3",
         "vuex": "^4.0.0-0"
     },
     "devDependencies": {

+ 9 - 2
proxy-dev.js

@@ -3,9 +3,16 @@
 module.exports = {
     table: {
         '/': {
+            //target: 'http://101.133.214.75:81/api',
+            //target: 'http://101.133.214.75',
             // target: 'http://172.200.50.17:8083',
-            target: 'http://120.55.70.156/api',
-            // target: 'http://172.16.120.104:8083',
+            //target: 'http://120.55.70.156/api',
+
+
+            //target: 'http://172.16.120.104:8083', //本地
+            target: 'http://32.0.15.107:8080/api/', //闵行
+            //target: 'http://172.200.50.85:8080/api/', //闵行杨强
+
             ws: true, // 代理websockets
             changeOrigin: true,
             pathRewrite: { '': '/' } // '^/api' 是一个正则表达式,作用:将 /api 提换成为 /

+ 7 - 2
proxy-pro.js

@@ -3,9 +3,14 @@
 module.exports = {
     table: [{
         context: ['/'],
-        target: 'http://192.168.1.240:8200/api',
+        target: 'http://32.0.15.107:8080/api/',
+        //target: 'http://101.133.214.75:81/api',
+        
+
         changeOrigin: true,
-        pathRewrite: { '': '/api' } // '^/api' 是一个正则表达式,作用:将 /api 提换成为 /
+        pathRewrite: { '': '/' }, // '^/api' 是一个正则表达式,作用:将 /api 提换成为 /
+
+
     }, ],
     // 本地配置ip访问(手机可通过IP访问),需要修改成本地Ip地址
 }

+ 3 - 3
public/index.html

@@ -10,10 +10,10 @@
         <%= htmlWebpackPlugin.options.title %>
     </title>
     <!-- 高德地图 -->
-    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8e266e1ac2ad2383c7773ff504ac248f"></script>
-    <script type="text/javascript" src="//webapi.amap.com/ui/1.1/main.js"></script>
+    <!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8e266e1ac2ad2383c7773ff504ac248f"></script>
+    <script type="text/javascript" src="//webapi.amap.com/ui/1.1/main.js"></script> -->
     <!-- 大数据地图 -->
-    <!-- <script src="http://gis.dcp.shmh.gov.cn/mh_map/js/index_v1.0.js"></script> -->
+    <script src="http://gis.dcp.shmh.gov.cn/mh_map/js/index_v1.0.js"></script>
 </head>
 
 <body>

+ 17 - 0
src/App.vue

@@ -59,4 +59,21 @@ export default {
     width: 100%;
   }
 }
+@media screen and (min-width:1940px) {
+  ::v-deep .el-table .is-leaf{
+    line-height:0.25rem !important; 
+    font-size: 0.12rem;
+  }
+  ::v-deep .el-table .cell {
+    line-height:0.25rem !important; 
+    font-size: 0.12rem;
+  }
+  ::v-deep .el-input__icon{
+    width:auto;
+  }
+  ::v-deep h4{
+    font-size:.12rem !important;
+  }
+}
+
 </style>

+ 0 - 0
src/assets/img/enforce/2-消防执法动态---副本_08.png → src/assets/img/enforce/2-Ïû·ÀÖ´·¨¶¯Ì¬---¸±±¾_08.png


BIN
src/assets/img/enforce/bg1_01.png


BIN
src/assets/img/enforce/bg1_02.png


BIN
src/assets/img/enforce/bg2_01.png


BIN
src/assets/img/enforce/bg2_02.png


BIN
src/assets/img/home/bg1_01.png


BIN
src/assets/img/home/bg1_02.png


BIN
src/assets/img/home/bg2_01.png


BIN
src/assets/img/home/bg2_02.png


BIN
src/assets/img/home/box-bg_01.png


BIN
src/assets/img/home/box-bg_02.png


BIN
src/assets/img/home/home_bg.jpg


BIN
src/assets/img/home/home_bg5.jpg


BIN
src/assets/img/icon/close.png


BIN
src/assets/img/icon/hz.png


+ 11 - 0
src/assets/img/icon/hz.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF3838;}
+</style>
+<path class="st0" d="M7.8,19.69c0,0-9.42-1.89-5.21-11.28c0,0,0.96,1.04,0.82,1.54c0,0,0.75-2.37,2.37-3.78
+	c1.39-1.22,2.8-4.63,1.5-5.87c0,0,6.45,1.24,7.17,7.41c0,0,0.82-1.97,2.52-2.16c0,0-0.52,1.08,0,2.7c0,0,5.34,8.34-3.86,11.16
+	c0,0,2.76-2.86-3.09-7.76c0,0-1.38,2.63-2.2,3.55C7.8,15.21,5.49,17.57,7.8,19.69z"/>
+</svg>

BIN
src/assets/img/icon/icon-qyzz.png


BIN
src/assets/img/icon/jy.png


+ 16 - 0
src/assets/img/icon/jy.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#02FF26;}
+</style>
+<path class="st0" d="M4.29,8.99L4.16,9.11c0,0-0.81,0.79,0.45,2.26c0.12,0.14,1.23,0.99,0.95,1.36c-0.24,0.32-1.26-0.85-1.45-1
+	c-1.02-0.8-1.09-1.39-1.08-1.39V5.91c0,0-0.24-1.17-1.27-1.02c-1.39,0.2-1.27,1.37-1.27,1.37v4.77c0.14,2.95,4.44,5.45,4.44,5.45
+	v3.41h4.44V14.1C8.76,13.41,6.2,9.33,6.2,9.33S5.07,8.27,4.29,8.99z M14.73,3.26c0.19-1.72-1.02-3.07-2.36-3.15
+	c-1.34-0.07-2.36,1.43-2.36,1.43s-1.02-1.5-2.37-1.43C6.29,0.18,5.08,1.54,5.27,3.26c0.19,1.72,2.64,4.5,4.74,5.72
+	C12.11,7.76,14.54,4.98,14.73,3.26z M18.24,4.9c-1.03-0.15-1.27,1.02-1.27,1.02v4.43c0.01,0-0.07,0.58-1.08,1.39
+	c-0.19,0.15-1.22,1.32-1.45,1c-0.28-0.38,0.83-1.23,0.95-1.36c1.26-1.46,0.53-2.17,0.53-2.17s-0.07-0.09-0.21-0.21
+	c-0.92-0.78-1.9,0.34-1.9,0.34s-2.56,4.08-3.17,4.77v5.79h4.44v-3.41c0,0,4.29-2.5,4.44-5.45V6.27C19.51,6.27,19.63,5.09,18.24,4.9z
+	"/>
+</svg>

BIN
src/assets/img/icon/lc1.png


BIN
src/assets/img/icon/lc2.png


BIN
src/assets/img/icon/lc3.png


BIN
src/assets/img/icon/lc4.png


BIN
src/assets/img/icon/qx.png


+ 33 - 0
src/assets/img/icon/qx.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFCA13;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M5.96,8.81c0.33,0.01,0.6-0.08,0.88-0.25C9.41,7.04,11.99,5.53,14.56,4c0.15-0.09,0.3-0.18,0.41-0.3
+			c0.27-0.3,0.27-0.73,0.02-1.06c-0.22-0.29-0.65-0.39-0.99-0.22c-0.32,0.16-0.62,0.35-0.93,0.53C10.23,4.63,7.38,6.32,4.53,8
+			c-0.43,0.26-0.87,0.51-1.3,0.77c0,0.01,0.01,0.03,0.01,0.04C4.15,8.81,5.05,8.8,5.96,8.81z M19.11,13.84v-0.22
+			c0-1.29,0.01-2.57-0.01-3.86c0-0.17-0.05-0.36-0.14-0.5c-0.43-0.72-0.88-1.42-1.32-2.13c-0.11-0.18-0.27-0.26-0.48-0.26
+			c-1.91,0-3.82,0-5.73,0c-0.37,0-0.52,0.15-0.52,0.53c0,0.61,0,1.23,0,1.84c0,0.07-0.01,0.13-0.01,0.21h-0.25
+			c-3.06,0-6.13,0-9.19,0c-0.06,0-0.13,0-0.19,0C1.11,9.48,0.96,9.58,0.93,9.74c-0.04,0.22-0.04,0.45-0.06,0.7h0.53v1.82H0.89v1.59
+			c-0.31-0.05-0.54,0.03-0.7,0.29v1.19c0.13,0.25,0.34,0.32,0.62,0.31c0.48-0.02,0.97,0,1.46-0.01c0.12,0,0.17,0.03,0.2,0.16
+			c0.2,1.07,1.13,1.83,2.25,1.86c1,0.02,1.95-0.74,2.19-1.75c0.07-0.27,0.07-0.28,0.35-0.28c2.07,0,4.14,0,6.21,0
+			c0.02,0,0.05,0.01,0.08,0.01c0.1,0.61,0.37,1.11,0.84,1.5c1.03,0.87,2.68,0.59,3.36-0.58c0.13-0.23,0.22-0.5,0.3-0.76
+			c0.04-0.12,0.07-0.17,0.2-0.16c0.32,0.01,0.64-0.01,0.96,0.01c0.28,0.02,0.49-0.07,0.62-0.31v-1.19
+			C19.66,13.87,19.41,13.81,19.11,13.84z M2.69,12.25v-1.81h1.38v1.81H2.69z M4.7,16.32c-0.52,0.01-0.95-0.42-0.95-0.95
+			c0-0.01,0.01-0.02,0.01-0.04c0,0,0,0,0,0c0.01-0.26,0.11-0.49,0.28-0.66c0.01-0.01,0.03-0.02,0.05-0.03
+			c0.08-0.06,0.15-0.12,0.25-0.16c0.11-0.05,0.24-0.07,0.37-0.07c0.13,0,0.26,0.03,0.37,0.07c0.09,0.04,0.17,0.1,0.25,0.16
+			c0.01,0.01,0.03,0.02,0.05,0.03c0.17,0.17,0.28,0.41,0.28,0.68C5.65,15.9,5.24,16.31,4.7,16.32z M6.74,12.25H5.35v-1.78h1.38
+			V12.25z M8.02,12.25v-1.8c0.44,0,0.87,0,1.3,0.01c0.04,0,0.1,0.08,0.1,0.12c0.01,0.56,0,1.11,0,1.68H8.02z M12.08,12.25h-1.38
+			v-1.8h1.38V12.25z M15.8,16.33c-0.53,0-0.95-0.43-0.94-0.97c0-0.01,0-0.01,0-0.02c0,0,0,0,0,0c0.01-0.26,0.11-0.49,0.28-0.66
+			c0.02-0.01,0.04-0.02,0.05-0.04c0.07-0.06,0.15-0.12,0.24-0.16c0.11-0.05,0.24-0.07,0.37-0.07c0.13,0,0.26,0.03,0.37,0.07
+			c0.09,0.04,0.17,0.1,0.25,0.16c0.01,0.01,0.03,0.02,0.04,0.03c0.18,0.17,0.28,0.42,0.28,0.7C16.74,15.91,16.33,16.33,15.8,16.33z
+			 M17.55,11.19c-0.52,0-1.05,0-1.57,0c-0.5,0-1,0-1.49,0c-0.35,0-0.46-0.1-0.46-0.45c0-0.79,0-1.57,0-2.36
+			c0-0.32,0.11-0.44,0.43-0.44c0.73,0,1.47,0,2.2,0c0.18,0,0.32,0.05,0.43,0.23c0.24,0.39,0.5,0.77,0.74,1.17
+			c0.06,0.09,0.09,0.21,0.09,0.32c0.01,0.39,0.01,0.78,0,1.17C17.93,11.07,17.81,11.19,17.55,11.19z"/>
+	</g>
+</g>
+</svg>

BIN
src/assets/img/icon/sadian.png


BIN
src/assets/img/icon/sqWater.png


BIN
src/assets/img/icon/szWater.png


BIN
src/assets/img/icon/unitWater.png


BIN
src/assets/img/qyzz/baogao.png


+ 20 - 3
src/assets/js/dataFormate.js

@@ -51,12 +51,12 @@ function getQuarterStartMonth() {
 }
 //获得本周的开始日期
 function getWeekStartDate() {
-    var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
+    var weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1);
     return formatDate(weekStartDate) + ' 00:00:00';
 }
 //获得本周的结束日期
 function getWeekEndDate() {
-    var weekEndDate = new Date(nowYear, nowMonth, nowDay + (6 - nowDayOfWeek));
+    var weekEndDate = new Date(nowYear, nowMonth, nowDay + (7 - nowDayOfWeek));
     return formatDate(weekEndDate) + ' 23:59:59';
 }
 //获得上周的开始日期
@@ -200,4 +200,21 @@ function getMonthStartAndEnd(AddMonthCount) {
     //返回  
     return startStop;
 }
-export { getWeekStartAndEnd, getMonthStartAndEnd, getHalfYearStartDate, getHalfYearEndDate, getThisYearStartDate, getThisYearEndDate, getWeekStartDate, getWeekEndDate, getLastWeekStartDate, getLastWeekEndDate, getMonthStartDate, getMonthEndDate, getLastMonthStartDate, getLastMonthEndDate, getQuarterStartDate, getQuarterEndDate }
+export {
+    getWeekStartAndEnd,
+    getMonthStartAndEnd,
+    getHalfYearStartDate,
+    getHalfYearEndDate,
+    getThisYearStartDate,
+    getThisYearEndDate,
+    getWeekStartDate,
+    getWeekEndDate,
+    getLastWeekStartDate,
+    getLastWeekEndDate,
+    getMonthStartDate,
+    getMonthEndDate,
+    getLastMonthStartDate,
+    getLastMonthEndDate,
+    getQuarterStartDate,
+    getQuarterEndDate
+}

+ 160 - 8
src/assets/scss/common.scss

@@ -34,6 +34,9 @@ body {
     padding-right: 0 !important;
 }
 
+// html{
+//     font-size: 100px;
+// }
 // 对比按钮
 .VS {
     position: absolute;
@@ -41,13 +44,13 @@ body {
     top: .125rem;
     font-size: .25rem;
     padding: .0625rem;
-    width: .625rem;
+    // width: .625rem;
     box-sizing: border-box;
     text-align: center;
     background: linear-gradient(0deg, #1a7bc9 0%, #00fffb 100%);
     color: #000;
     cursor: pointer;
-    line-height: .375rem;
+    // line-height: .375rem;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -137,32 +140,159 @@ body {
     background: rgba(0, 44, 110, 0.5);
     // box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
     // background: rgba(0, 44, 110, 0.8);
-    font-size: 0.2rem;
-    padding: 0.1875rem;
-    width: 5rem;
-    font-size: .1875rem;
+    padding: 0.1rem 0.1875rem ;
+    width: 5.2rem;
+    font-size: .16rem;
     font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+    // max-height:-34    // overflow-y: scroll;
+    .close2{
+        width:20px;
+        height:20px;
+        position: absolute;
+        right:-34px;
+        top:10px;
+        z-index: 10000;
+        display: block;
+        cursor: pointer;
+      }
+    @media screen and (min-width: 1940px) and (max-width:4000px){
+      
+      /* tr{
+        pointer-events: none
+      } */
+      .close2{
+        width:40px;
+        height:40px;
+        position: absolute;
+        right:-430px;
+        top:25px;
+        z-index: 10000;
+        display: block;
+        cursor: pointer;
+        
+      }
+      .tableContent {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top:0.06rem !important;
+      }
+    }
     .tableContent {
         display: flex;
         flex-wrap: wrap;
+        margin-top:0rem;
         div {
+            line-height: .28rem;
+        }
+        .max2 {
             width: 50%;
             padding-right: .25rem;
-            line-height: .375rem;
             box-sizing: border-box;
+            display: inline-block;
             a {
                 color: #0497FE;
                 cursor: pointer;
             }
+            span{
+                width:50%;
+                display: inline-block;
+                vertical-align: top;
+            }
         }
         .max {
             width: 100%;
         }
+        .max4 {
+            width: 25%;
+            float: left;
+            text-align: center;
+        }
+        .max3 {
+            width: 33.33%;
+            float: left;
+            box-sizing: border-box;
+            text-align: center;
+        }
+        .title {
+            width: 100%;
+            color: #019FB7;
+            font-weight: 700;
+        }
+        .scrollMap {
+            width: 100%;
+            height: 60px;
+            overflow-y: scroll;
+        }
         .divTitle {
             color: #04F2F4;
         }
+        .icon2 {
+            width: 20px !important;
+            margin-left: 4px;
+            vertical-align: middle;
+        }
     }
 }
+@media screen and (min-width: 1940px) and (max-width:4000px){
+    .tableTooltip {
+        height: auto;
+        width: 5rem !important;
+        scrollbar-width: none;
+        /* firefox */
+        -ms-overflow-style: none;
+        /* IE 10+ */
+        overflow-x: hidden;
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+            display: none;
+            /* Chrome Safari */
+        }
+        .tableTitle {
+            background: url('~@a/img/comprehensive/title.png');
+            background-size: 100% 100%;
+            font-size: 0.18rem;
+            &>div {
+                
+                // line-height: 0.50rem;
+                background-image: linear-gradient(#caf6ff, #56d1ed);
+                -webkit-background-clip: text;
+                color: transparent;
+                -webkit-text-fill-color: transparent;
+                font-weight: 900;
+            }
+        }
+        .tableContent {
+            margin-top: 0.125rem;
+            .el-col {
+                margin: 0.02rem 0;
+                font-size: 0.16rem;
+            }
+        }
+        .tablePersonnel {
+            justify-content: start;
+            .el-col {
+                margin: 0.125rem 1.1%;
+                img {
+                    width: 1.0625rem;
+                    height: 1.25rem;
+                    margin: 0 auto;
+                    display: block;
+                }
+                div {
+                    text-align: center;
+                }
+            }
+        }
+    } 
+    .mapTab {
+        max-height: 850px;
+    }
+}
+// @media screen and (min-width:1940px) {
+//     .mapTab {
+//         max-height: 850px;
+//     }
+// }
 
 // 主图
 .contentBox {
@@ -213,7 +343,7 @@ body {
                 background: url('~@a/img/icon/tip13.png') no-repeat;
             }
             .el-col {
-                width: 1.25rem;
+                width: 1.6rem;
                 height: .5rem;
                 margin-bottom: .0625rem;
                 line-height: .5rem;
@@ -262,4 +392,26 @@ body {
 // 地图logo
 .amap-logo {
     display: none !important;
+}
+
+::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 0px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 0px;
+    overflow: hidden;
+}
+
+ ::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 1px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: rgba(28, 82, 216, 1);
+}
+
+ ::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 1px;
+    background: #ededed;
 }

+ 2 - 0
src/assets/scss/element-ui.scss

@@ -54,6 +54,7 @@
         color: #FFF;
     }
     .cell {
+        
         // line-height: .425rem;
         padding: 0 .125rem;
         // padding: 0;
@@ -86,6 +87,7 @@
     &::before {
         height: 0;
     }
+    
 }
 
 // tooltip样式

+ 172 - 2
src/components/bar/index.vue

@@ -23,7 +23,8 @@ export default {
     getData() {
       let dataMap = this.dataMap;
       let echartsMap = echarts.init(this.$refs.echartD);
-      echartsMap.setOption({
+      if(2500< document.body.clientWidth  && document.body.clientWidth < 3999){
+        echartsMap.setOption({
         color: ["#14E1EA","#14E1EA", "#EF6B3D","#EF6B3D", "#FADF2B", "#FADF2B"],
         tooltip: {
           trigger: "axis",
@@ -35,6 +36,16 @@ export default {
           borderColor: "rgba(11, 12, 72, 0.4)",
           position: "bottom",
         },
+        title: {
+            show: true,
+            text: "总数(起)",
+            
+            textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
+              fontSize: 12,
+              fontWeight: 'normal',
+              color:'#fff',
+            },
+          },
         grid: {
           top: 40,
           left: 0,
@@ -45,11 +56,18 @@ export default {
         legend: {
           // show:true,
           data: ["社会救助", "火灾", "抢险救援"],
-          selected: { 社会救助: true, 火灾: false, 抢险救援: false, 救助月平均值: true, 火灾月平均值: false, 救援月平均值: false },
+          selected: { 
+            社会救助: true, 
+            火灾: true, 
+            抢险救援: true, 
+            救助月平均值: true, 
+            火灾月平均值: true, 
+            救援月平均值: true },
           bottom: 10,
           itemGap: 20,
           textStyle: {
             color: "#FFF",
+            fontSize: '20',
           },
         },
         xAxis: {
@@ -70,6 +88,10 @@ export default {
           ],
           axisLabel: {
             color: "#FFFFFF",
+            textStyle: {
+              color: "#FFF",
+              fontSize:'16'
+            },
           },
           axisTick: {
             show: false,
@@ -82,6 +104,153 @@ export default {
           type: "value",
           axisLabel: {
             color: "#FFFFFF",
+            textStyle: {
+              color: "#FFF",
+              fontSize:'16'
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,.4)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "社会救助",
+            type: "bar",
+            stack: "totalBar",
+            emphasis: {
+              focus: "series",
+            },
+            barWidth: "50%",
+            data: (dataMap["社会救助"] && dataMap["社会救助"].map((val) => val.number)) || [],
+          },
+          {
+            name: "救助月平均值",
+            type: "line",
+            stack: "totalLine",
+            data:(dataMap["社会救助"] && dataMap["社会救助"].map((val) => val.avg)) || [],
+          },
+          {
+            name: "火灾",
+            type: "bar",
+            stack: "totalBar",
+            emphasis: {
+              focus: "series",
+            },
+            barWidth: "50%",
+            data: (dataMap["火灾"] && dataMap["火灾"].map((val) => val.number)) || [],
+          },
+          {
+            name: "火灾月平均值",
+            type: "line",
+            stack: "totalLine",
+            data: (dataMap["火灾"] && dataMap["火灾"].map((val) => val.avg)) || [],
+          },
+          {
+            name: "抢险救援",
+            type: "bar",
+            stack: "totalBar",
+            emphasis: {
+              focus: "series",
+            },
+            barWidth: "50%",
+            data: (dataMap["抢险救援"] && dataMap["抢险救援"].map((val) => val.number)) || [],
+          },
+          {
+            name: "救援月平均值",
+            type: "line",
+            stack: "totalLine",
+            data: (dataMap["抢险救援"] && dataMap["抢险救援"].map((val) => val.avg)) || [],
+          },
+        ],
+      });
+      }else{
+        echartsMap.setOption({
+        color: ["#14E1EA","#14E1EA", "#EF6B3D","#EF6B3D", "#FADF2B", "#FADF2B"],
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            color: "#FFF",
+          },
+          confine: true,
+          backgroundColor: "rgba(11, 12, 72, 0.8)",
+          borderColor: "rgba(11, 12, 72, 0.4)",
+          position: "bottom",
+        },
+        title: {
+            show: true,
+            text: "总数(起)",
+            
+            textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
+              fontSize: 12,
+              fontWeight: 'normal',
+              color:'#fff',
+            },
+          },
+        grid: {
+          top: 40,
+          left: 0,
+          right: 0,
+          bottom: 50,
+          containLabel: true,
+        },
+        legend: {
+          // show:true,
+          data: ["社会救助", "火灾", "抢险救援"],
+          selected: { 
+            社会救助: true, 
+            火灾: true, 
+            抢险救援: true, 
+            救助月平均值: true, 
+            火灾月平均值: true, 
+            救援月平均值: true },
+          bottom: 10,
+          itemGap: 20,
+          textStyle: {
+            color: "#FFF",
+            fontSize: '12',
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: [
+            "1月",
+            "2月",
+            "3月",
+            "4月",
+            "5月",
+            "6月",
+            "7月",
+            "8月",
+            "9月",
+            "10月",
+            "11月",
+            "12月",
+          ],
+          axisLabel: {
+            color: "#FFFFFF",
+            textStyle: {
+              color: "#FFF",
+              fontSize:'12'
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          axisTick: {
+            show: false,
+          },
+          type: "value",
+          axisLabel: {
+            color: "#FFFFFF",
+            textStyle: {
+              color: "#FFF",
+              fontSize:'12'
+            },
           },
           splitLine: {
             lineStyle: {
@@ -140,6 +309,7 @@ export default {
           },
         ],
       });
+      }
       echartsMap.on("legendselectchanged", function (params) {
         // 获取点击图例的选中状态
         var isSelected = params.selected[params.name];

+ 10 - 0
src/components/category-enterprise/index.vue

@@ -38,6 +38,10 @@ export default {
           data:this.xData,
           axisLabel: {
             color: "#FFFFFF",
+            textStyle: {
+            color: "#FFF",
+            fontSize:'16'
+          },
           },
         },
         legend: {
@@ -46,7 +50,9 @@ export default {
           itemGap: 20,
           textStyle: {
             color: "#FFF",
+            fontSize:'16'
           },
+          fontSize:'16'
         },
         tooltip: {
           trigger: "axis",
@@ -65,6 +71,10 @@ export default {
           type: "value",
           axisLabel: {
             color: "#FFFFFF",
+            textStyle: {
+            color: "#FFF",
+            fontSize:'16'
+          },
           },
           splitLine: {
             lineStyle: {

+ 89 - 1
src/components/category-line/index.vue

@@ -23,7 +23,93 @@ export default {
   },
   methods: {
     getData(val = this.dataMap) {
-      echarts.init(this.$refs.echartD).setOption({
+      if(document.body.clientWidth >1940){
+        echarts.init(this.$refs.echartD).setOption({
+          grid: {
+            top: 20,
+            left: 30,
+            right: 30,
+            bottom: 30,
+          },
+          xAxis: {
+            type: "category",
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+              "6月",
+              "7月",
+              "8月",
+              "9月",
+              "10月",
+              "11月",
+              "12月",
+            ],
+            axisLabel: {
+              color: "#FFFFFF",
+              fontSize:'25',
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          tooltip: {
+            trigger: "axis",
+            textStyle: {
+              color: "#FFF",
+              fontSize:25
+            },
+            confine: true,
+            backgroundColor: "rgba(11, 12, 72, 0.8)",
+            borderColor: "rgba(11, 12, 72, 0.4)",
+            position: "bottom",
+          },
+          yAxis: {
+            axisTick: {
+              show: false,
+            },
+            type: "value",
+            axisLabel: {
+              color: "#FFFFFF",
+              fontSize:'25',
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,.4)",
+              },
+            },
+          },
+          series: [
+            {
+              name:'当前',
+              type: "bar",
+              barWidth: 15,
+              itemStyle: {
+                color: this.color,
+                borderRadius: this.borderRadius,
+              },
+              data: val[0],
+            },{
+              name:'年平均值',
+              data: val[1],
+              // itemStyle: {
+              //   color: "#fccf2a",
+              // },
+              type: 'line'
+            },{
+              name:'总年平均值',
+              data: val[2],
+              // itemStyle: {
+              //   color: "#fccf2a",
+              // },
+              type: 'line'
+            }
+          ],
+        });
+      }else{
+        echarts.init(this.$refs.echartD).setOption({
         grid: {
           top: 20,
           left: 30,
@@ -104,6 +190,8 @@ export default {
           }
         ],
       });
+      }
+      
     },
     resize() {
       echarts.init(this.$refs.echartD).resize();

+ 16 - 3
src/components/category/index.vue

@@ -55,11 +55,16 @@ export default {
           type: "category",
           data: this.xData,
           axisLabel: {
-            color: "#FFFFFF",
+            textStyle: {
+              color: '#fff'
+            },
+            fontSize:16,
+            
             formatter: (param) =>{
               return this.isSlice ? param.slice(0, this.isSlice) : param;
             },
           },
+          
         },
         tooltip: {
           trigger: "axis",
@@ -77,13 +82,21 @@ export default {
           },
           type: "value",
           axisLabel: {
-            color: "#FFFFFF",
+            textStyle: {
+              color: '#fff'
+            }
+            
           },
+          
           splitLine: {
             lineStyle: {
-              color: "rgba(255,255,255,.4)",
+              // color: "rgba(255,255,255,.4)",
+              color: "#FFFFFF",
             },
           },
+          axisLabel: {
+            fontSize:16
+          }
         },
         series: [
           {

+ 195 - 0
src/components/category/index2.vue

@@ -0,0 +1,195 @@
+<template>
+  <div ref="echartD" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    dataMap: { type: Array, default: () => [] },
+    color: { type: String, default: () => "rgb(0,254,160)" },
+    borderRadius: { type: Array, default: () => [0, 0, 0, 0] },
+    isSlice: { type: Number, default: () => 0 },
+    xData: {
+      type: Array,
+      default: () => [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ],
+    },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData(val = this.dataMap) {
+      if(document.body.clientWidth >1940){
+        echarts.init(this.$refs.echartD).setOption({
+          grid: {
+            top: 30,
+            left: 50,
+            right: 30,
+            bottom: 30,
+          },
+          xAxis: {
+            axisTick: {
+              show: false,
+            },
+            type: "category",
+            data: this.xData,
+            axisLabel: {
+              textStyle: {
+                color: '#fff'
+              },
+              fontSize:30,
+              
+              formatter: (param) =>{
+                return this.isSlice ? param.slice(0, this.isSlice) : param;
+              },
+            },
+            
+          },
+          tooltip: {
+            trigger: "axis",
+            textStyle: {
+              color: "#FFF",
+            },
+            confine: true,
+            backgroundColor: "rgba(11, 12, 72, 0.8)",
+            borderColor: "rgba(11, 12, 72, 0.4)",
+            position: "bottom",
+          },
+          yAxis: {
+            axisTick: {
+              show: false,
+            },
+            fontSize:30,
+            type: "value",
+            axisLabel: {
+              textStyle: {
+                color: '#fff'
+              }
+              
+            },
+            
+            splitLine: {
+              lineStyle: {
+                // color: "rgba(255,255,255,.4)",
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              fontSize:16
+            }
+          },
+          series: [
+            {
+              type: "bar",
+              barWidth: 15,
+              itemStyle: {
+                color: this.color,
+                borderRadius: this.borderRadius,
+              },
+              data: val,
+            },
+          ],
+        });
+      }else{
+        echarts.init(this.$refs.echartD).setOption({
+          grid: {
+            top: 30,
+            left: 50,
+            right: 30,
+            bottom: 30,
+          },
+          xAxis: {
+            axisTick: {
+              show: false,
+            },
+            type: "category",
+            data: this.xData,
+            axisLabel: {
+              textStyle: {
+                color: '#fff'
+              },
+              fontSize:16,
+              
+              formatter: (param) =>{
+                return this.isSlice ? param.slice(0, this.isSlice) : param;
+              },
+            },
+            
+          },
+          tooltip: {
+            trigger: "axis",
+            textStyle: {
+              color: "#FFF",
+            },
+            confine: true,
+            backgroundColor: "rgba(11, 12, 72, 0.8)",
+            borderColor: "rgba(11, 12, 72, 0.4)",
+            position: "bottom",
+          },
+          yAxis: {
+            axisTick: {
+              show: false,
+            },
+            type: "value",
+            axisLabel: {
+              textStyle: {
+                color: '#fff'
+              }
+              
+            },
+            
+            splitLine: {
+              lineStyle: {
+                // color: "rgba(255,255,255,.4)",
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              fontSize:16
+            }
+          },
+          series: [
+            {
+              type: "bar",
+              barWidth: 15,
+              itemStyle: {
+                color: this.color,
+                borderRadius: this.borderRadius,
+              },
+              data: val,
+            },
+          ],
+        });
+      }
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

+ 128 - 46
src/components/fire-pie/index.vue

@@ -40,64 +40,143 @@ export default {
   },
   methods: {
     getData(val = this.dataMap) {
-      echarts.init(this.$refs.echartD).setOption({
-        color: this.color,
-        tooltip: {
-          confine: true,
-          trigger: "item",
-          formatter: (params) => {
-            return `</span>${  params.name + ":" + parseInt(params.value * 100) / 100 + "%" }`;
+      if(document.body.clientWidth >1940){
+        echarts.init(this.$refs.echartD).setOption({
+          color: this.color,
+          tooltip: {
+            confine: true,
+            trigger: "item",
+            formatter: (params) => {
+              return `</span>${  params.name + ":" + parseInt(params.value * 100) / 100 + "%" }`;
+            },
           },
-        },
-        legend: {
-          // orient: 'vertical',
-          bottom: 0,
-          textStyle: {
-            show: true,
-            color: "#fff",
-            fontSize: 12,
-            width: this.isVs ? 0 : 85,
-            overflow: "truncate",
+          legend: {
+            // orient: 'vertical',
+            bottom: 0,
+            // type:scroll,
+            // textStyle: {
+            //   show: true,
+            //   color: "#fff",
+            //   fontSize: 20,
+            //   width: this.isVs ? 0 : 85,
+            //   overflow: "truncate",
+            // },
+            textStyle: {
+              show: true,
+              color: "#fff",
+              fontSize: 20,
+              width: this.isVs ? 0 : 85,
+              overflow: "truncate",
+            },
+            tooltip: {
+              show: true,
+              confine: true,
+              formatter: (params) => {
+                return `</span>${ params.name +  ":" + parseInt( this.dataMap.find((val) => val.name === params.name).value * 100 ) / 100 + "%" }`;
+              },
+            },
           },
+          series: [
+            {
+              // name: "",
+              type: "pie",
+              top: -50,
+              left: 0,
+              radius: ['40%', '60%'],
+              //radius: [this.radius / 2, this.radius],
+              // roseType: 'area',
+              // radius: this.radius + '%',
+              data: val,
+              label: {
+                // show: false, 
+                position: 'inner',
+                color: "#FFF",
+                fontSize: 12,
+                width: 200,
+                overflow: "truncate",
+                formatter: (params) => {
+                  return `${ parseInt(params.value * 100) / 100 + "%" }`;
+                },
+              },
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)",
+                },
+              },
+            },
+          ],
+        });
+      }else{
+        echarts.init(this.$refs.echartD).setOption({
+          color: this.color,
           tooltip: {
-            show: true,
             confine: true,
+            trigger: "item",
             formatter: (params) => {
-              return `</span>${ params.name +  ":" + parseInt( this.dataMap.find((val) => val.name === params.name).value * 100 ) / 100 + "%" }`;
+              return `</span>${  params.name + ":" + parseInt(params.value * 100) / 100 + "%" }`;
             },
           },
-        },
-        series: [
-          {
-            // name: "",
-            type: "pie",
-            top: -50,
-            left: 0,
-            radius: [this.radius / 2, this.radius],
-            // roseType: 'area',
-            // radius: this.radius + '%',
-            data: val,
-            label: {
-              // show: false, 
-              position: 'inner',
-              color: "#FFF",
-              fontSize: 16,
-              width: 200,
+          legend: {
+            // orient: 'vertical',
+            bottom: 0,
+            // type:scroll,
+            // textStyle: {
+            //   show: true,
+            //   color: "#fff",
+            //   fontSize: 20,
+            //   width: this.isVs ? 0 : 85,
+            //   overflow: "truncate",
+            // },
+            textStyle: {
+              show: true,
+              color: "#fff",
+              fontSize: 12,
+              width: this.isVs ? 0 : 85,
               overflow: "truncate",
+            },
+            tooltip: {
+              show: true,
+              confine: true,
               formatter: (params) => {
-                return `${ parseInt(params.value * 100) / 100 + "%" }`;
+                return `</span>${ params.name +  ":" + parseInt( this.dataMap.find((val) => val.name === params.name).value * 100 ) / 100 + "%" }`;
               },
             },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
+          },
+          series: [
+            {
+              // name: "",
+              type: "pie",
+              top: -80,
+              left: 0,
+              radius: ['20%', '40%'],
+              //radius: [this.radius / 2, this.radius],
+              // roseType: 'area',
+              // radius: this.radius + '%',
+              data: val,
+              label: {
+                // show: false, 
+                position: 'inner',
+                color: "#FFF",
+                fontSize: 12,
+                width: 200,
+                overflow: "truncate",
+                formatter: (params) => {
+                  return `${ parseInt(params.value * 100) / 100 + "%" }`;
+                },
+              },
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)",
+                },
               },
             },
-          },
-        ],
-      });
+          ],
+        });
+      }
     },
     resize() {
       echarts.init(this.$refs.echartD).resize();
@@ -106,5 +185,8 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
+.cell{
+  line-height: none !important;
+}
 </style>

+ 123 - 56
src/components/funnel/index.vue

@@ -25,68 +25,135 @@ export default {
   },
   methods: {
     getData() {
-      echarts.init(this.$refs.echartD).setOption({
-        backgroundColor: "transparent",
-        color: [
-          "rgba(255,199,6,1)",
-          "rgba(11,255,109,1)",
-          "rgba(10,218,255,1)",
-          "rgba(12,210,0,1)",
-        ],
-        series: [
-          {
-            zlevel: 1,
-            name: "漏斗图",
-            type: "funnel",
-            left: 30,
-            top: 0,
-            bottom: 0,
-            width: "100%",
-            min: 0,
-            max: 120,
-            minSize: "3%",
-            maxSize: "100%",
-            sort: "ascending",
-            gap: 15,
-            label: {
-              show: true,
-              position: "left",
-              // width: "400px",
-              align: "left",
-              textBorderColor: "transparent",
-              formatter: function (params) {
-                return params.data.reaVal + "%";
+      if(document.body.clientWidth >1940){
+        echarts.init(this.$refs.echartD).setOption({
+          backgroundColor: "transparent",
+          color: [
+            "rgba(255,199,6,1)",
+            "rgba(11,255,109,1)",
+            "rgba(10,218,255,1)",
+            "rgba(12,210,0,1)",
+          ],
+          series: [
+            {
+              zlevel: 1,
+              name: "漏斗图",
+              type: "funnel",
+              left: 30,
+              top: 0,
+              bottom: 0,
+              width: "100%",
+              min: 0,
+              max: 120,
+              minSize: "3%",
+              maxSize: "100%",
+              sort: "ascending",
+              gap: 15,
+              label: {
+                show: true,
+                position: "left",
+                // width: "400px",
+                align: "left",
+                textBorderColor: "transparent",
+                formatter: function (params) {
+                  return params.data.reaVal + "%";
+                },
+                // fontSize: 24,
+                fontSize: 100,
+                opacity: 1,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
               },
-              fontSize: 24,
-              opacity: 1,
-              fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
-            },
-            labelLine: {
-              show: true,
-              length: 50,
-              lineStyle: {
-                width: 1,
-                type: "solid",
+              labelLine: {
+                show: true,
+                length: 50,
+                lineStyle: {
+                  width: 1,
+                  type: "solid",
+                },
               },
+              itemStyle: {
+                borderColor: "transparent",
+                borderWidth: 0,
+                opacity: 0.5,
+                shadowColor: "#CCC",
+                // shadowOffsetX: 1,
+                // shadowBlur: 1,
+                // shadowOffsetY: -1,
+              },
+              emphasis: {
+                label: {
+                  fontSize: 30,
+                },
+              },
+              data:this.dataMap,
             },
-            itemStyle: {
-              borderColor: "transparent",
-              borderWidth: 0,
-              opacity: 0.5,
-              shadowColor: "#CCC",
-              // shadowOffsetX: 1,
-              // shadowBlur: 1,
-              // shadowOffsetY: -1,
-            },
-            emphasis: {
+          ],
+        });
+      }else{
+        echarts.init(this.$refs.echartD).setOption({
+          backgroundColor: "transparent",
+          color: [
+            "rgba(255,199,6,1)",
+            "rgba(11,255,109,1)",
+            "rgba(10,218,255,1)",
+            "rgba(12,210,0,1)",
+          ],
+          series: [
+            {
+              zlevel: 1,
+              name: "漏斗图",
+              type: "funnel",
+              left: 30,
+              top: 0,
+              bottom: 0,
+              width: "100%",
+              min: 0,
+              max: 120,
+              minSize: "3%",
+              maxSize: "100%",
+              sort: "ascending",
+              gap: 15,
               label: {
-                fontSize: 30,
+                show: true,
+                position: "left",
+                // width: "400px",
+                align: "left",
+                textBorderColor: "transparent",
+                formatter: function (params) {
+                  return params.data.reaVal + "%";
+                },
+                // fontSize: 24,
+                fontSize: 25,
+                opacity: 1,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+              labelLine: {
+                show: true,
+                length: 50,
+                lineStyle: {
+                  width: 1,
+                  type: "solid",
+                },
+              },
+              itemStyle: {
+                borderColor: "transparent",
+                borderWidth: 0,
+                opacity: 0.5,
+                shadowColor: "#CCC",
+                // shadowOffsetX: 1,
+                // shadowBlur: 1,
+                // shadowOffsetY: -1,
+              },
+              emphasis: {
+                label: {
+                  fontSize: 30,
+                },
               },
+              data:this.dataMap,
             },
-            data:this.dataMap,
-          },
-        ],
-      });
+          ],
+        });
+      }
     },
     resize() {
       echarts.init(this.$refs.echartD).resize();

+ 132 - 8
src/components/gauge/index.vue

@@ -12,7 +12,7 @@ export default {
     dataMap: { type: Number, default: () => 0 },
     dataNumber: { type: Number, default: () => 0 },
     color: { type: String, default: () => "#468EFD" },
-    size: { type: Number, default: () => 40 },
+    size: { type: Number, default: () => 20 },
     tick: { type: Boolean, default: () => true },
     with: { type: Number, default: () => 20 },
   },
@@ -28,11 +28,132 @@ export default {
     },
   },
   mounted() {
-    // this.getData();
+    this.getData();
   },
   methods: {
     getData() {
-      echarts.init(this.$refs.echartD).setOption({
+      console.log(document.body.clientWidth)
+      if(document.body.clientWidth >1940){
+        echarts.init(this.$refs.echartD).setOption({
+        // backgroundColor: "none",
+        grid: {
+          // top: 0,
+          // bottom: 0,
+          // left: 0,
+          // right: 0,
+          // margi
+        },
+        series: [
+          // 进度条
+          {
+            name: "仪表盘",
+            type: "gauge",
+            radius: "40%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.dataMap, this.color],
+                  [1, "#111F42"],
+                ],
+                width: 10,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter:  (value) => {
+                return this.dataNumber ? this.dataNumber :`${(value * 100).toFixed(0)}%`;
+              },
+              offsetCenter: [0, "0%"],
+              textStyle: {
+                //fontSize: this.size,
+                fontSize: 30,
+                fontWeight: "400",
+                color:this.color, 
+                // color: "#FFF",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+            title: {
+              offsetCenter: [0, "10%"],
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+                (this.dataNumber || this.dataMap),
+            ],
+          },
+          // 刻度
+          {
+            type: "gauge",
+            // center: ["50%", "60%"],
+            name: "仪表盘",
+            radius: "70%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 5,
+            z: 2,
+            axisTick: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //刻度样式
+            splitLine: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //分隔线样式
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 12,
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            //仪表盘详情,用于显示数据。
+            detail: {
+              show: false,
+              offsetCenter: ["0", "0%"],
+              color: "#A2C7F3",
+              formatter: function (params) {
+                return params;
+              },
+              textStyle: {
+                fontSize: 16,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+          },
+        ],
+      });
+      }else{
+        echarts.init(this.$refs.echartD).setOption({
         // backgroundColor: "none",
         grid: {
           // top: 0,
@@ -73,14 +194,15 @@ export default {
             },
             detail: {
               formatter:  (value) => {
-                return this.dataNumber ? this.dataNumber :`${(value * 100).toFixed(0)}%`;
+                return this.dataNumber ? this.dataNumber  :`${(value * 100).toFixed(0)}%`;
               },
               offsetCenter: [0, "0%"],
               textStyle: {
+                //fontSize: this.size,
                 fontSize: this.size,
-                fontWeight: "400",
-                // this.color || 
-                color: "#FFF",
+                fontWeight: "700",
+                color:this.color, 
+                // color: "#FFF",
                 fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
               },
             },
@@ -142,13 +264,15 @@ export default {
                 return params;
               },
               textStyle: {
-                fontSize: 16,
+                fontSize: 20,
                 fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
               },
             },
           },
         ],
       });
+      }
+      
     },
     resize() {
       echarts.init(this.$refs.echartD).resize();

+ 285 - 0
src/components/gauge/index2.vue

@@ -0,0 +1,285 @@
+<template>
+  <div
+    ref="echartD"
+    style="width: 100%; height: 100%; display: flex; justify-content: center"
+  ></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    dataMap: { type: Number, default: () => 0 },
+    dataNumber: { type: Number, default: () => 0 },
+    color: { type: String, default: () => "#468EFD" },
+    size: { type: Number, default: () => 20 },
+    tick: { type: Boolean, default: () => true },
+    with: { type: Number, default: () => 20 },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+    dataNumber(val) {
+      this.getData(val);
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      console.log(document.body.clientWidth)
+      if(document.body.clientWidth >1940){
+        echarts.init(this.$refs.echartD).setOption({
+        // backgroundColor: "none",
+        grid: {
+          // top: 0,
+          // bottom: 0,
+          // left: 0,
+          // right: 0,
+          // margi
+        },
+        series: [
+          // 进度条
+          {
+            name: "仪表盘",
+            type: "gauge",
+            radius: "40%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.dataMap, this.color],
+                  [1, "#111F42"],
+                ],
+                width: 10,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter:  (value) => {
+                return this.dataNumber ? this.dataNumber + '%':`${(value * 100).toFixed(0)}%`;
+              },
+              offsetCenter: [0, "0%"],
+              textStyle: {
+                //fontSize: this.size,
+                fontSize: 30,
+                fontWeight: "400",
+                color:this.color, 
+                // color: "#FFF",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+            title: {
+              offsetCenter: [0, "10%"],
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+                (this.dataNumber || this.dataMap),
+            ],
+          },
+          // 刻度
+          {
+            type: "gauge",
+            // center: ["50%", "60%"],
+            name: "仪表盘",
+            radius: "70%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 5,
+            z: 2,
+            axisTick: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //刻度样式
+            splitLine: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //分隔线样式
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 12,
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            //仪表盘详情,用于显示数据。
+            detail: {
+              show: false,
+              offsetCenter: ["0", "0%"],
+              color: "#A2C7F3",
+              formatter: function (params) {
+                return params;
+              },
+              textStyle: {
+                fontSize: 16,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+          },
+        ],
+      });
+      }else{
+        echarts.init(this.$refs.echartD).setOption({
+        // backgroundColor: "none",
+        grid: {
+          // top: 0,
+          // bottom: 0,
+          // left: 0,
+          // right: 0,
+          // margi
+        },
+        series: [
+          // 进度条
+          {
+            name: "仪表盘",
+            type: "gauge",
+            radius: "80%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.dataMap, this.color],
+                  [1, "#111F42"],
+                ],
+                width: this.with,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter:  (value) => {
+                return this.dataNumber ? this.dataNumber  + '%' :`${(value * 100).toFixed(0)}%`;
+              },
+              offsetCenter: [0, "0%"],
+              textStyle: {
+                //fontSize: this.size,
+                fontSize: this.size,
+                fontWeight: "700",
+                color:this.color, 
+                // color: "#FFF",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+            title: {
+              offsetCenter: [0, "10%"],
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+                (this.dataNumber || this.dataMap),
+            ],
+          },
+          // 刻度
+          {
+            type: "gauge",
+            // center: ["50%", "60%"],
+            name: "仪表盘",
+            radius: "120%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 5,
+            z: 2,
+            axisTick: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //刻度样式
+            splitLine: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //分隔线样式
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 12,
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            //仪表盘详情,用于显示数据。
+            detail: {
+              show: false,
+              offsetCenter: ["0", "0%"],
+              color: "#A2C7F3",
+              formatter: function (params) {
+                return params;
+              },
+              textStyle: {
+                fontSize: 20,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+          },
+        ],
+      });
+      }
+      
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

+ 285 - 0
src/components/gauge/index3.vue

@@ -0,0 +1,285 @@
+<template>
+  <div
+    ref="echartD"
+    style="width: 100%; height: 100%; display: flex; justify-content: center"
+  ></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    dataMap: { type: Number, default: () => 0 },
+    dataNumber: { type: Number, default: () => 0 },
+    color: { type: String, default: () => "#468EFD" },
+    size: { type: Number, default: () => 20 },
+    tick: { type: Boolean, default: () => true },
+    with: { type: Number, default: () => 20 },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+    dataNumber(val) {
+      this.getData(val);
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      console.log(document.body.clientWidth)
+      if(document.body.clientWidth >1940){
+        echarts.init(this.$refs.echartD).setOption({
+        // backgroundColor: "none",
+        grid: {
+          // top: 0,
+          // bottom: 0,
+          // left: 0,
+          // right: 0,
+          // margi
+        },
+        series: [
+          // 进度条
+          {
+            name: "仪表盘",
+            type: "gauge",
+            radius: "60%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.dataMap, this.color],
+                  [1, "#111F42"],
+                ],
+                width: 10,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter:  (value) => {
+                return this.dataNumber ? this.dataNumber :`${(value * 100).toFixed(0)}%`;
+              },
+              offsetCenter: [0, "0%"],
+              textStyle: {
+                //fontSize: this.size,
+                fontSize: 26,
+                fontWeight: "400",
+                color:this.color, 
+                // color: "#FFF",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+            title: {
+              offsetCenter: [0, "10%"],
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+                (this.dataNumber || this.dataMap),
+            ],
+          },
+          // 刻度
+          {
+            type: "gauge",
+            // center: ["50%", "60%"],
+            name: "仪表盘",
+            radius: "100%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 5,
+            z: 2,
+            axisTick: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //刻度样式
+            splitLine: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //分隔线样式
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 12,
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            //仪表盘详情,用于显示数据。
+            detail: {
+              show: false,
+              offsetCenter: ["0", "0%"],
+              color: "#A2C7F3",
+              formatter: function (params) {
+                return params;
+              },
+              textStyle: {
+                fontSize: 16,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+          },
+        ],
+      });
+      }else{
+        echarts.init(this.$refs.echartD).setOption({
+        // backgroundColor: "none",
+        grid: {
+          // top: 0,
+          // bottom: 0,
+          // left: 0,
+          // right: 0,
+          // margi
+        },
+        series: [
+          // 进度条
+          {
+            name: "仪表盘",
+            type: "gauge",
+            radius: "80%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.dataMap, this.color],
+                  [1, "#111F42"],
+                ],
+                width: this.with,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter:  (value) => {
+                return this.dataNumber ? this.dataNumber  :`${(value * 100).toFixed(0)}%`;
+              },
+              offsetCenter: [0, "0%"],
+              textStyle: {
+                //fontSize: this.size,
+                fontSize: this.size,
+                fontWeight: "700",
+                color:this.color, 
+                // color: "#FFF",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+            title: {
+              offsetCenter: [0, "10%"],
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+                (this.dataNumber || this.dataMap),
+            ],
+          },
+          // 刻度
+          {
+            type: "gauge",
+            // center: ["50%", "60%"],
+            name: "仪表盘",
+            radius: "120%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 5,
+            z: 2,
+            axisTick: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //刻度样式
+            splitLine: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //分隔线样式
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 12,
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            //仪表盘详情,用于显示数据。
+            detail: {
+              show: false,
+              offsetCenter: ["0", "0%"],
+              color: "#A2C7F3",
+              formatter: function (params) {
+                return params;
+              },
+              textStyle: {
+                fontSize: 20,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+          },
+        ],
+      });
+      }
+      
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

+ 285 - 0
src/components/gauge/index4.vue

@@ -0,0 +1,285 @@
+<template>
+  <div
+    ref="echartD"
+    style="width: 100%; height: 100%; display: flex; justify-content: center"
+  ></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    dataMap: { type: Number, default: () => 0 },
+    dataNumber: { type: Number, default: () => 0 },
+    color: { type: String, default: () => "#468EFD" },
+    size: { type: Number, default: () => 20 },
+    tick: { type: Boolean, default: () => true },
+    with: { type: Number, default: () => 20 },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+    dataNumber(val) {
+      this.getData(val);
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      console.log(document.body.clientWidth)
+      if(document.body.clientWidth >1940){
+        echarts.init(this.$refs.echartD).setOption({
+        // backgroundColor: "none",
+        grid: {
+          // top: 0,
+          // bottom: 0,
+          // left: 0,
+          // right: 0,
+          // margi
+        },
+        series: [
+          // 进度条
+          {
+            name: "仪表盘",
+            type: "gauge",
+            radius: "90%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 8,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.dataMap, this.color],
+                  [1, "#111F42"],
+                ],
+                width: 40,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter:  (value) => {
+                return this.dataNumber ? this.dataNumber :`${(value * 100).toFixed(0)}%`;
+              },
+              offsetCenter: [0, "0%"],
+              textStyle: {
+                //fontSize: this.size,
+                fontSize: 80,
+                fontWeight: "400",
+                color:this.color, 
+                // color: "#FFF",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+            title: {
+              offsetCenter: [0, "10%"],
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+                (this.dataNumber || this.dataMap),
+            ],
+          },
+          // 刻度
+          {
+            type: "gauge",
+            // center: ["50%", "60%"],
+            name: "仪表盘",
+            radius: "60%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 5,
+            z: 2,
+            axisTick: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //刻度样式
+            splitLine: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //分隔线样式
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 12,
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            //仪表盘详情,用于显示数据。
+            detail: {
+              show: false,
+              offsetCenter: ["0", "0%"],
+              color: "#A2C7F3",
+              formatter: function (params) {
+                return params;
+              },
+              textStyle: {
+                fontSize: 16,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+          },
+        ],
+      });
+      }else{
+        echarts.init(this.$refs.echartD).setOption({
+        // backgroundColor: "none",
+        grid: {
+          // top: 0,
+          // bottom: 0,
+          // left: 0,
+          // right: 0,
+          // margi
+        },
+        series: [
+          // 进度条
+          {
+            name: "仪表盘",
+            type: "gauge",
+            radius: "80%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.dataMap, this.color],
+                  [1, "#111F42"],
+                ],
+                width: this.with,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter:  (value) => {
+                return this.dataNumber ? this.dataNumber  :`${(value * 100).toFixed(0)}%`;
+              },
+              offsetCenter: [0, "0%"],
+              textStyle: {
+                //fontSize: this.size,
+                fontSize: this.size,
+                fontWeight: "700",
+                color:this.color, 
+                // color: "#FFF",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+            title: {
+              offsetCenter: [0, "10%"],
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+                (this.dataNumber || this.dataMap),
+            ],
+          },
+          // 刻度
+          {
+            type: "gauge",
+            // center: ["50%", "60%"],
+            name: "仪表盘",
+            radius: "120%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 5,
+            z: 2,
+            axisTick: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //刻度样式
+            splitLine: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //分隔线样式
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 12,
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            //仪表盘详情,用于显示数据。
+            detail: {
+              show: false,
+              offsetCenter: ["0", "0%"],
+              color: "#A2C7F3",
+              formatter: function (params) {
+                return params;
+              },
+              textStyle: {
+                fontSize: 20,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+          },
+        ],
+      });
+      }
+      
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

+ 285 - 0
src/components/gauge/index5.vue

@@ -0,0 +1,285 @@
+<template>
+  <div
+    ref="echartD"
+    style="width: 100%; height: 100%; display: flex; justify-content: center"
+  ></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    dataMap: { type: Number, default: () => 0 },
+    dataNumber: { type: Number, default: () => 0 },
+    color: { type: String, default: () => "#468EFD" },
+    size: { type: Number, default: () => 20 },
+    tick: { type: Boolean, default: () => true },
+    with: { type: Number, default: () => 20 },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+    dataNumber(val) {
+      this.getData(val);
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      console.log(document.body.clientWidth)
+      if(document.body.clientWidth >1940){
+        echarts.init(this.$refs.echartD).setOption({
+        // backgroundColor: "none",
+        grid: {
+          // top: 0,
+          // bottom: 0,
+          // left: 0,
+          // right: 0,
+          // margi
+        },
+        series: [
+          // 进度条
+          {
+            name: "仪表盘",
+            type: "gauge",
+            radius: "100%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.dataMap, this.color],
+                  [1, "#111F42"],
+                ],
+                width: 60,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter:  (value) => {
+                return this.dataNumber ? this.dataNumber :`${(value * 100).toFixed(0)}%`;
+              },
+              offsetCenter: [0, "0%"],
+              textStyle: {
+                //fontSize: this.size,
+                fontSize: 80,
+                fontWeight: "400",
+                color:this.color, 
+                // color: "#FFF",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+            title: {
+              offsetCenter: [0, "10%"],
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+                (this.dataNumber || this.dataMap),
+            ],
+          },
+          // 刻度
+          {
+            type: "gauge",
+            // center: ["50%", "60%"],
+            name: "仪表盘",
+            radius: "100%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 5,
+            z: 2,
+            axisTick: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //刻度样式
+            splitLine: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //分隔线样式
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 12,
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            //仪表盘详情,用于显示数据。
+            detail: {
+              show: false,
+              offsetCenter: ["0", "0%"],
+              color: "#A2C7F3",
+              formatter: function (params) {
+                return params;
+              },
+              textStyle: {
+                fontSize: 16,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+          },
+        ],
+      });
+      }else{
+        echarts.init(this.$refs.echartD).setOption({
+        // backgroundColor: "none",
+        grid: {
+          // top: 0,
+          // bottom: 0,
+          // left: 0,
+          // right: 0,
+          // margi
+        },
+        series: [
+          // 进度条
+          {
+            name: "仪表盘",
+            type: "gauge",
+            radius: "80%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.dataMap, this.color],
+                  [1, "#111F42"],
+                ],
+                width: this.with,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter:  (value) => {
+                return this.dataNumber ? this.dataNumber  :`${(value * 100).toFixed(0)}%`;
+              },
+              offsetCenter: [0, "0%"],
+              textStyle: {
+                //fontSize: this.size,
+                fontSize: this.size,
+                fontWeight: "700",
+                color:this.color, 
+                // color: "#FFF",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+            title: {
+              offsetCenter: [0, "10%"],
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+                (this.dataNumber || this.dataMap),
+            ],
+          },
+          // 刻度
+          {
+            type: "gauge",
+            // center: ["50%", "60%"],
+            name: "仪表盘",
+            radius: "120%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 5,
+            z: 2,
+            axisTick: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //刻度样式
+            splitLine: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //分隔线样式
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 12,
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            //仪表盘详情,用于显示数据。
+            detail: {
+              show: false,
+              offsetCenter: ["0", "0%"],
+              color: "#A2C7F3",
+              formatter: function (params) {
+                return params;
+              },
+              textStyle: {
+                fontSize: 20,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+          },
+        ],
+      });
+      }
+      
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

+ 283 - 0
src/components/gauge/indexcom.vue

@@ -0,0 +1,283 @@
+<template>
+  <div
+    ref="echartD"
+    style="width: 100%; height: 100%; display: flex; justify-content: center"
+  ></div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    dataMap: { type: Number, default: () => 0 },
+    dataNumber: { type: Number, default: () => 0 },
+    color: { type: String, default: () => "#468EFD" },
+    size: { type: Number, default: () => 20 },
+    tick: { type: Boolean, default: () => true },
+    with: { type: Number, default: () => 20 },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+    dataNumber(val) {
+      this.getData(val);
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      if(document.body.clientWidth >1940){
+        echarts.init(this.$refs.echartD).setOption({
+        // backgroundColor: "none",
+        grid: {
+          // top: 0,
+          // bottom: 0,
+          // left: 0,
+          // right: 0,
+          // margi
+        },
+        series: [
+          // 进度条
+          {
+            name: "仪表盘",
+            type: "gauge",
+            radius: "80%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 6,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.dataMap, this.color],
+                  [1, "#111F42"],
+                ],
+                width: 8,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter:  (value) => {
+                return this.dataNumber ? this.dataNumber :`${(value * 100).toFixed(0)}%`;
+              },
+              offsetCenter: [0, "0%"],
+              textStyle: {
+                //fontSize: this.size,
+                fontSize: 30,
+                fontWeight: "400",
+                color:this.color, 
+                // color: "#FFF",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+            title: {
+              offsetCenter: [0, "10%"],
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+                (this.dataNumber || this.dataMap),
+            ],
+          },
+          // 刻度
+          {
+            type: "gauge",
+            // center: ["50%", "60%"],
+            name: "仪表盘",
+            radius: "130%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 5,
+            z: 2,
+            axisTick: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //刻度样式
+            splitLine: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //分隔线样式
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 16,
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            //仪表盘详情,用于显示数据。
+            detail: {
+              show: false,
+              offsetCenter: ["0", "0%"],
+              color: "#A2C7F3",
+              formatter: function (params) {
+                return params;
+              },
+              textStyle: {
+                fontSize: 80,
+                
+              },
+            },
+          },
+        ],
+      });
+      }else{
+        echarts.init(this.$refs.echartD).setOption({
+        // backgroundColor: "none",
+        grid: {
+          // top: 0,
+          // bottom: 0,
+          // left: 0,
+          // right: 0,
+          // margi
+        },
+        series: [
+          // 进度条
+          {
+            name: "仪表盘",
+            type: "gauge",
+            radius: "90%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.dataMap, this.color],
+                  [1, "#111F42"],
+                ],
+                width: this.with,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter:  (value) => {
+                return this.dataNumber ? this.dataNumber  :`${(value * 100).toFixed(0)}%`;
+              },
+              offsetCenter: [0, "0%"],
+              textStyle: {
+                //fontSize: this.size,
+                fontSize: 25,
+                fontWeight: "700",
+                color:this.color, 
+                // color: "#FFF",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+            title: {
+              offsetCenter: [0, "10%"],
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+                (this.dataNumber || this.dataMap),
+            ],
+          },
+          // 刻度
+          {
+            type: "gauge",
+            // center: ["50%", "60%"],
+            name: "仪表盘",
+            radius: "140%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 5,
+            z: 2,
+            axisTick: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //刻度样式
+            splitLine: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //分隔线样式
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 12,
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            //仪表盘详情,用于显示数据。
+            detail: {
+              show: false,
+              offsetCenter: ["0", "0%"],
+              color: "#A2C7F3",
+              formatter: function (params) {
+                return params;
+              },
+              textStyle: {
+                fontSize: 20,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+          },
+        ],
+      });
+      }
+      
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

+ 738 - 238
src/components/line-smooth/index.vue

@@ -25,260 +25,760 @@ export default {
     getData() {
       let dataMap = this.dataMap;
       let echartsMap = echarts.init(this.$refs.echartD);
-      echartsMap.setOption({
-        color: [
-          "rgba(79, 255, 70,.8)",
-          "rgba(62,175,64,.8)",
-          "rgba(239,107,61,.8)",
-          "rgba(250, 223, 43,.8)",
-          "rgba(20, 225, 234,.8)",
-          "rgba(55, 155, 249,.8)",
-        ],
-        title: {
-          show: false,
-          text: "渐变堆叠面积图",
-        },
-        tooltip: {
-          trigger: "axis",
-          textStyle: {
-            color: "#FFF",
+      if(document.body.clientWidth >4000){
+        echartsMap.setOption({
+          color: [
+            "rgba(79, 255, 70,.8)",
+            "rgba(62,175,64,.8)",
+            "rgba(239,107,61,.8)",
+            "rgba(250, 223, 43,.8)",
+            "rgba(20, 225, 234,.8)",
+            "rgba(55, 155, 249,.8)",
+          ],
+          title: {
+            show: false,
+            text: "渐变堆叠面积图",
+          },
+          tooltip: {
+            trigger: "axis",
+            textStyle: {
+              color: "#FFF",
+            },
+            confine: true,
+            backgroundColor: "rgba(11, 12, 72, 0.8)",
+            borderColor: "rgba(11, 12, 72, 0.4)",
+            position: "bottom",
+          },
+          legend: {
+            show: true,
+            data: ["社会救助", "火灾", "抢险救援"],
+            selected: {
+              社会救助: true,
+              火灾: true,
+              抢险救援: true,
+              救助月平均值: true,
+              火灾月平均值: true,
+              救援月平均值: true,
+            },
+            bottom: 10,
+            itemGap: 20,
+            textStyle: {
+              color: "#FFF",
+            },
+          },
+          // toolbox: {},
+          grid: {
+            top: 30,
+            left: 0,
+            right: 15,
+            bottom: 40,
+            containLabel: true,
           },
-          confine: true,
-          backgroundColor: "rgba(11, 12, 72, 0.8)",
-          borderColor: "rgba(11, 12, 72, 0.4)",
-          position: "bottom",
-        },
-        legend: {
-          show: true,
-          data: ["社会救助", "火灾", "抢险救援"],
-          selected: {
-            社会救助: true,
-            火灾: false,
-            抢险救援: false,
-            救助月平均值: true,
-            火灾月平均值: false,
-            救援月平均值: false,
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "0-3",
+              "3-6",
+              "6-9",
+              "9-12",
+              "12-15",
+              "15-18",
+              "18-21",
+              "21-0",
+            ],
+            axisLabel: {
+              color: "#FFFFFF",
+              rotate: 50,
+            },
+            axisTick: {
+              show: false,
+            },
           },
-          bottom: 10,
-          itemGap: 20,
-          textStyle: {
-            color: "#FFF",
+          yAxis: {
+            type: "value",
+            axisLabel: {
+              color: "#FFFFFF",
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#ccc",
+              },
+            },
           },
-        },
-        // toolbox: {},
-        grid: {
-          top: 30,
-          left: 0,
-          right: 15,
-          bottom: 40,
-          containLabel: true,
-        },
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: [
-            "0-1",
-            "1-2",
-            "2-3",
-            "3-4",
-            "4-5",
-            "5-6",
-            "6-7",
-            "7-8",
-            "8-9",
-            "9-10",
-            "10-11",
-            "11-12",
-            "12-13",
-            "13-14",
-            "14-15",
-            "15-16",
-            "16-17",
-            "17-18",
-            "18-19",
-            "19-20",
-            "20-21",
-            "21-22",
-            "22-23",
-            "23-0",
+          series: [
+            {
+              name: "社会救助",
+              type: "line",
+              stack: "lineFire",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(79, 255, 70,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(79, 255, 70,.1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["社会救助"] && dataMap["社会救助"].map((val) => val.number)) || [],
+            },
+            {
+              name: "救助月平均值",
+              type: "line",
+              stack: "totalLine",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(62,175,64)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(62,175,64,.1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["社会救助"] &&
+                  dataMap["社会救助"].map((val) => val.avg)) ||
+                [],
+            },
+            {
+              name: "火灾",
+              type: "line",
+              stack: "lineFire",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.9,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(239,107,61,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(239,107,61,.1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["火灾"] && dataMap["火灾"].map((val) => val.number)) ||
+                [],
+            },
+            {
+              name: "火灾月平均值",
+              type: "line",
+              stack: "totalLine",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.9,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(250, 223, 43,.5)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(250, 223, 43, .1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["火灾"] && dataMap["火灾"].map((val) => val.avg)) || [],
+            },
+            {
+              name: "抢险救援",
+              type: "line",
+              stack: "lineFire",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(20, 225, 234)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(20, 225, 234, .1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["抢险救援"] &&
+                  dataMap["抢险救援"].map((val) => val.number)) ||
+                [],
+            },
+            {
+              name: "救援月平均值",
+              type: "line",
+              stack: "totalLine",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.9,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(55, 155, 249,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(55, 155, 249,.1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["抢险救援"] &&
+                  dataMap["抢险救援"].map((val) => val.avg)) ||
+                [],
+            },
+          ],
+        });
+        echartsMap.on("legendselectchanged", function (params) {
+          // 获取点击图例的选中状态
+          var isSelected = params.selected[params.name];
+          echartsMap.dispatchAction({
+            type: isSelected ? "legendSelect" : "legendUnSelect",
+            name:
+              params.name === "社会救助"
+                ? "救助月平均值"
+                : params.name === "火灾"
+                ? "火灾月平均值"
+                : params.name === "抢险救援"
+                ? "救援月平均值"
+                : "",
+          });
+        });
+      }else if(2500< document.body.clientWidth  && document.body.clientWidth < 3999){
+         echartsMap.setOption({
+          color: [
+            "rgba(79, 255, 70,.8)",
+            "rgba(62,175,64,.8)",
+            "rgba(239,107,61,.8)",
+            "rgba(250, 223, 43,.8)",
+            "rgba(20, 225, 234,.8)",
+            "rgba(55, 155, 249,.8)",
           ],
-          axisLabel: {
-            color: "#FFFFFF",
-            rotate: 50,
+          title: {
+            show: true,
+            text: "总数(起)",
+            
+            textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
+              fontSize: 12,
+              fontWeight: 'normal',
+              color:'#fff',
+            },
           },
-          axisTick: {
-            show: false,
+          tooltip: {
+            trigger: "axis",
+            textStyle: {
+              color: "#FFF",
+            },
+            confine: true,
+            backgroundColor: "rgba(11, 12, 72, 0.8)",
+            borderColor: "rgba(11, 12, 72, 0.4)",
+            position: "bottom",
           },
-        },
-        yAxis: {
-          type: "value",
-          axisLabel: {
-            color: "#FFFFFF",
+          legend: {
+            
+            show: true,
+            data: ["社会救助", "火灾", "抢险救援"],
+            selected: {
+              社会救助: true,
+              火灾: true,
+              抢险救援: true,
+              救助月平均值: true,
+              火灾月平均值: true,
+              救援月平均值: true,
+            },
+            bottom: 10,
+            itemGap: 20,
+            textStyle: {
+              color: "#FFF",
+              fontSize: '20',
+
+            },
+            
+
           },
-          splitLine: {
-            lineStyle: {
-              color: "#ccc",
+          // toolbox: {},
+          grid: {
+            top: 30,
+            left: 0,
+            right: 15,
+            bottom: 40,
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "0-3",
+              "3-6",
+              "6-9",
+              "9-12",
+              "12-15",
+              "15-18",
+              "18-21",
+              "21-0",
+              
+            ],
+            axisLabel: {
+              color: "#FFFFFF",
+              rotate: 50,
+              textStyle: {
+                color: '#FFFFFF',
+                fontSize: '16',//字体大小
+              },
+              
+            },
+            
+            axisTick: {
+              show: false,
             },
           },
-        },
-        series: [
-          {
-            name: "社会救助",
-            type: "line",
-            stack: "lineFire",
-            smooth: true,
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "rgba(79, 255, 70,1)",
-                },
-                {
-                  offset: 1,
-                  color: "rgba(79, 255, 70,.1)",
-                },
-              ]),
-            },
-            data:
-              (dataMap["社会救助"] && dataMap["社会救助"].map((val) => val.number)) || [],
+          yAxis: {
+            type: "value",
+            axisLabel: {
+              color: "#FFFFFF",
+              textStyle: {
+                color: '#FFFFFF',
+                fontSize: '16',//字体大小
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#ccc",
+              },
+            },
           },
-          {
-            name: "救助月平均值",
-            type: "line",
-            stack: "totalLine",
-            smooth: true,
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "rgba(62,175,64)",
-                },
-                {
-                  offset: 1,
-                  color: "rgba(62,175,64,.1)",
-                },
-              ]),
-            },
-            data:
-              (dataMap["社会救助"] &&
-                dataMap["社会救助"].map((val) => val.avg)) ||
-              [],
+          series: [
+            {
+              name: "社会救助",
+              type: "line",
+              stack: "lineFire",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(79, 255, 70,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(79, 255, 70,.1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["社会救助"] && dataMap["社会救助"].map((val) => val.number)) || [],
+            },
+            {
+              name: "救助月平均值",
+              type: "line",
+              stack: "totalLine",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(62,175,64)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(62,175,64,.1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["社会救助"] &&
+                  dataMap["社会救助"].map((val) => val.avg)) ||
+                [],
+            },
+            {
+              name: "火灾",
+              type: "line",
+              stack: "lineFire",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.9,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(239,107,61,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(239,107,61,.1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["火灾"] && dataMap["火灾"].map((val) => val.number)) ||
+                [],
+            },
+            {
+              name: "火灾月平均值",
+              type: "line",
+              stack: "totalLine",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.9,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(250, 223, 43,.5)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(250, 223, 43, .1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["火灾"] && dataMap["火灾"].map((val) => val.avg)) || [],
+            },
+            {
+              name: "抢险救援",
+              type: "line",
+              stack: "lineFire",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(20, 225, 234)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(20, 225, 234, .1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["抢险救援"] &&
+                  dataMap["抢险救援"].map((val) => val.number)) ||
+                [],
+            },
+            {
+              name: "救援月平均值",
+              type: "line",
+              stack: "totalLine",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.9,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(55, 155, 249,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(55, 155, 249,.1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["抢险救援"] &&
+                  dataMap["抢险救援"].map((val) => val.avg)) ||
+                [],
+            },
+          ],
+        });
+        echartsMap.on("legendselectchanged", function (params) {
+          // 获取点击图例的选中状态
+          var isSelected = params.selected[params.name];
+          echartsMap.dispatchAction({
+            type: isSelected ? "legendSelect" : "legendUnSelect",
+            name:
+              params.name === "社会救助"
+                ? "救助月平均值"
+                : params.name === "火灾"
+                ? "火灾月平均值"
+                : params.name === "抢险救援"
+                ? "救援月平均值"
+                : "",
+          });
+        });
+      }else{
+         echartsMap.setOption({
+          color: [
+            "rgba(79, 255, 70,.8)",
+            "rgba(62,175,64,.8)",
+            "rgba(239,107,61,.8)",
+            "rgba(250, 223, 43,.8)",
+            "rgba(20, 225, 234,.8)",
+            "rgba(55, 155, 249,.8)",
+          ],
+          title: {
+            show: true,
+            text: "总数(起)",
+            
+            textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
+              fontSize: 12,
+              fontWeight: 'normal',
+              color:'#fff',
+            },
           },
-          {
-            name: "火灾",
-            type: "line",
-            stack: "lineFire",
-            smooth: true,
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.9,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "rgba(239,107,61,1)",
-                },
-                {
-                  offset: 1,
-                  color: "rgba(239,107,61,.1)",
-                },
-              ]),
-            },
-            data:
-              (dataMap["火灾"] && dataMap["火灾"].map((val) => val.number)) ||
-              [],
+          tooltip: {
+            trigger: "axis",
+            textStyle: {
+              fontSize: 12,
+              color: "#FFF",
+            },
+            confine: true,
+            backgroundColor: "rgba(11, 12, 72, 0.8)",
+            borderColor: "rgba(11, 12, 72, 0.4)",
+            position: "bottom",
+          },
+          legend: {
+            show: true,
+            data: ["社会救助", "火灾", "抢险救援"],
+            selected: {
+              社会救助: true,
+              火灾: true,
+              抢险救援: true,
+              救助月平均值: true,
+              火灾月平均值: true,
+              救援月平均值: true,
+            },
+            bottom: 10,
+            itemGap: 20,
+            textStyle: {
+              fontSize: 12,
+              color: "#FFF",
+            },
           },
-          {
-            name: "火灾月平均值",
-            type: "line",
-            stack: "totalLine",
-            smooth: true,
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.9,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "rgba(250, 223, 43,.5)",
-                },
-                {
-                  offset: 1,
-                  color: "rgba(250, 223, 43, .1)",
-                },
-              ]),
-            },
-            data:
-              (dataMap["火灾"] && dataMap["火灾"].map((val) => val.avg)) || [],
+          // toolbox: {},
+          grid: {
+            top: 30,
+            left: 0,
+            right: 15,
+            bottom: 40,
+            containLabel: true,
           },
-          {
-            name: "抢险救援",
-            type: "line",
-            stack: "lineFire",
-            smooth: true,
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.8,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "rgba(20, 225, 234)",
-                },
-                {
-                  offset: 1,
-                  color: "rgba(20, 225, 234, .1)",
-                },
-              ]),
-            },
-            data:
-              (dataMap["抢险救援"] &&
-                dataMap["抢险救援"].map((val) => val.number)) ||
-              [],
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: [
+              "0-3",
+              "3-6",
+              "6-9",
+              "9-12",
+              "12-15",
+              "15-18",
+              "18-21",
+              "21-0",
+            ],
+            axisLabel: {
+              color: "#FFFFFF",
+              rotate: 50,
+              textStyle: {
+                fontSize: 12,
+                color: "#FFF",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
           },
-          {
-            name: "救援月平均值",
-            type: "line",
-            stack: "totalLine",
-            smooth: true,
-            showSymbol: false,
-            areaStyle: {
-              opacity: 0.9,
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "rgba(55, 155, 249,1)",
-                },
-                {
-                  offset: 1,
-                  color: "rgba(55, 155, 249,.1)",
-                },
-              ]),
-            },
-            data:
-              (dataMap["抢险救援"] &&
-                dataMap["抢险救援"].map((val) => val.avg)) ||
-              [],
+          yAxis: {
+            type: "value",
+            axisLabel: {
+              color: "#FFFFFF",
+              textStyle: {
+              fontSize: 12,
+              color: "#FFF",
+            },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#ccc",
+              },
+            },
           },
-        ],
-      });
-      echartsMap.on("legendselectchanged", function (params) {
-        // 获取点击图例的选中状态
-        var isSelected = params.selected[params.name];
-        echartsMap.dispatchAction({
-          type: isSelected ? "legendSelect" : "legendUnSelect",
-          name:
-            params.name === "社会救助"
-              ? "救助月平均值"
-              : params.name === "火灾"
-              ? "火灾月平均值"
-              : params.name === "抢险救援"
-              ? "救援月平均值"
-              : "",
+          series: [
+            {
+              name: "社会救助",
+              type: "line",
+              stack: "lineFire",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(79, 255, 70,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(79, 255, 70,.1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["社会救助"] && dataMap["社会救助"].map((val) => val.number)) || [],
+            },
+            {
+              name: "救助月平均值",
+              type: "line",
+              stack: "totalLine",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(62,175,64)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(62,175,64,.1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["社会救助"] &&
+                  dataMap["社会救助"].map((val) => val.avg)) ||
+                [],
+            },
+            {
+              name: "火灾",
+              type: "line",
+              stack: "lineFire",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.9,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(239,107,61,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(239,107,61,.1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["火灾"] && dataMap["火灾"].map((val) => val.number)) ||
+                [],
+            },
+            {
+              name: "火灾月平均值",
+              type: "line",
+              stack: "totalLine",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.9,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(250, 223, 43,.5)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(250, 223, 43, .1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["火灾"] && dataMap["火灾"].map((val) => val.avg)) || [],
+            },
+            {
+              name: "抢险救援",
+              type: "line",
+              stack: "lineFire",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.8,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(20, 225, 234)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(20, 225, 234, .1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["抢险救援"] &&
+                  dataMap["抢险救援"].map((val) => val.number)) ||
+                [],
+            },
+            {
+              name: "救援月平均值",
+              type: "line",
+              stack: "totalLine",
+              smooth: true,
+              showSymbol: false,
+              areaStyle: {
+                opacity: 0.9,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(55, 155, 249,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(55, 155, 249,.1)",
+                  },
+                ]),
+              },
+              data:
+                (dataMap["抢险救援"] &&
+                  dataMap["抢险救援"].map((val) => val.avg)) ||
+                [],
+            },
+          ],
         });
-      });
-    },
+        echartsMap.on("legendselectchanged", function (params) {
+          // 获取点击图例的选中状态
+          var isSelected = params.selected[params.name];
+          echartsMap.dispatchAction({
+            type: isSelected ? "legendSelect" : "legendUnSelect",
+            name:
+              params.name === "社会救助"
+                ? "救助月平均值"
+                : params.name === "火灾"
+                ? "火灾月平均值"
+                : params.name === "抢险救援"
+                ? "救援月平均值"
+                : "",
+          });
+        });
+      }
+      },
     resize() {
       echarts.init(this.$refs.echartD).resize();
     },

+ 3 - 1
src/components/mixins/linstener.js

@@ -3,7 +3,8 @@ export default {
     data() {
         return {
             resizeTime: true,
-            windowWidth: 1920 + 1080,
+            //windowWidth: 1920 + 1080,
+            windowWidth: 6144 + 2304,
             isVsFirePie: false,
             distance: 300, // 3D饼图大小配置
             isVsTab: false,
@@ -11,6 +12,7 @@ export default {
             rightBtn: true,
             current: 1,
             size: 20,
+            //size: 6.25,
         }
     },
     watch: {

+ 62 - 0
src/components/mixins/linstener2.js

@@ -0,0 +1,62 @@
+// 常规列表混入
+export default {
+    data() {
+        return {
+            resizeTime: true,
+            //windowWidth: 1920 + 1080,
+            windowWidth: 6144 + 2304,
+            isVsFirePie: false,
+            distance: 300, // 3D饼图大小配置
+            isVsTab: false,
+            leftBtn: true,
+            rightBtn: true,
+            current: 1,
+            size: 20,
+            //size: 6.25,
+        }
+    },
+    watch: {
+        '$store.state.typeTime' (val) {
+            this.getData && this.getData(val)
+        },
+        '$store.state.timeList' (val) {
+            this.getData && this.getData(val)
+        }
+    },
+    mounted() {
+        // window.addEventListener("resize", this.resizeTimeActions);
+    },
+    methods: {
+        resizeTimeActions(list) {
+            if (!this.resizeTime) return;
+            this.resizeTime = false
+            setTimeout(() => {
+                list.forEach(element => {
+                    element && element.resize()
+                });
+
+                this.resizeTime = true
+                this.windowWidth = document.documentElement.clientWidth + document.documentElement.clientHeight
+            }, 300);
+
+        },
+        vsClick(val) {
+            this[val] = !this[val]
+            if (val === 'isVsFirePie') {
+                this.$nextTick(() => {
+                    this.$refs.firePie1 && this.$refs.firePie1.resize();
+                    this.$refs.firePie2 && this.$refs.firePie2.resize();
+                })
+            }
+        },
+        leftBtnClick() {
+            this.leftBtn = !this.leftBtn
+        },
+        rightBtnClick() {
+            this.rightBtn = !this.rightBtn
+        }
+    },
+    unmount() {
+        window.removeEventListener("resize", this.resizeTimeActions, true);
+    },
+};

+ 222 - 43
src/components/mixins/map-data.js

@@ -1,9 +1,17 @@
+import axios from 'axios';
 import JMap from 'JMap'
 import JMapQuery from 'JMapQuery'
 export default {
     data() {
         return {
+            // icon1: require('@a/img/icon/szWater.png'),
+            // icon2: require('@a/img/icon/sqWater.png'),
+            icon1: require('@a/img/icon/qx.svg'),
+            icon2: require('@a/img/icon/jy.svg'),
+            icon3: require('@a/img/icon/hz.svg'),
+            img:require('@a/img/icon/close.png'),
             map: null,
+            time:false,
             mapPolList: [],
             colorList: [
                 ['#99e', "#F33"],
@@ -40,6 +48,7 @@ export default {
         window.vue = this;
         window.jMap = null;
         window.jmapQuery = null;
+       
     },
     methods: {
         async initMap() {
@@ -69,7 +78,8 @@ export default {
                 // 加载地图
             window.jMap.createMap("mapF", res.data, window.location.origin, map_params, {});
             // 地图样式
-            window.jMap.switchBaseLayer('light')
+            window.jMap.switchBaseLayer('dark')
+            // window.jMap.switchBaseLayer('light')
                 // 增加街镇边界
             let options = {
                 click: (val) => {
@@ -92,26 +102,49 @@ export default {
                         backgroundColor: 'rgb(0,0,0)',
                         showBackground: false
                     }
+                    
                 },
                 // where:"name != '江川路街道'"
             }
             window.jMap.addLayer('mh_dyn_district', [1], options)
                 // 街镇标题
-            var qp = new JMapQueryParam({
-                queryMapService: 'mh_dyn_district',
-                queryMapLayers: [1],
-                outFields: ['code', 'name', 'center_x', 'center_y'],
-                callBack: (res) => {
-                    res.features.forEach(async val => {
-                        await window.jMap.FlagInfo.show({
-                            id: val.attributes.code,
-                            position: { x: Number(val.attributes.center_x), y: Number(val.attributes.center_y), z: 0 },
-                            element: `<div class='ysc-dynamic-layer ys-css3-box' onclick="vue.clickFlag(${val.attributes.code})"><div class='biaozhu'>${val.attributes.name}   ${val.attributes.code}</div></div>`
-                        }, { isZoom: false, })
-                    });
-                }
-            })
-            new JMapQuery(window.jMap).execQuery(qp)
+            if(document.body.clientWidth >1940){
+                var qp = new JMapQueryParam({
+                    queryMapService: 'mh_dyn_district',
+                    queryMapLayers: [1],
+                    outFields: ['code', 'name', 'center_x', 'center_y'],
+                    callBack: (res) => {
+                        res.features.forEach(async val => {
+                            await window.jMap.FlagInfo.show({
+                                id: val.attributes.code,
+                                position: { x: Number(val.attributes.center_x), y: Number(val.attributes.center_y), z: 0 },
+                                element: `<div class='ysc-dynamic-layer ys-css3-box' onclick="vue.clickFlag(${val.attributes.code})">
+                                                <div class='biaozhu' style="font-size:32px !important">${val.attributes.name}   ${val.attributes.code}</div>
+                                        </div>`
+                            }, { isZoom: false, })
+                        });
+                    }
+                })
+            }else{
+                var qp = new JMapQueryParam({
+                    queryMapService: 'mh_dyn_district',
+                    queryMapLayers: [1],
+                    outFields: ['code', 'name', 'center_x', 'center_y'],
+                    callBack: (res) => {
+                        console.log(res)
+                        res.features.forEach(async val => {
+                            await window.jMap.FlagInfo.show({
+                                id: val.attributes.code,
+                                position: { x: Number(val.attributes.center_x), y: Number(val.attributes.center_y), z: 0 },
+                                element: `<div class='ysc-dynamic-layer ys-css3-box' onclick="vue.clickFlag(${val.attributes.code})">
+                                                <div class='biaozhu' style="font-size:18px !important">${val.attributes.name}   ${val.attributes.code}</div>
+                                        </div>`
+                            }, { isZoom: false, })
+                        });
+                    }
+                })
+            }
+            // new JMapQuery(window.jMap).execQuery(qp)
         },
         clickFlag(val) {
             console.log(val)
@@ -127,28 +160,73 @@ export default {
             this.map.remove(lnglats);
         },
         // 创建标点和点击事件
-        addMarker(lnglats, type) {
+         addMarker(lnglats, type) {
             let icon = ''
-            let target = lnglats.map((val, ind) => {
-                if (type === 'water') {
-                    icon = val.waterAdministrative === '单位' ? 'http://120.55.70.156/image/unitWater.png' : val.waterAdministrative === '市政' ? 'http://120.55.70.156/image/szWater.png' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? 'http://120.55.70.156/image/sqWater.png' : ''
+            if(type =="selfManagement"){
+                var lnglats = lnglats[0]
+            }
+            var target = lnglats.map((val, ind) => {
+                if (type == 'selfManagement') {
+                    
+                    if(val.ajlx =="火灾"){
+                        icon = this.icon3
+                    }else
+                    if(val.ajlx =="抢险救援"){
+                        icon = this.icon1
+                    }else if(val.ajlx =="社会救助"){
+                        icon = this.icon2
+                    }else{
+                        icon = this.icon2
+                    }
+                    
+                }else{
+                    icon = val.waterAdministrative === '单位' ? this.icon1 : val.waterAdministrative === '市政' ? this.icon2 : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? this.icon3 : this.icon1
+                }
+                if(type =="selfManagement" || type =="water"){
+                    let marker = {
+                        id: ind + 1,
+                        attrbutes: val,
+                        position: { x: val.gisX, y: val.gisY, z: 0 },
+                        image: { url: icon,width:240,height:240 },
+                    };
+                    return marker
+               
+                }else{
+                    let marker = {
+                        id: ind + 1,
+                        attrbutes: val,
+                        position: { x: val.gisBaiDuX, y: val.gisBaiDuY, z: 0 },
+                        image: { url: icon,width:240,height:240 },
+                    };
+                    return marker
                 }
-                let marker = {
-                    id: ind + 1,
-                    attributes: val.waterAdministrative,
-                    attrbutes: val,
-                    position: { x: val.gisX, y: val.gisY, z: 0 },
-                    // image: { url: icon,width:29.5,height:48.5 },
-                };
-                return marker
+                
+                
             })
-            console.log(target)
             window.jMap.Locate.pointLocate(target, {
                 isZoom: false,
                 scaleByDistance: { minScaling: 0, maxScaling: 1, minDistance: 1000, maxDistance: 30000 },
                 click: (val) => {
-                    this.elementInfo(val, type)
+                    if(type =="selfManagement"){
+                        this.$axios.get(this.$api.jqzhcz.one +
+                            "?" +
+                            this.$qs.stringify({
+                                id: val.attrbutes.id,
+                            })
+                        ).then(res =>{
+                            console.log(res.data)
+                            this.$store.commit('ajxq2nr', { ajxq2nr: res.data });
+                            
+                            // this.elementInfo(res.data, type)
+                            
+                        })
+                    }else{
+                        this.elementInfo(value, type)
+                    }
+                    
+                   
                 }
+                
             })
         },
         // 无经纬度创建标点和点击事件
@@ -193,6 +271,61 @@ export default {
             this.rightBtn = !this.rightBtn
         },
         elementInfo(value, type) {
+            var img = this.img
+
+            // if (this.timer) {
+            //     clearTimeout(this.timer)
+            // }
+            // this.timer = setTimeout(() => {
+            //     window.jMap.Popup.hide()
+            // }, 8000)
+      
+            // setTimeout(()=>{
+            //     if(this.time){
+
+            //     }
+                
+            // },8000)
+            if(!value.ajbh){
+                value.ajbh ='--'
+            }
+            if(!value.tzsj){
+                value.tzsj ='--'
+            }
+            if(!value.bcxx){
+                value.bcxx ='--'
+            }
+            if(!value.ajlx){
+                value.ajlx ='--'
+            }
+            if(!value.afdz){
+                value.afdz ='--'
+            }
+            if(!value.zhongdui){
+                value.zhongdui ='--'
+            }
+            if(!value.ajzt){
+                value.ajzt ='--'
+            }
+            if(!value.dcsj){
+                value.dcsj ='--'
+            }
+            if(!value.cssj){
+                value.cssj ='--'
+            }
+            if(!value.kzsj){
+                value.kzsj ='--'
+            }
+            if(!value.xmsj){
+                value.xmsj ='--'
+            }
+            if(!value.fdsj){
+                value.fdsj ='--'
+            }
+            if(!value.streettown){
+                value.streettown ='--'
+            }
+            
             let element = ''
             if (type === 'water') {
                 element = `<div class="ysc-dynamic-layer ys-css3-box" onclick="vue.removePopup">
@@ -214,7 +347,7 @@ export default {
                             </div>
                         </div>`
             } else if (type === 'fire') {
-                element = `<div class="ysc-dynamic-layer ys-css3-box" onclick="vue.removePopup">
+                element = `<div class="ysc-dynamic-layer ys-css3-box" >
                             <div class="tableTooltip mapTab">
                                 <div class="tableTitle">
                                     <div>${'单位及执法情况'}</div>
@@ -235,25 +368,67 @@ export default {
                                 </el-row>
                             </div>
                         </div>`
+            }else{
+                element = ``
             }
-            this.addMarkerInfo(element, value)
-            console.log(element)
+            // <div class="ysc-dynamic-layer ys-css3-box" onclick="vue.removePopup()">
+            //                           <div class="tableTooltip mapTab">
+            //                           <div class="tableTitle">
+            //                               <div>${value.ajlx}</div>
+            //                           </div>
+            //                           <img src="${img}" alt="" class="close2" onclick="removePopup()" />
+            //                           <el-row class="tableContent">
+            //                               <div class="max">案件编号:${value.ajbh}</div>
+            //                               <div class="max">报警时间:${value.tzsj} </div>
+            //                               <div class="max">案件描述:${value.bcxx}</div>
+                                         
+            //                               <div class="max">案件类型:${value.ajlx}</div>
+                                         
+            //                               <div class="max">发生地址:${value.afdz}</div>
+                                          
+            //                               <div class="max2">主责中队:${value.zhongdui}</div>
+            //                               <div class="max2">案件状态:${value.ajzt}</div>
+            //                               <div class="max2">到场时间:<span>${value.dcsj}</span></div>
+            //                               <div class="max2">出水时间:<span>${value.cssj}</span></div>
+            //                               <div class="max2">控制时间:<span>${value.kzsj}</span></div>
+            //                               <div class="max2">熄灭时间:<span>${value.xmsj}</span></div>
+            //                               <div class="max2">返队时间:<span>${value.fdsj}</span></div>
+            //                               <div class="max2">所属街道:${value.streettown}</div>
+
+            //                           </el-row>
+            //                           </div>
+            //                       </div>
+            // <img src="${img}" alt="" class="close" onclick="tb1()" 
+            this.addMarkerInfo(element, value,type)
         },
         // 标点点击弹窗
-        addMarkerInfo(element, value, isBtn = false) {
-            console.log(element, value)
+        // addMarkerInfo(element, value, type, isBtn = false) {
+        addMarkerInfo(element, value, type, isBtn = false) {
+            
                 // window.jMap.Popup && window.jMap.Popup.hide([this.oldPopup && this.oldPopup.id]);
             if (this.oldPopup && value.id === this.oldPopup.id) {
                 window.jMap.Popup.hide();
                 return this.oldPopup = null
             }
-            // console.log(value)
-            window.jMap.Popup.show({
-                id: value.id,
-                // position: value.wgs84position, //使用自定义窗体
-                position: { x: Number(value.wgs84position.x), y: Number(value.wgs84position.y), z: Number(value.wgs84position.z) }, //使用自定义窗体
-                element: element,
-            }, { isZoom: false, offset: [0, -40] });
+            if(type =="selfManagement" || type =="water"){
+                window.jMap.Popup.show({
+                    id: value.id,
+                    //position: value.wgs84position, //使用自定义窗体
+                    position: { x: value.gisX, y: value.gisY}, //使用自定义窗体
+                   
+                    element: element,
+                }, { isZoom: false, offset: [0, -40] });
+            }else{
+                window.jMap.Popup.show({
+                    id: value.id,
+                    //position: value.wgs84position, //使用自定义窗体
+                    position: { x: value.gisX, y: value.gisY}, //使用自定义窗体
+                    element: element,
+                }, { isZoom: false, offset: [0, -40] });
+            }
+            
+
+
             if (!isBtn) {
                 window.jMap.goTo({
                     x: Number(value.wgs84position.x),
@@ -272,7 +447,7 @@ export default {
                     distance: 1000
                 }, {
                     callBack: (el) => {
-                        console.log(el)
+                        
                         for (const i in el) {
                             var target = {
                                 id: i,
@@ -292,6 +467,10 @@ export default {
         },
         removePopup(e) {
             console.log(e)
+            document.getElementsByClassName("ys-css3-container")[0].remove()
+            //window.jMap.Popup.hide()
+            
         },
+       
     }
 }

+ 215 - 0
src/components/mixins/map-gaode-selfManagement.js

@@ -0,0 +1,215 @@
+import AMap from 'AMap'
+import mapData from '@a/js/map-data.js'
+// import AMapUI from 'AMapUI'
+export default {
+    data() {
+        return {
+            icon: require('@a/img/icon/icon-qyzz.png'),
+            map: null,
+            mapPolList: [],
+            colorList: [
+                ['#99e', "#F33"],
+                ['#ee6', "#c38"],
+                ['#c38', "#F33"],
+                ['#6E7', '#F33'],
+                ['#6A7', "#F33"],
+                ['#EF7', "#F33"],
+                ['#AF7', "#F33"],
+                ['#BAC', "#F33"],
+                ['#BEF', "#F33"],
+                ['#BBB', "#F33"],
+                ['#EFA', "#F33"],
+                ['#FE6', "#F33"],
+                ['#7F6', "#F33"],
+                ['#7dc', "#F33"],
+            ],
+            colorIndList: [-1, 7, 21, 26, 31, 37, 46, 52, 57, 66, 68, 71, 74, 100]
+        }
+    },
+    mounted() {
+        window['tb1'] = () => {
+                this.tb1()
+            },
+            window['tb2'] = () => {
+                this.tb2()
+            }
+        window['tb3'] = () => {
+            this.tb3()
+        }
+
+    },
+    methods: {
+        tb1() {
+            this.$store.commit('qyzz', { qyzz: "电量" });
+        },
+        tb2() {
+            this.$store.commit('qyzz', { qyzz: "信号" });
+            console.log(2)
+        },
+        tb3() {
+            this.$store.commit('qyzz', { qyzz: "液位" });
+            console.log(3)
+        },
+        addMarkerInfo(position, value) { //消防水情况
+            var icon = this.icon
+                // this.map.getIsOpen();
+            this.map.clearInfoWindow();
+            // var icon = require('')
+            var json = eval('(' + value.property + ')');
+            var code = value.code
+            var infoWindow = new AMap.InfoWindow({
+                isCustom: true, //使用自定义窗体
+                closeWhenClickMap: true,
+                content: `
+                    <div class="tableTooltip mapTab">
+                        <div class="tableTitle">
+                            <div>${value.deviceType}</div>
+                        </div>
+                        <el-row class="tableContent">
+                            <div class="max">设备编号:${value.code}</div>
+                            <div class="max">检测对象:${value.deviceType}</div>
+                            <div class="max">数据更新时间:${value.createTime}</div>
+                            <div class="max">剩余电量:
+                            ${json && json.find(val=>val.property === '电量') ? json.find(val=>val.property === '电量').serial : '--'} 
+                            <img src="${icon}" alt="" class="icon2" v-if="json && json.find(val=>val.property === '电量')" onclick="tb1()" /></div>
+                            <div class="max">无线信号:
+                            ${json && json.find(val=>val.property === '信号') ? json.find(val=>val.property === '信号').serial : '--'} 
+                            <img src="${icon}" alt="" class="icon2" v-if="json && json.find(val=>val.property === '信号')" onclick="tb2()" /></div>
+                            <div class="max">液位:
+                            ${json && json.find(val=>val.property === '水压') ? json.find(val=>val.property === '水压').serial : '--'} 
+                            <img src="${icon}" alt="" class="icon2" v-if="json && json.find(val=>val.property === '水压')" onclick="tb3()" /></div>
+                        </el-row>
+                    </div>`,
+                offset: new AMap.Pixel(16, -30)
+            });
+            infoWindow.open(this.map, position);
+        },
+        // async tb(msg) {
+        //     console.log(1, msg)
+        //     return msg
+
+        // },
+        async initMap() {
+            this.map = await new AMap.Map('mapF', { //地图初始化
+                mapStyle: 'amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da', //设置地图的显示样式
+                resizeEnable: true,
+                zoom: 13,
+                zooms: [3, 16],
+                //pitch: 1, // 地图俯仰角度,有效范围 0 度- 83 度
+                //viewMode: '3D' // 地图模式
+                // features: [] //清空背景道路等
+            })
+            AMap.plugin(["AMap.Geolocation"], () => {
+                var geolocation = new AMap.Geolocation({
+                    showButton: true, //是否显示定位按钮
+                    buttonPosition: "RT", //定位按钮的位置
+                    /* LT LB RT RB */
+                    buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
+                    zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
+                    showMarker: true, //是否显示定位点
+                    markerOptions: {
+                        //自定义定位点样式,同Marker的Options
+                        offset: new AMap.Pixel(-18, -36),
+                        content: '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
+                    },
+                    convert: true,
+                    showCircle: true, //是否显示定位精度圈
+                    circleOptions: {
+                        //定位精度圈的样式
+                        strokeColor: "#0093FF",
+                        noSelect: true,
+                        strokeOpacity: 0.5,
+                        strokeWeight: 1,
+                        fillColor: "#02B0FF",
+                        fillOpacity: 0.25,
+                    },
+                });
+                this.map.addControl(geolocation);
+                // geolocation.getCurrentPosition();
+            });
+
+            this.mapPolList = mapData.map((val, ind) => {
+                // console.log(val)
+                let color = this.colorList[this.colorIndList.findIndex((value, index) => value <= ind && ind < this.colorIndList[index + 1])]
+                return [new AMap.Polygon({
+                    map: this.map,
+                    fillOpacity: 0.5,
+                    path: val[3],
+                    fillColor: color[0],
+                    strokeColor: color[1],
+                }), new AMap.Polygon({
+                    map: this.map,
+                    fillOpacity: 0.5,
+                    path: val[3],
+                    fillColor: color[1],
+                    strokeColor: color[0],
+                })]
+            })
+            this.map.on('mousemove', (e) => {
+                var point = [e.lnglat.getLng(), e.lnglat.getLat()]
+                var pointList = mapData.map(val => {
+                    return AMap.GeometryUtil.isPointInRing(point, val[3])
+                })
+                this.mapPolList.forEach((element, ind) => {
+                    if (pointList[ind]) {
+                        this.map.remove(element[0]);
+                        this.map.add(element[1]);
+                    } else {
+                        this.map.remove(element[1]);
+                        this.map.add(element[0]);
+                    }
+                });
+            })
+            this.map.setFitView();
+        },
+        randomColor() {
+            var color = "#";
+            //for循环中,如果后面仅有一条语句,{}可省略不写
+            //随机生成6位0-15之间的数字,再用toString(16)将数字转成16进制
+            for (var i = 0; i < 6; i++) color += parseInt(Math.random() * 16).toString(16);
+            return color;
+        },
+        deleteMarker(lnglats) {
+            this.map.remove(lnglats);
+        },
+        addMarker(lnglats, type) {
+            // 创建标点和点击事件
+            let icon = ''
+            let markers = lnglats.map((val, ind) => {
+                if (type === 'water') {
+                    icon = val.waterAdministrative === '单位' ? 'http://120.55.70.156/image/unitWater.png' : val.waterAdministrative === '市政' ? 'http://120.55.70.156/image/szWater.png' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? 'http://120.55.70.156/image/sqWater.png' : ''
+                        //icon = val.waterAdministrative === '单位' ? '' : val.waterAdministrative === '市政' ? '' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? '' : ''
+                } else {
+                    icon = val.waterAdministrative === '单位' ? 'http://120.55.70.156/image/unitWater.png' : val.waterAdministrative === '市政' ? 'http://120.55.70.156/image/szWater.png' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? 'http://120.55.70.156/image/sqWater.png' : ''
+                }
+                let marker = new AMap.Marker({
+                    position: new AMap.LngLat(val.longitude, val.latitude),
+                    icon: icon,
+                    zIndex: 9,
+                    extData: {
+                        id: ind + 1
+                    }
+                });
+                if (lnglats.length == 1) {
+                    console.log("正常")
+                    this.addMarkerInfo([val.longitude, val.latitude], val)
+
+                }
+
+                marker.on('click', async() => {
+                    let res = await this.$axios.get(this.$api.selfManagement.one + "?" +
+                        this.$qs.stringify({
+                            id: val.id
+                        }));
+                    if (res) {
+                        this.$store.commit('qyzzId', { qyzzId: res.data.code });
+                        await this.addMarkerInfo([val.longitude, val.latitude], res.data)
+                    }
+                })
+                return marker
+            })
+            this.map.add(new AMap.OverlayGroup(markers));
+            //this.map.setFitView(); // 根据所有点自适应
+        },
+    }
+}

+ 26 - 16
src/components/mixins/map-gaode.js

@@ -1,4 +1,4 @@
-// import AMap from 'AMap'
+import AMap from 'AMap'
 import mapData from '@a/js/map-data.js'
 // import AMapUI from 'AMapUI'
 export default {
@@ -25,12 +25,9 @@ export default {
             colorIndList: [-1, 7, 21, 26, 31, 37, 46, 52, 57, 66, 68, 71, 74, 100]
         }
     },
-    mounted() {
-
-    },
+    mounted() {},
     methods: {
-        // 添加标点
-        addMarkerInfo(position, value) {
+        addMarkerInfo(position, value) { //消防水情况
             // this.map.getIsOpen();
             this.map.clearInfoWindow();
             var infoWindow = new AMap.InfoWindow({
@@ -43,14 +40,14 @@ export default {
                       </div>
                       <el-row class="tableContent">
                         <div class="max">水源位置:${value.address}</div>
-                        <div>电话:${value.phone}</div>
+                        <div class="max2">电话:${value.phone}</div>
                         <div class="max">支队名称:${value.detachmentName}</div>
-                        <div>管辖机构:${value.jurisdictionalAgency}</div>
-                        <div>水源类型:${value.type}</div>
-                        <div>取水形式:${value.getWaterType}</div>
-                        <div>水源性质:${value.waterAdministrative}</div>
-                        <div>状态:${value.status == 1 ?'可用':'不可用'}</div>
-                        <div>供水单位:${value.waterUnit}</div>
+                        <div class="max2">管辖机构:${value.jurisdictionalAgency}</div>
+                        <div class="max2">水源类型:${value.type}</div>
+                        <div class="max2">取水形式:${value.getWaterType}</div>
+                        <div class="max2">水源性质:${value.waterAdministrative}</div>
+                        <div class="max2">状态:${value.status == 1 ?'可用':'不可用'}</div>
+                        <div class="max2">供水单位:${value.waterUnit}</div>
                       </el-row>
                     </div>`,
                 offset: new AMap.Pixel(16, -30)
@@ -58,11 +55,13 @@ export default {
             infoWindow.open(this.map, position);
         },
         async initMap() {
-            this.map = await new AMap.Map('mapF', {
+            this.map = await new AMap.Map('mapF', { //地图初始化
                 mapStyle: 'amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da', //设置地图的显示样式
                 resizeEnable: true,
                 zoom: 13,
                 zooms: [3, 16],
+                //pitch: 1, // 地图俯仰角度,有效范围 0 度- 83 度
+                //viewMode: '3D' // 地图模式
                 // features: [] //清空背景道路等
             })
             AMap.plugin(["AMap.Geolocation"], () => {
@@ -78,6 +77,7 @@ export default {
                         offset: new AMap.Pixel(-18, -36),
                         content: '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
                     },
+                    convert: true,
                     showCircle: true, //是否显示定位精度圈
                     circleOptions: {
                         //定位精度圈的样式
@@ -92,7 +92,9 @@ export default {
                 this.map.addControl(geolocation);
                 // geolocation.getCurrentPosition();
             });
+
             this.mapPolList = mapData.map((val, ind) => {
+                // console.log(val)
                 let color = this.colorList[this.colorIndList.findIndex((value, index) => value <= ind && ind < this.colorIndList[index + 1])]
                 return [new AMap.Polygon({
                     map: this.map,
@@ -136,11 +138,13 @@ export default {
             this.map.remove(lnglats);
         },
         addMarker(lnglats, type) {
-            // 创建标点和点击事件
+            console.log(lnglats)
+                // 创建标点和点击事件
             let icon = ''
             let markers = lnglats.map((val, ind) => {
                 if (type === 'water') {
                     icon = val.waterAdministrative === '单位' ? 'http://120.55.70.156/image/unitWater.png' : val.waterAdministrative === '市政' ? 'http://120.55.70.156/image/szWater.png' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? 'http://120.55.70.156/image/sqWater.png' : ''
+                        //icon = val.waterAdministrative === '单位' ? '' : val.waterAdministrative === '市政' ? '' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? '' : ''
                 }
                 let marker = new AMap.Marker({
                     position: new AMap.LngLat(val.gisX, val.gisY),
@@ -150,13 +154,19 @@ export default {
                         id: ind + 1
                     }
                 });
+                if (lnglats.length == 1) {
+                    console.log("正常")
+                    this.addMarkerInfo([val.gisX, val.gisY], val)
+                }
+
                 marker.on('click', async() => {
+                    console.log(val)
                     await this.addMarkerInfo([val.gisX, val.gisY], val)
                 })
                 return marker
             })
             this.map.add(new AMap.OverlayGroup(markers));
-            // this.map.setFitView(); // 根据所有点自适应
+            //this.map.setFitView(); // 根据所有点自适应
         },
     }
 }

+ 171 - 0
src/components/mixins/map-gaodecom.js

@@ -0,0 +1,171 @@
+import AMap from 'AMap'
+import mapData from '@a/js/map-data.js'
+// import AMapUI from 'AMapUI'
+export default {
+    data() {
+        return {
+            map: null,
+            mapPolList: [],
+            colorList: [
+                ['#99e', "#F33"],
+                ['#ee6', "#c38"],
+                ['#c38', "#F33"],
+                ['#6E7', '#F33'],
+                ['#6A7', "#F33"],
+                ['#EF7', "#F33"],
+                ['#AF7', "#F33"],
+                ['#BAC', "#F33"],
+                ['#BEF', "#F33"],
+                ['#BBB', "#F33"],
+                ['#EFA', "#F33"],
+                ['#FE6', "#F33"],
+                ['#7F6', "#F33"],
+                ['#7dc', "#F33"],
+            ],
+            colorIndList: [-1, 7, 21, 26, 31, 37, 46, 52, 57, 66, 68, 71, 74, 100]
+        }
+    },
+    mounted() {},
+    methods: {
+        addMarkerInfo(position, value) { //消防水情况
+            // this.map.getIsOpen();
+            this.map.clearInfoWindow();
+            var infoWindow = new AMap.InfoWindow({
+                isCustom: true, //使用自定义窗体
+                closeWhenClickMap: true,
+                content: `
+                    <div class="tableTooltip mapTab">
+                      <div class="tableTitle">
+                        <div>${value.type}</div>
+                      </div>
+                      <el-row class="tableContent">
+                        <div class="max">水源位置:${value.address}</div>
+                        <div class="max2">电话:${value.phone}</div>
+                        <div class="max">支队名称:${value.detachmentName}</div>
+                        <div class="max2">管辖机构:${value.jurisdictionalAgency}</div>
+                        <div class="max2">水源类型:${value.type}</div>
+                        <div class="max2">取水形式:${value.getWaterType}</div>
+                        <div class="max2">水源性质:${value.waterAdministrative}</div>
+                        <div class="max2">状态:${value.status == 1 ?'可用':'不可用'}</div>
+                        <div class="max2">供水单位:${value.waterUnit}</div>
+                      </el-row>
+                    </div>`,
+                offset: new AMap.Pixel(16, -30)
+            });
+            infoWindow.open(this.map, position);
+        },
+        async initMap() {
+            this.map = await new AMap.Map('mapF', { //地图初始化
+                mapStyle: 'amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da', //设置地图的显示样式
+                resizeEnable: true,
+                zoom: 13,
+                zooms: [3, 16],
+                //pitch: 1, // 地图俯仰角度,有效范围 0 度- 83 度
+                //viewMode: '3D' // 地图模式
+                // features: [] //清空背景道路等
+            })
+            AMap.plugin(["AMap.Geolocation"], () => {
+                var geolocation = new AMap.Geolocation({
+                    showButton: true, //是否显示定位按钮
+                    buttonPosition: "RT", //定位按钮的位置
+                    /* LT LB RT RB */
+                    buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
+                    zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
+                    showMarker: true, //是否显示定位点
+                    markerOptions: {
+                        //自定义定位点样式,同Marker的Options
+                        offset: new AMap.Pixel(-18, -36),
+                        content: '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
+                    },
+                    convert: true,
+                    showCircle: true, //是否显示定位精度圈
+                    circleOptions: {
+                        //定位精度圈的样式
+                        strokeColor: "#0093FF",
+                        noSelect: true,
+                        strokeOpacity: 0.5,
+                        strokeWeight: 1,
+                        fillColor: "#02B0FF",
+                        fillOpacity: 0.25,
+                    },
+                });
+                this.map.addControl(geolocation);
+                // geolocation.getCurrentPosition();
+            });
+
+            this.mapPolList = mapData.map((val, ind) => {
+                let color = this.colorList[this.colorIndList.findIndex((value, index) => value <= ind && ind < this.colorIndList[index + 1])]
+                return [new AMap.Polygon({
+                    map: this.map,
+                    fillOpacity: 0.5,
+                    path: val[3],
+                    fillColor: color[0],
+                    strokeColor: color[1],
+                }), new AMap.Polygon({
+                    map: this.map,
+                    fillOpacity: 0.5,
+                    path: val[3],
+                    fillColor: color[1],
+                    strokeColor: color[0],
+                })]
+            })
+            this.map.on('mousemove', (e) => {
+                var point = [e.lnglat.getLng(), e.lnglat.getLat()]
+                var pointList = mapData.map(val => {
+                    return AMap.GeometryUtil.isPointInRing(point, val[3])
+                })
+                this.mapPolList.forEach((element, ind) => {
+                    if (pointList[ind]) {
+                        this.map.remove(element[0]);
+                        this.map.add(element[1]);
+                    } else {
+                        this.map.remove(element[1]);
+                        this.map.add(element[0]);
+                    }
+                });
+            })
+            this.map.setFitView();
+        },
+        randomColor() {
+            var color = "#";
+            //for循环中,如果后面仅有一条语句,{}可省略不写
+            //随机生成6位0-15之间的数字,再用toString(16)将数字转成16进制
+            for (var i = 0; i < 6; i++) color += parseInt(Math.random() * 16).toString(16);
+            return color;
+        },
+        deleteMarker(lnglats) {
+            this.map.remove(lnglats);
+        },
+        addMarker(lnglats, type) {
+            console.log(lnglats)
+                // 创建标点和点击事件
+            let icon = ''
+            let markers = lnglats.map((val, ind) => {
+                if (type === 'water') {
+                    icon = val.waterAdministrative === '单位' ? 'http://120.55.70.156/image/unitWater.png' : val.waterAdministrative === '市政' ? 'http://120.55.70.156/image/szWater.png' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? 'http://120.55.70.156/image/sqWater.png' : ''
+                        //icon = val.waterAdministrative === '单位' ? '' : val.waterAdministrative === '市政' ? '' : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? '' : ''
+                }
+                let marker = new AMap.Marker({
+                    position: new AMap.LngLat(val.gisX, val.gisY),
+                    icon: icon,
+                    zIndex: 9,
+                    extData: {
+                        id: ind + 1
+                    }
+                });
+                if (lnglats.length == 1) {
+                    console.log("正常")
+                    this.addMarkerInfo([val.gisX, val.gisY], val)
+                }
+
+                marker.on('click', async() => {
+                    console.log(val)
+                    await this.addMarkerInfo([val.gisX, val.gisY], val)
+                })
+                return marker
+            })
+            this.map.add(new AMap.OverlayGroup(markers));
+            //this.map.setFitView(); // 根据所有点自适应
+        },
+    }
+}

+ 117 - 53
src/components/radar/index.vue

@@ -31,67 +31,131 @@ export default {
           max: totle + +(totle * 0.1).toFixed(0),
         };
       });
-      echarts.init(this.$refs.echartD).setOption({
-        color: ["yellow"],
-        legend: {
-          show: false,
-        },
-        grid: {
-          height: "60%"
-        },
-        label: {
-          itemStyle: {
-            color: "#FFFFFF",
+      if(document.body.clientWidth >1940){
+        echarts.init(this.$refs.echartD).setOption({
+          color: ["yellow"],
+          legend: {
+            show: false,
           },
-        },
-        tooltip: {
-          textStyle: {
-            color: "#FFF",
+          grid: {
+            height: "60%"
           },
-          confine: true,
-          backgroundColor: "rgba(11, 12, 72, 0.8)",
-          borderColor: "rgba(11, 12, 72, 0.4)",
-          position: "bottom",
-        },
-        radar: {
-          shape: "circle",
-          radius: ["0%", "65%"],
-          axisLine: {
-            lineStyle:{
-              color:'#12789C',
-            }
-          },
-          splitLine: {
-            lineStyle:{
-              color:'#12789C',
-            }
+          label: {
+            itemStyle: {
+              color: "#FFFFFF",
+            },
           },
-          name: {
-              fontSize: 14,
-            color: "#FFFFFF",
+          tooltip: {
+            textStyle: {
+              color: "#FFF",
+            },
+            confine: true,
+            backgroundColor: "rgba(11, 12, 72, 0.8)",
+            borderColor: "rgba(11, 12, 72, 0.4)",
+            position: "bottom",
           },
-          indicator: indicator,
-        },
-        series: [
-          {
-            label: {
-              // show: true,
-              // color: "#FFFFFF",
+          radar: {
+            shape: "circle",
+            radius: ["0%", "40%"],
+            axisLine: {
+              lineStyle:{
+                color:'#12789C',
+              }
             },
-            // 阴影
-            areaStyle: {
-              color: "#ffff0038",
+            splitLine: {
+              lineStyle:{
+                color:'#12789C',
+              }
             },
-            type: "radar",
-            data: [
-              {
-                value: this.dataMap.map((val) => val.value), // 显示数据
-                name: this.name, // 提示框标题
+            name: {
+                fontSize: 14,
+              color: "#FFFFFF",
+            },
+            indicator: indicator,
+          },
+          series: [
+            {
+              label: {
+                // show: true,
+                // color: "#FFFFFF",
               },
-            ],
+              // 阴影
+              areaStyle: {
+                color: "#ffff0038",
+              },
+              type: "radar",
+              data: [
+                {
+                  value: this.dataMap.map((val) => val.value), // 显示数据
+                  name: this.name, // 提示框标题
+                },
+              ],
+            },
+          ],
+        });
+      }else{
+        echarts.init(this.$refs.echartD).setOption({
+          color: ["yellow"],
+          legend: {
+            show: false,
           },
-        ],
-      });
+          grid: {
+            height: "60%"
+          },
+          label: {
+            itemStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          tooltip: {
+            textStyle: {
+              color: "#FFF",
+            },
+            confine: true,
+            backgroundColor: "rgba(11, 12, 72, 0.8)",
+            borderColor: "rgba(11, 12, 72, 0.4)",
+            position: "bottom",
+          },
+          radar: {
+            shape: "circle",
+            radius: ["0%", "65%"],
+            axisLine: {
+              lineStyle:{
+                color:'#12789C',
+              }
+            },
+            splitLine: {
+              lineStyle:{
+                color:'#12789C',
+              }
+            },
+            name: {
+                fontSize: 14,
+              color: "#FFFFFF",
+            },
+            indicator: indicator,
+          },
+          series: [
+            {
+              label: {
+                // show: true,
+                // color: "#FFFFFF",
+              },
+              // 阴影
+              areaStyle: {
+                color: "#ffff0038",
+              },
+              type: "radar",
+              data: [
+                {
+                  value: this.dataMap.map((val) => val.value), // 显示数据
+                  name: this.name, // 提示框标题
+                },
+              ],
+            },
+          ],
+        });
+      }
     },
     resize() {
       echarts.init(this.$refs.echartD).resize();

+ 189 - 16
src/components/scatter/index.vue

@@ -10,11 +10,47 @@ export default {
     name: { type: String, default: () => "" },
   },
   data() {
-    return {};
+    return {
+      data:[],
+
+    };
   },
   watch: {
     dataMap(val) {
-      this.getData(val);
+      var data = []
+      data[3]=val.map(item =>{ //deathToll 死亡人数
+        return [
+          item.fireCount.toFixed(2),
+          item.fireCount == 0 ? 0 : (item.fireArea / item.fireCount).toFixed(2),
+          item.fireArea.toFixed(2),
+          item.deathToll,
+          item.region
+          ]
+          
+      })
+      data[2]=val.map(item =>{ //fireArea 过火面积
+        return [
+          item.fireCount.toFixed(2),
+          item.fireCount == 0 ? 0 : (item.fireArea / item.fireCount).toFixed(2),
+          item.fireArea.toFixed(2),
+          item.deathToll,
+          item.region
+          ]
+          
+      })
+      data[1]=val.map(item =>{ //fireCount 火灾数
+        return [
+          item.fireCount.toFixed(2),
+          item.fireCount == 0 ? 0 : (item.fireArea / item.fireCount).toFixed(2),
+          item.fireArea.toFixed(2),
+          item.deathToll,
+          item.region]
+      })
+      data[0]=val.map(item =>{ //
+        return []
+      })
+      this.data = data
+      this.getData(data);
     },
   },
   mounted() {
@@ -22,6 +58,9 @@ export default {
   },
   methods: {
     getData() {
+      let data = this.data
+    console.log(data)
+      // region: "市重点处", deathToll: 0, fireArea: 0, fireCount: 0
       echarts.init(this.$refs.echartD).setOption({
         grid: {
           top: 40,
@@ -35,7 +74,7 @@ export default {
           },
           confine: true,
           formatter: function (param) {
-            return `${param.data[3]}<br> 死亡人数:${param.data[2]}<br> 过火面积:${param.data[1]}<br> 火灾数量:${param.data[0]}`;
+            return `街道:${param.data[4]}<br> 死亡人数:${param.data[3]}<br> 过火面积:${param.data[2]}<br> 火灾数量:${param.data[0]}`;
           },
           backgroundColor: "rgba(11, 12, 72, 0.8)",
           borderColor: "rgba(11, 12, 72, 0.4)",
@@ -61,6 +100,7 @@ export default {
             show: false,
           },
         },
+
         yAxis: {
           name: "过火面积(m²)/ 火灾数量",
           scale: true,
@@ -92,32 +132,165 @@ export default {
         },
         series: [
           {
-            name: "",
-            width: "100%",
-            height: "100%",
-            data: this.dataMap.map((val) => {
-              return [val.fireCount || '', val.fireArea || '', val.deathToll, val.region];
-            }),
-            type: "scatter",
-            symbolSize: function (data) {
-              return Math.sqrt(data[2]) + 1 * 20;
+            name: '火灾数',
+            data: data[1],
+            type: 'scatter',
+            symbolSize: function (data) {//圆直径
+              return Math.sqrt(data[0]) +1 *20;
+            },
+            emphasis: {//街道
+              focus: 'series',
+              label: {
+                show: true,
+                formatter: function (param) {
+                  return param.data[4];
+                },
+                position: 'top'
+              }
+            },
+            itemStyle: {
+              shadowBlur: 10,
+              shadowColor: 'rgba(120, 36, 50, 0.5)',
+              shadowOffsetY: 5,
+              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(251, 118, 123)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(204, 46, 72)'
+                }
+              ])
+            }
+          },
+          {
+            name: '过火面积',
+            data: data[2],
+            type: 'scatter',
+            symbolSize: function (data) {//圆直径
+              return Math.sqrt(data[0]) +1 *20;
+            },
+            emphasis: {//街道
+              focus: 'series',
+              label: {
+                show: true,
+                formatter: function (param) {
+                  return param.data[4];
+                },
+                position: 'top'
+              }
             },
             itemStyle: {
               shadowBlur: 10,
-              shadowColor: "rgba(120, 36, 50, 0.5)",
+              shadowColor: 'rgba(120, 36, 50, 0.5)',
               shadowOffsetY: 5,
               color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                 {
                   offset: 0,
-                  color: "rgb(251, 118, 123)",
+                  color: 'rgb(251, 118, 123)'
                 },
                 {
                   offset: 1,
-                  color: "rgb(204, 46, 72)",
+                  color: 'rgb(204, 46, 72)'
+                }
+              ])
+            }
+          },
+          {
+            name: '死亡人数',
+            data: data[3],
+            type: 'scatter',
+            symbolSize: function (data) {//圆直径
+              return Math.sqrt(data[0]) +1 *20;
+            },
+            emphasis: {//街道
+              focus: 'series',
+              label: {
+                show: true,
+                formatter: function (param) {
+                  return param.data[4];
                 },
-              ]),
+                position: 'top'
+              }
             },
+            itemStyle: {
+              shadowBlur: 10,
+              shadowColor: 'rgba(120, 36, 50, 0.5)',
+              shadowOffsetY: 5,
+              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(251, 118, 123)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(204, 46, 72)'
+                }
+              ])
+            }
           },
+    // {
+    //   name: '2015',
+    //   data: data[1],
+    //   type: 'scatter',
+    //   symbolSize: function (data) {
+    //     return Math.sqrt(data[2]) / 5e2;
+    //   },
+    //   emphasis: {
+    //     focus: 'series',
+    //     label: {
+    //       show: true,
+    //       formatter: function (param) {
+    //         return param.data[3];
+    //       },
+    //       position: 'top'
+    //     }
+    //   },
+    //   itemStyle: {
+    //     shadowBlur: 10,
+    //     shadowColor: 'rgba(25, 100, 150, 0.5)',
+    //     shadowOffsetY: 5,
+    //     color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
+    //       {
+    //         offset: 0,
+    //         color: 'rgb(129, 227, 238)'
+    //       },
+    //       {
+    //         offset: 1,
+    //         color: 'rgb(25, 183, 207)'
+    //       }
+    //     ])
+    //   }
+    // }
+          // {
+          //   name: "死亡人数",
+          //   width: "100%",
+          //   height: "100%",
+          //   data: this.dataMap.map((val) => {
+          //     return [val.fireCount || '', val.fireArea || '', val.deathToll, val.region];
+          //   }),
+          //   data: this.data[1],
+          //   type: "scatter",
+          //   symbolSize: function (data) {
+          //     return Math.sqrt(data[2]) + 1 * 20;
+          //   },
+          //   itemStyle: {
+          //     shadowBlur: 10,
+          //     shadowColor: "rgba(120, 36, 50, 0.5)",
+          //     shadowOffsetY: 5,
+          //     color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
+          //       {
+          //         offset: 0,
+          //         color: "rgb(251, 118, 123)",
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: "rgb(204, 46, 72)",
+          //       },
+          //     ]),
+          //   },
+          // },
         ],
       });
     },

+ 11 - 2
src/components/se-table/index.vue

@@ -1,12 +1,14 @@
 <template>
   <el-table
+    header-cell-style="height:0.2rem"
     :data="dataMap"
     class="transparentTableRow"
     height="100%"
-    :row-style="{ height: '.425rem' }"
-    cell-style="height:.425rem;box-sizing: border-box;"
+    :row-style="{ height: '.25rem' }"
+    
     style="width: 100%; margin: 0 auto"
     :cell-class-name="tableRowClassName"
+    :cell-style="cellStyle"
   >
     <el-table-column
       show-overflow-tooltip
@@ -36,6 +38,13 @@ export default {
         return "death";
       }
     },
+    cellStyle (row, column, rowIndex, columnIndex) {
+    //列的label的名称
+      if (row.column.label === "告警" || row.column.label === "离线") {
+        return 'color:#2280D9' //修改的样式
+      }
+    },
+
   },
 };
 </script>

+ 75 - 0
src/components/se-table/index2.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-table
+    :data="dataMap"
+    class="transparentTableRow"
+    height="100%"
+    :row-style="{ height: '.425rem' }"
+    style="width: 100%; margin: 0 auto"
+    :cell-class-name="tableRowClassName"
+    :cell-style="cellStyle"
+  >
+    <el-table-column
+      show-overflow-tooltip
+      min-width="20"
+      v-for="item in headerData"
+      :key="item.prop"
+      :prop="item.prop"
+      align="center"
+      :label="item.name"
+
+    ></el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  props: {
+    dataMap: { type: Array, default: () => [] },
+    headerData: { type: Array, default: () => [] },
+  },
+  data() {
+    return {
+      time:undefined
+    };
+  },
+  mounted() {},
+  methods: {
+    day(){
+      var date = new Date();
+      var month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
+      var day = date.getDate(); //获取当前日(1-31)
+      if(month<10){
+        month = "0" + month
+      }
+      if(day<10){
+        day = "0" + day
+      }
+      this.time = month + '-' + day
+    },
+    tableRowClassName({row, column, rowIndex, columnIndex}) {
+      var _this = this
+      if (column.property === 'deathToll' && row.deathToll > 0) {
+        return "death";
+      }
+      _this.day()
+      if (row.time == _this.time ) {
+        return 'green-row';
+      }
+    },
+    
+    cellStyle (row, column, rowIndex, columnIndex) {
+    //列的label的名称
+      if (row.column.label === "告警" || row.column.label === "离线") {
+        return 'color:#2280D9' //修改的样式
+      }
+    },
+
+  },
+};
+</script>
+
+<style>
+.el-table .green-row {
+    background: green !important;
+  }
+</style>

+ 87 - 0
src/components/shebei/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-col class="shebei">
+    <el-col class="title"> 水系统检测告警记录 </el-col>
+    <el-col class="stateList">
+      <el-col class="list">
+        <span class="num">100</span>
+        <span class="text">设备总数</span>
+      </el-col>
+      <el-col class="list">
+        <span class="num">100</span>
+        <span class="text">在线数</span>
+      </el-col>
+      <el-col class="list">
+        <span class="num">100</span>
+        <span class="text">离线数</span>
+      </el-col>
+      <el-col class="list">
+        <span class="num">0</span>
+        <span class="text">告警数</span>
+      </el-col>
+      <el-col class="list">
+        <span class="num">100%</span>
+        <span class="text">上线率</span>
+      </el-col>
+      <el-col class="list">
+        <span class="num">6%</span>
+        <span class="text">接单率</span>
+      </el-col>
+      <el-col class="list">
+        <span class="num">80%</span>
+        <span class="text">处置率</span>
+      </el-col>
+    </el-col>
+    <el-col class="untreated">
+      <span class="fan"></span>
+      <span class="text"></span>
+    </el-col>
+    <el-table
+      :data="dataMap"
+      class="transparentTableRow"
+      height="100%"
+      :row-style="{ height: '.425rem' }"
+      style="width: 100%; margin: 0 auto"
+      :cell-class-name="tableRowClassName"
+      :cell-style="cellStyle"
+    >
+      <el-table-column
+        show-overflow-tooltip
+        min-width="20"
+        v-for="item in headerData"
+        :key="item.prop"
+        :prop="item.prop"
+        align="center"
+        :label="item.name"
+      ></el-table-column>
+    </el-table>
+  </el-col>
+</template>
+
+<script>
+export default {
+  props: {
+    dataMap: { type: Array, default: () => [] },
+    headerData: { type: Array, default: () => [] },
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {
+    tableRowClassName({ row, column, rowIndex, columnIndex }) {
+      if (column.property === "deathToll" && row.deathToll > 0) {
+        return "death";
+      }
+    },
+    cellStyle(row, column, rowIndex, columnIndex) {
+      //列的label的名称
+      if (row.column.label === "告警" || row.column.label === "离线") {
+        return "color:#2280D9"; //修改的样式
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>

+ 315 - 1
src/components/water-gauge/index.vue

@@ -24,7 +24,313 @@ export default {
   },
   methods: {
     getData() {
-      echarts.init(this.$refs.echartD).setOption({
+      if(document.body.clientWidth >1940){
+        echarts.init(this.$refs.echartD).setOption({
+          // backgroundColor:{
+          //       type: 'radial',
+          //       x: 0.5,
+          //       y: 0.5,
+          //       r: 0.5,
+          //       colorStops: [
+          //         { offset: 0,color: "#122c7a",},
+          //         { offset: 0.9,color: "#122c7a",},
+          //         { offset: 0.9,color: "#0b1f61",},
+          //         { offset: 1,color: "#0b1f61",},
+          //         { offset: 1,color: "transparent",},
+          //       ],
+          //       global: true // 缺省为 false
+          // },
+          title: {
+            show: true,
+            text: "水源完好率",
+            left: "center",
+            right: "center",
+            bottom: "center",
+            top: "52%",
+            center: 20,
+            // textStyle: {
+            //   color: "#FFF",
+            //   fontSize: 30,
+            //   align: "center",
+            //   fontWeight: "100",
+            //   fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+            // },
+            textStyle: {
+              color: "#FFF",
+              fontSize: 50,
+              align: "center",
+              fontWeight: "100",
+              fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+            },
+          },
+          series: [
+            {
+              name: "刻度",
+              type: "gauge",
+              radius: "80%",
+              min: 0, //最小刻度
+              max: 100, //最大刻度
+              startAngle: 225, //开始角度 左侧角度
+              endAngle: -135, //结束角度 右侧
+              z: 4,
+              splitNumber: 10,
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  width: 1,
+                  color: [[1, "rgba(0,0,0,0)"]],
+                },
+              }, //仪表盘轴线
+              axisLabel: {
+                show: false,
+                color: "#00faff",
+                fontSize: 50,
+                distance: 20,
+                formatter: function (v) {
+                  return v;
+                },
+              }, //刻度标签。
+              axisTick: {
+                show: true,
+                splitNumber: 6,
+                lineStyle: {
+                  color: "#00faff",
+                  width: 1,
+                  // length:10
+                },
+                length: 5,
+              }, //刻度样式
+              splitLine: {
+                show: true,
+                length: -10,
+                lineStyle: {
+                  color: "#00faff",
+                  width: 1,
+                },
+              }, //分隔线样式
+            },
+            {
+              type: "gauge",
+              radius: "60%",
+              // center: ["50%","70%"],
+              splitNumber: 5, //刻度数量
+              startAngle: 225, //开始角度 左侧角度
+              endAngle: -135, //结束角度 右侧
+              z: 4,
+              axisLine: {
+                show: true,
+                roundCap: true,
+                lineStyle: {
+                  width: 10,
+                  color: [
+                    [
+                      this.dataMap > 1 ? 1 : this.dataMap,
+                      new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                        { offset: 0, color: "#0099ff" },
+                        { offset: 1, color: "#00d5ff" },
+                      ]),
+                    ],
+                    // [1, "#111F42"],
+                  ],
+                },
+              },
+              //分隔线样式。
+              splitLine: {
+                show: false,
+              },
+              axisLabel: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              pointer: {
+                show: false,
+                length: "70%",
+                width: "2%",
+              },
+              title: {
+                show: false,
+                offsetCenter: [0, 0], // x, y,单位px
+                textStyle: {
+                  fontWeight: "100",
+                  color: "#0ab7ff",
+                  fontSize: 50,
+                },
+              },
+              //仪表盘详情,用于显示数据。
+              detail: {
+                show: true,
+                offsetCenter: [0, "-20%"],
+                color: "#ffffff",
+                textStyle: {
+                  fontSize: 90,
+                  color: "#FFF",
+                  fontWeight: "500",
+                  fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+                },
+                formatter: function (v) {
+                  return v * 100 + "%";
+                },
+              },
+              data: [
+                {
+                  value: this.dataMap,
+                },
+              ],
+            },
+            {
+              //内圆
+              type: "pie",
+              radius: "46%",
+              center: ["50%", "50%"],
+              z: 3,
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.RadialGradient(
+                    0.5,
+                    0.5,
+                    0.8,
+                    [
+                      {
+                        offset: 0,
+                        color: "#00b8f8",
+                      },
+                      {
+                        offset: 0.5,
+                        color: "#0068d4",
+                      },
+                      {
+                        offset: 1,
+                        color: "#0068d3",
+                      },
+                    ],
+                    false
+                  ),
+                  label: {
+                    show: false,
+                  },
+                  labelLine: {
+                    show: false,
+                  },
+                },
+              },
+              hoverAnimation: false,
+              label: {
+                show: false,
+              },
+              tooltip: {
+                show: false,
+              },
+              data: [100],
+            },
+            // 刻度圈
+            {
+              type: "pie",
+              radius: ["0%", "90%"],
+              center: ["50%", "50%"],
+              avoidLabelOverlap: false,
+              z: 3,
+              label: {
+                normal: {
+                  show: false,
+                  position: "center",
+                },
+                emphasis: {
+                  show: false,
+                  textStyle: {
+                    fontWeight: "bold",
+                  },
+                },
+              },
+              itemStyle: {
+                normal: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "#122c7a",
+                      },
+                      {
+                        offset: 1,
+                        color: "#122c7a",
+                      },
+                    ],
+                  },
+                },
+              },
+              labelLine: {
+                normal: {
+                  show: false,
+                },
+              },
+              data: [
+                {
+                  value: 100,
+                },
+              ],
+            },
+            //最外层圈
+            {
+              type: "pie",
+              radius: ["0%", "100%"],
+              center: ["50%", "50%"],
+              avoidLabelOverlap: false,
+              z: 2,
+              hoverAnimation: false,
+              label: {
+                normal: {
+                  show: false,
+                  position: "center",
+                },
+                emphasis: {
+                  show: false,
+                  textStyle: {
+                    fontWeight: "bold",
+                  },
+                },
+              },
+              itemStyle: {
+                normal: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "#0b1f61",
+                      },
+                      {
+                        offset: 1,
+                        color: "#0b1f61",
+                      },
+                    ],
+                  },
+                },
+              },
+              labelLine: {
+                normal: {
+                  show: false,
+                },
+              },
+              data: [
+                {
+                  value: 100,
+                },
+              ],
+            },
+          ],
+        });
+      }else{
+        echarts.init(this.$refs.echartD).setOption({
         // backgroundColor:{
         //       type: 'radial',
         //       x: 0.5,
@@ -47,6 +353,13 @@ export default {
           bottom: "center",
           top: "52%",
           center: 20,
+          // textStyle: {
+          //   color: "#FFF",
+          //   fontSize: 30,
+          //   align: "center",
+          //   fontWeight: "100",
+          //   fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+          // },
           textStyle: {
             color: "#FFF",
             fontSize: 18,
@@ -321,6 +634,7 @@ export default {
           },
         ],
       });
+      }
     },
     resize() {
       echarts.init(this.$refs.echartD).resize();

+ 58 - 24
src/components/wordCloud/index.vue

@@ -102,6 +102,7 @@ export default {
           value: 957,
         },
       ];
+      //let datamap = [...this.dataMap, ...data, ...this.$store.state.testList];
       let datamap = [...this.dataMap, ...data, ...this.$store.state.testList];
       var color = [
         "#ff4a4a",
@@ -115,33 +116,66 @@ export default {
         "#ffffff",
       ];
       maskImage.onload = () => {
-        echarts.init(this.$refs.echartD).setOption({
-          backgroundColor: "transparent",
-          tooltip: {
-            show: true,
-            confine: true,
-          },
-          series: [
-            {
-              type: "wordCloud",
-              sizeRange: [5, 40], //value与图像像素的映射的最大值与最小值
-              rotationRange: [0, 0],
-              maskImage: maskImage,
-              textPadding: 20,
-              gridSize: 8,
-              height: "100%",
-              left: "center",
-              top: "center",
-              drawOutOfBound: false,
-              textStyle: {
-                color: () => {
-                  return color[Math.round(Math.random() * (color.length - 1))];
+        if(document.body.clientWidth >1940){
+          echarts.init(this.$refs.echartD).setOption({
+            backgroundColor: "transparent",
+            tooltip: {
+              show: true,
+              confine: true,
+            },
+            series: [
+              {
+                type: "wordCloud",
+                sizeRange: [10, 15], //value与图像像素的映射的最大值与最小值
+                rotationRange: [0, 0],
+                // width: '150%',
+                // height: '150%',
+                maskImage: maskImage,
+                textPadding: 1,
+                gridSize: 8,
+                left: "center",
+                top: "center",
+                drawOutOfBound: false,
+                textStyle: {
+                  color: () => {
+                    return color[Math.round(Math.random() * (color.length - 1))];
+                  },
                 },
+                data: datamap,
               },
-              data: datamap,
+            ],
+          });
+        }else{
+          echarts.init(this.$refs.echartD).setOption({
+            backgroundColor: "transparent",
+            tooltip: {
+              show: true,
+              confine: true,
             },
-          ],
-        });
+            series: [
+              {
+                type: "wordCloud",
+                sizeRange: [5, 40], //value与图像像素的映射的最大值与最小值
+                rotationRange: [0, 0],
+                width: '100%',
+              height: '100%',
+                maskImage: maskImage,
+                textPadding: 20,
+                gridSize: 8,
+                height: "100%",
+                left: "center",
+                top: "center",
+                drawOutOfBound: false,
+                textStyle: {
+                  color: () => {
+                    return color[Math.round(Math.random() * (color.length - 1))];
+                  },
+                },
+                data: datamap,
+              },
+            ],
+          });
+        }
       };
     },
     resize() {

+ 285 - 0
src/components/yw/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <div
+    ref="echartD"
+    style="width: 100%; height: 100%; display: flex; justify-content: center"
+  ></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    dataMap: { type: Number, default: () => 0 },
+    dataNumber: { type: Number, default: () => 0 },
+    color: { type: String, default: () => "#468EFD" },
+    size: { type: Number, default: () => 20 },
+    tick: { type: Boolean, default: () => true },
+    with: { type: Number, default: () => 20 },
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+    dataNumber(val) {
+      this.getData(val);
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      console.log(document.body.clientWidth)
+      if(document.body.clientWidth >1940){
+        echarts.init(this.$refs.echartD).setOption({
+        // backgroundColor: "none",
+        grid: {
+          // top: 0,
+          // bottom: 0,
+          // left: 0,
+          // right: 0,
+          // margi
+        },
+        series: [
+          // 进度条
+          {
+            name: "仪表盘",
+            type: "gauge",
+            radius: "70%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.dataMap, this.color],
+                  [1, "#111F42"],
+                ],
+                width: 60,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter:  (value) => {
+                return this.dataNumber ? this.dataNumber :`${(value * 100).toFixed(0)}%`;
+              },
+              offsetCenter: [0, "0%"],
+              textStyle: {
+                //fontSize: this.size,
+                fontSize: 80,
+                fontWeight: "400",
+                color:this.color, 
+                // color: "#FFF",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+            title: {
+              offsetCenter: [0, "10%"],
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+                (this.dataNumber || this.dataMap),
+            ],
+          },
+          // 刻度
+          {
+            type: "gauge",
+            // center: ["50%", "60%"],
+            name: "仪表盘",
+            radius: "100%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 5,
+            z: 2,
+            axisTick: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //刻度样式
+            splitLine: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //分隔线样式
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 12,
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            //仪表盘详情,用于显示数据。
+            detail: {
+              show: false,
+              offsetCenter: ["0", "0%"],
+              color: "#A2C7F3",
+              formatter: function (params) {
+                return params;
+              },
+              textStyle: {
+                fontSize: 16,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+          },
+        ],
+      });
+      }else{
+        echarts.init(this.$refs.echartD).setOption({
+        // backgroundColor: "none",
+        grid: {
+          // top: 0,
+          // bottom: 0,
+          // left: 0,
+          // right: 0,
+          // margi
+        },
+        series: [
+          // 进度条
+          {
+            name: "仪表盘",
+            type: "gauge",
+            radius: "80%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 10,
+            axisLine: {
+              lineStyle: {
+                color: [
+                  [this.dataMap, this.color],
+                  [1, "#111F42"],
+                ],
+                width: this.with,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            itemStyle: {
+              show: false,
+            },
+            detail: {
+              formatter:  (value) => {
+                return this.dataNumber ? this.dataNumber  :`${(value * 100).toFixed(0)}%`;
+              },
+              offsetCenter: [0, "0%"],
+              textStyle: {
+                //fontSize: this.size,
+                fontSize: this.size,
+                fontWeight: "700",
+                color:this.color, 
+                // color: "#FFF",
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+            title: {
+              offsetCenter: [0, "10%"],
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+                (this.dataNumber || this.dataMap),
+            ],
+          },
+          // 刻度
+          {
+            type: "gauge",
+            // center: ["50%", "60%"],
+            name: "仪表盘",
+            radius: "120%", // 半径
+            startAngle: 220, //开始角度 左侧角度
+            endAngle: -40, //结束角度 右侧
+            splitNumber: 5,
+            z: 2,
+            axisTick: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //刻度样式
+            splitLine: {
+              show: this.tick,
+              lineStyle: {
+                color: "#6B9DD7",
+                width: 3,
+              },
+              length: -1,
+            }, //分隔线样式
+            axisLabel: {
+              color: "rgba(255,255,255,0)",
+              fontSize: 12,
+            }, //刻度节点文字颜色
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            label: {
+              show: false,
+            },
+            //仪表盘详情,用于显示数据。
+            detail: {
+              show: false,
+              offsetCenter: ["0", "0%"],
+              color: "#A2C7F3",
+              formatter: function (params) {
+                return params;
+              },
+              textStyle: {
+                fontSize: 20,
+                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
+              },
+            },
+          },
+        ],
+      });
+      }
+      
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

+ 37 - 8
src/http/api.js

@@ -4,12 +4,12 @@ let api = {
 
     },
     fire: {
-        trendQuery: '/fireStatistics/fireCountByData',
-        fireBubble: '/fireStatistics/fireBubble',
-        fireType: '/fireStatistics/fireType',
-        fireAddress: '/fireStatistics/fireAddress',
-        fireCauseRatio: '/fireStatistics/fireCauseRatio',
-        fireStatistics: '/fireStatistics/page',
+        trendQuery: '/fireStatistics/fireCountByData', //火灾趋势图 ->统计
+        fireBubble: '/fireStatistics/fireBubble', //火灾气泡图
+        fireType: '/fireStatistics/fireType', //火灾趋势图 -> 火灾类型
+        fireAddress: '/fireStatistics/fireAddress', //火灾趋势图 -> 地址
+        fireCauseRatio: '/fireStatistics/fireCauseRatio', //火灾原因占比
+        fireStatistics: '/fireStatistics/page', //火灾详细情况
     },
     siaeall: {
         siAeAllCollect: '/siaeall/siAeAllCollect',
@@ -33,10 +33,39 @@ let api = {
         one: '/alert/one',
     },
     fireSite: {
-        page: '/fireSite/page',
-        one: '/fireSite/one',
+        // page: '/fireSite/page',
+        // one: '/fireSite/one',
         fireSiteDuty: '/fireSite/fireSiteDuty',
+
+        page: '/zskTeam/page', //执勤站点实力分页
+        list: '/wlClxx/list', //车辆信息整合
+        pageMap: '/xfzWxz/list', //撒点
+        one: '/xfzWxz/one' //详情
+
+
+    },
+    selfManagement: {
+        mapList: '/device/mapList', //撒点
+        collect: '/device/collect', //设备类型统计信息
+        collectOne: '/device/collectOne', //设备类型统计信息总量
+        
+        one: '/device/one', //查看设备详情 
+        elIco: '/deviceInfo/elIco', //电量 
+        // fireSiteDuty: '/fireSite/fireSiteDuty',
+    },
+    jqzhcz: {
+        house: '/jcjAjxx/alertStatisticsByHouse',
+        month: '/jcjAjxx/alertStatisticsByMonth',
+        page: '/jcjAjxx/page', //警情详细信息
+        pageMap: '/jcjAjxx/pageMap', //撒点
+        alertStatistics: '/jcjAjxx/alertStatistics', //不同警情
+        one: '/jcjAjxx/one', //警情详细信息
+    },
+    qyzz:{
+        lsaj: '/deviceAj/page',//历史案件
     }
+
+
 }
 
 // for (let key in api) {

+ 1 - 1
src/http/axios.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { ElMessage } from 'element-plus';
 if (process.env.NODE_ENV !== 'development') axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
-    // 请求拦截
+// 请求拦截
 axios.interceptors.request.use(config => {
     // 1. 这个位置是请求前最后的配置
     // 2. 当然你也可以在这个位置 加入你的后端需要的用户授权信息

+ 58 - 1
src/main.js

@@ -4,14 +4,71 @@ import router from './router'
 import store from './store'
 import querystring from 'querystring';
 import installElementPlus from './plugins/element'
+import jquery from 'jquery'
 import '@a/scss/common.scss'
 import '@a/font/index.scss'
 import '@a/js/flexible'
 import '@a/icon/iconfont.css'
-
 const app = createApp(App)
 installElementPlus(app)
 
+
+
+//使用Vue.directive()定义一个全局指令
+//1.参数一:指令的名称,定义时指令前面不需要写v-
+//2.参数二:是一个对象,该对象中有相关的操作函数
+//3.在调用的时候必须写v-
+app.directive('drag', {
+    //1.指令绑定到元素上回立刻执行bind函数,只执行一次
+    //2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js对象
+    //3.通过el.focus()是无法获取焦点的,因为只有插入DOM后才生效
+    bind: function(el) {
+        el.style.cursor = "move"; //鼠标样式变move样式
+    },
+    //inserted表示一个元素,插入到DOM中会执行inserted函数,只触发一次
+    inserted: function(el) {
+        el.onmousedown = function(e) {
+            console.log(121212)
+            var distX = e.pageX - el.offsetLeft;
+            var distY = e.pageY - el.offsetTop;
+            console.log("元素本身的高:" + el.clientHeight + ",元素本身的宽:" + el.clientWidth)
+
+            if (e.preventDefault) {
+                e.preventDefault();
+            } else {
+                e.returnValue = false;
+            }; //解决快速拖动滞后问题
+
+            document.onmousemove = function(e) {
+
+                // 用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
+                let left = e.clientX - distX;
+                let top = e.clientY - distY;
+
+                if (left <= 0) {
+                    left = 5; //设置成5是为了不离边缘太近
+                } else if (left > document.documentElement.clientWidth - el.clientWidth) {
+                    //document.documentElement.clientWidth 屏幕的可视宽度
+                    left = document.documentElement.clientWidth - el.clientWidth - 5
+                }
+                if (top <= 0) {
+                    top = 5;
+                } else if (top > document.documentElement.clientHeight - el.clientHeight) {
+                    top = document.documentElement.clientHeight - el.clientHeight - 5
+                }
+                el.style.left = left + 'px';
+                el.style.top = top + 'px';
+            }
+            document.onmouseup = function() {
+                document.onmousemove = document.onmouseup = null;
+            }
+        }
+    },
+    //当VNode更新的时候会执行updated,可以触发多次
+    updated: function(el) {}
+})
+
+
 import api from './http/api';
 import http from './http/http';
 import './http/axios';

+ 6 - 2
src/router/home.js

@@ -1,5 +1,8 @@
 // let isProd = process.env.NODE_ENV === 'production';
-export default [{
+export default [
+
+    
+{
     path: '/',
     name: 'Home',
     component: () =>
@@ -7,7 +10,8 @@ export default [{
     meta: {
         title: '主页'
     }
-}, {
+}, 
+{
     path: '/enforcement-dynamic',
     name: 'enforcement-dynamic',
     component: () =>

+ 2 - 2
src/router/index.js

@@ -13,9 +13,9 @@ const routes = [
 ]
 console.log(process.env.NODE_ENV)
 const router = createRouter({
-    history: process.env.NODE_ENV === 'production' ? createWebHistory(process.env.BASE_URL) : createWebHashHistory(process.env.BASE_URL),
+    history: process.env.NODE_ENV === 'production' ? createWebHashHistory(process.env.BASE_URL) : createWebHashHistory(process.env.BASE_URL),
     // history: createWebHistory(process.env.BASE_URL),
-    base: '/',
+    base: '/vmh',
     routes
 })
 

+ 3 - 0
src/store/getters.js

@@ -0,0 +1,3 @@
+const getters = {
+
+}

+ 32 - 1
src/store/index.js

@@ -1,12 +1,15 @@
 import { createStore } from 'vuex'
-
+// import getters from './store/getters'
 const debug = process.env.NODE_ENV !== 'production'
 export default createStore({
     state: {
+        qyzz: undefined, //企业自主弹框按钮参数
+        qyzzId: undefined,
         routeInfo: null,
         resizeTime: true,
         windowWidth: 0,
         typeTime: null,
+        ajxq2nr:{},
         timeList: [
             new Date().getFullYear() + '-' + (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : '' + (new Date().getMonth() + 1)) + '-' + (new Date().getDate() < 10 ? '0' + (new Date().getDate()) : new Date().getDate()) + ' 00:00:00',
             new Date().getFullYear() + '-' + (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : '' + (new Date().getMonth() + 1)) + '-' + (new Date().getDate() < 10 ? '0' + (new Date().getDate()) : new Date().getDate()) + ' 23:59:59',
@@ -460,10 +463,38 @@ export default createStore({
                 state.typeTime = null
             }
         },
+        qyzz(state, context) {
+            state.qyzz = context
+        },
+        qyzzId(state, context) {
+            state.qyzzId = context
+        },
+        ajxq2nr(state, context) {
+            
+            state.ajxq2nr = context
+            console.log(state.ajxq2nr)
+        },
     },
     actions: {
 
     },
     modules: {},
+    getters: {
+        qyzz: state => { //通过方法访问
+            console.log(state.qyzz)
+            return state.qyzz
+        },
+        qyzzid: state => { //通过方法访问
+            console.log(state.qyzzId)
+            return state.qyzzId
+        },
+        ajxq2nr: state => { //通过方法访问
+            console.log(state.ajxq2nr)
+            return state.ajxq2nr
+        },
+        // doneTodosCount: (state, getters) => {//通过属性访问
+        // 	return getters.doneTodos.length
+        // }
+    },
     strict: debug
 })

+ 396 - 11
src/views/Home.vue

@@ -142,21 +142,21 @@
             <el-row>
               <el-row class="rightTopTitle"><span>火灾</span></el-row>
               <el-row class="rightTopChart">
-                <gauge ref="gauge1" :dataMap="0.2" :dataNumber="20" size="30" with="15" :tick="false" color="#468EFD"></gauge>
+                <gauge3 ref="gauge1" :dataMap="0.2" :dataNumber="20" size="30" with="15" :tick="false" color="#468EFD"></gauge3>
               </el-row>
               <el-row class="rightTopNumber"><span>同比:14% <span style="color:green;font-wight:800">↓</span></span></el-row>
             </el-row>
             <el-row>
               <el-row class="rightTopTitle"><span>社会救助</span></el-row>
               <el-row class="rightTopChart">
-                <gauge ref="gauge2" :dataMap="0.3" :dataNumber="30" size="30" with="15" :tick="false" color="#06B1B9"></gauge>
+                <gauge3 ref="gauge2" :dataMap="0.3" :dataNumber="30" size="30" with="15" :tick="false" color="#06B1B9"></gauge3>
               </el-row>
               <el-row class="rightTopNumber"><span>同比:14% <span style="color:green">↓</span></span></el-row>
             </el-row>
             <el-row>
               <el-row class="rightTopTitle"><span>抢险救援</span></el-row>
               <el-row class="rightTopChart">
-                <gauge ref="gauge3" :dataMap="0.5"  :dataNumber="50" size="30" with="15" :tick="false" color="#E4951E"></gauge>
+                <gauge3 ref="gauge3" :dataMap="0.5"  :dataNumber="50" size="30" with="15" :tick="false" color="#E4951E"></gauge3>
               </el-row>
               <el-row class="rightTopNumber"><span>同比:14% <span style="color:red">↑</span></span></el-row>
             </el-row>
@@ -171,9 +171,9 @@ import linstener from "@c/mixins/linstener";
 import radarChart from "@c/radar";
 import wordCloud from "@c/wordCloud";
 import categoryLine from "@c/category-line";
-import gauge from "@c/gauge";
+import gauge3 from "@c/gauge/index3";
 export default {
-  components: { gauge, radarChart, wordCloud, categoryLine },
+  components: { gauge3, radarChart, wordCloud, categoryLine },
   data() {
     return {
       timeData: [],
@@ -326,12 +326,15 @@ $centerCirWidth: 330px;
     position: relative;
     padding: 0.5rem 0.3125rem 0.25rem;
     box-sizing: border-box;
-    background: url("~@a/img/home/box-bg.png") no-repeat;
-    background-size: 100% 100%;
+    background: url("~@a/img/home/box-bg_02.png") no-repeat  0px 22px;
+    background-size: 100% calc(100% - 22px);
     flex: 1;
     margin-top: 10px;
     h4 {
-      font-size: 0.2125rem;
+      background: url("~@a/img/home/box-bg_01.png") no-repeat 0px 1px;
+      background-size: 100% 100%;
+      font-size: 0.2rem;
+      // font-size: 0.2125rem;
       position: absolute;
       left: 0;
       right: 0;
@@ -404,7 +407,7 @@ $centerCirWidth: 330px;
       color: #fff;
       & > .el-col {
         width: 32%;
-        height: 32%;
+        height: 30%;
         flex: none;
         // background: url(~@a/img/enforce/bg3.png) no-repeat;
         box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
@@ -412,7 +415,7 @@ $centerCirWidth: 330px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        padding: 0.125rem;
+        padding: 0.11rem 0.125rem 0.12rem;
         box-sizing: border-box;
         border-radius: 0.125rem;
         & > .el-col {
@@ -424,6 +427,7 @@ $centerCirWidth: 330px;
         .leftTopTitle {
           font-size: 0.2rem;
         }
+        
         .leftTopCenter {
           font-size: 0.3rem;
           color: #fcbb0b;
@@ -462,7 +466,8 @@ $centerCirWidth: 330px;
   }
   .rightTopBox {
     margin: 0;
-    min-height: 3.75rem;
+    //min-height: 3.75rem;
+    height: 2rem;//大屏
     .propSituation {
       height: 100%;
       width: 100%;
@@ -594,6 +599,7 @@ $centerCirWidth: 330px;
       }
     }
   }
+  
 }
 
 .photo_box {
@@ -659,4 +665,383 @@ $centerCirWidth: 330px;
     transform: rotateX(-9deg) rotateY(360deg);
   }
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@media screen and (min-width: 1940px) and (max-width:4000px){
+  $centerWidth: 10rem;
+  $centerCirWidth: 330px;
+.home {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  display: flex;
+  & > .el-col {
+    max-width: 7rem;
+  }
+  .titleLift {
+    margin: 0 auto;
+    width: 4.775rem;
+    height: 0.425rem;
+  }
+  .flexJ {
+    position: relative;
+    padding: 0.2rem 0.3125rem 0.2rem;
+    box-sizing: border-box;
+    background: url("~@a/img/home/box-bg_02.png") no-repeat  0px 26px;
+    background-size: 100% calc(100% - 60px);
+    flex: 1;
+    margin-top: 10px;
+    h4 {
+      background: url("~@a/img/home/box-bg_01.png") no-repeat 0px 1px;
+      background-size: 100% 100%;
+      font-size: 0.2rem;
+      // font-size: 0.2125rem;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      margin: 0 auto;
+      text-align: center;
+      color: #00ffff;
+    }
+
+    /deep/ .transparentTableRow {
+      border-radius: 0.125rem;
+    }
+  }
+  .echartsPad {
+    padding: 0.1rem 0.25rem 0.1rem;
+    height: 30%;
+    margin-top:-0.1rem;
+    color: #FFF;
+    .rightBoxCon {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      & > .el-row {
+        flex: none;
+        width: 33.33%;
+        display: flex;
+        flex-direction: column;
+      }
+      .rightTopTitle {
+        span {
+          font-size: 0.12rem;
+          text-align: center;
+        }
+        justify-content: center;
+      }
+      .rightTopNumber {
+        justify-content: center;
+        &>span {
+          margin: 0 auto;
+          padding: .0625rem .125rem;
+          font-size: 0.2125rem;
+          border-radius: .15rem;
+          box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        }
+      }
+        
+        .rightTopNumber {
+         
+          &>span {
+           
+            font-size: 0.12rem;
+            padding:4px 20px;
+            
+          }
+        }
+      .rightTopChart {
+        // height: 1.5rem;
+        flex: 1;
+        margin:-0.1rem 0 -0.14rem;
+      }
+    }
+  }
+  .boxConentSize {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    padding: 0 0.25rem;
+    box-sizing: border-box;
+    height: 104%;
+  }
+  .leftTopBox {
+    margin: 0;
+    min-height: 40% !important;
+    
+    font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+    .leftTopContent {
+      width: 100%;
+      height: 85%;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      overflow-y:scroll;
+      padding:0 0 0.1rem;
+      color: #fff;
+      & > .el-col {
+        width: 32%;
+        height: 50%;
+        margin-top:.1rem;
+        flex: none;
+        // background: url(~@a/img/enforce/bg3.png) no-repeat;
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background-size: 100% 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 0.18rem 0.125rem 0.12rem;
+        box-sizing: border-box;
+        border-radius: 0.125rem;
+        & > .el-col {
+          display: flex;
+          justify-content: center;
+          flex: none;
+          align-items: center;
+        }
+        .leftTopTitle {
+          font-size: 0.12rem;
+          margin-top:-0.1rem;
+        }
+        
+        .leftTopCenter {
+          font-size: 0.12rem;
+          color: #fcbb0b;
+        }
+        .leftTopBot {
+          font-size: 0.12rem;
+          justify-content: space-between;
+          align-items: center;
+          & > .el-col {
+            flex: none;
+            display: flex;
+            align-items: center;
+            .el-col {
+              flex: none;
+            }
+          }
+          & > .el-col:first-child {
+            & > .el-col:last-child {
+              color: red;
+              margin-left: 0.0625rem;
+            }
+          }
+          & > .el-col:last-child {
+            & > .el-col:last-child {
+              color: green;
+              margin-left: 0.0625rem;
+            }
+          }
+        }
+        
+          .leftTopTitle {
+            font-size: 0.12rem;
+          }
+          .leftTopCenter {
+            font-size: 0.16rem;
+            color: #fcbb0b;
+          }
+          .leftTopBot {
+            font-size: 0.12rem;
+          }
+        }
+        &:last-child {
+          background: none;
+          box-shadow: none;
+        }
+      
+      
+        .leftTopContent {
+          & > .el-col {
+            height: 28%;
+          }
+        }
+      
+    }
+  }
+  .rightTopBox {
+    margin: 0;
+    //min-height: 3.75rem;
+    height: 2rem;//大屏
+    .propSituation {
+      height: 100%;
+      width: 100%;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: 0.125rem;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-width: none;
+      /* firefox */
+      -ms-overflow-style: none;
+      /* IE 10+ */
+      overflow-x: hidden;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        display: none;
+        // opacity: 0;
+        /* Chrome Safari */
+      }
+      & > .el-col {
+        width: 32%;
+        height: 48%;
+        max-height: 48%;
+        border-radius: .0625rem;
+        margin: 0.0375rem calc(4% / 6);
+        padding: 0.125rem;
+        flex: none;
+        box-shadow: inset 0 0 0.4375rem 0.0625rem #30cfff;
+        display: flex;
+        flex-direction: column;
+        font-size: 0.2rem;
+        color: #dbe9ea;
+        font-weight: 400;
+        // font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+        .el-col {
+          flex: none;
+          overflow: hidden;
+        }
+        .rank {
+          // padding: 0.125rem 0;
+          text-align: center;
+          box-sizing: border-box;
+        }
+        .propName {
+          // padding: 0.125rem 0;
+          text-align: center;
+          box-sizing: border-box;
+        }
+        & .el-col:nth-child(1) {
+          flex: 1;
+          img {
+            // width: 100%;
+            height: 100%;
+            // objec-fit: cover;
+            margin: 0 auto;
+            display: block;
+          }
+        }
+      }
+    }
+  }
+  .fireContent {
+    width: 100%;
+    height: 100%;
+    display: block;
+    .selectBar {
+      width: 100%;
+      display: flex;
+      max-height: 0.375rem;
+      justify-content: space-between;
+      .el-form-item {
+        margin-bottom: 0;
+      }
+      .el-row {
+        display: flex;
+        .el-button {
+          // width: 0.375rem;
+          height: 0.325rem;
+          min-height: auto;
+          padding: 0 0.0625rem;
+          margin-right: 0.075rem;
+          margin-left: 0;
+          background: #000707;
+          color: #fff;
+          border: 1px solid;
+          box-sizing: border-box;
+          border-radius: 0.0375rem;
+          font-size: 0.15rem;
+          border-image: linear-gradient(0deg, #0461c2 0%, #0ecdf1 100%) 1 1;
+        }
+        .btnClick {
+          color: #fccf2a;
+          border-image: linear-gradient(0deg, #ff6800 0%, #fccf2a 100%) 1 1;
+        }
+      }
+    }
+    .fireBar {
+      height: calc(100% - 0.375rem);
+    }
+  }
+  .boxCenter {
+    width: $centerWidth;
+    max-width: $centerWidth;
+    box-sizing: border-box;
+    display: flex;
+    flex: auto;
+    align-items: center;
+    &>.el-row{
+      width: 100%;
+      height: 9.5rem;
+      position: relative;
+      .centerTop {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 1.0625rem;
+        margin: 0px auto;
+        width: 9.5rem;
+        z-index: 9;
+      }
+      .centerBot {
+        height: 1.875rem;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background: url("~@a/img/home/cir.png") no-repeat;
+        background-size: 100% 100%;
+        flex: initial;
+      }
+    }
+  }
+  
+    
+  
+  
+}
+
+.photo_box {
+  width: 0.875rem;
+  position: absolute;
+  left: -0.25rem;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  margin: 0px auto;
+  transform-style: preserve-3d; /*表示所有子元素在3D空间中呈现*/
+  animation: run 40s linear infinite; /*循环执行run动画,每30秒执行一次*/
+  transform: rotateX(-9deg);
+  &:hover {
+    animation-play-state: paused;
+  }
+  /*设置图像大小、边框、圆角、位置*/
+  img {
+    width: 0.75rem;
+    height: 1.125rem;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
+
+}
 </style>

+ 1518 - 0
src/views/Home2.vue

@@ -0,0 +1,1518 @@
+<template>
+  <el-row class="contentBox">
+    <transition name="el-fade-in-linear">
+      <el-col class="leftBox" v-show="leftBtn">
+        <el-col class="flexJ leftTop">
+          <h4>警情时段分布</h4>
+          <el-row class="leftTopContent">
+            <el-row class="selectBar">
+              <el-form :inline="true" size="mini" :model="barForm">
+                <el-form-item label="场所分类">
+                  <!-- <el-select v-model="barForm.fireType" @change="getHouse()" filterable clearable placeholder="场所" > -->
+                  <el-select v-model="barForm.fireType" @change="getHouse()" filterable clearable placeholder="场所" >
+                    <el-option :label="item" :value="item" v-for="(item,ind) in fireTypeList" :key="ind"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-form>
+            </el-row>
+            <el-row class="fireBar">
+              <line-smooth ref="lineSmooth" :dataMap="houseList"></line-smooth>
+            </el-row>
+          </el-row>
+        </el-col>
+        <el-col class="flexJ leftBot">
+          <h4>历史警情趋势图</h4>
+          <el-row class="leftBotContent">
+            <el-row class="selectBar">
+               <el-row>
+                <el-button size="mini" @click="searchTime(1)" :class="{ btnClick: timeArea === 1 }">近一年</el-button>
+                <el-button size="mini" @click="searchTime(3)" :class="{ btnClick: timeArea === 3 }">近三年</el-button>
+                <el-button size="mini" @click="searchTime(5)" :class="{ btnClick: timeArea === 5 }">近五年</el-button>
+              </el-row>
+            </el-row>
+            <el-row class="fireBar">
+              <bar-chart ref="barChart" :dataMap="monthList"></bar-chart>
+            </el-row>
+          </el-row>
+        </el-col>
+        
+      </el-col>
+    </transition>
+    <transition name="el-fade-in-linear">
+      <el-col class="centerBox" :style="{'max-width':leftBtn && rightBtn ? '8rem' :!leftBtn &&  !rightBtn ? '100%' : leftBtn ||  rightBtn ? '16rem' : '8rem'}">
+        <el-row class="leftBtn btnW" @click="leftBtnClick()">
+          <i :class="leftBtn ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
+        </el-row>
+        <el-row class="centerContent" id="mapF"></el-row>
+        
+        <el-row class="rightBtn btnW" @click="rightBtnClick()">
+          <i :class="rightBtn ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
+        </el-row>
+        <el-row class="mapTips">
+          <el-checkbox-group v-model="checkList" class="yxj">
+            <el-checkbox label="全选"></el-checkbox>
+            <el-checkbox label="实时警情"></el-checkbox>
+            <el-checkbox label="重点单位"></el-checkbox>
+            <el-checkbox label="消防站"></el-checkbox>
+            <el-checkbox label="消防车"></el-checkbox>
+            <el-checkbox label="微型消防车"></el-checkbox>
+            <el-checkbox label="实景监控视频"></el-checkbox>
+          </el-checkbox-group>
+        </el-row>
+      </el-col>
+    </transition>
+    <transition name="el-fade-in-linear">
+      <el-col class="rightBox" v-show="rightBtn">
+        <el-col class="flexJ rightTop">
+          <h4>警情处置情况</h4>
+          <div class="rightBoxCon">
+            <el-row>
+              <el-row class="rightTopTitle"><span>火灾</span></el-row>
+              <el-row class="rightTopChart">
+                <gauge ref="gauge1" :dataMap="proptionList.find(val=>val.type === '火灾') && proptionList.find(val=>val.type === '火灾').number/(proptionList.find(val=>val.type === '火灾').number + proptionList.find(val=>val.type === '社会救助').number + proptionList.find(val=>val.type === '抢险救援').number) || 0" :dataNumber="proptionList.find(val=>val.type === '火灾') && proptionList.find(val=>val.type === '火灾').number || 0" color="#468EFD"></gauge>
+              </el-row>
+              <el-row class="rightTopNumber">
+                <span>
+                  同比:{{proptionList.find(val=>val.type === '火灾') && (proptionList.find(val=>val.type === '火灾').radio * 100).toFixed(2) || 0}}%
+                  <span :style="{color: proptionList.find(val=>val.type === '火灾') && proptionList.find(val=>val.type === '火灾').sameStatus === 2 ? 'green' : 'red'}">
+                    <i class="iconfont" v-if="proptionList.find(val=>val.type === '火灾')"
+                    :class="proptionList.find(val=>val.type === '火灾').sameStatus === 1 ? 'icon-arrowTop-fill' : proptionList.find(val=>val.type === '火灾').sameStatus === 2 ? 'icon-xiajiantou-' : ''"></i>
+                  </span>
+                </span>
+              </el-row>
+            </el-row>
+            <el-row>
+              <el-row class="rightTopTitle"><span>社会救助</span></el-row>
+              <el-row class="rightTopChart">
+                <gauge ref="gauge2" :dataMap="proptionList.find(val=>val.type === '社会救助') && proptionList.find(val=>val.type === '社会救助').number/(proptionList.find(val=>val.type === '火灾').number + proptionList.find(val=>val.type === '社会救助').number + proptionList.find(val=>val.type === '抢险救援').number) || 0" :dataNumber="proptionList.find(val=>val.type === '社会救助') && proptionList.find(val=>val.type === '社会救助').number || 0" color="#06B1B9"></gauge>
+              </el-row>
+              <el-row class="rightTopNumber">
+                <span>
+                  同比:{{proptionList.find(val=>val.type === '社会救助') && (proptionList.find(val=>val.type === '社会救助').radio * 100).toFixed(2) || 0}}%
+                  <span :style="{color: proptionList.find(val=>val.type === '社会救助') && proptionList.find(val=>val.type === '社会救助').sameStatus === 2 ? 'green' : 'red'}">
+                    <i class="iconfont" v-if="proptionList.find(val=>val.type === '社会救助')"
+                    :class="proptionList.find(val=>val.type === '社会救助').sameStatus === 1 ? 'icon-arrowTop-fill' : proptionList.find(val=>val.type === '社会救助').sameStatus === 2 ? 'icon-xiajiantou-' : ''"></i>
+                  </span>
+                </span>
+              </el-row>
+            </el-row>
+            <el-row>
+              <el-row class="rightTopTitle"><span>抢险救援</span></el-row>
+              <el-row class="rightTopChart">
+                <gauge ref="gauge3" :dataMap="proptionList.find(val=>val.type === '抢险救援') && proptionList.find(val=>val.type === '抢险救援').number/ (proptionList.find(val=>val.type === '火灾').number + proptionList.find(val=>val.type === '社会救助').number + proptionList.find(val=>val.type === '抢险救援').number) || 0" :dataNumber="proptionList.find(val=>val.type === '抢险救援') && proptionList.find(val=>val.type === '抢险救援').number || 0" color="#E4951E"></gauge>
+              </el-row>
+              <el-row class="rightTopNumber">
+                <span>
+                  同比:{{proptionList.find(val=>val.type === '抢险救援') && (proptionList.find(val=>val.type === '抢险救援').radio * 100).toFixed(2) || 0}}%
+                  <span :style="{color: proptionList.find(val=>val.type === '抢险救援') && proptionList.find(val=>val.type === '抢险救援').sameStatus === 2 ? 'green' : 'red'}">
+                    <i class="iconfont" v-if="proptionList.find(val=>val.type === '抢险救援')"
+                    :class="proptionList.find(val=>val.type === '抢险救援').sameStatus === 1 ? 'icon-arrowTop-fill' : proptionList.find(val=>val.type === '抢险救援').sameStatus === 2 ? 'icon-xiajiantou-' : ''"></i>
+                    </span>
+                </span>
+              </el-row>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col class="flexJ rightBot">
+          <h4>实时警情处理</h4>
+          <el-table
+             header-cell-style="height:0.2rem"
+            :data="tableData"
+            class="transparentTableRow"
+            height="100%"
+            row-style="height:.25rem;"
+            cell-style="height:.25rem;box-sizing: border-box;"
+            style="width: 100%; margin: 0 auto"
+            @row-click="rowClickMap"
+            
+          >
+            <el-table-column
+              show-overflow-tooltip
+              v-for="item in headerData"
+              :key="item.prop"
+              :prop="item.prop"
+              align="center"
+              min-width="11%"
+              :label="item.name"
+            >
+            <!-- { prop: "type", name: "类型" },
+        { prop: "lasj", name: "立案时间" },
+        { prop: "ajdj", name: "警情等级" },
+        { prop: "afdz", name: "案发地址" },
+        { prop: "cdcl", name: "调动车辆" },
+        { prop: "bcxx", name: "原因" },
+        { prop: "czdx", name: "处置对象" },
+        { prop: "zhongdui", name: "所属中队" },
+        { prop: "ajzt", name: "状况" }, -->
+            
+              <template  
+              v-if="item.prop === 'type' || 
+              item.prop === 'lasj'  || 
+              item.prop === 'ajdj'  || 
+              item.prop === 'afdz'  || 
+              item.prop === 'cdcl'  || 
+              item.prop === 'bcxx'  || 
+              item.prop === 'czdx'  || 
+              item.prop === 'zhongdui' ||
+              item.prop === 'ajzt'" #default="scope">
+                <el-tooltip placement="left">
+                  <template #content>
+                    <div class="tableTooltip">
+                      <div class="tableTitle">
+                        <div>执勤力量</div>
+                      </div>
+                      <el-row class="tableContent">
+                        <el-col :span="20">案件编号:{{scope.row.ajbh}}</el-col>
+                        <el-col :span="4" class="tipdan">原始工单</el-col>
+                        <el-col :span="24">发现时间:{{scope.row.tzsj}}</el-col>
+
+                        <el-col :span="24">案件类型:{{scope.row.ajlx}}</el-col>
+                        <el-col :span="12">所属街道:{{scope.row.streettown}}</el-col>
+                        <el-col :span="12">处置网格:</el-col>
+                        <el-col :span="24">发生地址:{{scope.row.afdz}}</el-col>
+                        <el-col :span="24">案件描述:{{scope.row.gisX}}</el-col>
+                        <el-col :span="12">主责部门:{{scope.row.zhongdui}}</el-col>
+                        
+                        <el-col :span="24">案件类型:{{scope.row.ajlx}}</el-col>
+                        <el-col :span="12">所属街道:{{scope.row.streettown}}</el-col>
+                        <el-col :span="12">处置网格:</el-col>
+                        <el-col :span="24">发生地址:{{scope.row.afdz}}</el-col>
+                        <el-col :span="24">案件描述:{{scope.row.gisX}}</el-col>
+                        <el-col :span="12">主责部门:{{scope.row.zhongdui}}</el-col>
+                        <el-col :span="12">案件状态:{{scope.row.ajzt}}</el-col>
+                        <el-col :span="12">处置截止:{{scope.row.tssj}}</el-col>
+                        <el-col :span="12">附件:{{scope.row.jlzt}}</el-col>
+                        <el-col :span="24">案件渠道来源:{{scope.row.jlzt}}</el-col>
+                      </el-row>
+                      <!-- <el-row class="liucheng">
+                          <el-col :span="6">
+                            <img src="~@a/img/icon/lc1.png" alt="" />
+                            <div class="jz">立案</div>
+                          </el-col>
+                          <el-col :span="6">
+                            <img src="~@a/img/icon/lc2.png" alt="" />
+                            <div class="jz">派遣</div>
+                          </el-col>
+                          <el-col :span="6">
+                            <img src="~@a/img/icon/lc3.png" alt="" />
+                            <div class="jz">处置</div>
+                          </el-col>
+                          <el-col :span="6">
+                            <img src="~@a/img/icon/lc4.png" alt="" />
+                            <div class="jz">结案</div>
+                          </el-col>
+                      </el-row> -->
+                      <el-row class="tablePersonnel">
+                        <el-col :span="7">
+                          <!-- <img src="~@a/img/test/bg1.png" alt="" /> -->
+                          <!-- <div>{{scope.row.commander}}</div>
+                          <div>指挥员</div> -->
+                        </el-col>
+                        <!-- <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.correspondent}}</div>
+                          <div>通讯员</div>
+                        </el-col>
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.firemen}}</div>
+                          <div>消防员</div>
+                        </el-col>
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.driver}}</div>
+                          <div>驾驶员</div>
+                        </el-col> -->
+                      </el-row>
+                    </div>
+                  </template>
+                  <template>
+                    <i class="iconfont" 
+                    :class="{
+                      'icon-icon-test' : scope.row['ajlxdm'] == 1,
+                      'icon-jiuyuan': scope.row['ajlxdm'] == 2,
+                      'icon-minzhengtubiao1-08':scope.row['ajlxdm'] == 3,
+                    }"
+                    :style="{color: scope.row['ajdj'] == '零级' ? 'green' : scope.row['ajdj'] == '一级' ? '#eec10d' : scope.row['ajdj'] == '二级' ? '#ff730c' : scope.row['ajdj'] == '三级' ? '#ff0012' : '#2e98f2'}"
+                     v-if="item.prop === 'type'"></i>
+                    <div class="name-wrapper" v-else>{{ scope.row[item.prop] }}</div>
+                  </template>
+                </el-tooltip>
+              </template>
+              <template v-else #default="scope">
+                  {{ item.prop === 'type' ? '' : item.prop === 'lasj' ? scope.row[item.prop] && scope.row[item.prop].slice(5) :  item.prop === 'afdz' ? scope.row[item.prop].replace(new RegExp("闵行区 ",""),"") : item.prop === 'status' ? (scope.row[item.prop] == 1 ? '可用' : '不可用') : scope.row[item.prop]}}
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-card class="box-card" v-if="isVideo">
+          <template #header>
+            <div class="card-header">
+              <span>实时视频</span>
+              <i class="el-icon-close" @click="isVideo = false"></i>
+            </div>
+          </template>
+          <!-- <img src="~@a/img/test/car.png" alt=""> -->
+          <!-- controls -->
+          <video src="~@a/img/test/card.mp4" class="videoBox" autoplay height="auto"></video>
+          <!-- <video-player class="video-player vjs-custom-skin"
+            ref="videoPlayer"
+            :playsinline="true"
+            :options="playerOptions">
+          </video-player> -->
+          </el-card>
+        </el-col>
+        <el-col class="flexJ rightBot2">
+          <h4>历史案件</h4>
+          <!-- <el-col class="shui">
+            <el-col class="title">
+              水系统检测设备(300)
+            </el-col>
+            <el-col class="title1">
+              上线率:99%
+            </el-col>
+            <el-col class="title2">
+              接单率:99%
+            </el-col>
+            <el-col class="title3">
+              处置率:99%
+            </el-col>
+          </el-col> -->
+          <el-table
+            header-cell-style="height:0.2rem"
+            :data="tableData2"
+            class="transparentTableRow"
+            height="120%"
+            row-style="height:.25rem;"
+            cell-style="height:.25rem;box-sizing: border-box;"
+            style="width: 100%; margin: 0 auto"
+            @row-click="rowClickMap"
+          >
+            <el-table-column
+              show-overflow-tooltip
+              v-for="item in headerData2"
+              :key="item.prop"
+              :prop="item.prop"
+              align="center"
+              
+              :label="item.name"
+            >
+              
+              <template v-if="item.prop === 'type'" #default="scope">
+                <el-tooltip placement="left">
+                  <template #content>
+                    <div class="tableTooltip">
+                      <div class="tableTitle">
+                        <div>案件详情</div>
+                      </div>
+                      <el-row class="tableContent">
+                        <el-col :span="24">案件编号:{{scope.row.ajbh}}</el-col>
+                        <el-col :span="24">发现时间:{{scope.row.tzsj}}</el-col>
+
+                        <el-col :span="12">到场状态:{{scope.row.ajzt}}</el-col>
+
+
+                        <el-col :span="24"  v-if="scope.row.cssj">出水时间:{{scope.row.cssj}}</el-col>
+                        <el-col :span="24"  v-if="scope.row.kzsj">控制时间:{{scope.row.kzsj}}</el-col>
+                        <el-col :span="24"  v-if="scope.row.xmsj">熄灭时间:{{scope.row.xmsj}}</el-col>
+                        <el-col :span="24"  v-if="scope.row.fdsj">反队时间:{{scope.row.fdsj}}</el-col>
+
+                        <el-col :span="24">案件类型:{{scope.row.ajlx}}</el-col>
+                        <el-col :span="12">所属街道:{{scope.row.streettown}}</el-col>
+                        <el-col :span="12">处置网格:</el-col>
+                        <el-col :span="24">发生地址:{{scope.row.afdz}}</el-col>
+                        <el-col :span="24">案件描述:{{scope.row.gisX}}</el-col>
+                        <el-col :span="12">主责部门:{{scope.row.zhongdui}}</el-col>
+                        
+
+                        <el-col :span="12">处置截止:{{scope.row.tssj}}</el-col>
+                        <el-col :span="12">附件:{{scope.row.jlzt}}</el-col>
+                        <el-col :span="24">案件渠道来源:{{scope.row.jlzt}}</el-col>
+                        <el-col :span="10" @click="isVideo = true" style="color:#0ADAFF;text-decoration: underline;cursor: pointer;">实时视频</el-col>
+                      </el-row>
+                      <el-row class="tablePersonnel">
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.commander}}</div>
+                          <div>指挥员</div>
+                        </el-col>
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.correspondent}}</div>
+                          <div>通讯员</div>
+                        </el-col>
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.firemen}}</div>
+                          <div>消防员</div>
+                        </el-col>
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.driver}}</div>
+                          <div>驾驶员</div>
+                        </el-col>
+                      </el-row>
+                    </div>
+                  </template>
+                  <template>
+                    <i class="iconfont" 
+                    :class="{
+                      'icon-icon-test' : scope.row['ajlxdm'] == 1,
+                      'icon-jiuyuan': scope.row['ajlxdm'] == 2,
+                      'icon-minzhengtubiao1-08':scope.row['ajlxdm'] == 3,
+                    }"
+                    :style="{color: scope.row['ajdj'] == '零级' ? 'green' : scope.row['ajdj'] == '一级' ? '#eec10d' : scope.row['ajdj'] == '二级' ? '#ff730c' : scope.row['ajdj'] == '三级' ? '#ff0012' : '#2e98f2'}"
+                     v-if="item.prop === 'type'"></i>
+                    <div class="name-wrapper" v-else>{{ scope.row[item.prop] }}</div>
+                  </template>
+                </el-tooltip>
+              </template>
+              <template v-else #default="scope">
+                  {{ item.prop === 'type' ? '' : item.prop === 'lasj' ? scope.row[item.prop] && scope.row[item.prop].slice(5) :  item.prop === 'afdz' ? scope.row[item.prop].replace(new RegExp("闵行区 ",""),"") : item.prop === 'status' ? (scope.row[item.prop] == 1 ? '可用' : '不可用') : scope.row[item.prop]}}
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-card class="box-card" v-if="isVideo">
+          <template #header>
+            <div class="card-header">
+              <span>实时视频</span>
+              <i class="el-icon-close" @click="isVideo = false"></i>
+            </div>
+          </template>
+          <!-- <img src="~@a/img/test/car.png" alt=""> -->
+          <!-- controls -->
+          <video src="~@a/img/test/card.mp4" class="videoBox" autoplay height="auto"></video>
+          <!-- <video-player class="video-player vjs-custom-skin"
+            ref="videoPlayer"
+            :playsinline="true"
+            :options="playerOptions">
+          </video-player> -->
+          </el-card>
+        </el-col>
+      </el-col>
+    </transition>
+  </el-row>
+</template>
+
+<script>
+import barChart from "@c/bar";
+import lineSmooth from "@c/line-smooth";
+import gauge from "@c/gauge/indexcom";
+import linstener from "@c/mixins/linstener";
+import map from "@c/mixins/map-data";
+//import map from "@c/mixins/map-gaodecom";
+
+
+export default {
+  data() {
+    return {
+      checkList:[],
+      tableData: [],
+      headerData: [
+        { prop: "type", name: "类型" },
+        { prop: "lasj", name: "立案时间" },
+        { prop: "ajdj", name: "警情等级" },
+        { prop: "afdz", name: "案发地址" },
+        { prop: "cdcl", name: "调动车辆" },
+        { prop: "bcxx", name: "原因" },
+        { prop: "czdx", name: "处置对象" },
+        { prop: "zhongdui", name: "所属中队" },
+        // { prop: "ajzt", name: "状况" },
+        { prop: "ajzt", name: "视频" },
+      ],
+      tableData2: [],
+      headerData2: [
+
+        { prop: "ajbh", name: "案件编号" },
+        { prop: "tzsj", name: "发现时间" },
+        { prop: "ajxz", name: "案发性质" },
+        { prop: "streettown", name: "所属街道" },
+        { prop: "ajzt", name: "案件状态" },
+      ],
+      isVideo:false,
+      playerOptions: {
+          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+          autoplay: false, //如果true,浏览器准备好时开始回放。
+          muted: false, // 默认情况下将会消除任何音频。
+          loop: false, // 导致视频一结束就重新开始。
+          preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
+          language: "zh-CN",
+          aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
+          fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
+          sources: [{
+              type: "video/mp4",
+              src: require("../assets/img/test/card.mp4"), //视频url地址
+          }, ],
+          poster: require("../assets/img/test/car.png"), //你的封面地址
+          // width: document.documentElement.clientWidth,
+          notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+          controlBar: {
+              timeDivider: true,
+              durationDisplay: true,
+              remainingTimeDisplay: false,
+              fullscreenToggle: true, //全屏按钮
+          },
+      },
+      barForm: {
+        fireType: "",
+        address: "",
+      },
+      monthList:[],
+      houseList:[],
+      proptionList:[],
+      proptionMapList:[],
+      timeArea: 1,
+    };
+  },
+  mixins: [linstener,map],
+  components: { barChart, lineSmooth, gauge},
+  created() {
+    this.getData();
+  },
+  mounted() {
+    window.addEventListener(
+      "resize",
+      () =>
+        this.resizeTimeActions([
+          this.$refs.gauge1,
+          this.$refs.gauge2,
+          this.$refs.gauge3,
+          this.$refs.lineSmooth,
+          this.$refs.barChart,
+        ]),
+      true
+    );
+    this.initMap()
+  },
+  methods: {
+    async getData() {
+      let res = await this.$axios.all([
+        this.$axios.get(this.$api.fire.fireType),
+      ]);
+      if (res[0]) this.fireTypeList = res[0].data;
+      this.getPage();
+      this.getPageMap();
+      this.getHouse();
+      // this.getProption();
+      this.getMonth();
+      this.getZhanbi()
+      this.getXiangqingPage()
+      this.getXiangqingOne()
+    },
+    // 实时警情处理
+    async getPage() {
+      console.log(this.$store.state.timeList[0],this.$store.state.timeList[1] )
+      let res = await this.$axios.get(this.$api.jqzhcz.page +
+          "?" +
+          this.$qs.stringify({
+            current: 1,
+            size: 150,
+            startTime: this.$store.state.timeList[0] || '',
+            endTime: this.$store.state.timeList[1] || '',
+            // startTime:"2000-01-01 00:00:00",
+            // endTime:"2021-12-31 23:59:59"
+          })
+      );
+      let res2 = await this.$axios.get(this.$api.jqzhcz.page +
+          "?" +
+          this.$qs.stringify({
+            current: 1,
+            size: 150,
+            startTime:"2000-01-01 00:00:00",
+            endTime:"2021-12-31 23:59:59"
+          })
+      );
+      if (res) {
+        var data =res.data.records;
+        for(let i =0;i<data.length;i++){
+          data[i].lasj = data[i].lasj.slice(11,20)
+        }
+        this.tableData = data;
+        
+      }
+      if(res2){
+        this.tableData2 = res2.data.records;
+      }
+    },
+    // 实时警情处理
+    async getPageMap() { //撒点
+      let res = await this.$axios.get(this.$api.jqzhcz.pageMap +
+          "?" +
+          this.$qs.stringify({
+            startTime: '2020-11-01 00:00:00',
+            endTime: '2021-12-31 23:59:59',
+            // startTime: this.$store.state.timeList[0] || '',
+            // endTime: this.$store.state.timeList[1] || '',
+          })
+      );
+      console.log(res)
+      if (res){
+        // window.jMap.Locate.clearLocate()
+        this.proptionMapList = res.data.records.slice(0,30)
+        var arr =[]
+        arr.push(res.data.records.slice(0,30))
+        this.addMarker(arr,"selfManagement")
+      }
+    },
+    async rowClickMap(row){
+      console.log(row)
+      if(this.proptionMapList.every(val=>val.id !== row.id)){
+        this.addMarker([row])
+        window.jMap.goTo({
+            x: Number(row.gisX),
+            y: Number(row.gisY),
+            radius: 1000
+        }, {
+            duration: 3,
+            offset: {
+                heading: -4,
+                pitch: -70,
+                range: 0
+            }
+        })
+      }
+        this.addMarkerInfo(row)
+    },
+    // 创建标点和点击事件
+    // addMarker(lnglats,type) {
+    //   console.log(lnglats)
+    //   var a = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg"
+    //     let target = lnglats.map((val) => {
+    //       if (type == 'selfManagement') {
+    //           icon = val.waterAdministrative === '单位' ? this.icon1 : val.waterAdministrative === '市政' ? this.icon2 : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? this.icon3 : "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640926840&t=3457fc1dea60f60f3cd55e48ca6c287c"
+    //       }else{
+    //           icon = val.waterAdministrative === '单位' ?  a : val.waterAdministrative === '市政' ? a : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? a : a
+    //       }
+    //       console.log(icon)
+    //         let marker = {
+    //             id: val.id,
+    //             attrbutes: val,
+    //             position: { x: val.gisX, y: val.gisY, z: 0 },
+    //             image: { url: icon,width:29.5,height:48.5 },
+    //         };
+    //         return marker
+    //     })
+    //     window.jMap.Locate.pointLocate(target, {
+    //         isZoom: false,
+    //         scaleByDistance: { minScaling: 0, maxScaling: 1, minDistance: 1000, maxDistance: 30000 },
+    //         click: async (val) => {
+    //           console.log(val)
+    //           let res = await this.$axios.get(this.$api.house.one +
+    //                 "?" +
+    //                 this.$qs.stringify({
+    //                   id: val.attrbutes.id,
+    //                 })
+    //             );
+    //             if (res){
+    //               this.addMarkerInfo(res.data)
+    //             }
+    //         }
+    //     })
+    // },
+    // 标点点击弹窗
+    // addMarkerInfo(res) {
+    //     if (this.oldPopupId && res.id === this.oldPopupId) {
+    //         window.jMap.Popup.hide();
+    //         return this.oldPopup = null
+    //     }
+    //     window.jMap.Popup.show({
+    //         id: res.id,
+    //         //使用自定义窗体
+    //         position: { x: Number(res.gisX), y: Number(res.gisY), z: Number(0) }, //使用自定义窗体
+    //         element: `<div class="ysc-dynamic-layer ys-css3-box" onclick="vue.removePopup">
+    //                       <div class="tableTooltip mapTab">
+    //                       <div class="tableTitle">
+    //                           <div>${res.ajlx}</div>
+    //                       </div>
+    //                       <el-row class="tableContent">
+    //                           <div class="max">案发地址:${res.afdz}</div>
+    //                           <div class="max2">案件性质:${res.ajxz}</div>
+    //                           <div class="max2">案件状态:${res.ajzt}</div>
+    //                           <div class="max">立案时间:${res.lasj}</div>
+    //                           <div class="max2">警情等级:${res.ajdj}</div>
+    //                           <div class="max2">所属中队:${res.zhongdui}</div>
+    //                           <div class="max2">调动车辆:${res.cdcl}</div>
+    //                           <div class="max2">状况:${res.ajzt}</div>
+    //                           <div class="max" :title="${res.bcxx}">报警原因:${res.bcxx}</div>
+    //                           <div class="max2">死亡人数:${res.qrqk}</div>
+    //                           <div class="max2">受伤人数:${res.qrqk}</div>
+    //                           <div class="max2">经济损失:${res.qrqk}</div>
+    //                       </el-row>
+    //                       </div>
+    //                   </div>`,
+    //     }, { isZoom: false, offset: [-170, -310] });
+    //     this.oldPopup = res.id
+    // },
+    // 警情时段分布 
+    async getHouse() {
+      // let res = await this.$axios.get(this.$api.house.alertStatisticsByMonth +
+      //     "?" +
+      //     this.$qs.stringify({
+      //       fireType: this.barForm.fireType,
+      //       startTime: this.$store.state.timeList[0] || "",
+      //       endTime: this.$store.state.timeList[1] || "",
+      //     }));
+      // if (res){ 
+      //   this.houseList = res.data
+      //   this.$refs.lineSmooth.getData()
+      // }
+      console.log(this.$store.state.timeList[0])
+      let res = await this.$axios.get(this.$api.jqzhcz.house +
+      "?" +
+      this.$qs.stringify({
+        fireType: this.barForm.fireType,
+        startTime: this.$store.state.timeList[0] || '',
+        endTime: this.$store.state.timeList[1] || '',
+        // startTime: '2000-12-01 00:00:00' ,
+        // endTime: '2021-12-06 00:00:00' ,
+      }));
+      console.log(res)
+      this.houseList =res.data
+      this.$refs.lineSmooth.getData()
+      // let res2 = await this.$axios.get(this.$api.jqzhcz.month +
+      // "?" +
+      // this.$qs.stringify({
+      //   // fireType: this.barForm.fireType,
+      //   startTime: "2021-01-01",
+      //   endTime: "2021-12-31",
+      // }));
+      // console.log(res2)
+      // if (res){ 
+      //   this.houseList = res.data
+      //   this.$refs.lineSmooth.getData()
+      // }
+      
+    },
+    // 警情处置情况
+    async getProption() { //旧
+      // let res = await this.$axios.get(this.$api.house.alertStatistics +
+      //     "?" +
+      //     this.$qs.stringify({
+      //       startTime: this.$store.state.timeList[0] || "",
+      //       endTime: this.$store.state.timeList[1] || "",
+      //     }));
+      // if (res){
+		  // console.log(res.data)
+      //   this.proptionList = res.data;
+      //   this.proptionList[4] = res.data.reduce((data, rel) => {
+      //     console.log(data + rel.number)
+      //     return data + rel.number;
+      //   }, 0);
+      //   console.log(this.proptionList[4]);
+      //   this.$refs.gauge1.getData();
+      //   this.$refs.gauge2.getData();
+      //   this.$refs.gauge3.getData();
+      // }
+    },
+    // 历史警情趋势图
+    async getMonth() {
+      // let res = await this.$axios.get(
+      //   this.$api.house.alertStatisticsByMonth +
+      //     "?" +
+      //     this.$qs.stringify({
+      //       startTime: (new Date().getFullYear() - this.timeArea) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+      //       endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+      //     })
+      // );
+      // if (res) {
+      //   this.monthList = res.data;
+      //   this.$refs.barChart.getData();
+      // }
+
+      let res = await this.$axios.get(
+        this.$api.jqzhcz.month +
+          "?" +
+          this.$qs.stringify({
+            // startTime: "2020-01-01 00:00:00",
+            // endTime: "2021-12-31 00:00:00",
+            startTime: (new Date().getFullYear() - this.timeArea) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+            endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+          })
+      );
+      console.log(res)
+      if (res) {
+        this.monthList = res.data;
+        this.$refs.barChart.getData();
+      }
+    },
+    searchTime(val){
+      this.timeArea = val
+      this.getMonth()
+    },
+
+
+    // 警情占比 
+    async getZhanbi() {
+      let res = await this.$axios.get(this.$api.jqzhcz.alertStatistics +
+      "?" +
+      this.$qs.stringify({
+        // fireType: this.barForm.fireType,
+        // startTime: "2020-01-01 00:00:00",
+        // endTime: "2021-12-31 00:00:00",
+        startTime: this.$store.state.timeList[0] || "",
+        endTime: this.$store.state.timeList[1] || "",
+      }));
+      console.log(res)
+      this.proptionList = res.data
+    },
+    // 警情详情 
+    async getXiangqingPage() {
+      let res = await this.$axios.get(this.$api.jqzhcz.page +
+      "?" +
+      this.$qs.stringify({
+        // fireType: this.barForm.fireType,
+        current: 1,
+        size: 10,
+      }));
+      console.log(res)
+    
+    },
+    async getXiangqingOne() {
+      let res = await this.$axios.get(this.$api.jqzhcz.one +
+      "?" +
+      this.$qs.stringify({
+        id: "00021f6556c34d44a75ea287f40bed42",
+      }));
+      console.log(res)
+      
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.videoBox{
+  width: 100%;
+  height: auto;
+}
+.contentBox {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding-bottom: 0.125rem;
+  color: #fff;
+  // font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+  & > .el-col {
+    flex: 1;
+    max-width: 8rem;
+    height: 100%;
+  }
+  .leftBox {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    box-sizing: border-box;
+    & > .el-col {
+      flex: 1;
+      max-height: 50%;
+      background: url('~@a/img/enforce/bg1.png') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      h4 {
+        font-size: 0.2125rem;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+        text-align: center;
+        color: #00ffff;
+      }
+    }
+    .leftTop {
+      padding: 0.375rem 0.475rem 0.1875rem;
+      margin-bottom: 0.125rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .leftTopContent {
+        width: 100%;
+        height: 100%;
+        display: block;
+        .selectBar {
+          width: 100%;
+          display: flex;
+          justify-content: flex-end;
+          height: 0.875rem;
+          padding: 0.25rem 0;
+        }
+        .fireBar {
+          height: calc(100% - 0.875rem);
+        }
+      }
+    }
+    .leftBot {
+      padding: 0.375rem 0.45rem 0.1875rem;
+      box-sizing: border-box;
+      .leftBotContent {
+        width: 100%;
+        height: 100%;
+        display: block;
+        .selectBar {
+          width: 100%;
+          display: flex;
+          justify-content: flex-start;
+          height: 0.875rem;
+          padding: 0.25rem 0;
+          .el-row{
+            display: flex;
+            .el-button {
+              // width: 0.375rem;
+              height: 0.325rem;
+              min-height: auto;
+              padding: 0 .0625rem;
+              margin-right: 0.075rem;
+              margin-left: 0;
+              background: #000707;
+              color: #fff;
+              border: 1px solid;
+              box-sizing: border-box;
+              border-radius: .0375rem;
+              font-size: 0.15rem;
+              border-image: linear-gradient(0deg, #0461c2 0%, #0ecdf1 100%) 1 1;
+            }
+            .btnClick {
+              color: #fccf2a;
+              border-image: linear-gradient(0deg, #ff6800 0%, #fccf2a 100%) 1 1;
+            }
+          }
+        }
+        .fireBar {
+          height: calc(100% - 0.875rem);
+          height: calc(100% - 0.875rem);
+        }
+      }
+    }
+  }
+  .rightBox {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    box-sizing: border-box;
+    & > .el-col {
+      flex: 1;
+      background: url(~@a/img/enforce/bg1.png) no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      h4 {
+        font-size: 0.2125rem;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+        text-align: center;
+        color: #00ffff;
+      }
+    }
+    .rightTop {
+      padding: 0.1rem 0.475rem 0.1875rem;
+      margin-bottom: 0.125rem;
+      max-height:30%;
+      .rightBoxCon {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        & > .el-row {
+          flex: none;
+          width: 33.33%;
+          display: flex;
+          flex-direction: column;
+        }
+        .rightTopTitle {
+          span {
+            font-size: 0.2125rem;
+            text-align: center;
+          }
+          justify-content: center;
+        }
+        .rightTopNumber {
+          width:80%;
+          margin: 0 10%;
+          justify-content: center;
+          &>span {
+            margin: 0 auto;
+            padding: 0.1rem 0.2rem;
+            font-size: 0.14rem;
+            border-radius: 0.1875rem;
+            display: flex;
+            box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+          }
+        }
+        .rightTopChart {
+          margin: 0.1rem 0 0;
+        }
+      }
+    }
+    .rightBot {
+      flex: 1;
+      max-height: 35%;
+      padding: 0.5rem 0.35rem 0.25rem;
+      box-sizing: border-box;
+      position: relative;
+      /deep/ .cell {
+       
+        text-align: center !important;
+      }
+      /deep/ td{
+        min-width: auto !important;
+        width: auto !important;
+        text-align: left !important;
+        padding:0;
+      }
+      /deep/ .box-card{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        border-radius: 3%;
+        width: 80%;
+        max-height: 100%;
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.6);
+        border: none;
+        color: #FFF;
+        .el-card__header{
+          padding: .125rem;
+          border-color: #30cfff;
+          .card-header{
+            display: flex;
+            font-size: .2rem;
+            justify-content: space-between;
+            align-items: center;
+            i{
+              font-size: .275rem;
+            }
+          }
+        }
+        img{
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+    .rightBot2 {
+      flex: 1;
+      max-height: 34%;
+      margin-top:1%;
+      padding: 0.5rem 0.35rem 0.25rem;
+      box-sizing: border-box;
+      position: relative;
+      .shui{
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.5);
+        
+        margin:-10px 0px 10px 0;
+        font-size: 14px;
+        padding:6px;
+        text-align: center;
+        font-size: 14px;
+        text-align: left;
+        width:100%;
+        .title{
+          width:34%;
+        }
+        .title1{
+          width:22%;
+          
+        }
+        .title2{
+          width:22%;
+          color:red
+        }
+        .title3{
+          width:22%;
+          color:#00ffff
+        }
+      }
+      /deep/ .cell {
+        text-align: center !important;
+      }
+      /deep/ td{
+        min-width: auto !important;
+        width: auto !important;
+        text-align: left !important;
+        padding:0;
+      }
+      /deep/ .el-table__body-wrapper{
+        height: 65% !important;;
+      }
+      /deep/ .box-card{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        border-radius: 3%;
+        width: 80%;
+        max-height: 100%;
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.6);
+        border: none;
+        color: #FFF;
+        .el-card__header{
+          padding: .125rem;
+          border-color: #30cfff;
+          .card-header{
+            display: flex;
+            font-size: .2rem;
+            justify-content: space-between;
+            align-items: center;
+            i{
+              font-size: .275rem;
+            }
+          }
+        }
+        img{
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+    
+  }
+}
+.tableTooltip{
+  width:400px;
+}
+.liucheng{
+  width:100%;
+  position: relative;
+  padding:20px;
+  img{
+    width:100%;
+  }
+  .jz{
+    font-size:14px;
+    color:#fff;
+    list-style: 50%;
+    text-align: center;
+    position: absolute;
+    top:35%;
+    width:23%;
+    text-align: center;
+  }
+  
+}
+.tipdan{
+  background: url("~@a/img/qyzz/baogao.png") no-repeat ;
+  background-size: 100% 100%;
+  margin:10px 10px 0 0;
+  font-size: 14px;
+  padding:4px;
+  text-align: center;
+}
+.mapTips{
+  border:1px solid #00ffff;
+  border-radius: 4px;
+  margin:0 8px 10px 0;
+  box-shadow:0px 0px 10px #00ffff;
+  .el-checkbox{
+    color:#fff;
+  }
+}
+/deep/  .el-checkbox__inner{
+    background-color:transparent;
+}
+
+
+@media screen and (min-width: 1940px) and (max-width:4000px){
+  .videoBox{
+  width: 100%;
+  height: auto;
+}
+.contentBox {
+  display: flex;
+  width: 100%;
+  height: 105%;
+  box-sizing: border-box;
+  padding-bottom: 0.125rem;
+  color: #fff;
+  // font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+  & > .el-col {
+    flex: 1;
+    max-width: 8rem;
+    height: 100%;
+  }
+  .leftBox {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    box-sizing: border-box;
+    & > .el-col {
+      flex: 1;
+      max-height: 50%;
+      // background: url('~@a/img/enforce/bg1.png') no-repeat;
+      // background-size: 100% 100%;
+      background: url("~@a/img/home/box-bg_02.png") no-repeat  0px 26px;
+      background-size: 100% calc(100% - 60px);
+      position: relative;
+      h4 {
+        background: url("~@a/img/home/box-bg_01.png") no-repeat 0px 1px;
+        background-size: 100% 100%;
+        font-size: 0.2125rem;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+        text-align: center;
+        color: #00ffff;
+      }
+    }
+    .leftTop {
+      padding: 0.375rem 0.475rem 0.1875rem;
+      margin-bottom: 0.125rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .leftTopContent {
+        width: 100%;
+        height: 100%;
+        display: block;
+        .selectBar {
+          width: 100%;
+          display: flex;
+          justify-content: flex-end;
+          height: 0 !important;
+          padding:0 !important;
+         
+        }
+        .fireBar {
+          height: 85%;
+          margin-top:10%;
+        }
+      }
+    }
+    .leftBot {
+      padding: 0.375rem 0.45rem 0.1875rem;
+      box-sizing: border-box;
+      .leftBotContent {
+        width: 100%;
+        height: 100%;
+        display: block;
+        .selectBar {
+          width: 100%;
+          display: flex;
+          justify-content: flex-start;
+          height: 0 !important;
+          padding:0 !important;
+          .el-row{
+            display: flex;
+            .el-button {
+              // width: 0.375rem;
+              height: 0.12rem;
+              min-height: auto;
+              padding: 0 .03125rem;
+              margin-right: 0.0375rem;
+              margin-left: 0;
+              background: #000707;
+              color: #fff;
+              border: 1px solid;
+              box-sizing: border-box;
+              border-radius: .0375rem;
+              font-size: 0.12rem;
+              border-image: linear-gradient(0deg, #0461c2 0%, #0ecdf1 100%) 1 1;
+            }
+            .btnClick {
+              color: #fccf2a;
+              border-image: linear-gradient(0deg, #ff6800 0%, #fccf2a 100%) 1 1;
+            }
+          }
+        }
+        .fireBar {
+          height: 85%;
+          margin-top:5%;
+        }
+      }
+    }
+  }
+  .rightBox {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    box-sizing: border-box;
+    & > .el-col {
+      flex: 1;
+      background: url("~@a/img/home/box-bg_02.png") no-repeat  0px 26px;
+      background-size: 100% calc(100% - 60px);
+      position: relative;
+      min-height:33%;
+      h4 {
+        background: url("~@a/img/home/box-bg_01.png") no-repeat 0px 1px;
+        background-size: 100% 100%;
+        font-size: 0.2125rem;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+        text-align: center;
+        color: #00ffff;
+      }
+    }
+    .rightTop {
+      padding: 0.1rem 0.475rem 0.1875rem;
+      margin-bottom: 0.125rem;
+      max-height:34%;
+      
+      .rightBoxCon {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        & > .el-row {
+          flex: none;
+          width: 33.33%;
+          display: flex;
+          flex-direction: column;
+        }
+        .rightTopTitle {
+          margin-top:0.1rem;
+          span {
+            font-size: 0.12rem;
+            text-align: center;
+          }
+          justify-content: center;
+        }
+        .rightTopNumber {
+          width:80%;
+          margin: 0 10%;
+          justify-content: center;
+          &>span {
+            margin: 0 auto;
+            padding: 6px 20px;
+            font-size: 0.12rem;
+            border-radius: 0.1875rem;
+            display: flex;
+            box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+          }
+        }
+        .rightTopChart {
+          margin: 0rem 0 0rem ;
+        }
+      }
+    }
+    .rightBot {
+      flex: 1;
+      max-height: 35%;
+      padding: 0.5rem 0.35rem 0.25rem;
+      box-sizing: border-box;
+      position: relative;
+      margin-top:-0.2rem;
+      /deep/ .el-table{
+        margin-top:-0.2rem !important;
+      }
+      /deep/ .cell {
+       
+        text-align: center !important;
+      }
+      /deep/ td{
+        min-width: auto !important;
+        width: auto !important;
+        text-align: left !important;
+        padding:0;
+      }
+      /deep/ .box-card{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        border-radius: 3%;
+        width: 80%;
+        max-height: 100%;
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.6);
+        border: none;
+        color: #FFF;
+        .el-card__header{
+          padding: .125rem;
+          border-color: #30cfff;
+          .card-header{
+            display: flex;
+            font-size: .2rem;
+            justify-content: space-between;
+            align-items: center;
+            i{
+              font-size: .275rem;
+            }
+          }
+        }
+        img{
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+    .rightBot2 {
+      flex: 1;
+      max-height: 34%;
+      margin-top:1%;
+      padding: 0.5rem 0.35rem 0.25rem;
+      box-sizing: border-box;
+      position: relative;
+      margin-top:-0.2rem;
+      /deep/ .el-table{
+        margin-top:-0.2rem !important;
+      }
+      .shui{
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.5);
+        
+        margin:-10px 0px 10px 0;
+        font-size: 14px;
+        padding:6px;
+        text-align: center;
+        font-size: 14px;
+        text-align: left;
+        width:100%;
+        margin-top:-.28rem;
+        font-size: 0.12rem;;
+        .title{
+          width:34%;
+        }
+        .title1{
+          width:22%;
+          
+        }
+        .title2{
+          width:22%;
+          color:red
+        }
+        .title3{
+          width:22%;
+          color:#00ffff
+        }
+      }
+      /deep/ .cell {
+        text-align: center !important;
+      }
+      /deep/ td{
+        min-width: auto !important;
+        width: auto !important;
+        text-align: left !important;
+        padding:0;
+      }
+      /deep/ .el-table__body-wrapper{
+        height: 65% !important;;
+      }
+      /deep/ .box-card{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        border-radius: 3%;
+        width: 80%;
+        max-height: 100%;
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.6);
+        border: none;
+        color: #FFF;
+        .el-card__header{
+          padding: .125rem;
+          border-color: #30cfff;
+          .card-header{
+            display: flex;
+            font-size: .2rem;
+            justify-content: space-between;
+            align-items: center;
+            i{
+              font-size: .275rem;
+            }
+          }
+        }
+        img{
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+    
+  }
+}
+.tableTooltip{
+  width:400px;
+}
+.liucheng{
+  width:100%;
+  position: relative;
+  padding:20px;
+  img{
+    width:100%;
+  }
+  .jz{
+    font-size:14px;
+    color:#fff;
+    list-style: 50%;
+    text-align: center;
+    position: absolute;
+    top:35%;
+    width:23%;
+    text-align: center;
+  }
+  
+}
+.tipdan{
+  background: url("~@a/img/qyzz/baogao.png") no-repeat ;
+  background-size: 100% 100%;
+  margin:10px 10px 0 0;
+  font-size: 14px;
+  padding:4px;
+  text-align: center;
+}
+.mapTips{
+  border:1px solid #00ffff;
+  border-radius: 4px;
+  margin:0 8px 10px 0;
+  box-shadow:0px 0px 10px #00ffff;
+  .el-checkbox{
+    color:#fff;
+  }
+}
+/deep/ .el-form-item__label{
+  font-size: 0.12rem;
+}
+/deep/ .el-table__header-wrapper{
+  height:20px !important;
+  padding:0 !important;
+}
+/deep/ .el-form .el-form-item .el-form-item__label{
+  font-size: 0.12rem !important;
+}
+/deep/ .el-form .el-form-item .el-form-item__content{
+  font-size: 0.12rem !important;
+}
+/deep/ .el-select .el-input--mini{
+  font-size: 0.12rem !important;
+}
+}
+</style>
+<style>
+.el-checkbox{
+  padding-bottom:6px;
+  display: block;
+  border-bottom:1px solid #00ffff;
+  padding:2px 0 2px 8px;
+  width:100%;
+  box-sizing: border-box;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate 
+  .el-checkbox__inner{
+      background-color:transparent;
+      border-color:#00ffff;
+      border-bottom:1px solid #00ffff;
+      
+  }
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: #00ffff;
+      background-color:transparent;
+     }
+  .el-checkbox.is-bordered.is-checked{
+      border-color: #00ffff;
+      background-color:transparent;
+     }
+  .el-checkbox__input.is-focus .el-checkbox__inner{
+      border-color:  #00ffff;
+      background-color:transparent;
+  }
+</style>

+ 1398 - 0
src/views/comprehensive-disposal copy.vue

@@ -0,0 +1,1398 @@
+<template>
+  <el-row class="contentBox">
+    <transition name="el-fade-in-linear">
+      <el-col class="leftBox" v-show="leftBtn">
+        <el-col class="leftTop">
+          <h4>警情时段分布</h4>
+          <el-row class="leftTopContent">
+            <el-row class="selectBar">
+              <el-form :inline="true" size="mini" :model="barForm">
+                <el-form-item label="场所分类">
+                  <el-select v-model="barForm.fireType" @change="getHouse()" filterable clearable placeholder="场所" >
+                    <el-option :label="item" :value="item" v-for="(item,ind) in fireTypeList" :key="ind"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-form>
+            </el-row>
+            <el-row class="fireBar">
+              <line-smooth ref="lineSmooth" :dataMap="houseList"></line-smooth>
+            </el-row>
+          </el-row>
+        </el-col>
+        <el-col class="leftBot">
+          <h4>历史警情趋势图</h4>
+          <el-row class="leftBotContent">
+            <el-row class="selectBar">
+               <el-row>
+                <el-button size="mini" @click="searchTime(1)" :class="{ btnClick: timeArea === 1 }">近一年</el-button>
+                <el-button size="mini" @click="searchTime(3)" :class="{ btnClick: timeArea === 3 }">近三年</el-button>
+                <el-button size="mini" @click="searchTime(5)" :class="{ btnClick: timeArea === 5 }">近五年</el-button>
+              </el-row>
+            </el-row>
+            <el-row class="fireBar">
+              <bar-chart ref="barChart" :dataMap="monthList"></bar-chart>
+            </el-row>
+          </el-row>
+        </el-col>
+        
+      </el-col>
+    </transition>
+    <transition name="el-fade-in-linear">
+      <el-col class="centerBox" :style="{'max-width':leftBtn && rightBtn ? '8rem' :!leftBtn &&  !rightBtn ? '100%' : leftBtn ||  rightBtn ? '16rem' : '8rem'}">
+        <el-row class="leftBtn btnW" @click="leftBtnClick()">
+          <i :class="leftBtn ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
+        </el-row>
+        <el-row class="centerContent" id="mapF"></el-row>
+        
+        <el-row class="rightBtn btnW" @click="rightBtnClick()">
+          <i :class="rightBtn ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
+        </el-row>
+        <el-row class="mapTips">
+          <el-checkbox-group v-model="checkList" class="yxj">
+            <el-checkbox label="全选"></el-checkbox>
+            <el-checkbox label="实时警情"></el-checkbox>
+            <el-checkbox label="重点单位"></el-checkbox>
+            <el-checkbox label="消防站"></el-checkbox>
+            <el-checkbox label="消防车"></el-checkbox>
+            <el-checkbox label="微型消防车"></el-checkbox>
+            <el-checkbox label="实景监控视频"></el-checkbox>
+          </el-checkbox-group>
+        </el-row>
+      </el-col>
+    </transition>
+    <transition name="el-fade-in-linear">
+      <el-col class="rightBox" v-show="rightBtn">
+        <el-col class="rightTop">
+          <h4>警情处置情况</h4>
+          <div class="rightBoxCon">
+            <el-row>
+              <el-row class="rightTopTitle"><span>火灾</span></el-row>
+              <el-row class="rightTopChart">
+                <gauge ref="gauge1" :dataMap="proptionList.find(val=>val.type === '火灾') && proptionList.find(val=>val.type === '火灾').number/(proptionList.find(val=>val.type === '火灾').number + proptionList.find(val=>val.type === '社会救助').number + proptionList.find(val=>val.type === '抢险救援').number) || 0" :dataNumber="proptionList.find(val=>val.type === '火灾') && proptionList.find(val=>val.type === '火灾').number || 0" color="#468EFD"></gauge>
+              </el-row>
+              <el-row class="rightTopNumber">
+                <span>
+                  同比:{{proptionList.find(val=>val.type === '火灾') && (proptionList.find(val=>val.type === '火灾').radio * 100).toFixed(2) || 0}}%
+                  <span :style="{color: proptionList.find(val=>val.type === '火灾') && proptionList.find(val=>val.type === '火灾').sameStatus === 2 ? 'green' : 'red'}">
+                    <i class="iconfont" v-if="proptionList.find(val=>val.type === '火灾')"
+                    :class="proptionList.find(val=>val.type === '火灾').sameStatus === 1 ? 'icon-arrowTop-fill' : proptionList.find(val=>val.type === '火灾').sameStatus === 2 ? 'icon-xiajiantou-' : ''"></i>
+                  </span>
+                </span>
+              </el-row>
+            </el-row>
+            <el-row>
+              <el-row class="rightTopTitle"><span>社会救助</span></el-row>
+              <el-row class="rightTopChart">
+                <gauge ref="gauge2" :dataMap="proptionList.find(val=>val.type === '社会救助') && proptionList.find(val=>val.type === '社会救助').number/(proptionList.find(val=>val.type === '火灾').number + proptionList.find(val=>val.type === '社会救助').number + proptionList.find(val=>val.type === '抢险救援').number) || 0" :dataNumber="proptionList.find(val=>val.type === '社会救助') && proptionList.find(val=>val.type === '社会救助').number || 0" color="#06B1B9"></gauge>
+              </el-row>
+              <el-row class="rightTopNumber">
+                <span>
+                  同比:{{proptionList.find(val=>val.type === '社会救助') && (proptionList.find(val=>val.type === '社会救助').radio * 100).toFixed(2) || 0}}%
+                  <span :style="{color: proptionList.find(val=>val.type === '社会救助') && proptionList.find(val=>val.type === '社会救助').sameStatus === 2 ? 'green' : 'red'}">
+                    <i class="iconfont" v-if="proptionList.find(val=>val.type === '社会救助')"
+                    :class="proptionList.find(val=>val.type === '社会救助').sameStatus === 1 ? 'icon-arrowTop-fill' : proptionList.find(val=>val.type === '社会救助').sameStatus === 2 ? 'icon-xiajiantou-' : ''"></i>
+                  </span>
+                </span>
+              </el-row>
+            </el-row>
+            <el-row>
+              <el-row class="rightTopTitle"><span>抢险救援</span></el-row>
+              <el-row class="rightTopChart">
+                <gauge ref="gauge3" :dataMap="proptionList.find(val=>val.type === '抢险救援') && proptionList.find(val=>val.type === '抢险救援').number/ (proptionList.find(val=>val.type === '火灾').number + proptionList.find(val=>val.type === '社会救助').number + proptionList.find(val=>val.type === '抢险救援').number) || 0" :dataNumber="proptionList.find(val=>val.type === '抢险救援') && proptionList.find(val=>val.type === '抢险救援').number || 0" color="#E4951E"></gauge>
+              </el-row>
+              <el-row class="rightTopNumber">
+                <span>
+                  同比:{{proptionList.find(val=>val.type === '抢险救援') && (proptionList.find(val=>val.type === '抢险救援').radio * 100).toFixed(2) || 0}}%
+                  <span :style="{color: proptionList.find(val=>val.type === '抢险救援') && proptionList.find(val=>val.type === '抢险救援').sameStatus === 2 ? 'green' : 'red'}">
+                    <i class="iconfont" v-if="proptionList.find(val=>val.type === '抢险救援')"
+                    :class="proptionList.find(val=>val.type === '抢险救援').sameStatus === 1 ? 'icon-arrowTop-fill' : proptionList.find(val=>val.type === '抢险救援').sameStatus === 2 ? 'icon-xiajiantou-' : ''"></i>
+                    </span>
+                </span>
+              </el-row>
+            </el-row>
+          </div>
+        </el-col>
+        <el-col class="rightBot">
+          <h4>实时警情处理</h4>
+          <el-table
+            :data="tableData"
+            class="transparentTableRow"
+            height="100%"
+            row-style="height:.425rem;"
+            cell-style="height:.425rem;box-sizing: border-box;"
+            style="width: 100%; margin: 0 auto"
+            @row-click="rowClickMap"
+          >
+            <el-table-column
+              show-overflow-tooltip
+              v-for="item in headerData"
+              :key="item.prop"
+              :prop="item.prop"
+              align="center"
+              min-width="11%"
+              :label="item.name"
+            >
+              <template v-if="item.prop === 'type'" #default="scope">
+                <el-tooltip placement="left">
+                  <template #content>
+                    <div class="tableTooltip">
+                      <div class="tableTitle">
+                        <div>执勤力量</div>
+                      </div>
+                      <el-row class="tableContent">
+                        <el-col :span="20">案件编号:{{scope.row.ajbh}}</el-col>
+                        <el-col :span="4" class="tipdan">原始工单</el-col>
+                        <el-col :span="24">发现时间:{{scope.row.tzsj}}</el-col>
+                        <el-col :span="24">案件类型:{{scope.row.ajlx}}</el-col>
+                        <el-col :span="12">所属街道:{{scope.row.streettown}}</el-col>
+                        <el-col :span="12">处置网格:</el-col>
+                        <el-col :span="24">发生地址:{{scope.row.afdz}}</el-col>
+                        <el-col :span="24">案件描述:{{scope.row.gisX}}</el-col>
+                        <el-col :span="12">主责部门:{{scope.row.zhongdui}}</el-col>
+                        <el-col :span="12">案件状态:{{scope.row.ajzt}}</el-col>
+                        <el-col :span="12">处置截止:{{scope.row.tssj}}</el-col>
+                        <el-col :span="12">附件:{{scope.row.jlzt}}</el-col>
+                        <el-col :span="24">案件渠道来源:{{scope.row.jlzt}}</el-col>
+                      </el-row>
+                      <el-row class="liucheng">
+                          <el-col :span="6">
+                            <img src="~@a/img/icon/lc1.png" alt="" />
+                            <div class="jz">立案</div>
+                          </el-col>
+                          <el-col :span="6">
+                            <img src="~@a/img/icon/lc2.png" alt="" />
+                            <div class="jz">派遣</div>
+                          </el-col>
+                          <el-col :span="6">
+                            <img src="~@a/img/icon/lc3.png" alt="" />
+                            <div class="jz">处置</div>
+                          </el-col>
+                          <el-col :span="6">
+                            <img src="~@a/img/icon/lc4.png" alt="" />
+                            <div class="jz">结案</div>
+                          </el-col>
+                      </el-row>
+                      <el-row class="tablePersonnel">
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <!-- <div>{{scope.row.commander}}</div>
+                          <div>指挥员</div> -->
+                        </el-col>
+                        <!-- <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.correspondent}}</div>
+                          <div>通讯员</div>
+                        </el-col>
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.firemen}}</div>
+                          <div>消防员</div>
+                        </el-col>
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.driver}}</div>
+                          <div>驾驶员</div>
+                        </el-col> -->
+                      </el-row>
+                    </div>
+                  </template>
+                  <template>
+                    <i class="iconfont" 
+                    :class="{
+                      'icon-icon-test' : scope.row['ajlxdm'] == 1,
+                      'icon-jiuyuan': scope.row['ajlxdm'] == 2,
+                      'icon-minzhengtubiao1-08':scope.row['ajlxdm'] == 3,
+                    }"
+                    :style="{color: scope.row['ajdj'] == '零级' ? 'green' : scope.row['ajdj'] == '一级' ? '#eec10d' : scope.row['ajdj'] == '二级' ? '#ff730c' : scope.row['ajdj'] == '三级' ? '#ff0012' : '#2e98f2'}"
+                     v-if="item.prop === 'type'"></i>
+                    <div class="name-wrapper" v-else>{{ scope.row[item.prop] }}</div>
+                  </template>
+                </el-tooltip>
+              </template>
+              <template v-else #default="scope">
+                  {{ item.prop === 'type' ? '' : item.prop === 'lasj' ? scope.row[item.prop] && scope.row[item.prop].slice(5) :  item.prop === 'afdz' ? scope.row[item.prop].replace(new RegExp("闵行区 ",""),"") : item.prop === 'status' ? (scope.row[item.prop] == 1 ? '可用' : '不可用') : scope.row[item.prop]}}
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-card class="box-card" v-if="isVideo">
+          <template #header>
+            <div class="card-header">
+              <span>实时视频</span>
+              <i class="el-icon-close" @click="isVideo = false"></i>
+            </div>
+          </template>
+          <!-- <img src="~@a/img/test/car.png" alt=""> -->
+          <!-- controls -->
+          <video src="~@a/img/test/card.mp4" class="videoBox" autoplay height="auto"></video>
+          <!-- <video-player class="video-player vjs-custom-skin"
+            ref="videoPlayer"
+            :playsinline="true"
+            :options="playerOptions">
+          </video-player> -->
+          </el-card>
+        </el-col>
+        <el-col class="rightBot2">
+          <h4>历史案件</h4>
+          <el-col class="shui">
+            <el-col class="title">
+              水系统检测设备(300)
+            </el-col>
+            <el-col class="title1">
+              上线率:99%
+            </el-col>
+            <el-col class="title2">
+              接单率:99%
+            </el-col>
+            <el-col class="title3">
+              处置率:99%
+            </el-col>
+          </el-col>
+          <el-table
+            :data="tableData2"
+            class="transparentTableRow"
+            height="100%"
+            row-style="height:.425rem;"
+            cell-style="height:.425rem;box-sizing: border-box;"
+            style="width: 100%; margin: 0 auto"
+            @row-click="rowClickMap"
+          >
+            <el-table-column
+              show-overflow-tooltip
+              v-for="item in headerData2"
+              :key="item.prop"
+              :prop="item.prop"
+              align="center"
+              
+              :label="item.name"
+            >
+              <template v-if="item.prop === 'type'" #default="scope">
+                <el-tooltip placement="left">
+                  <template #content>
+                    <div class="tableTooltip">
+                      <div class="tableTitle">
+                        <div>案件详情</div>
+                      </div>
+                      <el-row class="tableContent">
+                        <el-col :span="24">案件编号:{{scope.row.ajbh}}</el-col>
+                        <el-col :span="24">发现时间:{{scope.row.tzsj}}</el-col>
+                        <el-col :span="24">案件类型:{{scope.row.ajlx}}</el-col>
+                        <el-col :span="12">所属街道:{{scope.row.streettown}}</el-col>
+                        <el-col :span="12">处置网格:</el-col>
+                        <el-col :span="24">发生地址:{{scope.row.afdz}}</el-col>
+                        <el-col :span="24">案件描述:{{scope.row.gisX}}</el-col>
+                        <el-col :span="12">主责部门:{{scope.row.zhongdui}}</el-col>
+                        <el-col :span="12">案件状态:{{scope.row.ajzt}}</el-col>
+                        <el-col :span="12">处置截止:{{scope.row.tssj}}</el-col>
+                        <el-col :span="12">附件:{{scope.row.jlzt}}</el-col>
+                        <el-col :span="24">案件渠道来源:{{scope.row.jlzt}}</el-col>
+                        <el-col :span="10" @click="isVideo = true" style="color:#0ADAFF;text-decoration: underline;cursor: pointer;">实时视频</el-col>
+                      </el-row>
+                      <el-row class="tablePersonnel">
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.commander}}</div>
+                          <div>指挥员</div>
+                        </el-col>
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.correspondent}}</div>
+                          <div>通讯员</div>
+                        </el-col>
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.firemen}}</div>
+                          <div>消防员</div>
+                        </el-col>
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.driver}}</div>
+                          <div>驾驶员</div>
+                        </el-col>
+                      </el-row>
+                    </div>
+                  </template>
+                  <template>
+                    <i class="iconfont" 
+                    :class="{
+                      'icon-icon-test' : scope.row['ajlxdm'] == 1,
+                      'icon-jiuyuan': scope.row['ajlxdm'] == 2,
+                      'icon-minzhengtubiao1-08':scope.row['ajlxdm'] == 3,
+                    }"
+                    :style="{color: scope.row['ajdj'] == '零级' ? 'green' : scope.row['ajdj'] == '一级' ? '#eec10d' : scope.row['ajdj'] == '二级' ? '#ff730c' : scope.row['ajdj'] == '三级' ? '#ff0012' : '#2e98f2'}"
+                     v-if="item.prop === 'type'"></i>
+                    <div class="name-wrapper" v-else>{{ scope.row[item.prop] }}</div>
+                  </template>
+                </el-tooltip>
+              </template>
+              <template v-else #default="scope">
+                  {{ item.prop === 'type' ? '' : item.prop === 'lasj' ? scope.row[item.prop] && scope.row[item.prop].slice(5) :  item.prop === 'afdz' ? scope.row[item.prop].replace(new RegExp("闵行区 ",""),"") : item.prop === 'status' ? (scope.row[item.prop] == 1 ? '可用' : '不可用') : scope.row[item.prop]}}
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-card class="box-card" v-if="isVideo">
+          <template #header>
+            <div class="card-header">
+              <span>实时视频</span>
+              <i class="el-icon-close" @click="isVideo = false"></i>
+            </div>
+          </template>
+          <!-- <img src="~@a/img/test/car.png" alt=""> -->
+          <!-- controls -->
+          <video src="~@a/img/test/card.mp4" class="videoBox" autoplay height="auto"></video>
+          <!-- <video-player class="video-player vjs-custom-skin"
+            ref="videoPlayer"
+            :playsinline="true"
+            :options="playerOptions">
+          </video-player> -->
+          </el-card>
+        </el-col>
+      </el-col>
+    </transition>
+  </el-row>
+</template>
+
+<script>
+import barChart from "@c/bar";
+import lineSmooth from "@c/line-smooth";
+import gauge from "@c/gauge/indexcom";
+import linstener from "@c/mixins/linstener";
+//import map from "@c/mixins/map-data";
+import map from "@c/mixins/map-gaodecom";
+
+
+export default {
+  data() {
+    return {
+      checkList:[],
+      tableData: [],
+      headerData: [
+        { prop: "type", name: "类型" },
+        { prop: "lasj", name: "立案时间" },
+        { prop: "ajdj", name: "警情等级" },
+        { prop: "afdz", name: "案发地址" },
+        { prop: "cdcl", name: "调动车辆" },
+        { prop: "bcxx", name: "原因" },
+        { prop: "czdx", name: "处置对象" },
+        { prop: "zhongdui", name: "所属中队" },
+        { prop: "ajzt", name: "状况" },
+      ],
+      tableData2: [],
+      headerData2: [
+
+        { prop: "ajbh", name: "案件编号" },
+        { prop: "tzsj", name: "发现时间" },
+        { prop: "ajxz", name: "案发性质" },
+        { prop: "streettown", name: "所属街道" },
+        { prop: "ajzt", name: "案件状态" },
+      ],
+      isVideo:false,
+      playerOptions: {
+          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+          autoplay: false, //如果true,浏览器准备好时开始回放。
+          muted: false, // 默认情况下将会消除任何音频。
+          loop: false, // 导致视频一结束就重新开始。
+          preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
+          language: "zh-CN",
+          aspectRatio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
+          fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
+          sources: [{
+              type: "video/mp4",
+              src: require("../assets/img/test/card.mp4"), //视频url地址
+          }, ],
+          poster: require("../assets/img/test/car.png"), //你的封面地址
+          // width: document.documentElement.clientWidth,
+          notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+          controlBar: {
+              timeDivider: true,
+              durationDisplay: true,
+              remainingTimeDisplay: false,
+              fullscreenToggle: true, //全屏按钮
+          },
+      },
+      barForm: {
+        fireType: "",
+        address: "",
+      },
+      monthList:[],
+      houseList:[],
+      proptionList:[],
+      proptionMapList:[],
+      timeArea: 1,
+    };
+  },
+  mixins: [linstener,map],
+  components: { barChart, lineSmooth, gauge},
+  created() {
+    this.getData();
+  },
+  mounted() {
+    window.addEventListener(
+      "resize",
+      () =>
+        this.resizeTimeActions([
+          this.$refs.gauge1,
+          this.$refs.gauge2,
+          this.$refs.gauge3,
+          this.$refs.lineSmooth,
+          this.$refs.barChart,
+        ]),
+      true
+    );
+    this.initMap()
+  },
+  methods: {
+    async getData() {
+      let res = await this.$axios.all([
+        this.$axios.get(this.$api.fire.fireType),
+      ]);
+      if (res[0]) this.fireTypeList = res[0].data;
+      this.getPage();
+      this.getPageMap();
+      this.getHouse();
+      // this.getProption();
+      this.getMonth();
+      this.getZhanbi()
+      this.getXiangqingPage()
+      this.getXiangqingOne()
+    },
+    // 实时警情处理
+    async getPage() {
+      let res = await this.$axios.get(this.$api.jqzhcz.page +
+          "?" +
+          this.$qs.stringify({
+            current: 1,
+            size: 150,
+          })
+      );
+      if (res) {
+        this.tableData = res.data.records;
+        this.tableData2 = res.data.records;
+      }
+    },
+    // 实时警情处理
+    async getPageMap() { //撒点
+      let res = await this.$axios.get(this.$api.jqzhcz.pageMap +
+          "?" +
+          this.$qs.stringify({
+            startTime: '2021-01-01 00:00:00',
+            endTime: '2021-12-05 23:59:59',
+          })
+      );
+      if (res){
+        // window.jMap.Locate.clearLocate()
+        this.proptionMapList = res.data.records.slice(0,30)
+        var arr =[]
+        arr.push(res.data.records.slice(0,30))
+        this.addMarker(arr,"selfManagement")
+      }
+    },
+    async rowClickMap(row){
+      console.log(row)
+      if(this.proptionMapList.every(val=>val.id !== row.id)){
+        this.addMarker([row])
+        window.jMap.goTo({
+            x: Number(row.gisX),
+            y: Number(row.gisY),
+            radius: 1000
+        }, {
+            duration: 3,
+            offset: {
+                heading: -4,
+                pitch: -70,
+                range: 0
+            }
+        })
+      }
+        this.addMarkerInfo(row)
+    },
+    // 创建标点和点击事件
+    // addMarker(lnglats,type) {
+    //   console.log(lnglats)
+    //   var a = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg"
+    //     let target = lnglats.map((val) => {
+    //       if (type == 'selfManagement') {
+    //           icon = val.waterAdministrative === '单位' ? this.icon1 : val.waterAdministrative === '市政' ? this.icon2 : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? this.icon3 : "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640926840&t=3457fc1dea60f60f3cd55e48ca6c287c"
+    //       }else{
+    //           icon = val.waterAdministrative === '单位' ?  a : val.waterAdministrative === '市政' ? a : val.waterAdministrative === '社区' || val.waterAdministrative === '居民' ? a : a
+    //       }
+    //       console.log(icon)
+    //         let marker = {
+    //             id: val.id,
+    //             attrbutes: val,
+    //             position: { x: val.gisX, y: val.gisY, z: 0 },
+    //             image: { url: icon,width:29.5,height:48.5 },
+    //         };
+    //         return marker
+    //     })
+    //     window.jMap.Locate.pointLocate(target, {
+    //         isZoom: false,
+    //         scaleByDistance: { minScaling: 0, maxScaling: 1, minDistance: 1000, maxDistance: 30000 },
+    //         click: async (val) => {
+    //           console.log(val)
+    //           let res = await this.$axios.get(this.$api.house.one +
+    //                 "?" +
+    //                 this.$qs.stringify({
+    //                   id: val.attrbutes.id,
+    //                 })
+    //             );
+    //             if (res){
+    //               this.addMarkerInfo(res.data)
+    //             }
+    //         }
+    //     })
+    // },
+    // 标点点击弹窗
+    // addMarkerInfo(res) {
+    //     if (this.oldPopupId && res.id === this.oldPopupId) {
+    //         window.jMap.Popup.hide();
+    //         return this.oldPopup = null
+    //     }
+    //     window.jMap.Popup.show({
+    //         id: res.id,
+    //         //使用自定义窗体
+    //         position: { x: Number(res.gisX), y: Number(res.gisY), z: Number(0) }, //使用自定义窗体
+    //         element: `<div class="ysc-dynamic-layer ys-css3-box" onclick="vue.removePopup">
+    //                       <div class="tableTooltip mapTab">
+    //                       <div class="tableTitle">
+    //                           <div>${res.ajlx}</div>
+    //                       </div>
+    //                       <el-row class="tableContent">
+    //                           <div class="max">案发地址:${res.afdz}</div>
+    //                           <div class="max2">案件性质:${res.ajxz}</div>
+    //                           <div class="max2">案件状态:${res.ajzt}</div>
+    //                           <div class="max">立案时间:${res.lasj}</div>
+    //                           <div class="max2">警情等级:${res.ajdj}</div>
+    //                           <div class="max2">所属中队:${res.zhongdui}</div>
+    //                           <div class="max2">调动车辆:${res.cdcl}</div>
+    //                           <div class="max2">状况:${res.ajzt}</div>
+    //                           <div class="max" :title="${res.bcxx}">报警原因:${res.bcxx}</div>
+    //                           <div class="max2">死亡人数:${res.qrqk}</div>
+    //                           <div class="max2">受伤人数:${res.qrqk}</div>
+    //                           <div class="max2">经济损失:${res.qrqk}</div>
+    //                       </el-row>
+    //                       </div>
+    //                   </div>`,
+    //     }, { isZoom: false, offset: [-170, -310] });
+    //     this.oldPopup = res.id
+    // },
+    // 警情时段分布 
+    async getHouse() {
+      // let res = await this.$axios.get(this.$api.house.alertStatisticsByHouse +
+      //     "?" +
+      //     this.$qs.stringify({
+      //       fireType: this.barForm.fireType,
+      //       startTime: this.$store.state.timeList[0] || "",
+      //       endTime: this.$store.state.timeList[1] || "",
+      //     }));
+      // if (res){ 
+      //   this.houseList = res.data
+      //   this.$refs.lineSmooth.getData()
+      // }
+      // let res = await this.$axios.get(this.$api.jqzhcz.house +
+      // "?" +
+      // this.$qs.stringify({
+       
+      //   startTime: this.$store.state.timeList[0] ,
+      //   endTime: this.$store.state.timeList[1] ,
+      // }));
+      // console.log(res)
+      this.houseList =[]
+      this.$refs.lineSmooth.getData()
+      // let res2 = await this.$axios.get(this.$api.jqzhcz.month +
+      // "?" +
+      // this.$qs.stringify({
+      //   // fireType: this.barForm.fireType,
+      //   startTime: "2021-01-01",
+      //   endTime: "2021-12-31",
+      // }));
+      // console.log(res2)
+      // if (res){ 
+      //   this.houseList = res.data
+      //   this.$refs.lineSmooth.getData()
+      // }
+      
+    },
+    // 警情处置情况
+    async getProption() { //旧
+      // let res = await this.$axios.get(this.$api.house.alertStatistics +
+      //     "?" +
+      //     this.$qs.stringify({
+      //       startTime: this.$store.state.timeList[0] || "",
+      //       endTime: this.$store.state.timeList[1] || "",
+      //     }));
+      // if (res){
+		  // console.log(res.data)
+      //   this.proptionList = res.data;
+      //   this.proptionList[4] = res.data.reduce((data, rel) => {
+      //     console.log(data + rel.number)
+      //     return data + rel.number;
+      //   }, 0);
+      //   console.log(this.proptionList[4]);
+      //   this.$refs.gauge1.getData();
+      //   this.$refs.gauge2.getData();
+      //   this.$refs.gauge3.getData();
+      // }
+    },
+    // 历史警情趋势图
+    async getMonth() {
+      // let res = await this.$axios.get(
+      //   this.$api.house.alertStatisticsByMonth +
+      //     "?" +
+      //     this.$qs.stringify({
+      //       startTime: (new Date().getFullYear() - this.timeArea) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+      //       endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+      //     })
+      // );
+      // if (res) {
+      //   this.monthList = res.data;
+      //   this.$refs.barChart.getData();
+      // }
+
+      let res = await this.$axios.get(
+        this.$api.jqzhcz.month +
+          "?" +
+          this.$qs.stringify({
+            startTime: (new Date().getFullYear() - this.timeArea) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+            endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+          })
+      );
+      console.log(res)
+      if (res) {
+        this.monthList = res.data;
+        this.$refs.barChart.getData();
+      }
+    },
+    searchTime(val){
+      this.timeArea = val
+      this.getMonth()
+    },
+
+
+    // 警情占比 
+    async getZhanbi() {
+      let res = await this.$axios.get(this.$api.jqzhcz.alertStatistics +
+      "?" +
+      this.$qs.stringify({
+        // fireType: this.barForm.fireType,
+        startTime: "2021-01-01",
+        endTime: "2021-12-31",
+      }));
+      console.log(res)
+      this.proptionList = res.data
+    },
+    // 警情详情 
+    async getXiangqingPage() {
+      let res = await this.$axios.get(this.$api.jqzhcz.page +
+      "?" +
+      this.$qs.stringify({
+        // fireType: this.barForm.fireType,
+        current: 1,
+        size: 10,
+      }));
+      console.log(res)
+    //  {
+    //   "status": "SUCCESS",
+    //   "code": "0",
+    //   "msg": null,
+    //   "data": {
+    //     "records": [
+    //       {
+    //         "gisX": 121.38267900,
+    //         "gisY": 31.14120400,
+    //         "sjc": "2015-10-29 10:57:44",
+    //         "id": "00021f6556c34d44a75ea287f40bed42",
+    //         "zgzd": "闵行",
+    //         "ajsjd": "10:00-11:00",
+    //         "tzdcsj": null,
+    //         "tzcssj": null,
+    //         "tzkzsj": null,
+    //         "tzxmsj": null,
+    //         "tzfdsj": "0:7:6",
+    //         "qy": "中外环间",
+    //         "ajlx": "火灾",
+    //         "afdz": "闵行区 顾戴路1126弄9号207室",
+    //         "lasj": "2015-10-29 10:57:43",
+    //         "larq": "2015-10-29",
+    //         "czdx": "一般居民",
+    //         "ajlxdm": "1",
+    //         "ajdj": "一级",
+    //         "zhongdui": "七宝",
+    //         "qx": "闵行区",
+    //         "ajbh": "201510291056595218104104",
+    //         "ajzt": "归档",
+    //         "ajxz": "实警",
+    //         "tzsj": "2015-10-29 10:57:53",
+    //         "dcsj": null,
+    //         "cssj": null,
+    //         "kzsj": null,
+    //         "xmsj": null,
+    //         "fdsj": "2015-10-29 11:04:59",
+    //         "bcxx": "房间床上着火,房间内无人",
+    //         "cdcl": 3,
+    //         "ajqy": null,
+    //         "bdpAudit": null,
+    //         "zgjgbh": null,
+    //         "streettown": "莘庄镇",
+    //         "created": null,
+    //         "updated": "2021-11-02 15:14:26",
+    //         "yxx": false,
+    //         "qrqk": 1,
+    //         "fairIs": 2,
+    //         "callPolice": null,
+    //         "policePhone": null,
+    //         "propertyLoss": null,
+    //         "deathToll": null,
+    //         "nonFatal": null,
+    //         "carList": null
+    //       },
+    //       {
+    //         "gisX": 121.40478000,
+    //         "gisY": 31.13490600,
+    //         "sjc": "2021-07-27 20:24:07",
+    //         "id": "00043690ffe64c8d87957771d16594e9",
+    //         "zgzd": "徐汇",
+    //         "ajsjd": "04:00-05:00",
+    //         "tzdcsj": "0:7:49",
+    //         "tzcssj": null,
+    //         "tzkzsj": null,
+    //         "tzxmsj": null,
+    //         "tzfdsj": "0:29:35",
+    //         "qy": "内中环间",
+    //         "ajlx": "抢险救援",
+    //         "afdz": "闵行区 梅陇二村6号604室(防汛)",
+    //         "lasj": "2021-07-26 04:50:47",
+    //         "larq": "2021-07-26",
+    //         "czdx": "高空排险",
+    //         "ajlxdm": "2",
+    //         "ajdj": "零级",
+    //         "zhongdui": "梅陇",
+    //         "qx": "闵行区",
+    //         "ajbh": "202107260447261682268891",
+    //         "ajzt": "待审",
+    //         "ajxz": "实警",
+    //         "tzsj": "2021-07-26 04:50:51",
+    //         "dcsj": "2021-07-26 04:58:40",
+    //         "cssj": null,
+    //         "kzsj": null,
+    //         "xmsj": null,
+    //         "fdsj": "2021-07-26 05:20:26",
+    //         "bcxx": "雨棚快要掉落,请民警到场处理。坠物。高空取物。\n",
+    //         "cdcl": 1,
+    //         "ajqy": null,
+    //         "bdpAudit": null,
+    //         "zgjgbh": null,
+    //         "streettown": null,
+    //         "created": "2021-07-26 04:52:12",
+    //         "updated": "2021-11-02 15:14:26",
+    //         "yxx": false,
+    //         "qrqk": 0,
+    //         "fairIs": 2,
+    //         "callPolice": null,
+    //         "policePhone": null,
+    //         "propertyLoss": null,
+    //         "deathToll": null,
+    //         "nonFatal": null,
+    //         "carList": null
+    //       },
+    //       {
+    //         "gisX": 121.34898300,
+    //         "gisY": 31.18285500,
+    //         "sjc": "2015-09-27 13:14:52",
+    //         "id": "00045528b7c2454795ef5d6de8812a03",
+    //         "zgzd": "闵行",
+    //         "ajsjd": "13:00-14:00",
+    //         "tzdcsj": "0:9:31",
+    //         "tzcssj": null,
+    //         "tzkzsj": null,
+    //         "tzxmsj": "0:10:5",
+    //         "tzfdsj": "0:15:36",
+    //         "qy": "外环以外",
+    //         "ajlx": "火灾",
+    //         "afdz": "闵行区 航东路750弄13号门口",
+    //         "lasj": "2015-09-27 13:14:52",
+    //         "larq": "0000-00-00",
+    //         "czdx": "室外电力设施",
+    //         "ajlxdm": "1",
+    //         "ajdj": "一级",
+    //         "zhongdui": "新虹",
+    //         "qx": "闵行区",
+    //         "ajbh": "2015092713134186813030",
+    //         "ajzt": "归档",
+    //         "ajxz": "实警",
+    //         "tzsj": "2015-09-27 13:14:58",
+    //         "dcsj": "2015-09-27 13:24:29",
+    //         "cssj": null,
+    //         "kzsj": null,
+    //         "xmsj": "2015-09-27 13:25:03",
+    //         "fdsj": "2015-09-27 13:30:34",
+    //         "bcxx": "上址着火,请民警到场处理。(已处电力公司)",
+    //         "cdcl": 1,
+    //         "ajqy": null,
+    //         "bdpAudit": null,
+    //         "zgjgbh": null,
+    //         "streettown": "新虹街道",
+    //         "created": "2021-03-24 14:35:04",
+    //         "updated": "2021-11-02 15:14:26",
+    //         "yxx": false,
+    //         "qrqk": 1,
+    //         "fairIs": 2,
+    //         "callPolice": null,
+    //         "policePhone": null,
+    //         "propertyLoss": null,
+    //         "deathToll": null,
+    //         "nonFatal": null,
+    //         "carList": null
+    //       },
+    //       {
+    //         "gisX": 121.40045166,
+    //         "gisY": 31.10819244,
+    //         "sjc": "2020-04-29 09:30:06",
+    //         "id": "0004c48e2c5c4b8180f9bbf700c1114b",
+    //         "zgzd": "闵行",
+    //         "ajsjd": "13:00-14:00",
+    //         "tzdcsj": "0:19:51",
+    //         "tzcssj": null,
+    //         "tzkzsj": null,
+    //         "tzxmsj": null,
+    //         "tzfdsj": "0:20:39",
+    //         "qy": "外环以外",
+    //         "ajlx": "抢险救援",
+    //         "afdz": "闵行区 莘南花苑二村100号601室",
+    //         "lasj": "2020-02-04 13:11:51",
+    //         "larq": "0000-00-00",
+    //         "czdx": "人员被困",
+    //         "ajlxdm": "2",
+    //         "ajdj": "一级",
+    //         "zhongdui": "莘庄",
+    //         "qx": "闵行区",
+    //         "ajbh": "202002041309076733036985",
+    //         "ajzt": "待审",
+    //         "ajxz": "实警",
+    //         "tzsj": "2020-02-04 13:11:51",
+    //         "dcsj": "2020-02-04 13:31:42",
+    //         "cssj": null,
+    //         "kzsj": null,
+    //         "xmsj": null,
+    //         "fdsj": "2020-02-04 13:32:30",
+    //         "bcxx": "报警人称内屋的门打不开,一九岁的孩子被困在内,无不适。\u0003",
+    //         "cdcl": 1,
+    //         "ajqy": null,
+    //         "bdpAudit": null,
+    //         "zgjgbh": null,
+    //         "streettown": null,
+    //         "created": "2021-03-24 14:35:04",
+    //         "updated": "2021-11-02 15:14:26",
+    //         "yxx": false,
+    //         "qrqk": 0,
+    //         "fairIs": 2,
+    //         "callPolice": null,
+    //         "policePhone": null,
+    //         "propertyLoss": null,
+    //         "deathToll": null,
+    //         "nonFatal": null,
+    //         "carList": null
+    //       },
+    //       {
+    //         "gisX": 121.42002100,
+    //         "gisY": 31.04428800,
+    //         "sjc": "2020-01-19 08:57:06",
+    //         "id": "000651ba959f4fd6a55725c2d3579955",
+    //         "zgzd": "闵行",
+    //         "ajsjd": "14:00-15:00",
+    //         "tzdcsj": "0:17:0",
+    //         "tzcssj": null,
+    //         "tzkzsj": null,
+    //         "tzxmsj": "0:17:25",
+    //         "tzfdsj": "0:19:34",
+    //         "qy": "外环以外",
+    //         "ajlx": "火灾",
+    //         "afdz": "闵行区 S32 往外地方向 过S4 50米(误报)",
+    //         "lasj": "2019-12-02 14:23:13",
+    //         "larq": "0000-00-00",
+    //         "czdx": "机动车",
+    //         "ajlxdm": "1",
+    //         "ajdj": "一级",
+    //         "zhongdui": "闵行",
+    //         "qx": "闵行区",
+    //         "ajbh": "2019120214205201402828",
+    //         "ajzt": "归档",
+    //         "ajxz": "虚警",
+    //         "tzsj": "2019-12-02 14:23:38",
+    //         "dcsj": "2019-12-02 14:40:38",
+    //         "cssj": null,
+    //         "kzsj": null,
+    //         "xmsj": "2019-12-02 14:41:03",
+    //         "fdsj": "2019-12-02 14:43:12",
+    //         "bcxx": "面包车引擎盖线路着火,冒烟,请民警到场处理。消防共听",
+    //         "cdcl": 3,
+    //         "ajqy": null,
+    //         "bdpAudit": null,
+    //         "zgjgbh": null,
+    //         "streettown": "莘庄镇",
+    //         "created": "2021-03-24 14:35:04",
+    //         "updated": "2021-11-02 15:14:26",
+    //         "yxx": false,
+    //         "qrqk": 1,
+    //         "fairIs": 2,
+    //         "callPolice": null,
+    //         "policePhone": null,
+    //         "propertyLoss": null,
+    //         "deathToll": null,
+    //         "nonFatal": null,
+    //         "carList": null
+    //       }
+    //     ],
+    //     "total": 33766,
+    //     "size": 5,
+    //     "current": 1
+    //   },
+    //   "exception": null
+    // }
+      
+    },
+    async getXiangqingOne() {
+      let res = await this.$axios.get(this.$api.jqzhcz.one +
+      "?" +
+      this.$qs.stringify({
+        id: "00021f6556c34d44a75ea287f40bed42",
+      }));
+      console.log(res)
+      // {
+      //     "status": "SUCCESS",
+      //     "code": "0",
+      //     "msg": null,
+      //     "data": {
+      //         "gisX": 121.382679,
+      //         "gisY": 31.141204,
+      //         "sjc": "2015-10-29 10:57:44",
+      //         "id": "00021f6556c34d44a75ea287f40bed42",
+      //         "zgzd": "闵行",
+      //         "ajsjd": "10:00-11:00",
+      //         "tzdcsj": null,
+      //         "tzcssj": null,
+      //         "tzkzsj": null,
+      //         "tzxmsj": null,
+      //         "tzfdsj": "0:7:6",
+      //         "qy": "中外环间",
+      //         "ajlx": "火灾",
+      //         "afdz": "闵行区 顾戴路1126弄9号207室",
+      //         "lasj": "2015-10-29 10:57:43",
+      //         "larq": "2015-10-29",
+      //         "czdx": "一般居民",
+      //         "ajlxdm": "1",
+      //         "ajdj": "一级",
+      //         "zhongdui": "七宝",
+      //         "qx": "闵行区",
+      //         "ajbh": "201510291056595218104104",
+      //         "ajzt": "归档",
+      //         "ajxz": "实警",
+      //         "tzsj": "2015-10-29 10:57:53",
+      //         "dcsj": null,
+      //         "cssj": null,
+      //         "kzsj": null,
+      //         "xmsj": null,
+      //         "fdsj": "2015-10-29 11:04:59",
+      //         "bcxx": "房间床上着火,房间内无人",
+      //         "cdcl": 3,
+      //         "ajqy": null,
+      //         "bdpAudit": null,
+      //         "zgjgbh": null,
+      //         "streettown": "莘庄镇",
+      //         "created": null,
+      //         "updated": "2021-11-02 15:14:26",
+      //         "yxx": false,
+      //         "qrqk": 1,
+      //         "fairIs": 2,
+      //         "callPolice": null,
+      //         "policePhone": null,
+      //         "propertyLoss": null,
+      //         "deathToll": null,
+      //         "nonFatal": null,
+      //         "carList": []
+      //     },
+      //     "exception": null
+      // }
+      
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.videoBox{
+  width: 100%;
+  height: auto;
+}
+.contentBox {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding-bottom: 0.125rem;
+  color: #fff;
+  // font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+  & > .el-col {
+    flex: 1;
+    max-width: 8rem;
+    height: 100%;
+  }
+  .leftBox {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    box-sizing: border-box;
+    & > .el-col {
+      flex: 1;
+      max-height: 50%;
+      background: url('~@a/img/enforce/bg1.png') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      h4 {
+        font-size: 0.2125rem;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+        text-align: center;
+        color: #00ffff;
+      }
+    }
+    .leftTop {
+      padding: 0.375rem 0.475rem 0.1875rem;
+      margin-bottom: 0.125rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .leftTopContent {
+        width: 100%;
+        height: 100%;
+        display: block;
+        .selectBar {
+          width: 100%;
+          display: flex;
+          justify-content: flex-end;
+          height: 0.875rem;
+          padding: 0.25rem 0;
+        }
+        .fireBar {
+          height: calc(100% - 0.875rem);
+        }
+      }
+    }
+    .leftBot {
+      padding: 0.375rem 0.45rem 0.1875rem;
+      box-sizing: border-box;
+      .leftBotContent {
+        width: 100%;
+        height: 100%;
+        display: block;
+        .selectBar {
+          width: 100%;
+          display: flex;
+          justify-content: flex-start;
+          height: 0.875rem;
+          padding: 0.25rem 0;
+          .el-row{
+            display: flex;
+            .el-button {
+              // width: 0.375rem;
+              height: 0.325rem;
+              min-height: auto;
+              padding: 0 .0625rem;
+              margin-right: 0.075rem;
+              margin-left: 0;
+              background: #000707;
+              color: #fff;
+              border: 1px solid;
+              box-sizing: border-box;
+              border-radius: .0375rem;
+              font-size: 0.15rem;
+              border-image: linear-gradient(0deg, #0461c2 0%, #0ecdf1 100%) 1 1;
+            }
+            .btnClick {
+              color: #fccf2a;
+              border-image: linear-gradient(0deg, #ff6800 0%, #fccf2a 100%) 1 1;
+            }
+          }
+        }
+        .fireBar {
+          height: calc(100% - 0.875rem);
+        }
+      }
+    }
+  }
+  .rightBox {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    box-sizing: border-box;
+    & > .el-col {
+      flex: 1;
+      background: url(~@a/img/enforce/bg1.png) no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      h4 {
+        font-size: 0.2125rem;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+        text-align: center;
+        color: #00ffff;
+      }
+    }
+    .rightTop {
+      padding: 0.1rem 0.475rem 0.1875rem;
+      margin-bottom: 0.125rem;
+      max-height:30%;
+      .rightBoxCon {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        & > .el-row {
+          flex: none;
+          width: 33.33%;
+          display: flex;
+          flex-direction: column;
+        }
+        .rightTopTitle {
+          span {
+            font-size: 0.2125rem;
+            text-align: center;
+          }
+          justify-content: center;
+        }
+        .rightTopNumber {
+          width:80%;
+          margin: 0 10%;
+          justify-content: center;
+          &>span {
+            margin: 0 auto;
+            padding: 0.1rem 0.2rem;
+            font-size: 0.14rem;
+            border-radius: 0.1875rem;
+            display: flex;
+            box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+          }
+        }
+        .rightTopChart {
+          margin: 0.1rem 0 0;
+        }
+      }
+    }
+    .rightBot {
+      flex: 1;
+      max-height: 35%;
+      padding: 0.5rem 0.35rem 0.25rem;
+      box-sizing: border-box;
+      position: relative;
+      /deep/ .cell {
+       
+        text-align: center !important;
+      }
+      /deep/ td{
+        min-width: auto !important;
+        width: auto !important;
+        text-align: left !important;
+        padding:0;
+      }
+      /deep/ .box-card{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        border-radius: 3%;
+        width: 80%;
+        max-height: 100%;
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.6);
+        border: none;
+        color: #FFF;
+        .el-card__header{
+          padding: .125rem;
+          border-color: #30cfff;
+          .card-header{
+            display: flex;
+            font-size: .2rem;
+            justify-content: space-between;
+            align-items: center;
+            i{
+              font-size: .275rem;
+            }
+          }
+        }
+        img{
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+    .rightBot2 {
+      flex: 1;
+      max-height: 34%;
+      margin-top:1%;
+      padding: 0.5rem 0.35rem 0.25rem;
+      box-sizing: border-box;
+      position: relative;
+      .shui{
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.5);
+        
+        margin:-10px 0px 10px 0;
+        font-size: 14px;
+        padding:6px;
+        text-align: center;
+        font-size: 14px;
+        text-align: left;
+        width:100%;
+        .title{
+          width:34%;
+        }
+        .title1{
+          width:22%;
+          
+        }
+        .title2{
+          width:22%;
+          color:red
+        }
+        .title3{
+          width:22%;
+          color:#00ffff
+        }
+      }
+      /deep/ .cell {
+        text-align: center !important;
+      }
+      /deep/ td{
+        min-width: auto !important;
+        width: auto !important;
+        text-align: left !important;
+        padding:0;
+      }
+      /deep/ .el-table__body-wrapper{
+        height: 65% !important;;
+      }
+      /deep/ .box-card{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        border-radius: 3%;
+        width: 80%;
+        max-height: 100%;
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.6);
+        border: none;
+        color: #FFF;
+        .el-card__header{
+          padding: .125rem;
+          border-color: #30cfff;
+          .card-header{
+            display: flex;
+            font-size: .2rem;
+            justify-content: space-between;
+            align-items: center;
+            i{
+              font-size: .275rem;
+            }
+          }
+        }
+        img{
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+    
+  }
+}
+.tableTooltip{
+  width:400px;
+}
+.liucheng{
+  width:100%;
+  position: relative;
+  padding:20px;
+  img{
+    width:100%;
+  }
+  .jz{
+    font-size:14px;
+    color:#fff;
+    list-style: 50%;
+    text-align: center;
+    position: absolute;
+    top:35%;
+    width:23%;
+    text-align: center;
+  }
+  
+}
+.tipdan{
+  background: url("~@a/img/qyzz/baogao.png") no-repeat ;
+  background-size: 100% 100%;
+  margin:10px 10px 0 0;
+  font-size: 14px;
+  padding:4px;
+  text-align: center;
+}
+.mapTips{
+  border:1px solid #00ffff;
+  border-radius: 4px;
+  margin:0 8px 10px 0;
+  box-shadow:0px 0px 10px #00ffff;
+  .el-checkbox{
+    color:#fff;
+  }
+}
+/deep/  .el-checkbox__inner{
+    background-color:transparent;
+}
+// /deep/  .el-checkbox__inner{
+//     background-color:transparent;
+//     border-color: #00ffff;
+// }
+// /deep/ .el-checkbox__input.is-checked{
+//   background-color:transparent;
+//     border-color: #00ffff;
+// }
+
+@media screen and (min-width: 1940px) {
+  .contentBox .rightBox .rightTop .rightBoxCon .rightTopChart{
+    height:150px;
+  }
+}
+</style>
+<style>
+.el-checkbox{
+  padding-bottom:6px;
+  display: block;
+  border-bottom:1px solid #00ffff;
+  padding:2px 0 2px 8px;
+  width:100%;
+  box-sizing: border-box;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate 
+  .el-checkbox__inner{
+      background-color:transparent;
+      border-color:#00ffff;
+      border-bottom:1px solid #00ffff;
+      
+  }
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: #00ffff;
+      background-color:transparent;
+     }
+  .el-checkbox.is-bordered.is-checked{
+      border-color: #00ffff;
+      background-color:transparent;
+     }
+  .el-checkbox__input.is-focus .el-checkbox__inner{
+      border-color:  #00ffff;
+      background-color:transparent;
+  }
+</style>

File diff suppressed because it is too large
+ 767 - 207
src/views/comprehensive-disposal.vue


+ 26 - 11
src/views/enforcement-dynamic.vue

@@ -1,7 +1,7 @@
 <template>
   <el-row class="contentBox">
     <transition name="el-fade-in-linear">
-      <el-col class="leftBox" v-show="leftBtn">
+      <el-col class="flexJ leftBox" v-show="leftBtn">
         <el-col class="leftTop">
           <h4>消防执法情况</h4>
           <el-row class="leftTopContent">
@@ -26,9 +26,9 @@
             <el-col :span="7"> </el-col>
           </el-row>
         </el-col>
-        <el-col class="leftBot">
+        <el-col class="flexJ leftBot">
           <h4>行政许可情况</h4>
-          <el-row class="leftBotTop">
+          <el-row class="flexJ leftBotTop">
             <el-row style="z-index:9">
               <el-col>{{ alFsdAllNumber.qualifiedRadio * 100 || 0 }}%</el-col>
               <el-col>合格率</el-col>
@@ -162,10 +162,10 @@
 
 <script>
 import wordCloud from "@c/wordCloud";
-import linstener from "@c/mixins/linstener";
-// import map from "@c/mixins/map-data";
-import map from "@c/mixins/map-gaode";
-import category from "@c/category";
+import linstener from "@c/mixins/linstener2";
+import map from "@c/mixins/map-data";
+// import map from "@c/mixins/map-gaode";
+import category from "@c/category/index2";
 import liquidFill from "@c/liquid-fill";
 export default {
   data() {
@@ -220,7 +220,9 @@ export default {
     },
     // 行政许可情况
     async getAlFsdAllNumber() {
+      console.log(1)
       let res = await this.$axios.get(this.$api.siaeall.alFsdAllNumber);
+      console.log(res)
       if (res) this.alFsdAllNumber = res.data;
     },
     // 投诉举报情况 Top
@@ -236,6 +238,7 @@ export default {
         this.reportComplaintList.sort((a,b)=>{
           return b.value - a.value
         })
+		console.log(this.reportComplaintList)
     },
     // 投诉举报情况 Bot
     async getReportStatistics() {
@@ -276,7 +279,8 @@ export default {
       }
     }
     .leftTop {
-      padding: 0.375rem 0.475rem 0.1875rem;
+      //padding: 0.375rem 0.475rem 0.1875rem;
+      padding: 0rem 0.475rem 0.1875rem;
       height: 5.75rem;
       margin-bottom: 0.125rem;
       display: flex;
@@ -284,20 +288,24 @@ export default {
       align-items: center;
       .leftTopContent {
         width: 100%;
-        max-height: 100%;
+        // max-height: 100%;
+        max-height: 2rem; //大屏
+        margin-top: 0.2rem; //大屏
+        overflow-y: scroll;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         & > .el-col {
           width: 1.9375rem;
-          height: 1.3125rem;
+          // height: 1.3125rem;
           // background: url(~@a/img/enforce/bg3.png) no-repeat;
           box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
           background-size: 100% 100%;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
-          padding: 0.125rem 0.1rem;
+          // padding: 0.125rem 0.1rem;
+          padding:0.06rem 0.1rem;
           box-sizing: border-box;
           margin-bottom: 0.125rem;
           border-radius: .125rem;
@@ -515,5 +523,12 @@ export default {
       }
     }
   }
+
+}
+@media screen and (min-width: 1940px) {
+  .contentBox .rightBox .rightContent .treeMap{
+    height: 26%;
+    margin: -2% 0 6% 0;
+  }
 }
 </style>

+ 34 - 10
src/views/fire-data-analysis.vue

@@ -88,12 +88,12 @@
               :data="tableData"
               class="transparentTableRow"
               height="100%"
-              :row-style="{ height: '.425rem' }"
+              :row-style="{ height: '.425rem'  }"
               cell-style="height:.425rem;box-sizing: border-box;"
               style="width: 100%; margin: 0 auto"
               :cell-class-name="tableRowClassName"
             >
-              <el-table-column
+              <el-table-column 
                 show-overflow-tooltip
                 min-width="20"
                 v-for="item in headerData"
@@ -120,8 +120,8 @@ import categoryLine from "@c/category-line";
 import firePie from "@c/fire-pie";
 import scatter from "@c/scatter";
 // import AMap from 'AMap'
-// import map from "@c/mixins/map-data";
-import map from "@c/mixins/map-gaode";
+import map from "@c/mixins/map-data";
+// import map from "@c/mixins/map-gaode";
 
 export default {
   components: { categoryLine, firePie, scatter },
@@ -129,7 +129,16 @@ export default {
   data() {
     return {
       box:null,
-      tableData: [],
+      tableData: [
+        {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
+        {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
+        {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
+        {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
+        {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
+        {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
+        {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
+        {"address":"x街道45号","burnedArea":"2","propertyLoss":"5","deathToll":"0","nonFatal":"1","disasterHome":"2","nature":"居民","fireCause":"家电","fireGoodsOne":"电视机"},
+      ],
       headerData: [
         { prop: "address", name: "火灾地址" },
         { prop: "burnedArea", name: "过火面积(m²)" },
@@ -177,7 +186,6 @@ export default {
   mounted() {
     // 通过$refs获取dom元素
     this.box = this.$refs.seTable.$el.childNodes[2];
-      console.log( this.box)
     // 监听这个dom的scroll事件
     this.box.addEventListener('scroll', (e) => {
       const scrollTop = e.target.scrollTop // 已滚动到可视区域上方的高度
@@ -271,7 +279,9 @@ export default {
             endTime: this.$store.state.timeList[1] || "",
           })
       );
+	  console.log(res.data)
       if (res) this.fireBubbleList = res.data;
+      console.log(this.fireBubbleList)
     },
     // 火灾趋势图 柱状图
     async getTrend() {
@@ -281,14 +291,19 @@ export default {
           this.$qs.stringify({
             address: this.barForm.address,
             fireType: this.barForm.fireType,
-            startTime: (new Date().getFullYear() - this.timeArea) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
-            endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+            // startTime: (new Date().getFullYear() - this.timeArea) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+            // endTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' 00:00:00',
+
+            startTime: "2021-01-01 00:00:00",
+            endTime: "2021-12-06 00:00:00",
           })
       );
+	  console.log(res.data)
       if (res) this.timeData = res.data;
     },
     // 占比图 饼图
     async getFireCause(val) {
+      console.log(this.$store.state.timeList[0])
       let res = await this.$axios.get(
         this.$api.fire.fireCauseRatio +
           "?" +
@@ -298,6 +313,7 @@ export default {
             address:val === 1 ? this.fireCauseRatioObj.address :val === 2 ? this.fireCauseRatioObj.address2 : ''
           })
       );
+	  console.log(res)
       if (res){
         let ratioList = res.data.map((val) => {
           return {
@@ -320,16 +336,18 @@ export default {
     },
     // 详细火灾情况,表格val
     async getFireStatis() {
+      console.log(this.$store.state.timeList[0])
       let res = await this.$axios.get(
         this.$api.fire.fireStatistics +
           "?" +
           this.$qs.stringify({
             current: this.current,
             size: this.size,
-            startTime: this.$store.state.timeList[0] || "",
-            endTime: this.$store.state.timeList[1] || "",
+            startTime: "2021-01-01 00:00:00",
+            endTime: "2021-12-06 00:00:00",
           })
       );
+	  console.log(res)
       if (res){ 
         this.isScroll = true
         // if(res.data.records.some(val=> val.propertyLoss > 10 * 10000)){
@@ -338,6 +356,7 @@ export default {
             val.propertyLoss = val.propertyLoss && (val.propertyLoss / 10000) || val.propertyLoss
             return val
           })));
+		  console.log(this.tableData)
         // } else{
           // this.tableData.push(res.data.records);
           // this.headerData[3].name = '财产损失(元)'
@@ -555,4 +574,9 @@ export default {
   //   }
   // }
 }
+
+::v-deep .el-input__icon{
+  width:auto !important;
+}
+
 </style>

+ 21 - 2
src/views/fire-signs.vue

@@ -123,7 +123,8 @@ import categoryLine from "@c/category-line";
 import category from "@c/category";
 import seTable from "@c/se-table";
 // import AMap from 'AMap'
-import map from "@c/mixins/map-gaode";
+import map from "@c/mixins/map-data";
+// import map from "@c/mixins/map-gaode";
 import radarChart from "@c/radar";
 import wordCloud from "@c/wordCloud";
 export default {
@@ -515,7 +516,7 @@ export default {
         margin-bottom: 0.125rem;
       }
       .rightBot{
-        height: 20%;
+        height: 30%;
         flex: none;
         background: url('~@a/img/home/bg2.png') no-repeat;
         background-size: 100% 100%;
@@ -523,4 +524,22 @@ export default {
     }
   }
 }
+@media screen and (min-width: 1940px) {
+  .contentBox .leftBox .leftTop .threeBox > .flexBoxE > .el-row {
+    font-size: 0.14rem;
+  }
+  .contentBox .leftBox .leftTop .threeBox > .flexBoxE > .el-row .el-col .el-progress{
+    height:auto
+  }
+  .contentBox .leftBox .leftTop .threeBox > .flexBoxE .el-progress .el-progress-bar__inner span{
+    font-size: 0.12rem;
+    line-height:0.1rem;
+    margin-top:-4px;
+  }
+  .contentBox .leftBox .leftTop .threeBox > .flexBoxE .el-progress .el-progress-bar__inner .totle{
+    font-size: 0.12rem;
+    line-height:0.1rem;
+    
+  }
+}
 </style>

+ 24 - 8
src/views/head.vue

@@ -4,9 +4,10 @@
     <div class="day">{{ dateDay }}</div>
     <div class="time">{{ dataTime }}</div>
     <div class="homeIcon" v-if="$route.fullPath !== '/'">
-      <i class="el-icon-s-home" @click="$router.push({ path: '/' })"></i>
+      <img src="~@a/img/icon/close.png" alt="" class="timeImage2" @click="fanhui"  />
+      <!-- <i class="el-icon-s-home" @click="$router.push({ path: '/' })"></i> -->
     </div>
-    <div class="weather">
+    <!-- <div class="weather">
       <img
         v-if="weatherObj.weather_pic"
         :src="weatherObj.weather_pic || ''"
@@ -15,10 +16,11 @@
       <span v-if="weatherObj.weather"
         >{{ weatherObj.weather }} {{ weatherObj.temperature }}℃</span
       >
-    </div>
+    </div> -->
     <el-row class="timeSelect" v-if="$route.fullPath !== '/'">
       <img src="~@a/img/home/circle_box.png" alt="" class="timeImage" />
       <el-button size="mini" @click="timeTypeClick('day')" :class="{ btnClick: timeArea === 'day' }">今日</el-button>
+      <el-button size="mini" @click="timeTypeClick('z')" :class="{ btnClick: timeArea === 'z' }">本周</el-button>
       <el-button size="mini" @click="timeTypeClick('m')" :class="{ btnClick: timeArea === 'm' }">当月</el-button>
       <el-button size="mini" @click="timeTypeClick('s')" :class="{ btnClick: timeArea === 's' }">季度</el-button>
       <el-button size="mini" @click="timeTypeClick('by')" style="width:.5rem;" :class="{ btnClick: timeArea === 'by' }">上半年</el-button>
@@ -44,6 +46,8 @@
 
 <script>
 import {
+  getWeekStartDate, 
+  getWeekEndDate, 
   getMonthStartDate,
   getMonthEndDate,
   getQuarterStartDate,
@@ -58,7 +62,7 @@ export default {
     return {
       dateDay: "",
       dataTime: "",
-      timeArea: "",
+      timeArea: "m",
       weatherObj: {},
       dataWeekList: ["一", "二", "三", "四", "五", "六", "七"],
       valueTime: [],
@@ -76,6 +80,7 @@ export default {
     setInterval(() => {
       this.getWeather();
     }, 1000 * 60 * 30);
+    this.timeTypeClick('m')
   },
   watch: {
     "$store.state.timeList"(val) {
@@ -107,11 +112,14 @@ export default {
     }, 1000);
   },
   methods: {
+    fanhui(){
+      this.$router.go(-1);
+    },
     async getWeather() {
-      let res = await this.$axios.get("/aliWeather");
-      if (res.showapi_res_code === 0) {
-        this.weatherObj = res.showapi_res_body.now;
-      }
+      // let res = await this.$axios.get("/aliWeather");
+      // if (res.showapi_res_code === 0) {
+      //   this.weatherObj = res.showapi_res_body.now;
+      // }
     },
     timeTypeClick(val) {
       if (val === "day") {
@@ -119,6 +127,11 @@ export default {
           new Date().Format("yyyy-MM-dd") + " 00:00:00",
           new Date().Format("yyyy-MM-dd") + " 23:59:59",
         ]);
+      } else if (val === "z") {
+        this.$store.commit("changTimeList", [
+          getWeekStartDate(),
+          getWeekEndDate(),
+        ]);
       } else if (val === "m") {
         this.$store.commit("changTimeList", [
           getMonthStartDate(),
@@ -282,4 +295,7 @@ export default {
     }
   }
 }
+.timeImage2{
+  width:0.5rem
+}
 </style>

+ 297 - 22
src/views/rescue-station.vue

@@ -16,6 +16,7 @@
                 <el-col class="propName">{{item.name}}</el-col>
               </el-col>
             </template>
+            
              <se-table
              v-else
               ref="seTable"
@@ -137,22 +138,22 @@
                           <div>{{ item.carNumber }}</div>
                           <div>车牌号</div>
                         </el-col>
-                        <el-col>
+                        <el-col v-if="item.correspondent">
                           <img src="~@a/img/test/bg7.png" alt="" />
                           <div>{{ item.correspondent }}</div>
                           <div>指挥员</div>
                         </el-col>
-                        <el-col>
+                        <el-col v-if="item.commander">
                           <img src="~@a/img/test/bg7.png" alt="" />
                           <div>{{ item.commander }}</div>
                           <div>通讯员</div>
                         </el-col>
-                        <el-col>
+                        <el-col v-if="item.firemen">
                           <img src="~@a/img/test/bg7.png" alt="" />
                           <div>{{ item.firemen }}</div>
                           <div>消防员</div>
                         </el-col>
-                        <el-col>
+                        <el-col v-if="item.driver">
                           <img src="~@a/img/test/bg7.png" alt="" />
                           <div>{{ item.driver }}</div>
                           <div>驾驶员</div>
@@ -204,8 +205,8 @@
 
 <script>
 import linstener from "@c/mixins/linstener";
-// import map from "@c/mixins/map-data";
-import map from "@c/mixins/map-gaode";
+import map from "@c/mixins/map-data";
+// import map from "@c/mixins/map-gaode";
 import seTable from "@c/se-table";
 export default {
   data() {
@@ -309,9 +310,29 @@ export default {
         },
       ],
       tableData2: [
+        {
+          id:'1',
+          address: "闵行支队",
+          car: "1辆",
+          lochus: "1人",
+          children:[
+            {type:'备训',carNumber:"沪X5449应急",personNumber:'1', commander: "汪志浩"},
+            
+          ]
+        },
+        {
+          id:'2',
+          address: "七宝站",
+          car: "5辆",
+          lochus: "12人",
+          children:[
+            {type:'调研',carNumber:"沪X5982应急",personNumber:'1', correspondent: "唐爽"},
+            {type:'待命',carNumber:"沪X5490应急",personNumber:'4',},
+          ]
+        },
         {
           id:'222',
-          address: "XX消防站",
+          address: "光华站",
           car: "3辆",
           lochus: "12人",
           children:[
@@ -322,7 +343,7 @@ export default {
         },
         {
           id:'222',
-          address: "XX消防站",
+          address: "华漕站",
           car: "3辆",
           lochus: "12人",
           children:[
@@ -333,7 +354,7 @@ export default {
         },
         {
           id:'222',
-          address: "XX消防站",
+          address: "吴泾站",
           car: "3辆",
           lochus: "12人",
           children:[
@@ -344,7 +365,7 @@ export default {
         },
         {
           id:'222',
-          address: "XX消防站",
+          address: "新虹站",
           car: "3辆",
           lochus: "12人",
           children:[
@@ -355,7 +376,7 @@ export default {
         },
         {
           id:'222',
-          address: "XX消防站",
+          address: "杜行站",
           car: "3辆",
           lochus: "12人",
           children:[
@@ -366,7 +387,7 @@ export default {
         },
         {
           id:'222',
-          address: "XX消防站",
+          address: "浦江站",
           car: "3辆",
           lochus: "12人",
           children:[
@@ -391,8 +412,19 @@ export default {
         { prop: "department", name: "所属中队" },
         { prop: "status", name: "状况" },
       ],
-      unitBeOnDutyList: [],
-      unitBeOnDutyHeaderList: [],
+      unitBeOnDutyList: [
+        
+      ],
+
+      // unitBeOnDutyHeaderList: [
+      //   { prop: "name", name: "姓名" },
+      //   { prop: "postName", name: "岗位名称" },
+      //   { prop: "organizationAddress", name: "机构地址" },
+      //   { prop: "organizationName", name: "机构名称" },
+      //   { prop: "organizationShort", name: "机构简称" },
+      //   { prop: "time", name: "时间" },
+
+      // ],
       unitBeOnDutyListData: [],
     };
   },
@@ -421,18 +453,33 @@ export default {
       this.getSiAeAllCollect();
       this.getPage();
       this.getFireSiteList();
+      this.getFireSiteDuty2()
+      
+      this.getFireSiteDutyList()
+      this.getFireSiteDutyPageMap()//撒点
+      this.getFireSiteDutyOne()//详情
     },
     // 支队值班情况
     async getSiAeAllCollect() {
+      console.log(this.timeArea)
       let res = await this.$axios.get(this.$api.water[this.timeArea === 'day' ? 'unitBeOnDuty' : 'unitBeOnDutyList'] +
           "?" +
           this.$qs.stringify({
-            startTime: this.timeArea === 'day' ? "2020-03-03 00:00:00" :'2020-03-01 00:00:00',
-            endTime:  this.timeArea === 'day' ? "2020-03-03 23:59:59" :'2020-03-31 23:59:59',
+            startTime: this.timeArea === 'day' ? this.$store.state.timeList[0] :'',
+            endTime:  this.timeArea === 'day' ? this.$store.state.timeList[1] :'',
+            // startTime: this.$store.state.timeList[0] || '',
+            // endTime: this.$store.state.timeList[1] || '',
+            // startTime: "2021-01-01 00:00:00",
+            // endTime: "2021-12-31 23:59:59",
           })
       );
-      if (res && this.timeArea === 'day') this.unitBeOnDutyList = res.data;
+      console.log(res)
+      if (res && this.timeArea === 'day') {
+        console.log(res)
+        this.unitBeOnDutyList = res.data;
+      }
       if (res && this.timeArea === 'month' && res.data[0]){
+        console.log(res.data)
         this.unitBeOnDutyHeaderList = Array.from(new Set(res.data[0].map(val=>val.postName))).map(val=>{
           return {
             name:val,
@@ -445,12 +492,20 @@ export default {
           let time = val[0].time.split(' ')[0].split('-')
           time.shift()
           a.time = time.join('-')
-          this.unitBeOnDutyHeaderList.map(value=>{
-            let b = val.filter(reaVal=>reaVal.postName === value.name)
-            a[value.name] = b.length>0 ? b.map(val=>val.name).join(',') :''
-          })
+          // this.unitBeOnDutyHeaderList.map(value=>{
+          //   let b = val.filter(reaVal=>reaVal.postName === value.name)
+          //   a[value.name] = b.length>0 ? b.map(val=>val.name).join(',') :''console.log(111)
+          // })
           return a
         })
+        // let data = res.data
+        // for(let i =0;i<data.length;i++){
+        //   for(let a=0;a<data[i].length;a++){
+        //     this.unitBeOnDutyListData.push(data[i][a])
+        //   }
+        // }
+        // this.unitBeOnDutyListData = this.unitBeOnDutyListData
+        
       }else{
          this.unitBeOnDutyListData = []
       }
@@ -481,6 +536,15 @@ export default {
     },
     // 各站点执勤实力
     async getFireSiteDuty(row, expandedRows) {
+      console.log(1111)
+      let res = await this.$axios.get(this.$api.fireSite.fireSiteDuty2 +
+          "?" +
+          this.$qs.stringify({
+            "current":100,
+            "page":1
+          })
+      );
+      console.log(res)
       if(!expandedRows || expandedRows.length<1) return
       // let res = await this.$axios.get(this.$api.fireSite.fireSiteDuty +
       //     "?" +
@@ -489,6 +553,216 @@ export default {
       //     })
       // );
       // if (res) row.children = res.data;
+
+      
+      // if (res) row.children = res.data;
+
+      
+    },
+
+    // 各站点执勤实力分页 wt
+    async getFireSiteDuty2() {
+      
+      let res = await this.$axios.get(this.$api.fireSite.page +
+          "?" +
+          this.$qs.stringify({
+            "current":1,
+            "size":20
+          })
+      );
+      console.log(res)
+      if(res.data.records.length>0){
+        var data = res.data.records
+        for(let i =0;i<data.length;i++){
+          data[i].cheliang = []
+          let res2 = await this.$axios.get(this.$api.fireSite.list +
+              "?" +
+              this.$qs.stringify({
+                "zdCode":data[i].xfjgId,
+              })
+          );
+          if(res2.data.length>0){
+            // console.log(res2.data)
+            data[i].cheliang.push(res2.data)
+          }
+        }
+      }
+      console.log(res)
+      
+    },
+    async getFireSiteDutyList() {//车辆信息整合
+      
+      // let res = await this.$axios.get(this.$api.fireSite.list +
+      //     "?" +
+      //     this.$qs.stringify({
+      //       "zdCode":"933ba380d88a40c2ba99dfb4f9114edb",
+      //     })
+      // );
+      // console.log(res)
+      // {
+      //     "status": "SUCCESS",
+      //     "code": "0",
+      //     "msg": null,
+      //     "data": [
+      //         {
+      //             "id": "402880a83bd0ec47013bd65365e5144b",
+      //             "djzbbm": "210103110K1311112000",
+      //             "zbmc": "闵行                              ",
+      //             "zbbm": "210103110K199",
+      //             "sjzbbm": null,
+      //             "zblxdm": "21010311",
+      //             "djzbzkdm": "0",
+      //             "ssxfjgid": "933ba380d88a40c2ba99dfb4f9114edb",
+      //             "gpsbh": "11943802102",
+      //             "cldjdm": "01",
+      //             "cphm": "沪X5449应急",
+      //             "ggxh": "ELW-3",
+      //             "zcbh": "000000243156",
+      //             "ckj": 1526840,
+      //             "sb": null,
+      //             "ys": "红色",
+      //             "gbdm": "DEU",
+      //             "sccjid": "F28AEC729C5C4D1FB00937F54D05F957",
+      //             "sccjmc": "(德国)Albert Ziegler GmbH & Co. KG",
+      //             "zbrq": "2010-01-15 00:00:00",
+      //             "bfrq": null,
+      //             "yxqz": "2024-01-01 00:00:00",
+      //             "cjh": "WD3YE48129S381337",
+      //             "fdjbh": "MHZD0000 ",
+      //             "pch": null,
+      //             "jldwdm": "2903",
+      //             "clzddmMh": "70",
+      //             "recordStatus": 1,
+      //             "tranStatus": "1",
+      //             "timeStamp": "2021-02-21 17:09:16",
+      //             "remark": "沪X5449应急 带有通信指挥设备",
+      //             "dthh": "闵洞幺",
+      //             "ajbh": null,
+      //             "sfzp": "0",
+      //             "crossDeta": "1",
+      //             "crossTeam": "1",
+      //             "clbh": null,
+      //             "cjsj": "2012-12-26 16:28:08",
+      //             "ccrq": "2009-09-28 00:00:00",
+      //             "cljc": "闵行                                                ",
+      //             "radioChannel": "三频道",
+      //             "gisX": null,
+      //             "gisY": null,
+      //             "zhy": null,
+      //             "txy": "汪志浩",
+      //             "jsy": "费赛华",
+      //             "zdryrs": "0",
+      //             "zdbz": "",
+      //             "sjjsy": null,
+      //             "tczhc": "",
+      //             "lxdh": "1440018974454",
+      //             "yxx": "1",
+      //             "zs": null,
+      //             "zp": null,
+      //             "bll": null,
+      //             "pll": null,
+      //             "scalingHegiht": "0.00",
+      //             "ledsx": 1,
+      //             "xzjgid": "524f014744c54c468069b7028ec6148e",
+      //             "zldm": "100400",
+      //             "zhyid": null,
+      //             "txyid": "5e0e69894ea643c4a747b090b9856f95",
+      //             "jsyid": "6230c569de3b4b0ca91288d4e7a926e0",
+      //             "zsry": null,
+      //             "zsryid": "",
+      //             "ledcmsx": 460,
+      //             "stbll": "",
+      //             "blbz": "0",
+      //             "pdabh": "",
+      //             "sfdyjg": "0",
+      //             "cldtid": null,
+      //             "bdpAudtt": "2021-02-21 17:25:56",
+      //             "sjc": "2021-11-24 11:09:11",
+      //             "carStatus": "待命",
+      //             "equipTypeName": "通讯指挥消防车(TZ)",
+      //             "orgaName": "闵行区消防救援支队",
+      //             "orgaDesc": "闵行支队",
+      //             "jgtree": "010000003100000031011000",
+      //             "orgaAbbrevia": "闵行",
+      //             "orgaSort": 110,
+      //             "standardNum": null,
+      //             "carUrl": null,
+      //             "sjjgid": "5687316efa75479d96c0091a167a3b84",
+      //             "zhidui": "上海总队",
+      //             "updated": "2021-11-24 11:09:31"
+      //         }
+      //     ],
+      //     "exception": null
+      // }
+    },
+    async getFireSiteDutyPageMap() {//撒点\
+      let res = await this.$axios.get(this.$api.fireSite.pageMap);
+      console.log(res)
+      // 返回data里的一个值
+      // {
+      //   bz: null
+      //   callstatus: null
+      //   cjsj: null
+      //   dmsj: null
+      //   dwxz: null
+      //   dz: null
+      //   flag: null
+      //   fzrsjhm: null
+      //   fzrxm: null
+      //   gxsj: null
+      //   id: 1
+      //   jd: 121.35464
+      //   ldgddh: null
+      //   numberid: null
+      //   sszd: null
+      //   sszdid: null
+      //   szwz: null
+      //   wd: 31.17518
+      //   xfzlx: null
+      //   xfzmc: null
+      //   ydwxz: null
+      //   zdid: null
+
+      // }
+    },
+    async getFireSiteDutyOne() {//详情
+      
+      let res = await this.$axios.get(this.$api.fireSite.one + "?" +
+          this.$qs.stringify({
+            "id":"1",
+          }));
+      console.log(res)
+      // {
+      //     "status": "SUCCESS",
+      //     "code": "0",
+      //     "msg": null,
+      //     "data": {
+      //         "id": 1,
+      //         "zdmc": "闵行支队",
+      //         "sszd": "新虹站",
+      //         "xfzmc": "丹桂花园小区微型消防站",
+      //         "dwxz": "居委",
+      //         "dz": "航北路228弄门卫室",
+      //         "szwz": "城郊结合部",
+      //         "ldgddh": "无",
+      //         "fzrxm": "丁春江",
+      //         "fzrsjhm": "13901628416",
+      //         "bz": "七宝镇",
+      //         "xfzlx": "1",
+      //         "jd": 121.35464,
+      //         "wd": 31.17518,
+      //         "cjsj": "2020-07-03 17:15:14",
+      //         "gxsj": "2020-07-03 17:15:14",
+      //         "zdid": 36,
+      //         "sszdid": 41,
+      //         "numberid": "10001",
+      //         "callstatus": 2,
+      //         "flag": 2,
+      //         "dmsj": "2020-09-27 15:09:18",
+      //         "ydwxz": "居委(一般多层)"
+      //     },
+      //     "exception": null
+      // }
     },
     searchTime(val){
       this.timeArea = val
@@ -688,4 +962,5 @@ export default {
     }
   }
 }
-</style>
+
+</style>

+ 47 - 17
src/views/security-plan.vue

@@ -16,11 +16,11 @@
             </div>
             <div>
               <span>阶段:</span>
-              <span>XXXXXXXXXXXXXXXXXXXXX</span>
+              <span>--</span>
             </div>
             <div>
               <span>保卫目标:</span>
-              <span>XXXXXXXXXXXXXXXXXXXXX</span>
+              <span>--</span>
             </div>
           </div>
         </el-col>
@@ -165,9 +165,9 @@
 
 <script>
 import linstener from "@c/mixins/linstener";
-// import map from "@c/mixins/map-data";
-import map from "@c/mixins/map-gaode";
-import gauge from "@c/gauge";
+import map from "@c/mixins/map-data";
+// import map from "@c/mixins/map-gaode";
+import gauge from "@c/gauge/index5";
 export default {
   mixins: [linstener, map],
   components: {gauge},
@@ -384,11 +384,15 @@ export default {
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
+      overflow-y:scroll;
+      
       &>div{
         background: url('~@a/img/home/shidianbg.png');
         background-size: 100% 100%;
         width: 5.9375rem;
         height: 1.0625rem;
+        overflow-y:scroll;
+        // height: 1.0625rem; //大屏注释掉
         display: flex;
         align-items: center;
         font-size: .225rem;
@@ -479,29 +483,35 @@ export default {
       }
     }
     & > .el-col:nth-child(2) {
-      height: 220px;
+      //height: 220px;
+      height:2rem; //大屏
     }
     & > .el-col:nth-child(3) {
       flex: 1;
       height: 30%;
     }
     & > .el-col:nth-child(4) {
-      height: calc(70% - 3rem);
+      height: calc(77% - 3rem);
+      // height:2.6rem;
     }
     .rightTopBox{
       width: 100%;
-      padding: .5rem .625rem .375rem;
+      padding: .3rem .625rem .375rem; //大屏
+      //padding: .5rem .625rem .375rem;
       box-sizing: border-box;
       display: flex;
       justify-content: space-between;
       align-items: center;
       &>div{
-        width: 1.75rem;
-        height: 1.625rem;
+        // width: 1.75rem;
+        // height: 1.625rem;
+        width: 1.17rem;//大屏
+        height: 1.08rem;//大屏
         position: relative;
         span{
           position: absolute;
-          bottom: -0.3125rem;
+          bottom: -0.4125rem;
+          //bottom: -0.3125rem;
           right: 0;
           left: 0;
           margin: auto;
@@ -510,6 +520,8 @@ export default {
           b{
             margin-right: .0625rem;
             font-size: .4rem;
+            // font-size: 0.35rem;//大屏
+            // margin-top:.1rem;//大屏
             font-family: "DS", "DS-B", "DS-BB", "DS-BS";
             line-height: .5rem;
           }
@@ -550,12 +562,17 @@ export default {
         width: 100%;
         height: 100%;
         .titleBoxZq{
-            height: .475rem;
+            // height: .475rem;
+            // line-height: .475rem;
+            // font-size: .225rem;
+            height: .3rem; //大屏
+            line-height: .3rem;//大屏
+            font-size: .18rem;//大屏
             width: 100%;
             color: rgba(0,255,255,1);
             text-indent: .125rem;
-            font-size: .225rem;
-            line-height: .475rem;
+            
+            
             font-weight: bold;
             text-align: left;
             background: rgba(0,250,251,0.10);
@@ -577,8 +594,10 @@ export default {
             width: 50%;
             display: inline-block;
             text-indent: .0625rem;
-            line-height: .4rem;
-            font-size: .2rem;
+            // line-height: .4rem;
+            // font-size: .2rem;
+            line-height: .3rem;//大屏
+            font-size: .18rem;//大屏
             box-sizing: border-box;
             border-bottom: 1px solid rgba(250,250,250,.3);
           }
@@ -589,10 +608,21 @@ export default {
         }
         .clBox{
           width: 100%;
-          height: 40%;
+          height: 60%;
         }
       }
     }
   }
 }
+// .el-table .cell{
+//   line-height: none !important;
+// }
+@media screen and (min-width:1940px) {
+  .contentBox .leftBox .leftTopBox > div{
+    font-size:0.16rem;
+  }
+  .contentBox .leftBox .leftCenterBox .echartsLsit{
+    height:1.15rem;
+  }
+}
 </style>

+ 825 - 48
src/views/self-management.vue

@@ -10,33 +10,35 @@
                 <el-row class="rightTopChart">
                   <gauge ref="gauge1" :dataMap="0.2" :dataNumber="20" color="#F68E6A"></gauge>
                 </el-row>
-                <el-row class="rightTopNumber">消防重点企业数量</el-row>
+                <el-row class="rightTopNumber">消防微站数</el-row>
               </el-row>
               <el-row>
                 <el-row class="rightTopChart">
                   <gauge ref="gauge2" :dataMap="0.3" :dataNumber="30" color="#06B1B9"></gauge>
                 </el-row>
-                <el-row class="rightTopNumber">火灾高危企业数量</el-row>
+                <el-row class="rightTopNumber">消防持证人数</el-row>
               </el-row>
               <el-row>
                 <el-row class="rightTopChart">
-                  <gauge ref="gauge3" :dataMap="0.5"  :dataNumber="50" color="#E4951E"></gauge>
+                  <gauge2 ref="gauge1" :dataMap="0.5"  :dataNumber="50" color="#E4951E"></gauge2>
                 </el-row>
-                <el-row class="rightTopNumber">一般企业数量</el-row>
+                <el-row class="rightTopNumber">培训合格率</el-row>
               </el-row>
             </div>
           </el-row>
         </el-col>
-        <el-col class="leftBot">
+        <el-col class="leftBot" >
           <h4>单位自主巡检情况</h4>
             <se-table
+            style="margin-top:-0.18rem"
+             
               ref="seTable"
               :dataMap="tableData"
               :headerData="headerData"
               :key="windowWidth"
             ></se-table>
         </el-col>
-        <el-col class="leftBot">
+        <el-col class="leftBot leftBot2" style="margin-top:-0.1rem">
           <h4>各街镇单位情况</h4>
           <el-row class="leftBotContent">
             <el-row class="fireBar">
@@ -51,10 +53,19 @@
         <el-row class="leftBtn btnW" @click="leftBtnClick()">
           <i :class="leftBtn ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
         </el-row>
-        <el-row class="centerContent" id="mapF"></el-row>
+        <el-row class="yw" v-if="yw">
+          <yw />
+        </el-row>
+        <!-- 地图 -->
+        <el-row class="centerContent" id="mapF" @map="map"></el-row>
         <el-row class="rightBtn btnW" @click="rightBtnClick()">
           <i :class="rightBtn ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
         </el-row>
+        <!-- <el-row class="mapTips">
+          <el-col class="greenImage">一般单位</el-col>
+          <el-col class="yellowImage">其他单位</el-col>
+          <el-col class="redImage">重点单位</el-col>
+        </el-row> -->
       </el-col>
     </transition>
     <transition name="el-fade-in-linear">
@@ -63,27 +74,167 @@
           <el-col>
             <h4>物联网设备监控情况</h4>
             <se-table
+            style="margin-top:-0.18rem"
               ref="seTable"
               :dataMap="tableData1"
               :headerData="headerData1"
               :key="windowWidth"
-            ></se-table>
+              @row-click="rowClickMap"
+            >
+            </se-table>
           </el-col>
-          <el-col class="rightTop">
+          <!-- <el-col class="rightTop">
             <h4>企业自主情况</h4>
+            <el-col class="baogao">
+              <a href="javascript:;">评估报告</a>
+            </el-col>
               <radar-chart
                 v-if="complaintList.length > 0"
                 :dataMap="complaintList"
                 name="闵行区消防情况"
                 ref="radarChart"
               ></radar-chart>
+          </el-col> -->
+          <el-col class="rightBot2">
+            <h4>历史案件</h4>
+            <el-col class="shui">
+            <el-col class="title">
+              水系统检测设备({{gj.deviceCount?gj.deviceCount:0}})
+            </el-col>
+            <el-col class="title1">
+              上线率:{{gj.onRate?gj.onRate *100 + '%' :'0%'}}
+            </el-col>
+            <el-col class="title2">
+              接单率:{{gj.taskOrderRate?gj.taskOrderRate *100 + '%' :'0%'}}
+            </el-col>
+            <el-col class="title3">
+              处置率:{{gj.checkRate?gj.checkRate *100 + '%' :0}}
+            </el-col>
           </el-col>
-          <el-col class="rightBot">
+          <el-table
+            header-cell-style="height:0.2rem"
+            :data="tableData2"
+            class="transparentTableRow"
+            height="80%"
+            row-style="height:.25rem;"
+            cell-style="height:.25rem;box-sizing: border-box;"
+            style="width: 100%; margin: -0.18rem auto 0"
+            @row-click="rowClickMap"
+          >
+            <el-table-column
+             
+              v-for="item in headerData2"
+              :key="item.prop"
+              :prop="item.prop"
+              align="center"
+              :label="item.name"
+            >
+              <template  
+              v-if="item.prop === 'id' || 
+              item.prop === 'createTime'  || 
+              item.prop === 'ajType'  || 
+              item.prop === 'street'  || 
+              item.prop === 'address' ||
+              item.prop === 'dutyGroup' ||
+              item.prop === 'disposePerson' ||
+              item.prop === 'ajFlag'
+             " #default="scope">
+                <el-tooltip placement="left">
+                  <template #content>
+                    <div class="tableTooltip">
+                      <div class="tableTitle" ref="ff">
+                        <div>案件详情</div>
+                      </div>
+                      <img src="~@a/img/icon/close.png" alt="" class="close" @click="closeIsTooltip"/>
+                      <el-row class="tableContent">
+                        <el-col :span="20">案件编号:{{scope.row.id  ? scope.row.id : "--"}}</el-col>
+                        <el-col :span="24">报警时间:{{scope.row.createTime  ? scope.row.createTime : "--"}}</el-col>
+                        
+                        <el-col :span="24">案件类型:{{scope.row.ajType  ? scope.row.ajType : "--"}}</el-col>
+                        
+                       
+                        <el-col :span="24">发生地址:{{scope.row.address  ? scope.row.address : "--"}}</el-col>
+                        <el-col :span="24">所属街道:{{scope.row.street  ? scope.row.street : "--"}}</el-col>
+                        <el-col :span="12">案件描述:{{scope.row.ajDescribe  ? scope.row.ajDescribe : "--"}}</el-col>
+                        
+                        
+                        <el-col :span="24">责任部门:{{scope.row.dutyGroup  ? scope.row.dutyGroup : "--"}}</el-col>
+                        <el-col :span="24">处置时间:{{scope.row.endTime  ? scope.row.endTime : "--"}}</el-col>
+
+                        <el-col :span="24">处理人:{{scope.row.disposePerson ? scope.row.disposePerson :'--'}}</el-col>
+                        <el-col :span="24">责任人:{{scope.row.chargePerson ? scope.row.chargePerson : '--'}}</el-col>
+                        <el-col :span="24">状态:{{scope.row.ajFlag == "0" ? "立案" : scope.row.ajFlag == "1" ? "派遣": scope.row.ajFlag == "2" ? "处理" : scope.row.ajFlag == "3" ? "结案" :'结案'}}</el-col>
+  
+                        
+                        
+                        <!-- <el-col :span="10" @click="isVideo = true" style="color:#0ADAFF;text-decoration: underline;cursor: pointer;">实时视频</el-col> -->
+                      </el-row>
+                      <!-- <el-row class="tablePersonnel">
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.commander}}</div>
+                          <div>指挥员</div>
+                        </el-col>
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.correspondent}}</div>
+                          <div>通讯员</div>
+                        </el-col>
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.firemen}}</div>
+                          <div>消防员</div>
+                        </el-col>
+                        <el-col :span="7">
+                          <img src="~@a/img/test/bg1.png" alt="" />
+                          <div>{{scope.row.driver}}</div>
+                          <div>驾驶员</div>
+                        </el-col>
+                      </el-row> -->
+                    </div>
+                  </template>
+                  <template>
+                    <i class="iconfont" 
+                    :class="{
+                      'icon-icon-test' : scope.row['ajlxdm'] == 1,
+                      'icon-jiuyuan': scope.row['ajlxdm'] == 2,
+                      'icon-minzhengtubiao1-08':scope.row['ajlxdm'] == 3,
+                    }"
+                    :style="{color: scope.row['ajdj'] == '零级' ? 'green' : scope.row['ajdj'] == '一级' ? '#eec10d' : scope.row['ajdj'] == '二级' ? '#ff730c' : scope.row['ajdj'] == '三级' ? '#ff0012' : '#2e98f2'}"
+                     v-if="item.prop === 'type'"></i>
+                    <div class="name-wrapper" v-else>{{ scope.row[item.prop] }}</div>
+                  </template>
+                </el-tooltip>
+              </template>
+              <template v-else #default="scope">
+                  {{ item.prop === 'type' ? '' : item.prop === 'lasj' ? scope.row[item.prop] && scope.row[item.prop].slice(5) :  item.prop === 'afdz' ? scope.row[item.prop].replace(new RegExp("闵行区 ",""),"") : item.prop === 'status' ? (scope.row[item.prop] == 1 ? '可用' : '不可用') : scope.row[item.prop]}}
+              </template>
+              
+            </el-table-column>
+          </el-table>
+          <el-card class="box-card" v-if="isVideo">
+          <template #header>
+            <div class="card-header">
+              <span>实时视频</span>
+              <i class="el-icon-close" @click="isVideo = false"></i>
+            </div>
+          </template>
+          <!-- <img src="~@a/img/test/car.png" alt=""> -->
+          <!-- controls -->
+          <video src="~@a/img/test/card.mp4" class="videoBox" autoplay height="auto"></video>
+          <!-- <video-player class="video-player vjs-custom-skin"
+            ref="videoPlayer"
+            :playsinline="true"
+            :options="playerOptions">
+          </video-player> -->
+          </el-card>
+        </el-col>
+          <el-col class="rightBot" >
             <h4>企业经营情况</h4>
-            <el-row>
+            <el-row class="qy">
               <el-row>
-                <el-row>上海XX有限公司</el-row>
-                <el-row>
+                <el-row class="title">上海XX有限公司</el-row>
+                <el-row class="data">
                   <el-col :span="8">员工总数:100人</el-col>
                   <el-col :span="8">企业法人:张三</el-col>
                   <el-col :span="8">成立时间:2020-01-01</el-col>
@@ -93,8 +244,8 @@
                 </el-row>
               </el-row>
               <el-row>
-                <el-row>上海XX有限公司</el-row>
-                <el-row>
+                <el-row class="title">上海XX有限公司</el-row>
+                <el-row class="data">
                   <el-col :span="8">员工总数:100人</el-col>
                   <el-col :span="8">企业法人:张三</el-col>
                   <el-col :span="8">成立时间:2020-01-01</el-col>
@@ -123,24 +274,39 @@
 </template>
 
 <script>
+import { ElMessage } from 'element-plus';
+import { mapGetters } from 'vuex'
 import linstener from "@c/mixins/linstener";
 import categoryEnterprise from "@c/category-enterprise";
+import shebei1 from "@c/shebei";
 import seTable from "@c/se-table";
+import yw from "@c/yw";
 import gauge from "@c/gauge";
-// import map from "@c/mixins/map-data";
-import map from "@c/mixins/map-gaode";
+import gauge2 from "@c/gauge/index2.vue";
+import map from "@c/mixins/map-data";
+// import map from "@c/mixins/map-gaode-selfManagement";
 import radarChart from "@c/radar";
 export default {
-  components: { categoryEnterprise, seTable, radarChart, gauge},
+  components: { categoryEnterprise, seTable, shebei1, radarChart, gauge, gauge2, yw},
   mixins: [linstener,map],
   data() {
     return {
+      gj:{
+        checkRate:undefined,
+        onRate:undefined,
+        deviceCount:undefined,
+        taskOrderRate:undefined,
+      },
+      qyzzId:undefined,
+      yw:false,//液位
+      dl:false,//电量
       tableData: [
         {address:'2020-01-01',burnedArea:'某某单位',propertyLoss:'查看',deathToll:'张三',nonFatal:'13000000729',disasterHome:'拆除'},
         {address:'2020-01-01',burnedArea:'某某单位',propertyLoss:'查看',deathToll:'张三',nonFatal:'13000000729',disasterHome:'拆除'},
         {address:'2020-01-01',burnedArea:'某某单位',propertyLoss:'查看',deathToll:'张三',nonFatal:'13000000729',disasterHome:'拆除'},
         {address:'2020-01-01',burnedArea:'某某单位',propertyLoss:'查看',deathToll:'张三',nonFatal:'13000000729',disasterHome:'拆除'},
       ],
+      
       headerData: [
         { prop: "address", name: "巡查时间" },
         { prop: "burnedArea", name: "巡查区域" },
@@ -148,48 +314,77 @@ export default {
         { prop: "deathToll", name: "巡查情况" },
         { prop: "nonFatal", name: "隐患发现情况" },
         { prop: "nonFatal", name: "隐患整改情况" },
-        { prop: "nonFatal", name: "预计整改完成时间" },
+        { prop: "nonFatal", name: "预计完成时间" },
         { prop: "nonFatal", name: "复检情况" },
-        { prop: "nonFatal", name: "阶段性巡检报告" },
+        { prop: "nonFatal", name: "阶段巡检报告" },
+      ],
+      tableData2: [
+        // {id:'asdadadxcawww',createTime:'2020-01-01',ajType:'火灾',street:'七莘路',disposePerson:'张三'},
+        // {id:'asdadadxcawww',createTime:'2020-01-01',ajType:'火灾',street:'七莘路',disposePerson:'张三'},
+        // {id:'asdadadxcawww',createTime:'2020-01-01',ajType:'火灾',street:'七莘路',disposePerson:'张三'},
+        // {id:'asdadadxcawww',createTime:'2020-01-01',ajType:'火灾',street:'七莘路',disposePerson:'张三'},
+        // {id:'asdadadxcawww',createTime:'2020-01-01',ajType:'火灾',street:'七莘路',disposePerson:'张三'},
+      ],
+      headerData2: [
+        { prop: "id", name: "案件编号" },
+        { prop: "createTime", name: "发现时间" },
+        { prop: "ajType", name: "案件类型" },
+        { prop: "street", name: "所属街道" },
+        { prop: "address", name: "案发地址" },
+        { prop: "dutyGroup", name: "责任部门" },
+        // { prop:"disposePerson", name:"处理人"},
+        { prop: "ajFlag", name: "状态" },
       ],
       tableData1: [
-        {address:'数量',burnedArea:100,property:200,deathTol:100,nonFatal:100,},
-        {address:'告警',burnedArea:30,property:50,deathTol:5,nonFatal:20,},
-        {address:'离线',burnedArea:1,property:10,deathTol:20,nonFatal:5,},
-        {address:'离线率',burnedArea:'100%',property:'100%',deathTol:'100%',nonFatal:'100%',},
-        {address:'告警率',burnedArea:'5%',property:'5%',deathTol:'5%',nonFatal:'5%',},
+       
+        // {deviceCount:'电气设备',burnedArea:100,property:200,deathTol:100,nonFatal:100,},
+        // {deviceCount:'烟感设备',burnedArea:30,property:50,deathTol:5,nonFatal:20,},
+        // {address:'温感设备',burnedArea:1,property:10,deathTol:20,nonFatal:5,},
+        // {address:'水压设备',burnedArea:'100%',property:'100%',deathTol:'100%',nonFatal:'100%',},
+        // {address:'其他物联设施',burnedArea:'5%',property:'5%',deathTol:'5%',nonFatal:'5%',},
+
+        // {deviceCount:'电气设备',burnedArea:100,property:200,deathTol:100,nonFatal:100,},
+        // {deviceCount:'烟感设备',burnedArea:30,property:50,deathTol:5,nonFatal:20,},
+        // {address:'温感设备',burnedArea:1,property:10,deathTol:20,nonFatal:5,},
+        // {address:'水压设备',burnedArea:'100%',property:'100%',deathTol:'100%',nonFatal:'100%',},
+        // {address:'其他物联设施',burnedArea:'5%',property:'5%',deathTol:'5%',nonFatal:'5%',},
       ],
       headerData1: [
-        { prop: "address", name: "类型" },
-        { prop: "burnedArea", name: "电气设备" },
-        { prop: "property", name: "烟感设备" },
-        { prop: "deathTol", name: "温感设备" },
-        { prop: "nonFatal", name: "水压设备" },
-        { prop: "nonFatal", name: "其他物联设施" },
+        { prop: "deviceType", name: "设备类型" },
+        { prop: "deviceCount", name: "数量" },
+        { prop: "alertCount", name: "告警" },
+        { prop: "lineCount", name: "离线" },
+        { prop: "lineRate", name: "离线率" },
+        { prop: "alertRate", name: "告警率" },
       ],
       fireAddressList: [],
       fireTypeList: [],
-      complaintList: [
-           {name: "设施状况指数",value: 341},
-           {name: "自主管理指数",value: 155},
-           {name: "隐患状态指数",value: 156},
-           {name: "建筑整体指数",value: 118},
-           {name: "执法监管指数",value: 322},
-      ],
+      // complaintList: [
+      //      {name: "设施状况指数",value: 341},
+      //      {name: "自主管理指数",value: 155},
+      //      {name: "隐患状态指数",value: 156},
+      //      {name: "建筑整体指数",value: 118},
+      //      {name: "执法监管指数",value: 322},
+      // ],
     };
   },
-
-
-
-
-
+  
   created() {
-    // this.getData();
+    this.getData();
+  },
+  computed:{
+      ...mapGetters([
+         "qyzz"
+      ])
   },
-  watch:{
 
+  watch:{
+    qyzz(newVal){
+      this.qyzzxq(newVal)
+    },
   },
   mounted() {
+    
     window.addEventListener(
       "resize",
       () =>
@@ -205,6 +400,167 @@ export default {
     this.initMap()
   },
   methods: {
+    closeIsTooltip(){
+      let y = document.getElementsByClassName("el-popper")
+      for(let i=0;i<y.length;i++){
+        y[i].style.display = "none"
+        y[i].ariaHidden = true
+      }
+    },
+    async rowClickMap(row){
+    
+      // if(this.proptionMapList.every(val=>val.id !== row.id)){
+      //   this.addMarker([row])
+      //   window.jMap.goTo({
+      //       x: Number(row.gisX),
+      //       y: Number(row.gisY),
+      //       radius: 1000
+      //   }, {
+      //       duration: 3,
+      //       offset: {
+      //           heading: -4,
+      //           pitch: -70,
+      //           range: 0
+      //       }
+      //   })
+      // }
+        // this.addMarkerInfo(row)
+    },
+    qyzzxq(newVal){
+      if(newVal.qyzz == "液位"){
+       
+        this.elIco()
+      }else{
+        ElMessage({
+            showClose: true,
+            message: "开发中...",
+            type: 'error'
+        });
+      }
+      
+    },
+    async elIco(){
+   
+      // let res = await this.$axios.get(this.$api.selfManagement.elIco + "?" +
+      // this.$qs.stringify({
+      //   deviceCode:"1",
+      //   startTime:"",
+      //   endTime:""
+      // }));
+      // if(res.data){
+      //   // this.tableData1 = res.data.records
+      // }
+    },
+    async getData() {
+      this.mapList() //撒点
+      this.collect() //设备信息
+      this.one()//单独
+      this.lsaj()//历史案件
+      this.collectOne()//设备总量
+
+      //测试
+      // this.getFireWater();
+      // this.getFireWater();
+    },
+    async mapList(){
+      let res = await this.$axios.get(this.$api.selfManagement.mapList);
+      // {
+      //     "status": "SUCCESS",
+      //     "code": "0",
+      //     "msg": null,
+      //     "data": [
+      //         {
+      //             "longitude": "10.11",
+      //             "latitude": "10.0",
+      //             "id": 0
+      //         }
+      //     ],
+      //     "exception": null
+      // }
+      if(res.data.length>0){
+        // this.addMarker(res.data,'selfManagement')
+      }
+    },
+    //物联监控设备
+    async collect(){
+      let res = await this.$axios.get(this.$api.selfManagement.collect + "?" +
+      this.$qs.stringify({
+        current:"1",
+        size:"100"
+      }));
+     
+      if(res.data){
+        this.tableData1 = res.data.records
+      }
+    },
+    async collectOne(){
+      await this.$axios.get(this.$api.selfManagement.collectOne).then(res =>{
+       console.log(res)
+          if(res.data){
+           
+            this.gj = res.data
+          }
+      })
+    },
+    //历史案件
+    async lsaj(){
+      let res = await this.$axios.get(this.$api.qyzz.lsaj + "?" +
+      this.$qs.stringify({
+        startTime:"2021-01-01 00:00:00",
+        startTime:"2021-12-31 00:00:00",
+        current:"1",
+        size:"100"
+      }));
+      if(res.data.records.length>0){
+        var data = res.data.records
+        for(let i =0; i<data.length;i++){
+          if(data[i].ajFlag == '0'){
+            data[i].ajFlag = "立案"
+          }else if(res.data.records[i].ajFlag == '1'){
+            data[i].ajFlag = "派遣"
+          }else if(res.data.records[i].ajFlag == '2'){
+            data[i].ajFlag = "处理"
+          }else if(res.data.records[i].ajFlag == '3'){
+            data[i].ajFlag = "结案"
+          }else{
+            data[i].ajFlag = ""
+          }
+        }
+        this.tableData2 = data
+      }
+      
+      // if(res.data.length>0){
+      //   this.addMarker(res.data.records,'selfManagement')
+      // }
+    },
+    async one(){
+      let res = await this.$axios.get(this.$api.selfManagement.one + "?" +
+      this.$qs.stringify({
+        id:0
+      }));
+     },
+    //  {
+    //     "status": "SUCCESS",
+    //     "code": "0",
+    //     "msg": null,
+    //     "data": {
+    //         "id": 0,
+    //         "name": "水系统喷头",
+    //         "code": "1",
+    //         "deviceType": " 烟感",
+    //         "createTime": "2021-11-26 12:28:08",
+    //         "longitude": "10.11",
+    //         "latitude": "10.0",
+    //         "deviceFlag": 0,
+    //         "delFlag": 0,
+    //         "firm": null,
+    //         "deviceDescribe": "烟感设备",
+    //         "address": "闵行去",
+    //         "deviceDuty": null,
+    //         "property": null
+    //     },
+    //     "exception": null
+    // }
 
   },
 };
@@ -273,11 +629,12 @@ export default {
           }
           .rightTopNumber {
             justify-content: center;
-              font-size: 0.2125rem;
+            font-size: 0.2125rem;
           }
           .rightTopChart {
             height: 1.5rem;
           }
+         
           .el-form {
             text-align: center;
             .el-form-item {
@@ -324,7 +681,8 @@ export default {
       width: 100%;
       height: 100%;
       & > .el-col {
-        height: calc((60% - .25rem)/2);
+        height: 32.5%;
+        // height: calc((60% - .25rem)/2);
         background: url('~@a/img/home/box-bg.png') no-repeat;
         background-size: 100% 100%;
         position: relative;
@@ -344,7 +702,23 @@ export default {
         }
       }
       .rightTop{
-        height: 40%;
+        height: 50%;
+        .baogao{
+          background: url("~@a/img/qyzz/baogao.png") no-repeat ;
+          background-size: 100% 100%;
+          float:right;
+          margin:10px 10px 0 0;
+          
+          a{
+            color:#fff !important;
+            text-decoration:none;
+            display: block;
+            padding:8px 10px;
+            width:100%;
+           
+            
+          }
+        }
       }
       .rightBot{
         margin-bottom: 0;
@@ -382,4 +756,407 @@ export default {
     }
   }
 }
+
+
+.rightBot2 {
+      flex: 1;
+      max-height: 50%;
+      margin-top:1%;
+      padding: 0.5rem 0.35rem 0.25rem;
+      box-sizing: border-box;
+      position: relative;
+      .shui{
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.5);
+        
+        margin:-10px 0px 10px 0;
+        font-size: 14px;
+        padding:6px;
+        text-align: center;
+        font-size: 14px;
+        text-align: left;
+        width:100%;
+        .title{
+          width:34%;
+        }
+        .title1{
+          width:22%;
+          
+        }
+        .title2{
+          width:22%;
+          color:red
+        }
+        .title3{
+          width:22%;
+          color:#00ffff
+        }
+      }
+      /deep/ .cell {
+        text-align: center !important;
+      }
+      /deep/ td{
+        min-width: auto !important;
+        width: auto !important;
+        text-align: left !important;
+        padding:0;
+      }
+      /deep/ .el-table__body-wrapper{
+        height: 65% !important;;
+      }
+      /deep/ .box-card{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        border-radius: 3%;
+        width: 80%;
+        max-height: 100%;
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.6);
+        border: none;
+        color: #FFF;
+        .el-card__header{
+          padding: .125rem;
+          border-color: #30cfff;
+          .card-header{
+            display: flex;
+            font-size: .2rem;
+            justify-content: space-between;
+            align-items: center;
+            i{
+              font-size: .275rem;
+            }
+          }
+        }
+        img{
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+
+@media screen and (min-width: 1940px) and (max-width:4000px){
+  .contentBox {
+  // font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+  & > .el-col {
+    flex: 1;
+    height: 105%;
+    max-width: 8rem;
+    
+  }
+  .leftBox {
+    box-sizing: border-box;
+    & > .el-col {
+      flex: none;
+      width: 100%;
+      height: 33%;
+      margin-top: .125rem;
+      background: url("~@a/img/home/box-bg_02.png") no-repeat  0px 26px;
+      background-size: 100% calc(100% - 60px);
+      position: relative;
+      h4 {
+        background: url("~@a/img/home/box-bg_01.png") no-repeat 0px 1px;
+        background-size: 100% 100%;
+        font-size: 0.2125rem;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+        text-align: center;
+        color: #00ffff;
+      }
+    }
+    .leftTop {
+      padding: 0.375rem 0.45rem .25rem;
+      margin-top: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 30%;
+      background: url('~@a/img/home/bg1.png') no-repeat;
+      background-size: 100% 100%;
+      .threeBox {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: nowrap;
+        & > .flexBoxE {
+          flex: 1;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          & > .el-row {
+            flex: none;
+            width: 33.33%;
+            display: flex;
+            flex-direction: column;
+          }
+          .rightTopNumber {
+            justify-content: center;
+            font-size: 0.12rem;
+           
+          }
+          .rightTopChart {
+            height: 1.5rem;
+            margin:-0.4rem 0 -0.4rem
+          }
+         
+          .el-form {
+            text-align: center;
+            .el-form-item {
+              margin: 0;
+            }
+          }
+        }
+        .line {
+          flex: none;
+          width: 1px;
+          height: 3.75rem;
+          opacity: 1;
+          background: linear-gradient(
+            rgba(255, 255, 255, 0),
+            #30cfff,
+            rgba(255, 255, 255, 0)
+          );
+          // box-shadow: 0 0 .125rem .0375rem #30cfff;
+        }
+      }
+    }
+    .leftBot {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: .375rem .3125rem .1875rem;
+      box-sizing: border-box;
+      width: 100%;
+      overflow: hidden;
+      .leftBotContent {
+        width: 100%;
+        height: 100%;
+        display: block;
+        margin-top:-4% !important;
+        .fireBar {
+          height: calc(100%);
+        }
+      }
+    }
+  }
+  
+  .rightBox {
+    box-sizing: border-box;
+    .rightContent{
+      width: 100%;
+      height: 105%;
+      & > .el-col {
+        
+        // height: calc((60% - .25rem)/2);
+        background: url("~@a/img/home/box-bg_02.png") no-repeat  0px 26px;
+        background-size: 100% calc(100% - 60px);
+        position: relative;
+        padding: .4375rem .3125rem .25rem;
+        box-sizing: border-box;
+        width: 100%;
+        margin-bottom: 0.125rem;
+        h4 {
+          background: url("~@a/img/home/box-bg_01.png") no-repeat 0px 1px;
+          background-size: 100% 100%;
+          font-size: 0.2125rem;
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          margin: 0 auto;
+          text-align: center;
+          color: #00ffff;
+        }
+      }
+      .rightTop{
+        height: 30%;
+        .baogao{
+          background: url("~@a/img/qyzz/baogao.png") no-repeat ;
+          background-size: 100% 100%;
+          float:right;
+          margin:10px 10px 0 0;
+          
+          a{
+            color:#fff !important;
+            text-decoration:none;
+            display: block;
+            padding:8px 10px;
+            width:100%;
+           
+            
+          }
+        }
+      }
+      .rightBot{
+        height: 40%;
+        background: url("~@a/img/home/box-bg_02.png") no-repeat  0px 26px;
+        background-size: 100% calc(100% - 106px);
+        margin-bottom: 0;
+        color: #FFF;
+        font-size: .2rem;
+        margin-top:-0.2rem;
+        padding:.4375rem .3125rem .25rem;
+        &>.el-row{
+          width: 100%;
+          height: 90%;
+          overflow: auto;
+          &::-webkit-scrollbar {
+              display: none;
+              // opacity: 0;
+              /* Chrome Safari */
+          }
+          &>.el-row{
+            width: 100%;
+            height: auto;
+            &>.el-row:nth-child(1){
+              width: 100%;
+              height: .25rem;
+              line-height: .25rem;
+              text-indent: .125rem;
+              background: rgba(0,250,251,0.20);
+              font-size: 0.14rem;
+              .data{
+                font-size: 0.12rem;
+              }
+            }
+            &>.el-row:nth-child(2) {
+              padding: .025rem .125rem;
+              .el-col{
+                line-height: .25rem;
+                font-size: 0.12rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+.rightBot2 {
+      margin-top:-0.2rem;
+      flex: 1;
+      height: 30%;
+      padding: 0.5rem 0.35rem 0rem;
+      box-sizing: border-box;
+      position: relative;
+      .shui{
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.5);
+        
+        margin:-10px 0px 10px 0;
+        font-size: 14px;
+        padding:6px;
+        text-align: center;
+        font-size: 0.12rem;
+        text-align: left;
+        width:100%;
+        margin-top:-0.2rem;
+        .title{
+          width:34%;
+        }
+        .title1{
+          width:22%;
+          
+        }
+        .title2{
+          width:22%;
+          color:red
+        }
+        .title3{
+          width:22%;
+          color:#00ffff
+        }
+      }
+      /deep/ .cell {
+        text-align: center !important;
+      }
+      /deep/ td{
+        min-width: auto !important;
+        width: auto !important;
+        text-align: left !important;
+        padding:0;
+      }
+      /deep/ .el-table__body-wrapper{
+        height: 65% !important;;
+      }
+      /deep/ .box-card{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        border-radius: 3%;
+        width: 80%;
+        max-height: 100%;
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.6);
+        border: none;
+        color: #FFF;
+        .el-card__header{
+          padding: .125rem;
+          border-color: #30cfff;
+          .card-header{
+            display: flex;
+            font-size: .2rem;
+            justify-content: space-between;
+            align-items: center;
+            i{
+              font-size: .275rem;
+            }
+          }
+        }
+        img{
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+    /deep/ .el-table{
+      margin-top:-0.1rem;
+    }
+}
+.qy{
+  margin-top:-0.2rem;
+  .title{
+
+  }
+}
+</style>
+<style>
+.close{display: none;}
+@media screen and (min-width: 1940px) and (max-width:4000px){
+  .sp{
+    font-size: 0.12rem;
+    color:#fff;
+    position: absolute;
+    z-index: 1000;
+    right:100px;
+    top:54px;
+    border: 1px solid rgb(34, 128, 217);
+    border-radius: 6px;
+    padding:2px 6px;
+    background-color: #409eff;
+  }
+  /* tr{
+    pointer-events: none
+  } */
+  .close{
+    width:40px;
+    height:40px;
+    position: absolute;
+    right:30px;
+    top:20px;
+    z-index: 10000;
+    display: block;
+  }
+}
 </style>

+ 268 - 0
src/views/shuju.js

@@ -0,0 +1,268 @@
+//消防站点 
+// /xfzWxz/page
+{
+    "status": "SUCCESS",
+    "code": "0",
+    "msg": null,
+    "data": {
+        "records": [
+            {
+                "id": 1,
+                "zdmc": "闵行支队",
+                "sszd": "新虹站",
+                "xfzmc": "丹桂花园小区微型消防站",
+                "dwxz": "居委",
+                "dz": "航北路228弄门卫室",
+                "szwz": "城郊结合部",
+                "ldgddh": "无",
+                "fzrxm": "丁春江",
+                "fzrsjhm": "13901628416",
+                "bz": "七宝镇",
+                "xfzlx": "1",
+                "jd": 121.35464,
+                "wd": 31.17518,
+                "cjsj": "2020-07-03 17:15:14",
+                "gxsj": "2020-07-03 17:15:14",
+                "zdid": 36,
+                "sszdid": 41,
+                "numberid": "10001",
+                "callstatus": 2,
+                "flag": 2,
+                "dmsj": "2020-09-27 15:09:18",
+                "ydwxz": "居委(一般多层)"
+            },
+            {
+                "id": 2,
+                "zdmc": "闵行支队",
+                "sszd": "新虹站",
+                "xfzmc": "丹桂南苑微型消防站",
+                "dwxz": "居委",
+                "dz": "航南路229弄",
+                "szwz": "城郊结合部",
+                "ldgddh": "无",
+                "fzrxm": "王振兴",
+                "fzrsjhm": "15001778276",
+                "bz": "七宝镇",
+                "xfzlx": "1",
+                "jd": 121.357561,
+                "wd": 31.170086,
+                "cjsj": "2020-07-03 17:15:14",
+                "gxsj": "2020-07-03 17:15:14",
+                "zdid": 36,
+                "sszdid": 41,
+                "numberid": "10002",
+                "callstatus": 2,
+                "flag": 2,
+                "dmsj": "0000-00-00 00:00:00",
+                "ydwxz": "居委(一般多层)"
+            },
+            {
+                "id": 3,
+                "zdmc": "闵行支队",
+                "sszd": "新虹站",
+                "xfzmc": "富力悦都小区微型消防站",
+                "dwxz": "居委",
+                "dz": "申贵路1599弄",
+                "szwz": "城郊结合部",
+                "ldgddh": "无",
+                "fzrxm": "万建峰",
+                "fzrsjhm": "13816573856",
+                "bz": "新虹街道",
+                "xfzlx": "1",
+                "jd": 121.31825,
+                "wd": 31.198693,
+                "cjsj": "2020-07-03 17:15:14",
+                "gxsj": "2020-07-03 17:15:14",
+                "zdid": 36,
+                "sszdid": 41,
+                "numberid": "10003",
+                "callstatus": 2,
+                "flag": 2,
+                "dmsj": "2020-10-01 15:08:02",
+                "ydwxz": "居委(高层)"
+            },
+            {
+                "id": 4,
+                "zdmc": "闵行支队",
+                "sszd": "新虹站",
+                "xfzmc": "广达新苑微型消防站",
+                "dwxz": "居委",
+                "dz": "吴宝路580弄",
+                "szwz": "城郊结合部",
+                "ldgddh": "无",
+                "fzrxm": "任光伟",
+                "fzrsjhm": "13764183009",
+                "bz": "七宝镇",
+                "xfzlx": "1",
+                "jd": 121.344821,
+                "wd": 31.167692,
+                "cjsj": "2020-07-03 17:15:14",
+                "gxsj": "2020-07-03 17:15:14",
+                "zdid": 36,
+                "sszdid": 41,
+                "numberid": "10004",
+                "callstatus": 2,
+                "flag": 2,
+                "dmsj": null,
+                "ydwxz": "居委(一般多层)"
+            },
+            {
+                "id": 5,
+                "zdmc": "闵行支队",
+                "sszd": "新虹站",
+                "xfzmc": "汉庭酒店上海虹桥机场T2航站楼店微型消防站",
+                "dwxz": "单位",
+                "dz": "沪青平公路567号",
+                "szwz": "城郊结合部",
+                "ldgddh": "无",
+                "fzrxm": "吴聪",
+                "fzrsjhm": "13816816422",
+                "bz": "新虹街道",
+                "xfzlx": "1",
+                "jd": 121.339827,
+                "wd": 31.172411,
+                "cjsj": "2020-07-03 17:15:14",
+                "gxsj": "2020-07-03 17:15:14",
+                "zdid": 36,
+                "sszdid": 41,
+                "numberid": "10005",
+                "callstatus": 0,
+                "flag": 2,
+                "dmsj": null,
+                "ydwxz": "区重点单位"
+            },
+            {
+                "id": 6,
+                "zdmc": "闵行支队",
+                "sszd": "新虹站",
+                "xfzmc": "航华二村四居驰骋小区",
+                "dwxz": "居委",
+                "dz": "驰骋小区门卫室",
+                "szwz": "城郊结合部",
+                "ldgddh": "54472464",
+                "fzrxm": "冯薇",
+                "fzrsjhm": "18149786973",
+                "bz": "七宝镇",
+                "xfzlx": "1",
+                "jd": 121.493684,
+                "wd": 31.20355,
+                "cjsj": "2020-07-03 17:15:14",
+                "gxsj": "2020-07-03 17:15:14",
+                "zdid": 36,
+                "sszdid": 41,
+                "numberid": "10006",
+                "callstatus": 0,
+                "flag": 2,
+                "dmsj": null,
+                "ydwxz": "居委(一般多层)"
+            },
+            {
+                "id": 7,
+                "zdmc": "闵行支队",
+                "sszd": "新虹站",
+                "xfzmc": "航华二村一居委",
+                "dwxz": "居委",
+                "dz": "航华二村483号",
+                "szwz": "城郊结合部",
+                "ldgddh": "64211649",
+                "fzrxm": "张心怡",
+                "fzrsjhm": "13816611245",
+                "bz": "七宝镇",
+                "xfzlx": "1",
+                "jd": 121.350187,
+                "wd": 31.172297,
+                "cjsj": "2020-07-03 17:15:14",
+                "gxsj": "2020-07-03 17:15:14",
+                "zdid": 36,
+                "sszdid": 41,
+                "numberid": "10007",
+                "callstatus": 0,
+                "flag": 2,
+                "dmsj": null,
+                "ydwxz": "居委(一般多层)"
+            },
+            {
+                "id": 8,
+                "zdmc": "闵行支队",
+                "sszd": "新虹站",
+                "xfzmc": "航华三村一居委",
+                "dwxz": "居委",
+                "dz": "航南路航华三村200号",
+                "szwz": "城郊结合部",
+                "ldgddh": "64209443",
+                "fzrxm": "陈珮",
+                "fzrsjhm": "无",
+                "bz": "七宝镇",
+                "xfzlx": "1",
+                "jd": 121.349311,
+                "wd": 31.167604,
+                "cjsj": "2020-07-03 17:15:14",
+                "gxsj": "2020-07-03 17:15:14",
+                "zdid": 36,
+                "sszdid": 41,
+                "numberid": "10037",
+                "callstatus": 0,
+                "flag": 2,
+                "dmsj": null,
+                "ydwxz": "居委(一般多层)"
+            },
+            {
+                "id": 9,
+                "zdmc": "闵行支队",
+                "sszd": "新虹站",
+                "xfzmc": "航华四村三居委",
+                "dwxz": "居委",
+                "dz": "航华四村三街坊",
+                "szwz": "城郊结合部",
+                "ldgddh": "无",
+                "fzrxm": "孙姬蘋",
+                "fzrsjhm": "13310169385",
+                "bz": "七宝镇",
+                "xfzlx": "1",
+                "jd": 121.354674,
+                "wd": 31.170419,
+                "cjsj": "2020-07-03 17:15:14",
+                "gxsj": "2020-07-03 17:15:14",
+                "zdid": 36,
+                "sszdid": 41,
+                "numberid": "10009",
+                "callstatus": 0,
+                "flag": 2,
+                "dmsj": null,
+                "ydwxz": "居委(一般多层)"
+            },
+            {
+                "id": 10,
+                "zdmc": "闵行支队",
+                "sszd": "新虹站",
+                "xfzmc": "航华四村一居委",
+                "dwxz": "居委",
+                "dz": "航华四村航南路90号",
+                "szwz": "城郊结合部",
+                "ldgddh": "无",
+                "fzrxm": "杨波",
+                "fzrsjhm": "13817579928",
+                "bz": "七宝镇",
+                "xfzlx": "1",
+                "jd": 121.359621,
+                "wd": 31.171084,
+                "cjsj": "2020-07-03 17:15:14",
+                "gxsj": "2020-07-03 17:15:14",
+                "zdid": 36,
+                "sszdid": 41,
+                "numberid": "10010",
+                "callstatus": 0,
+                "flag": 2,
+                "dmsj": null,
+                "ydwxz": "居委(一般多层)"
+            }
+        ],
+        "total": 1092,
+        "size": 10,
+        "current": 1
+    },
+    "exception": null
+}
+
+
+// /xfzWxz/one

+ 24 - 9
src/views/water-sources.vue

@@ -48,6 +48,7 @@
         <el-row class="leftBtn btnW" @click="leftBtnClick()">
           <i :class="leftBtn ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
         </el-row>
+        <!-- 地图 -->
         <el-row class="centerContent" id="mapF" ref="mapF"></el-row>
         <el-row class="rightBtn btnW" @click="rightBtnClick()">
           <i :class="rightBtn ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
@@ -121,6 +122,7 @@
             row-style="height:.425rem;"
             cell-style="height:.425rem;box-sizing: border-box;"
             style="width: 100%; margin: 0 auto"
+            @row-click="FireWaterListClick"
           >
             <el-table-column
               v-for="item in headerData"
@@ -130,6 +132,8 @@
               align="center"
               min-width="20"
               :label="item.name"
+              
+              
             >
               <template v-if="item.prop === 'type'" #default="scope">
                 <el-popover effect="dark" trigger="hover" placement="left">
@@ -172,11 +176,11 @@
 
 <script>
 import linstener from "@c/mixins/linstener";
-// import map from "@c/mixins/map-data";
-import map from "@c/mixins/map-gaode";
+import map from "@c/mixins/map-data";
+// import map from "@c/mixins/map-gaode";
 import waterGauge from "@c/water-gauge";
-import gauge from "@c/gauge";
-import seTable from "@c/se-table";
+import gauge from "@c/gauge/index4";
+import seTable from "@c/se-table/index2";
 import funnel from "@c/funnel";
 
 // TODO 高德地图
@@ -289,9 +293,17 @@ export default {
              waterGage:( + val.waterGage).toFixed(2) || 0
            }
          })
-         this.addMarker(res.data.records,'water')
+         console.log(res.data.records)
+        //  this.addMarker(res.data.records,'water')
       }
     },
+    //水源表格点击撒点渲染  wt
+    FireWaterListClick(row, event, column){
+      let arr = []
+      arr.push(row)
+      console.log(row)
+      // this.addMarker(arr,'water')
+    },
     // 消防水源信息
     async getFireWaterStatistics() {
       let res = await this.$axios.get(
@@ -303,6 +315,7 @@ export default {
           })
       );
       if (res){ 
+		  console.log(res)
         this.fireWaterStatisticsObj = res.data;
         this.fireWaterStatisticsObj.waterIntact = res.data.waterIntact.toFixed(2)
         let total = res.data.municipalWater + res.data.residentWater + res.data.unitWater
@@ -325,7 +338,6 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
 .contentBox {
   display: flex;
@@ -467,13 +479,15 @@ export default {
       }
       & > .el-row:last-child {
         width: 2.6875rem;
-        height: 3.75rem;
+        // height: 3.75rem;
+        height:2.6rem; //大屏
         display: flex;
         justify-content: space-between;
         align-items: center;
         & > .el-col {
           width: 100%;
-          height: 0.6875rem;
+          //height: 0.6875rem;
+          height: 0.5rem;//大屏
           // background: url(~@a/img/enforce/bg5.png) no-repeat;
           background-size: 100% 100%;
           border-radius: 0.125rem;
@@ -665,7 +679,8 @@ export default {
     }
     .rightBot {
       flex: 1;
-      max-height: 50%;
+      // max-height: 50%;
+      height:30%; //大屏
       padding: 0.5rem 0.35rem 0.25rem;
       box-sizing: border-box;
     }

BIN
vmh/favicon.ico


File diff suppressed because it is too large
+ 0 - 0
vmh/index.html


File diff suppressed because it is too large
+ 0 - 0
vmh/static/css/app.1fcfeb77.css


File diff suppressed because it is too large
+ 0 - 0
vmh/static/css/chunk-0be04058.3a7f025c.css


File diff suppressed because it is too large
+ 0 - 0
vmh/static/css/chunk-0eb5db59.5a9061c3.css


File diff suppressed because it is too large
+ 0 - 0
vmh/static/css/chunk-252a6d5a.92361b4e.css


File diff suppressed because it is too large
+ 0 - 0
vmh/static/css/chunk-2631af68.30b16478.css


File diff suppressed because it is too large
+ 0 - 0
vmh/static/css/chunk-5d42b3d6.9c73fb1e.css


File diff suppressed because it is too large
+ 0 - 0
vmh/static/css/chunk-6bc43a38.5bd36063.css


File diff suppressed because it is too large
+ 0 - 0
vmh/static/css/chunk-75eecbf9.89769556.css


File diff suppressed because it is too large
+ 0 - 0
vmh/static/css/chunk-8f77afe2.9934d39d.css


File diff suppressed because it is too large
+ 0 - 0
vmh/static/css/chunk-ae6e3106.11a6b4a3.css


Some files were not shown because too many files changed in this diff