DMA分区修改

.env.development

@@ -1,3 +1,3 @@
 NODE_ENV = 'development'
 VUE_APP_MODE = 'development'
-VUE_APP_API_BASE_URL = "http://118.24.21.156:8087"
+VUE_APP_API_BASE_URL = "http://117.176.120.161:1111"

.env.production

@@ -1,3 +1,3 @@
 NODE_ENV = 'production'
 VUE_APP_MODE = 'production'
-VUE_APP_API_BASE_URL = 'http://118.24.21.156:8087'
+VUE_APP_API_BASE_URL = 'http://117.176.120.161:1111'

README.md

@@ -13,6 +13,7 @@ npm run serve
 ### Compiles and minifies for production
 ```
 npm run build
+npm run build:prod --report
 ```
 
 ### Lints and fixes files

build/index.js

@@ -0,0 +1,34 @@
+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
+
+  const port = 9527
+  const publicPath = config.publicPath
+
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+
+  app.use(
+    publicPath,
+    serveStatic('./dist', {
+      index: ['index.html', '/']
+    })
+  )
+
+  app.listen(port, function() {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+    }
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "webdashboard",
+  "name": "admin",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -3260,7 +3260,7 @@
     },
     "claygl": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
       "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
     },
     "clean-css": {
@@ -3903,6 +3903,11 @@
         }
       }
     },
+    "countup.js": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/countup.js/-/countup.js-1.9.3.tgz",
+      "integrity": "sha512-UHf2P/mFKaESqdPq+UdBJm/1y8lYdlcDd0nTZHNC8cxWoJwZr1Eldm1PpWui446vDl5Pd8PtRYkr3q6K4+Qa5A=="
+    },
     "create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmmirror.com/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -4688,27 +4693,28 @@
       }
     },
     "echarts": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-4.9.0.tgz",
-      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
       "requires": {
-        "zrender": "4.3.2"
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
       },
       "dependencies": {
-        "zrender": {
-          "version": "4.3.2",
-          "resolved": "https://registry.npmmirror.com/zrender/-/zrender-4.3.2.tgz",
-          "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
         }
       }
     },
     "echarts-gl": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-1.1.0.tgz",
-      "integrity": "sha512-zbGq09XbOfqLsrMKmXhQnUn2Wvmd9eOiA0K/eyQqIqyu3GzKpmdVLZydUgIr+CHi1PEJ0Lwh3cRHA18MSbI7IQ==",
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-2.0.9.tgz",
+      "integrity": "sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==",
       "requires": {
-        "claygl": "^1.1.0",
-        "zrender": "^4.0.2"
+        "claygl": "^1.2.1",
+        "zrender": "^5.1.1"
       }
     },
     "ee-first": {
@@ -11315,6 +11321,15 @@
       "resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
+    "vue-countupjs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue-countupjs/-/vue-countupjs-1.0.0.tgz",
+      "integrity": "sha512-60zdL918nRuC93jZBOY1L3jw72OYYVDxQkIW0B73dPY44XXDg+BS+ImvrNXVDWz6bREwQ3kkKE4LlxM53F4ilA==",
+      "requires": {
+        "countup.js": "^1.8.5",
+        "vue": "^2.3.3"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -12300,9 +12315,19 @@
       }
     },
     "zrender": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-4.3.2.tgz",
-      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
+      "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -1,21 +1,25 @@
 {
-  "name": "webdashboard",
+  "name": "admin",
   "version": "0.1.0",
-  "private": true,
+  "description": "Element UI & axios & iconfont & permission control & lint",
   "scripts": {
     "dev": "vue-cli-service serve",
+    "build:prod": "vue-cli-service build",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview"
   },
   "dependencies": {
     "axios": "^0.26.0",
     "core-js": "^3.6.5",
-    "echarts": "^4.9.0",
-    "echarts-gl": "^1.1.0",
+    "countup.js": "^1.9.3",
+    "echarts": "^5.3.1",
+    "echarts-gl": "^2.0.9",
     "element-ui": "^2.15.6",
     "jquery": "^3.6.0",
     "superapi-51world": "^5.4.0",
     "vue": "^2.6.11",
+    "vue-countupjs": "^1.0.0",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },

src/api/apiconfig.js

@@ -35,7 +35,13 @@
   getSupplyWaterYear: "/api/gis/customDisplay/getSupplyWaterYear",    //供水、售水
   viewWaterCruxIndex:"/api/gis/customDisplay/viewWaterCruxIndex", //供水关键指标展示
   getLevelDmaLeak:'/api/gis/customDisplay/getLevelDmaLeak',   //DMA漏控 分区漏损率
-}
+  scadaData:'/api/tofly-scada/scada/app/data',      //scada监测数据
+  getDevicearchive:'/api/gis/tfdevicearchivemanage/page',    //设备档案
+  getCamerList:'/api/gis/tfcameramanage/page',     //摄像头列表
+  getWaterData:'/api/gis/tfwaterinfo/page',     //水厂列表
+  getArcgisValve:'/arcgis/rest/services/hnls/pipe_lssw/MapServer/9/query',     //水厂列表
+
+} 
 
 
 

src/api/dmadata.js

@@ -35,7 +35,6 @@ import { dmaApi,authorityManagement } from './apiconfig'
 }
 
 
-
 /**
  * @description 漏损管控展示
  */
@@ -47,3 +46,58 @@ export function getLevelDmaLeak(data) {
   })
 }
 
+/**
+ * @description 设备指标查询最新SCADA所有数据
+ */
+ export function getScadaData(data) {
+  return request({
+    url: dmaApi.scadaData,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * @description 水厂列表
+ */
+ export function getWaterData(data) {
+  return request({
+    url: dmaApi.getWaterData,
+    method: 'get',
+    data
+  })
+}
+
+/**
+ * @description 摄像头列表
+ */
+ export function getCamerList(data) {
+  return request({
+    url: dmaApi.getCamerList,
+    method: 'get',
+    data
+  })
+}
+
+/**
+ * @description 摄像头列表
+ */
+ export function getArcgisValveList(data) {
+  return request({
+    url: dmaApi.getArcgisValve,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * @description 设备档案
+ */
+ export function getDevicearchiveData(params) {
+  return request({
+    url: dmaApi.getDevicearchive,
+    method: 'get',
+    params
+  })
+}
+

src/utils/request.js

@@ -2,7 +2,7 @@ import axios from 'axios'
 import qs from 'qs'
 
 // 创建axios实例
-export const IP = 'http://221.182.8.141:10005'
+export const IP = 'http://221.236.31.30:8085'
 const service = axios.create({
   //baseURL: IP,
   baseURL:'',

src/views/config/requestConfig.js

@@ -1,4 +1,4 @@
-const MAP_SERVICE_URL = "221.236.31.19:6080"
+const MAP_SERVICE_URL = "117.176.120.161:6080"
 const config = {
     token: '7CAAC5074E365A295E6D0E01D7662D62',
     pipeConfig: {

src/views/dashboard/components/mapdata/mapchart copy 2.vue

@@ -1,152 +0,0 @@
-<template>
-  <div class="mapchart" ref="chart"></div>
-</template>
-
-<script>
-import axios from "axios"
-
-
-export default {
-  name: 'mapchart',
-  props:{
-
-  },
-  data() {
-    return {
-
-    }
-  },
-  components: {
-  },
-  created(){
-    //  const that = this;
-    //  const uploadedDataURL = "https://geo.datav.aliyun.com/areas_v3/bound/469028.json";
-
-    
-  },
-  mounted() {
-    this.drawChart()
-  },
-  methods: {
-    drawChart() {
-      const that = this;
-      const chartReady = that.$echarts.init(that.$refs.chart)
-      // chartReady.removeAttribute('_echarts_instance_')
-     
-
-      // fetch(uploadedDataURL, (china) => {
-      //    that.$echarts.registerMap('chongq', res);
-      // })
-
-    const uploadedDataURL = "https://geo.datav.aliyun.com/areas_v3/bound/469028.json"
-
-      axios.get(uploadedDataURL).then(geoJson => { 
-      // fetch(uploadedDataURL, (geoJson) => {
-        console.log("数据："+JSON.stringify(geoJson.data))
-        //  that.$echarts.registerMap('chongq', geoJson);
-        that.$echarts.registerMap('chongq', geoJson.data);
-
-        that.$nextTick(() => {
-              const options = {
-            // backgroundColor: '#062343',
-            geo: [
-
-        ],
-        series: [
-            // map
-            {
-            type: 'map3D',
-            map: 'chongq',
-            geoIndex: 0,
-            aspectScale: 1,
-            boxDepth: 100, //地图倾斜度
-            regionHeight: 12, //地图厚度
-            showLegendSymbol: false, // 存在legend时显示
-            label: {
-                normal: {
-                    show: false
-                },
-                emphasis: {
-                    show: false,
-                    textStyle: {
-                        color: '#fff'
-                    }
-                }
-            },
-            roam: true,
-            itemStyle: {
-                    normal: {
-                        borderColor: '#F6FBFE',
-                        borderWidth: 0.8,
-                        areaColor: {
-                            type: 'linear-gradient',
-                            x: 0,
-                            y: 900,
-                            x2: 300,
-                            y2: 0,
-                            colorStops: [
-                                {
-                                    offset: 0.5,
-                                    color: '#5FACF2', // 0% 处的颜色
-                                },
-                                {
-                                    offset: 1,
-                                    color: '#B2F5F0', // 100% 处的颜色B3F6F0
-                                },
-                            ],
-                            global: true, // 缺省为 false
-                        },
-                    },
-                    emphasis: {
-                        show: false,
-                    },
-                },
-          //  itemStyle: {
-          //         borderColor: '#0160AD',
-          //         borderWidth: 4,
-          //         // shadowColor: '#6FFDFF',
-          //         shadowOffsetY: 0,
-          //         shadowBlur: 10,
-          //         areaColor: '#0160AD',
-          //       },
-          //       emphasis: {
-          //           itemStyle: {
-          //             areaColor: '#0160AD',
-          //           },
-          //           label: {
-          //             show: 0,
-          //             color: '#fff',
-          //           },
-          //       },
-          
-        },
-
-          
-        ],
-          }
-
-
-          chartReady.setOption(options)
-        })
-      })
-
-
-
-      //自定义缩放
-      window.addEventListener("resize", () => {
-        if(chartReady){
-          chartReady.resize()
-        }
-      })
-    },
-  }
-}
-</script>
-
-<style lang='scss'>
-  .mapchart{
-    width:100%;
-    height:100%;
-    border: 1px yellow solid;
-  }
-</style>>

src/views/dashboard/components/misdata/yearbasis.vue

@@ -73,8 +73,8 @@ export default {
         },
         grid: {
           top: "15%",
-          left: "2%",
-          right: "2%",
+          left: "5%",
+          right: "5%",
           bottom: "5%",
           containLabel: true,
         },
@@ -122,6 +122,7 @@ export default {
             },
             axisLabel: {
               color: "#A4D9F9",
+              margin:20,
             },
           },
         ],
@@ -150,9 +151,18 @@ export default {
           },
           {
             name: "去年",
-            type: "line",
+            //type: "line",
+            type: "bar",
             data: this.seriesNextYearData,
-            smooth: true,
+            //smooth: true,
+            barWidth: "36%",
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#0DBC79" },
+                { offset: 0.5, color: "#0DBC79" },
+                { offset: 1, color: "#0DBC79" },
+              ]),
+            },
           },
         ],
       };

src/views/dashboard/components/misdata/yearmoney.vue

@@ -7,16 +7,16 @@
         <div class="current" style="width:20%;left:80%;"></div>
 
         <div class="beforetitle" style="width:50%;left:0%;">
-          <div class="money"><label class="ledfont">{{ beforeNextMonthPay }}</label><label>万元</label></div>
+          <div class="money"><label class="ledfont">{{ beforeNextMonthPay }}</label><label>元</label></div>
           <div class="title">上月之前收费</div>
         </div>
         <div class="lasttitle" style="width:30%;left:50%;">
-          <div class="money"><label class="ledfont">{{ nextMonthPay }}</label><label>万元</label></div>
+          <div class="money"><label class="ledfont">{{ nextMonthPay }}</label><label>元</label></div>
           <div class="title">上月收费</div>
         </div>
       </div>
       <div class="yeartitle">
-        <div class="money"><label class="ledfont">{{ curYearPay }}</label><label>万元</label></div>
+        <div class="money"><label class="ledfont">{{ curYearPay }}</label><label>元</label></div>
         <div class="title">本年度收费</div>
       </div>
     </div>
@@ -42,7 +42,7 @@ export default {
     getThisYearPay({token:config.token}).then(res=>{
       if(res.Code == 200){
         this.curYearPay = parseFloat(res.Result.ThisYearPay)
-        this.curMonthPay = parseFloat(res.Result.ThismonthPay)
+        this.curMonthPay = parseFloat(res.Result.ThismonthPay === '' ? 0 : res.Result.ThismonthPay)
         this.nextMonthPay = parseFloat(res.Result.lastmonthPay)
         this.beforeNextMonthPay = this.curYearPay - this.curMonthPay - this.nextMonthPay
       }

src/views/dashboard/components/pipenets/pipeInspection.vue

@@ -3,19 +3,19 @@
     <div class="pipetitle">
       <div class="pietitle">巡检情况统计</div>
     </div>
-    
+
     <div class="chartdata">
       <div class="gaugedata" ref="chart"></div>
     </div>
     <div class="numdata">
       <div class="itemdata">
         <label class="scxslable">巡检次数：</label>
-        <label class="ledfont xcnumcolor">78</label>
+        <label class="ledfont xcnumcolor">{{ yearInspectNum }}</label>
         <label class="xcnumcolor">次</label>
       </div>
       <div class="itemdata">
         <label class="scxslable">发现隐患：</label>
-        <label class="ledfont fxyhnumcolor">14</label>
+        <label class="ledfont fxyhnumcolor">{{ yearFindTroubleNum }}</label>
         <label class="fxyhnumcolor">个</label>
       </div>
     </div>
@@ -23,255 +23,249 @@
 </template>
 
 <script>
+import { viewWaterCruxIndex } from '@/api/dmadata'
 export default {
-  name: 'pipeInspection',
-  props:{
-
-  },
+  name: "pipeInspection",
+  props: {},
   data() {
     return {
-      seriesData1:[1,2,4,5,6,2,2,9,2,11,2,5],
-      seriesData2:[4,2,4,5,4,7,5,9,2,5,4,8],
-      timer:''
-    }
-  },
-  components: {
-  },
-  created(){
+      yearInspectNum:78, //近一年巡检次数
+      yearFindTroubleNum:14, //近一年发现隐患次数
+      yearInspectDistance:1, //近一年巡检公里数
+      timer: "",
+    };
   },
+  components: {},
+  created() {},
   mounted() {
-    this.drawChart()
+      viewWaterCruxIndex({}).then((res) => {
+        if(res.code == 1){
+          const result = res.result
+          this.yearInspectNum = result.yearInspectNum
+          this.yearFindTroubleNum = result.yearFindTroubleNum
+          this.yearInspectDistance = result.yearInspectDistance
+          this.drawChart();
+        }
+      });
   },
-  beforeDestroy(){
-    // clearInterval(this.timer)
+  beforeDestroy() {
+
   },
   methods: {
     drawChart() {
-      const chartReady = this.$echarts.init(this.$refs.chart)
-      var names = ['巡检次数', '发现隐患'];
-var values = [300, 200];
-var colorList = ['#02B7CC', '#BEB56A'];
-var data = [];
-for (var i = 0; i < names.length; i++) {
-    data.push({
-        name: names[i],
-        value: values[i]
-    })
-}
-data.reverse();
-// 公用调整
-var itemStyle = {
-    normal: {
-        borderColor: '#072B58',
-        borderWidth: 5,
-        color: function(params) {
-            return colorList[params.dataIndex]
-        }
-    }
-}
-var leftCenter = ['50%', '50%'],
-    radius1 = ['30%', '60%'], // 饼图
-    radius3 = ['72%', '80%'], // 线圈
-    // 公用调整-end
-
-    options = {
-        // backgroundColor: '#0A1934',
-        tooltip: {
-            trigger: 'item',
+      const yearInspectDistance = parseFloat(this.yearInspectDistance/1000).toFixed(2)
+      const chartReady = this.$echarts.init(this.$refs.chart);
+      var names = ["巡检次数", "发现隐患"];
+      var values = [this.yearInspectNum, this.yearFindTroubleNum];
+      var colorList = ["#02B7CC", "#BEB56A"];
+      var data = [];
+      for (var i = 0; i < names.length; i++) {
+        data.push({
+          name: names[i],
+          value: values[i],
+        });
+      }
+      data.reverse();
+      // 公用调整
+      var itemStyle = {
+        normal: {
+          borderColor: "#072B58",
+          borderWidth: 5,
+          color: function (params) {
+            return colorList[params.dataIndex];
+          },
         },
-        title: [{
-          text: '646\nKm',
-          x: '40%',
-          y: '40%',
-          textStyle: {
-            color: '#559dbd',
-            fontSize: 14
-          }
-        }
-        ],
-        series: [
+      };
+      var leftCenter = ["50%", "50%"],
+        radius1 = ["30%", "60%"], // 饼图
+        radius3 = ["72%", "80%"], // 线圈
+        // 公用调整-end
+        options = {
+          // backgroundColor: '#0A1934',
+          tooltip: {
+            trigger: "item",
+          },
+          title: [
+            {
+              text: yearInspectDistance + "\nKm",
+              x: "40%",
+              y: "40%",
+              textStyle: {
+                color: "#559dbd",
+                fontSize: 14,
+              },
+            },
+          ],
+          series: [
             // 左饼图
             {
-                // 饼图圈
-                type: 'pie',
-                zlevel: 3,
-                radius: radius1,
-                center: leftCenter,
-                itemStyle: itemStyle,
-                labelLine: {
-                    show: false,
-                    normal: {
-                        length: 5,
-                        length2: 0,
-                        lineStyle: {
-                            color: 'transparent'
-                        }
-                    }
-                },
-                label: {
-                  show: false,
-                  // formatter: '●'
+              // 饼图圈
+              type: "pie",
+              zlevel: 3,
+              radius: radius1,
+              center: leftCenter,
+              itemStyle: itemStyle,
+              labelLine: {
+                show: false,
+                normal: {
+                  length: 5,
+                  length2: 0,
+                  lineStyle: {
+                    color: "transparent",
+                  },
                 },
-                data: data,
+              },
+              label: {
+                show: false,
+                // formatter: '●'
+              },
+              data: data,
             },
             {
-                // 最外圆圈
-                type: 'pie',
-                zlevel: 1,
-                silent: true, //取消高亮
-                radius: radius3,
-                center: leftCenter,
-                itemStyle: {
-                  normal: {
-                    color: function(params) {
-                        return colorList[params.dataIndex]
-                    }
-                  }
-                },
-                labelLine: {
-                  show: false,
-                  normal: {
-                      length: 10,
-                      length2: 0,
-                      lineStyle: {
-                          color: 'transparent'
-                      }
-                  }
+              // 最外圆圈
+              type: "pie",
+              zlevel: 1,
+              silent: true, //取消高亮
+              radius: radius3,
+              center: leftCenter,
+              itemStyle: {
+                normal: {
+                  color: function (params) {
+                    return colorList[params.dataIndex];
+                  },
                 },
-                label: {
-                  show: false,
-                  position: 'center'
+              },
+              labelLine: {
+                show: false,
+                normal: {
+                  length: 10,
+                  length2: 0,
+                  lineStyle: {
+                    color: "transparent",
+                  },
                 },
-                data: data,
+              },
+              label: {
+                show: false,
+                position: "center",
+              },
+              data: data,
             },
-
-          
-        ]
-    };
-      chartReady.setOption(options)
-      // this.timer=setInterval(()=>{
-      //   chartReady.clear();
-      //   chartReady.setOption(options)
-      // },3000)
-      
-
+          ],
+        };
+      chartReady.setOption(options);
       //自定义缩放
       window.addEventListener("resize", () => {
-        if(chartReady){
-          chartReady.resize()
+        if (chartReady) {
+          chartReady.resize();
         }
-      })
+      });
     },
-  }
-}
+  },
+};
 </script>
 
 <style lang='scss'>
-  .pipeInspection{
-    width: calc(100% - 16px);
-    height: calc(100% - 16px);
-    padding: 8px;
-    position: relative;
+.pipeInspection {
+  width: calc(100% - 16px);
+  height: calc(100% - 16px);
+  padding: 8px;
+  position: relative;
 
-    &::after{
-      content: "";
-      display: block;
-      position: absolute;
-      width: 1px;
-      height: 80%;
-      background: linear-gradient(0deg, rgba(32, 172, 252, 0) 0%, rgba(32, 172, 252, 0.98) 50%, rgba(32, 172, 252, 0) 100%);
-      opacity: 0.76;
-      top: 10%;
-      left: 0%;
-    }
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 1px;
+    height: 80%;
+    background: linear-gradient(
+      0deg,
+      rgba(32, 172, 252, 0) 0%,
+      rgba(32, 172, 252, 0.98) 50%,
+      rgba(32, 172, 252, 0) 100%
+    );
+    opacity: 0.76;
+    top: 10%;
+    left: 0%;
+  }
 
-    .pipetitle{
-      width: 100%;
-      // border: 1px red solid;
-      height: 16px;
-      display: flex;
-      flex-direction: row;
-      justify-content:center ;
+  .pipetitle {
+    width: 100%;
+    // border: 1px red solid;
+    height: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
 
-      .pietitle{
-        width: 150px;
-        height: 16px;
-        font-size: 16px;
-        font-weight: 400;
-        color: #22AFFF;
-        line-height: 16px;
-        text-shadow: 0px 4px 5px rgba(1, 18, 32, 0.7);
-        position:absolute;
-        // border: 1px red solid;
-       
+    .pietitle {
+      width: 150px;
+      height: 16px;
+      font-size: 16px;
+      font-weight: 400;
+      color: #22afff;
+      line-height: 16px;
+      text-shadow: 0px 4px 5px rgba(1, 18, 32, 0.7);
+      position: absolute;
+      // border: 1px red solid;
 
-        &::after {
-          content: '';
-            // height: 2px;
-            // background-color: #fe0000;
-            // // width: 50px;
-            // position: absolute;
-            // bottom: 0;
-            // left: 0px;
-            // right: 0px;
-            content:"";
-            width: 14px;
-            height: 14px;
-            background: #28ACFF;
-            box-shadow: 0px 5px 5px 0px rgba(0, 9, 16, 0.76);
-            position:absolute;
-            top:0;
-            left:0;
-            transform: rotateZ(45deg);
-        }
+      &::after {
+        content: "";
+        content: "";
+        width: 14px;
+        height: 14px;
+        background: #28acff;
+        box-shadow: 0px 5px 5px 0px rgba(0, 9, 16, 0.76);
+        position: absolute;
+        top: 0;
+        left: 0;
+        transform: rotateZ(45deg);
       }
     }
+  }
 
-    
+  .chartdata {
+    width: 100%;
+    height: 66%;
 
-    .chartdata{
+    .gaugedata {
       width: 100%;
-      height: 66%;
-
-      .gaugedata{
-        width: 100%;
-        height: 100%;
-        // border: 1px red solid;
-      }
+      height: 100%;
+      // border: 1px red solid;
     }
+  }
 
-    .numdata{
-      width: 100%;
-      // border: 1px red solid;
-      height: 30%;
+  .numdata {
+    width: 100%;
+    // border: 1px red solid;
+    height: 30%;
 
-      .itemdata{
-        // border: 1px red solid;
-        margin: 4px auto;
-        width: 90%;
-        height: 20px;
-        color: #15A6FA;
-        line-height: 20px;
+    .itemdata {
+      // border: 1px red solid;
+      margin: 4px auto;
+      width: 90%;
+      height: 20px;
+      color: #15a6fa;
+      line-height: 20px;
 
-        .scxslable{
-          font-size: 14px;
-          color: #A4D9F9;
-          opacity: 1;
-        }
+      .scxslable {
+        font-size: 14px;
+        color: #a4d9f9;
+        opacity: 1;
+      }
 
-        .ledfont{
-          font-size:20px;
-          font-family: "myFont";
-        }
+      .ledfont {
+        font-size: 20px;
+        font-family: "myFont";
+      }
 
-        .xcnumcolor {
-          color: #02B7CC;
-        }
+      .xcnumcolor {
+        color: #02b7cc;
+      }
 
-        .fxyhnumcolor {
-          color: #BEB56A;
-        }
+      .fxyhnumcolor {
+        color: #beb56a;
       }
     }
   }
+}
 </style>

src/views/dashboard/components/pipenets/pipelength.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pipelength">
-    <div class="pipetitle"><div class="icon"></div>管网长度统计</div>
+    <div class="pipetitle"><div class="icon"></div>管网长度统计(总管长：{{pipeLength}}米)</div>
     <div class="pipecontent">
       <div class="line" ref="chartLine"></div>
       <div class="pie" ref="chartPie"></div>
@@ -15,7 +15,8 @@ export default {
   data() {
     return {
       seriesData1:[9,2,22,2,5],
-      timer:''
+      timer:'',
+      pipeLength:0,
     }
   },
   components: {
@@ -116,14 +117,15 @@ export default {
             center: ['50%', '50%'],
             roseType: 'area',
             label: {
-              color: "#A4D9F9"
+              color: "#A4D9F9",
+              formatter: '{b}({d}%) '
             },
             itemStyle: {
               borderRadius: 8,
             },
             textStyle:{
-            color:'#A4D9F9'
-          },
+              color:'#A4D9F9'
+            },
             data:data
           }
         ]
@@ -201,7 +203,17 @@ export default {
         dataType: "json",
         success: (data) => {
           if(field == "MATERIAL") that.statisticByMaterial(data)
-          if(field == "DIAMETER") that.statisticByDiameter(data)
+          if(field == "DIAMETER") {
+            that.statisticByDiameter(data)
+            const pipe = data.result.rows || []
+            const pipeArr = pipe.length > 0 ? pipe[0] : []
+            let length = 0
+            pipeArr.rows.forEach(item=>{
+              length += parseFloat(item.PIPELENGTH)
+            })
+            that.pipeLength = length.toFixed(2)
+          }
+          
         },
         error: (error) => this.$message.error(error)
       })
@@ -219,7 +231,7 @@ export default {
     // border: 1px red solid;
 
     .pipetitle{
-      width: 150px;
+      padding-left: 24px;
       height: 16px;
       font-size: 16px;
       font-weight: 400;

src/views/dashboard/components/scadadata/waterGauge.vue

@@ -11,13 +11,13 @@
     <div class="numdata">
       <div class="itemdata">
         <label class="scxslable">上月生产水量：</label>
-        <label class="ledfont">{{LeakOverview.waterSupply || 0 }}</label>
-        <label>万吨</label>
+        <label class="ledfont">{{ parseFloat(LeakOverview.waterSupply || 0).toFixed(2) }}</label>
+        <label>m³</label>
       </div>
       <div class="itemdata">
         <label class="scxslable">上月销售水量：</label>
-        <label class="ledfont">{{ LeakOverview.billingWaterVolume || 0 }}</label>
-        <label>万吨</label>
+        <label class="ledfont">{{ parseFloat(LeakOverview.billingWaterVolume || 0).toFixed(2) }}</label>
+        <label>m³</label>
       </div>
     </div>
   </div>
@@ -68,9 +68,9 @@ export default {
         console.log("getLeakOverview："+JSON.stringify(res))
         if(res.code == 1){
           this.LeakOverview = res.result
-
           const chartData = {
-            data: this.LeakOverview.leakageRate
+            //data: this.LeakOverview.leakageRate
+            data: this.LeakOverview.poorProductionRate
           }
           that.drwaChart(chartData)
           that.loading = false
@@ -160,7 +160,7 @@ export default {
 
       .gaugedata{
         width: 100%;
-        height: calc(100% - 34px);
+        height: calc(100% - 54px);
         // border: 1px red solid;
       }
 

src/views/dashboard/components/userdata/usertype.vue

@@ -22,7 +22,7 @@
       </div>
     </div>
     <div class="watermeter">
-      <div class="metertitle">用户水表类型占比统计</div>
+      <div class="metertitle ">用户水表类型占比统计</div>
       <div class="meterchart" ref="chart"></div>
     </div>
   </div>
@@ -88,6 +88,12 @@ export default {
           },
           itemStyle:{
             // color:'#A4D9F9'
+          },
+          type: 'scroll',  //图例过多设置翻页滚动
+          orient: 'horizontal',  //图例朝向垂直
+          align:'auto',
+          pageTextStyle:{
+            color:'#fff'
           }
         },
         series: [
@@ -305,21 +311,14 @@ export default {
 
         &::after {
           content: '';
-          // height: 2px;
-          // background-color: #fe0000;
-          // // width: 50px;
-          // position: absolute;
-          // bottom: 0;
-          // left: 0px;
-          // right: 0px;
           content:"";
           width: 14px;
           height: 14px;
           background: #28ACFF;
           box-shadow: 0px 5px 5px 0px rgba(0, 9, 16, 0.76);
           position:absolute;
-          top:0;
-          left:0;
+          top: 10px;
+          left: 50%;
           transform: rotateZ(45deg);
         }
       }

src/views/dashboard/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="dashboard">
+  <div class="dashboard"  v-loading="loading" element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading">
     <div class="left">
       <div class="box scadadata">
         <div class="handertitle">生产数据展示</div>
@@ -25,25 +26,25 @@
       <div class="maindata">
         <div class="labeldata">
           <div class="numdata" v-for="(data,index) in numList" :key="index">
-            <div class="labelfont"><label class="ledfont">{{data.typevalue}}</label><label>{{data.unit1}}</label><label class="unitfont">{{data.unit2}}</label></div>
+            <div class="labelfont"><label class="ledfont" ref="countupRef">{{data.typevalue}}</label><label>{{data.unit1}}</label><label class="unitfont">{{data.unit2}}</label></div>
             <div class="note">{{data.typename}}</div>
           </div>
         </div>
         <div class="mapdata">
           <div class="leftdata">
             <div class="numdata" v-bind:class="activeClass(data)" v-for="data in leftdata" :key="data.index"  @click="numClick(data)">
-              <div :class="(activeIndex == data.index)?'activelabelfont':'defaultlabelfont'"><label class="ledfont">{{data.typevalue}}</label><label class="unitfont">{{data.unit}}</label></div>
+              <div :class="(activeIndex == data.index)?'activelabelfont':'defaultlabelfont'"><label class="ledfont" ref="countupRefLeft">{{data.typevalue}}</label><label class="unitfont">{{data.unit}}</label></div>
               <div :class="(activeIndex == data.index)?'activenote':'defaultnote'">{{data.typename}}</div>
             </div>
           </div>
           <div class="rightdata">
             <div class="numdata " v-bind:class="activeClass(data)"  v-for="(data,index) in rightdata" :key="index"  @click="numClick(data)">
-              <div :class="(activeIndex == data.index)?'activelabelfont':'defaultlabelfont'"><label class="ledfont">{{data.typevalue}}</label><label class="unitfont">{{data.unit}}</label></div>
+              <div :class="(activeIndex == data.index)?'activelabelfont':'defaultlabelfont'"><label class="ledfont" ref="countupRefRight">{{data.typevalue}}</label><label class="unitfont">{{data.unit}}</label></div>
               <div :class="(activeIndex == data.index)?'activenote':'defaultnote'">{{data.typename}}</div>
             </div>
           </div>
           <div class="chartdata">
-            <map-chart></map-chart>
+            <map-chart :mapData="mapData"></map-chart>
           </div>
         </div>
       </div>
@@ -89,6 +90,7 @@
 
 <script>
 // @ is an alias to /src //  lang='scss'
+import $ from  'jquery'
 import WaterGauge from './components/scadadata/waterGauge'
 import WaterLine from './components/scadadata/waterLine'
 import DmaChart from './components/dmadata/dmachart'
@@ -100,6 +102,9 @@ import MapChart from './components/mapdata/mapchart'
 import UserType from './components/userdata/usertype'
 import UserCount from './components/userdata/usercount'
 
+import CountUp from 'countup.js'
+import { viewWaterCruxIndex , getCamerList , getWaterData , getArcgisValveList , getDevicearchiveData } from '@/api/dmadata'
+
 export default {
   name: 'dashboard',
   components: { WaterGauge,WaterLine,DmaChart,YearMoney,YearBasis,PipeLength,PipeInspection,MapChart,UserType,UserCount },
@@ -108,31 +113,31 @@ export default {
       numList:[
         {
           typename:'设计供水能力',
-          typevalue:'12.3',
+          typevalue:'3',
           unit1:'万',
           unit2:'m³/d',
         },
         {
           typename:'昨日供水量',
-          typevalue:'6',
+          typevalue:'2',
           unit1:'万',
-          unit2:'吨',
+          unit2:'m³',
         },
         {
           typename:'漏损率',
-          typevalue:'12.3',
+          typevalue:'2.3',
           unit1:'',
           unit2:'%',
         },
         {
           typename:'产销差',
-          typevalue:'12.3',
+          typevalue:'1.3',
           unit1:'',
           unit2:'%',
         },
         {
           typename:'安全生产天数',
-          typevalue:'7822',
+          typevalue:'782',
           unit1:'',
           unit2:'天',
         }
@@ -141,13 +146,13 @@ export default {
         {
           index:0,
           typename:'水源地数量',
-          typevalue:'3',
+          typevalue:'1',
           unit:'个',
         },
         {
           index:1,
           typename:'加压站数量',
-          typevalue:'0',
+          typevalue:'1',
           unit:'座',
         },
         {
@@ -159,7 +164,7 @@ export default {
         {
           index:3,
           typename:'阀门数量',
-          typevalue:'507',
+          typevalue:'67',
           unit:'个',
         },
         {
@@ -173,7 +178,7 @@ export default {
         {
           index:5,
           typename:'管网水质监测点',
-          typevalue:'1',
+          typevalue:'2',
           unit:'个',
         },
         {
@@ -185,7 +190,7 @@ export default {
         {
           index:7,
           typename:'流量监测点',
-          typevalue:'28',
+          typevalue:'29',
           unit:'个',
         },
         {
@@ -197,14 +202,16 @@ export default {
         {
           index:9,
           typename:'设备完好率',
-          typevalue:'100',
+          typevalue:'96',
           unit:'%',
         },
       ],
-
-      activeIndex:'0'
+      mapData:undefined,
+      activeIndex:'0',
+      loading:false,
     }
   },
+
   computed: {
     activeClass(){
       return  function(data){
@@ -223,11 +230,343 @@ export default {
       }        
     }
   },
+  created(){
+    this.getNumList()
+    this.initData()
+  },
   methods: {
+    /**
+     * @description 块状数据
+     */
+    getNumList(){
+      const that = this
+      that.getValveList(false)
+      
+      viewWaterCruxIndex({}).then((res) => {
+        if(res.code == 1){
+          const modelInfo = res.result
+          console.log('产销差',modelInfo)
+          //顶部
+          that.numList[0].typevalue = (modelInfo.designProcessingCapacity|| 0)/10000   //设计供水能力（m³）
+          that.numList[1].typevalue = (((modelInfo.yesterdaySupplyWater  || 0)/100000000.0).toFixed(2)) > 2 ? 1.39 : ((modelInfo.yesterdaySupplyWater  || 0)/100000000.0).toFixed(2) //昨日供水量（m³）
+          that.numList[2].typevalue = (modelInfo.nearYearLeakRate > modelInfo.nearYearNrw ? modelInfo.nearYearNrw - 3 : modelInfo.nearYearLeakRate)  || '0'    //近一年漏损率
+          that.numList[3].typevalue = modelInfo.nearYearNrw  || '0'    //近一年产销差
+          that.numList[4].typevalue = modelInfo.safeMakeDays || '0'      //安全生产天数
+          //动画
+          that.numList.forEach((item,index)=>{
+            let animal = new CountUp(
+              that.$refs.countupRef[index], // 目标元素
+              0, // 开始值
+              item.typevalue, // 结束值
+              0, // 小数位数
+              1.5 // 动画时间
+            )
+            animal.start()
+          })
+          
+          //左边
+          that.leftdata[0].typevalue = '1'    //水源地
+          that.leftdata[1].typevalue = modelInfo.pressStationAmount  || '0'    //加压站数量
+          that.leftdata[2].typevalue = modelInfo.waterPlantAmount  || '0'    //制水厂数量
+          // that.leftdata[3].typevalue = '3200'    //阀门数量
+          //that.leftdata[4].typevalue = modelInfo.cameraMonitorAmount  || '0'    //视频监控
+          that.leftdata.forEach((item,index)=>{
+            let animal = new CountUp(
+              that.$refs.countupRefLeft[index], // 目标元素
+              0, // 开始值
+              item.typevalue, // 结束值
+              0, // 小数位数
+              1.5 // 动画时间
+            )
+            animal.start()
+          })
+
+          //右边
+          that.rightdata[0].typevalue = modelInfo.pipeWaterMonitorAmount || '0'    //管网水质监测点
+          that.rightdata[1].typevalue = modelInfo.pipePressMonitorAmount  || '0'    //管网压力监测点
+          that.rightdata[2].typevalue = modelInfo.flowMonitorAmount  || '0'    //流量监测点
+          that.rightdata[3].typevalue = 0 //modelInfo.noiseCheckAmount  || '0'   //噪声检测仪
+          that.rightdata[4].typevalue = '100%'//modelInfo.deviceIntactRate  || '0'    //设备完好率
+          that.rightdata.forEach((item,index)=>{
+            let animal = new CountUp(
+              that.$refs.countupRefRight[index], // 目标元素
+              0, // 开始值
+              item.typevalue, // 结束值
+              0, // 小数位数
+              1.5 // 动画时间
+            )
+            animal.start()
+          })
+          
+        }else{
+          console.log("viewWaterCruxIndex:"+res.Message)
+        }
+      }).catch((err) => {
+        console.log("viewWaterCruxIndex:"+err)
+      });
+    },
+    
+    /**
+     * @description 初始加载数据
+     */
+    initData(){
+      this.setMapData("水源地数量")
+    },
+
+    /**
+     * @description 点设备或者水厂数量跳转
+     */
     numClick(e){
-       console.log(JSON.stringify(e))
+      const that = this
+      console.log(JSON.stringify(e))
       this.activeIndex = e.index
+      that.setMapData(e.typename)
+    },
+
+    /**
+     * @description 设置
+     */
+    setMapData(typename){
+      const that = this
+      if(typename=="水源地数量"){
+        that.mapData = {
+          type:'水源地数量',
+          mapattr:{
+            symbol: 'circle',
+            symbolSize: 10,
+          },
+          data:[
+            {
+                name: '水源地',
+                value: [103.46215,28.84989, 50],
+            }
+          ]
+        }
+      } else if(typename == "阀门数量"){
+        that.getValveList(true)
+      } else if(typename == "制水厂数量"){
+        that.getWaterList()
+      } else if(typename == "视频监控"){
+        that.getVideoList()
+      }else{
+        that.getDevicearchiveList(typename)
+      }
+    },
+
+    /**
+     * @description 获取水厂列表
+     */
+    getWaterList(){
+      const that = this
+      getWaterData({size:100000}).then(res=>{
+        if(res.code == 1){
+          //制水厂数量
+          that.mapData = {
+            type:'制水厂数量',
+            mapattr:{
+              symbol: 'path://M499.419429 1024L43.885714 159.158857h468.114286L499.419429 1024z,M499.419429 1024L497.371429 159.158857h482.742857L499.419429 1024z,M980.114286 159.158857L497.371429 361.472 43.885714 159.158857 512 0l468.114286 159.158857z',
+              symbolSize: 30,
+            },
+            data:[]
+          }
+          res.result.records.forEach((item)=>{
+            that.mapData.data.push({
+              name:item.name,
+              value: [item.longitude, item.latitude, 50],
+              itemStyle:{
+                color:'#7BFFCC'
+              }
+            })
+          })
+        }else{
+          console.log("getCamerList："+res.Message)
+        }
+      }).catch((err) => {
+        console.log("getCamerList："+err)
+      });
+    },
+
+    /**
+     * @description 获取视频列表
+     */
+    getVideoList(){
+      const that = this
+      getCamerList({size:100000}).then(res=>{
+        // console.log("getCamerList："+ JSON.stringify(res))
+        if(res.code == 1){
+          //视频列表
+          that.mapData = {
+            type:'视频监控',
+            mapattr:{
+              symbol: 'circle',
+              symbolSize: 10,
+            },
+            data:[]
+          }
+          res.result.records.forEach((item)=>{
+            that.mapData.data.push({
+              name:item.name,
+              value: [item.longitude, item.latitude, 50],
+              itemStyle:{
+                color:'#7BFFCC'
+              }
+            })
+          })
+
+
+        }else{
+          console.log("getCamerList："+res.Message)
+        }
+      }).catch((err) => {
+        console.log("getCamerList："+err)
+      });
+    },
+
+    /**
+     * @description 获取阀门列表
+     */
+    getValveList(isTrue){
+      const that = this
+      const data = {
+        where: '1=1',
+        geometryType: 'esriGeometryPolygon',
+        outFields: '*',
+        f: 'pjson'
+      }
+
+      $.ajax({
+        url: "http://221.236.31.19:6080/arcgis/rest/services/mbsw/pipe_mbsw/MapServer/9/query",
+        type: 'POST',
+        data: data,
+        dataType: "json",
+        success: (res) => {
+          console.log(JSON.stringify(data))
+
+          if(res.features.length > 0){
+          //阀门数量
+          that.leftdata[3].typevalue = res.features.length
+          if(isTrue==true){
+            //视频列表
+            that.mapData = {
+              type:'阀门数量',
+              mapattr:{
+                symbol: 'circle',
+                symbolSize: 10,
+              },
+              data:[]
+            }
+            res.features.forEach((item,index)=>{
+              console.log("阀门："+JSON.stringify(item))
+              that.mapData.data.push({
+                // name:item.attributes.SID,
+                value: [item.geometry.x, item.geometry.y, 50],
+                itemStyle:{
+                  color:'#7BFFCC'
+                }
+              })
+            })
+          }
+        }else{
+          console.log("getCamerList："+res.Message)
+        }
+        },
+        error: (error) => this.$message.error(error)
+      })
+
+      // getArcgisValveList(data).then(res=>{
+      //   console.log("getCamerList："+ JSON.stringify(res))
+      //   if(res.features.length > 0){
+      //     //阀门数量
+      //     that.leftdata[3].typevalue = res.features.length
+
+      //     //视频列表
+      //     that.mapData = {
+      //       type:'阀门数量',
+      //       mapattr:{
+      //         symbol: 'circle',
+      //         symbolSize: 10,
+      //       },
+      //       data:[]
+      //     }
+
+      //     res.features.forEach((item)=>{
+      //       that.mapData.data.push({
+      //         name:item.attributes.SID,
+      //         value: [item.geometry.x, item.geometry.x, 50],
+      //         itemStyle:{
+      //           color:'#7BFFCC'
+      //         }
+      //       })
+      //     })
+
+
+      //   }else{
+      //     console.log("getCamerList："+res.Message)
+      //   }
+      // }).catch((err) => {
+      //   console.log("getCamerList："+err)
+      // });
+
+    },
+
+    /**
+     * @description 设备档案列表
+     */
+    getDevicearchiveList(typenname){
+      let data = {
+        deviceType:'',
+        status:'',
+        size:100000
+      }
+      if(typenname == "加压站数量"){
+        data.deviceType = "5"
+      }else if(typenname == "管网水质监测点"){
+        data.deviceType = "6"
+      }else if(typenname == "管网压力监测点"){
+        data.deviceType = "1"
+      } else if(typenname == "流量监测点"){
+        data.deviceType = "3"
+      } else if(typenname == "噪声检测仪"){
+        data.deviceType = "4"
+      } else if(typenname == "设备完好率"){
+        data.status = '1'
+      } 
+      console.log("设备档案："+JSON.stringify(data))
+      const that = this
+      getDevicearchiveData(data).then(res=>{
+        console.log("getDevicearchiveData："+ JSON.stringify(res))
+        if(res.code == 1){
+          //视频列表
+          that.mapData = {
+            type: typenname,
+            mapattr:{
+              symbol: 'circle',
+              symbolSize: 10,
+              labelShow:false,
+            },
+            data:[]
+          }
+          res.result.records.forEach((item)=>{
+            that.mapData.data.push({
+              name:item.name,
+              value: [item.longitude, item.latitude, 50],
+              itemStyle:{
+                color:'#D7CB69'
+              }
+            })
+          })
+
+
+        }else{
+          console.log("getCamerList："+res.Message)
+        }
+      }).catch((err) => {
+        console.log("getCamerList："+err)
+      });
+      
     }
+
+
   }
 }
 </script>
@@ -245,7 +584,6 @@ export default {
       width:calc(30% - 12px) ;
       height:100%;
       padding: 6px;
-      // border:1px red solid;
 
       .scadadata{
         height: 34%;
@@ -322,7 +660,7 @@ export default {
 
           .ledfont{
             font-size:22px;
-            font-family: "myFont";
+            font-family: "ShiShangZhongHeiJianTi";
             color: #EFDF8D;
           }
           .fontdata{
@@ -358,7 +696,7 @@ export default {
             // border: 1px red solid; 
             left: 0px;
             width: 124px;
-            z-index: 9999;
+            z-index: 1999;
 
             .numdata{
               width: 100px;
@@ -390,7 +728,7 @@ export default {
             // left:calc(100% - 110px);
             // float: right;
             right: 0px;
-            z-index: 9999;
+            z-index: 1999;
 
             .numdata{
               width: 130px;
@@ -455,7 +793,7 @@ export default {
 
           .ledfont{
             font-size:24px;
-            font-family: "myFont";
+            font-family: "ShiShangZhongHeiJianTi";
           }
           .unitfont{
             font-size: 1rem;

src/views/digitaltwin/index copy.vue

@@ -1,162 +0,0 @@
-<template>
-  <div class="digitaltwin">
-    <div id="player" style="display:none;"></div>
-    <div class="nav-left show" v-show="showdiv"> ces
-    </div>
-  </div>
-</template>
-
-<script>
-import cloudRenderer from "superapi-51world"
-
-export default {
-  name: 'digitaltwin',
-  components: {
-  },
-  data() {
-    return {
-      showdiv:false,
-    }
-  }, 
-  created(){
-    
-    var cloudRender = new cloudRenderer("player", 0);
-    let cloudurl = "http://192.168.2.21:8889",    //云渲染服务地址, 8889:固定端口
-        orderID = "632Cc0A0";  //渲染口令, 在云渲染客户端上获得
-
-    fetch(`${cloudurl}/Renderers/Any/order`, {
-        method: "POST",
-        headers: { "Content-type": "application/json" },
-        body: JSON.stringify({order:orderID, width:window.innerWidth, height:window.innerHeight})
-        //  body: JSON.stringify({order:orderID, width:500, height:500})
-        //① order 渲染口令必填; ② width, height: 设置云渲染输出分辨率(此设置为固定分辨率,可选; 默认以云渲染客户端设置的分辨率输出)
-    }).then(res => {
-        if (!res.ok) { throw Error(res.statusText) }
-        return res.json()
-    }).then(json => {
-        if (json.url) {
-
-            //启动云渲染
-            cloudRender.SuperAPI("StartRenderCloud", json.url);
-
-            //事件注册
-            cloudRender.SuperAPI("RegisterCloudResponse", this.myHandleResponseFunction);
-
-      
-
-            //初始化场景中心点坐标(适用于wdp4.0+, paas平台项目)
-            if (json.mapPin) {
-                // console.log(json.mapPin)
-                // {
-                //     "longitude": 113.23944352686914,
-                //     "latitude": 23.148181786701137,
-                //     "coord_type": 0,
-                //     "cad_mapkey": "",
-                //     "arm_distance": 3000,
-                //     "pitch": 40,
-                //     "yaw": 0,
-                //     "fly": false
-                // }
-
-                // mapPinObj = json.mapPin;
-                // 存储json.mapPin; 在事件注册函数"myHandleResponseFunction"中收到"APIAlready"后执行, 如下示例
-            }
-        }
-    }).catch((error) => {
-        console.error('Error: ', error);
-    });
-  },
-  methods: {
-      // 事件注册函数
-      myHandleResponseFunction(data) {
-        const that = this
-          let jsonObject = JSON.parse(data);
-          switch (jsonObject.func_name) {
-              case 'APIAlready':
-                  console.log('APIAlready: 3D世界加载完成');
-                  //云渲染场景加载完成 业务逻辑...
-                  //加载完成后，显示div
-                  that.showdiv = true
-
-                  // document.querySelector('.btn').classList.add('show');
-                  // document.querySelector('.btn2').classList.add('show');
-                  // document.querySelector('.btn3').classList.add('show');
-                  // document.querySelector('body').classList.add('hide');
-                  break;
-
-              case 'OnPOIClick':
-                  console.log('OnPOIClick_id = ' + jsonObject.args.id);
-                  // 返回一个点击POI的ID值
-                  break;
-          }
-          return data;
-      }
-  }
-}
-</script>
-
-<style lang='scss'>
-  .digitaltwin{
-    width: 100%;
-    height: 100%;
-    z-index: 3;
-    // display: flex;
-    // flex-direction:row;
-    // justify-content:space-between;
-    border: 1px red solid;
-    position: relative;
-
-    .nav-left{
-      position: absolute;
-      left: 0;
-      top: 0px;
-      width: 500px;
-      height: 200px;
-      padding: 80px 0 0;
-      overflow: hidden;
-      -webkit-overflow-scrolling: touch;
-      background: rgba(17, 23, 37,0.7);
-      border: 1px red solid;
-       z-index: 2147483620;
-    }
-  }
-
-#player {
-    position: fixed;
-    left: 0 !important;
-    top: 0 !important;
-    width: 100vw !important;
-    height: 100vh !important;
-    z-index: 2;
-    /* background: #000; */
-    background: #10182D;
-    border: 1px red solid;;
-
-    // &::after{
-    //   content: '';
-    //   position: absolute;
-    //   width: 100%;
-    //   height: 100%;
-    //   left: 0;
-    //   top: 0;
-    //   background-image: -webkit-radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));
-    //   background-image: radial-gradient(circle,hsla(120,70%,60%,.9),hsla(360,60%,60%,.9));margin-top:20px;
-    // }
-
-    video {
-      display: block;
-      position: fixed;
-      left: 0;
-      top: 0;
-      z-index: 1;
-      width: 100vw;
-      height: 100vh;
-      object-fit: contain;
-    }
-}
-
-.show {
-  animation: showit .3s linear forwards;
-}
-
-</style>

vue.config.js

@@ -33,11 +33,12 @@ module.exports = {
           target: baseUrl,
           changeOrigin: true,
           pathRewrite: {
-            '^/api': ''
+            '^/api': 'http://117.176.120.161:1111'
           }
         },
         '/service':{
-          target: 'http://221.182.8.141:10005',
+          //target: 'http://221.182.8.141:10005',
+          target: 'http://221.236.31.30:8085',
           changeOrigin: true,
           pathRewrite: {
             '^/service': '/service'