接口对接

package.json

@@ -26,6 +26,7 @@
     "@vue/cli-plugin-vuex": "^4.5.15",
     "@vue/cli-service": "~4.5.14",
     "babel-eslint": "^10.1.0",
+    "echarts": "^5.3.1",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "sass": "^1.50.0",
@@ -46,10 +47,10 @@
     },
     "rules": {
       "generator-star-spacing": "off",
-      "no-tabs":"off",
-      "no-unused-vars":"off",
-      "no-console":"off",
-      "no-irregular-whitespace":"off",
+      "no-tabs": "off",
+      "no-unused-vars": "off",
+      "no-console": "off",
+      "no-irregular-whitespace": "off",
       "no-debugger": "off"
     }
   },

src/api/comprehensive.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+//根据token获取去年和今年的收费数据
+export function getThisYearPay(data) {
+    return request({
+      url: '/service/Lscreen/GetThisYearPay',
+      method: 'post',
+      data
+    })
+  }
+
+//根据token获取近12月用户新增数量
+export function getUpUser(data) {
+  return request({
+    url: '/service/Lscreen/GetUpUser',
+    method: 'post',
+    data
+  })
+}
+
+//根据token获取近12个月用户总数。
+export function getUserCount(data) {
+  return request({
+    url: '/service/Lscreen/GetUserCount',
+    method: 'post',
+    data
+  })
+}
+
+//根据token获取用户用水性质
+export function getUserYsxz(data) {
+  return request({
+    url: '/service/Lscreen/GetUserYsxz',
+    method: 'post',
+    data
+  })
+}
+
+//根据token获取水表类别信息
+export function getUserSblb(data) {
+  return request({
+    url: '/service/Lscreen/GetUserSblb',
+    method: 'post',
+    data
+  })
+}

src/utils/request.js

@@ -0,0 +1,65 @@
+import axios from 'axios'
+import qs from 'qs'
+
+// 创建axios实例
+export const IP = 'http://221.182.8.141:10005'
+const service = axios.create({
+  baseURL: IP,
+  withCredentials: false, // 跨域请求时发送cookiesokies
+  timeout: 30000 // 请求超时
+})
+
+// 请求拦截器
+service.interceptors.request.use(
+  config => {
+    if (config.method === 'post') { // 请求为post    使用qs转换数据
+      config.data = qs.stringify(config.data)
+      //config.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
+      config.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
+    } else {
+      config.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
+    }
+    if (config.file) {
+      config.headers.post['Content-Type'] = 'multipart/form-data'
+    }
+    return config
+  },
+  error => {
+    // 处理请求错误
+    console.log(error)
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+  /**
+   * 如果您想要获取诸如头或状态之类的http信息
+   * return  response => response
+   */
+
+  /**
+   * 通过自定义代码确定请求状态
+   */
+  response => {
+    const res = response.data
+    
+    // 如果直接返回字符串（请求的图片 直接返回base64
+    if (typeof res === 'string') return res
+
+    if (res instanceof Object) return res
+
+    // 下载文件 后端返回二进制流 直接返回data
+    if (res instanceof ArrayBuffer) return res
+
+    // 下载文件 后端返回二进制流 直接返回data
+    if (res instanceof Blob) return res
+
+    return Promise.reject(new Error(res.message || 'Error')).catch(err => { console.log(err) })
+  },
+  error => {
+   
+  }
+)
+
+export default service

src/views/Home.vue

@@ -2,7 +2,7 @@
   <div class="home">
     <div class="hander">
       <div class="handertime">
-        <div class="ledfont">{{ getTimer(new Date()) }}</div>
+        <div class="ledfont">{{ timer }}</div>
         <div class="date">{{ getDay(new Date()) }}</div>
         <div class="weather"></div>
       </div>
@@ -42,6 +42,8 @@ export default {
     return {
       sysmenu: [],
       activeIndex: "0",
+      selfInterval:null,
+      timer:'',
     };
   },
   created() {
@@ -53,6 +55,12 @@ export default {
       console.log(JSON.stringify(currentMenu));
       this.activeIndex = currentMenu.index;
     }
+    this.selfInterval=setInterval(()=>{
+      this.timer = this.getTimer(new Date())
+    },1000)
+  },
+  beforeDestroy(){
+    if(this.selfInterval) clearInterval(this.selfInterval)
   },
   methods: {
     menuClick(e) {
@@ -92,6 +100,7 @@ export default {
       var currentdate = y + "-" + m + "-" + d + " " + "星期" + week;
       return currentdate;
     },
+    
     getTimer(data) {
       var date = new Date(data);
       var hh = date.getHours();

src/views/Home2.vue

@@ -1,98 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-
-    <div class="box1"></div>
-<br />
-      <div class="box box2"></div>
-<br />
-      <div class="boxm sijiaobiankuang1"></div><br />
-  <div class="boxm1 sijiaobiankuang"></div>
-
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src //  lang='scss'
-
-export default {
-  name: 'Home',
-  components: {
-  }
-}
-</script>
-
-<style lang='scss'>
-
-.home{
-     background: url('../assets/bg.png') no-repeat;
-     background-size:100%100%;
-}
-  .box{
-    /* border:1px red solid; */
-    /* background: url('../assets/box.png') no-repeat; */
-    background: url('../assets/box.png') left top no-repeat;
-     background-size:100% auto;
-  }
-
-  .boxm{
-         width: 400px;
-            height: 400px;
-  }
-
-  .boxm1{
-     width: 200px;
-            height: 200px;
-  }
- .sijiaobiankuang1{
-       
-            border: 1px #2BAEFD solid;
-            background:
-                    linear-gradient(to top, #28ACFF , #28ACFF ) left top no-repeat,/*上左*/
-                    linear-gradient(to right, #28ACFF , #28ACFF ) left top no-repeat,/*左上*/
-                    linear-gradient(to left, #28ACFF , #28ACFF ) right top no-repeat,/*上右*/
-                    linear-gradient(to bottom, #28ACFF , #28ACFF ) right top no-repeat,/*上右*/
-                    linear-gradient(to left, #28ACFF , #28ACFF ) left bottom no-repeat,/*下左*/
-                    linear-gradient(to bottom, #28ACFF , #28ACFF ) left bottom no-repeat,/*左下*/
-                    linear-gradient(to top, #28ACFF , #28ACFF ) right bottom no-repeat,/*下右*/
-                    linear-gradient(to left, #28ACFF , #28ACFF ) right bottom no-repeat;/*右下*/
-
-            background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px;
-            /* background-color: rgba(36,56,128,0.21); */
-        }
-  .sijiaobiankuang{
-       
-            border: 1px #2BAEFD solid;
-            background:
-                    linear-gradient(to top, #28ACFF , #28ACFF ) left top no-repeat,/*上左*/
-                    linear-gradient(to right, #28ACFF , #28ACFF ) left top no-repeat;/*左上*/
-            background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
-            /* background-color: rgba(36,56,128,0.21); */
-        }
-
-   .box1{
-    /* border:1px red solid; */
-    width: 200px;
-height: 200px;
-padding: 10px;
-border: 1px #2BAEFD solid;
-background-image:
-linear-gradient(top right, #f00 15px, #162e48 0);
-/* linear-gradient(-135deg, #f00 15px, #162e48 0);  */
-/* background-image: linear-gradient(-45deg, #f00 15px, #162e48 0); */
-/* background-image: -webkit-linear-gradient(top,red 20%,blue 40%,green 60%,black 80%); */
-	/* linear-gradient(transparent 10px, #0e294c 10px, #0e294c calc(100% - 10px), transparent calc(100% - 10px), transparent 100%),
-	linear-gradient(90deg, transparent 10px, #0e294c 10px, #0e294c calc(100% - 10px), transparent calc(100% - 10px), transparent 100%),
-	linear-gradient(#4cc7f3 2px, transparent 2px, transparent calc(100% - 2px), #4cc7f3 calc(100% - 2px), #4cc7f3 100%),
-	linear-gradient(90deg, #4cc7f3 2px, transparent 2px, transparent calc(100% - 2px), #4cc7f3 calc(100% - 2px), #4cc7f3 100%); */
-background-repeat: no-repeat;
-background-position: top left, top left, bottom right, bottom right;
-background-size: 100% 100%, 100% 100%;
-  }
-
-    .box2{
-    /* border:1px red solid; */
-    width: 100px;
-    height: 100px;
-  }
-</style>

src/views/Word copy.vue

@@ -1,172 +0,0 @@
-<template>
-  <div class="Word">
-    <div class="hander">
-      <div class="handertime">
-        <div class="ledfont">10:30:00</div>
-        <div class="date">2022-01-10 星期一</div>
-        <div class="weather">
-          <i class="el-icon-s-tools icon"></i>
-        </div>
-      </div>
-
-      <div class="system">
-        <template v-for="menu in sysmenu" >
-          <div class="defaultbtn" v-bind:class="{ isActive: activeIndex==menu.index }" :key="menu.index" @click="menuClick(menu)">{{menu.name}}</div>
-        </template>
-      </div>
-    </div>
-    <div class="content">
-       <router-view></router-view>
-    </div>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src //  lang='scss'
-
-export default {
-  name: 'Word',
-  components: {
-  },
-  data() {
-    return {
-      sysmenu:[
-        {index:'0',name:'全域概览',path:'word'},
-        {index:'1',name:'孪生水厂',path:'pipedma'},
-      ],
-      activeIndex:'0'
-    }
-  }, 
-  created(){
-    let currentPath = this.$route.path;
-    let currentMenu = this.sysmenu.find(menu=>{
-      return currentPath.includes(menu.path)
-    });
-    if(typeof(currentMenu) != "undefined"){
-      console.log(JSON.stringify(currentMenu));
-      this.activeIndex = currentMenu.index
-    }
-
-    
-  },
-  methods: {
-    menuClick(e){
-      console.log(JSON.stringify(e))
-      this.activeIndex = e.index
-      this.$router.push({name:e.path,query: {}})
-    },
-    dashboardClick(){
-      this.$router.push({name:'word',query: {}})
-    },
-    pipedmaClick(){
-      this.$router.push({name:'pipedma',query: {}})
-    }
-  }
-}
-</script>
-
-<style lang='scss'>
-.Word{
-  height: 100%;
-  // background: url('../assets/bg.png') no-repeat;
-  // background-size:100%100%;
-  // font-family: Source Han Sans CN;
-  overflow: hidden;
-
-  .hander{
-    margin-top: 8px;
-    height: 56px;
-    background: url('../assets/51word/logo.png') no-repeat;
-    background-size:100%100%;
-    // border:1px red solid;
-    display:flex;
-    align-items:flex-end; 
-    position: relative;
-    z-index: 4;
-    
-    .system{
-      border: 1px red solid;
-      padding-bottom: 2px;
-      margin-left: 28%;
-      display:flex;
-      justify-content:  flex-end;//flex-start;
-
-      .defaultbtn{
-        // border: 1px red solid;
-        width: 145px;
-        height: 44px;
-        background: url('../assets/51word/defaultbtn.png') no-repeat;
-        background-size:100%100%;
-        font-weight: 400;
-       
-        color: #29B1FF;
-        line-height: 44px;  
-        position: relative;
-        margin-left: -10px;
-      }
-
-      // .defaultbtn:first-child{
-      //    background: url('../assets/hoverbtn.png') no-repeat;
-      //   background-size:100%100%;
-      //   color: #FFFFFF;
-      //   cursor: pointer;
-      // }
-
-      .isActive{
-        background: url('../assets/51word/hoverbtn.png') no-repeat;
-        background-size:100%100%;
-        color: #FFFFFF;
-      }
-
-      .defaultbtn:hover{
-        background: url('../assets/51word/hoverbtn.png') no-repeat;
-        background-size:100%100%;
-        color: #FFFFFF;
-        cursor: pointer;
-      }
-    }
-
-    .handertime{
-      width: 500px;
-      height: 24px;
-      right: 0%;
-      line-height: 24px;
-      position: absolute;
-      display:flex;
-      justify-content: flex-end;
-      padding-bottom: 6px;
-      border:1px red solid;
-
-      div{
-        border: 1px red solid;
-        padding-bottom: 2px;
-      }
-
-      .ledfont{
-        font-size: 24px;
-        font-family: "myFont";
-        color: #C7EAFF;
-        width: 100px;
-      }
-
-      .date{
-        font-size: 16px;
-        color: #6BBDEF;
-        width: 150px;
-      }
-
-      .icon{
-        color: #14A6FF;
-      }
-    }
-
- 
-  }
-
-  .content{
-    width: 100%;
-    height: calc(100% - 64px);
-    // border: 1px red solid;
-  }
-}
-</style>

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

@@ -52,15 +52,10 @@ export default {
         // url: "http://echarts.apache.org/zh/index.html",
         // type: 'wuzi'
       }];
-
-      //const uploadedDataURL = "https://geo.datav.aliyun.com/areas_v3/bound/469028.json"
       //const uploadedDataURL = "https://geo.datav.aliyun.com/areas_v3/bound/511133.json"
       //调用本地
       const uploadedDataURL = "/mbMapData.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 = {
@@ -221,6 +216,5 @@ export default {
   .mapchart{
     width:100%;
     height:100%;
-    // border: 1px yellow solid;
   }
 </style>>

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

@@ -6,27 +6,60 @@
 </template>
 
 <script>
+import {getThisYearPay}  from '@/api/comprehensive'
+import config from '@/views/config/requestConfig'
 export default {
   name: "yearbasis",
   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],
+      thisYear:0,
+      seriesNextYearData: [1, 2, 4, 5, 6, 2, 2, 9, 2, 11, 2, 5],
+      seriesThisYearData: [4, 2, 4, 5, 4, 7, 5, 9, 2, 5, 4, 8],
       isLine: true,
       timer: "",
     };
   },
   components: {},
-  created() {},
+  created() {
+    let date = new Date();
+    this.thisYear = date.getFullYear();
+  },
   mounted() {
-    this.drawChart();
-    this.timer && clearInterval(this.timer);
-    this.timer = setInterval(this.drawChart, 3500);
+    getThisYearPay({token:config.token}).then(res=>{
+      if(res.Code == 200){
+        console.log(res)
+        this.setStatisticData(res.Result.rows)
+      }
+    });
+    //this.timer && clearInterval(this.timer);
+    //this.timer = setInterval(this.drawChart, 3500);
   },
   beforeDestroy() {
     clearInterval(this.timer);
   },
   methods: {
+    setStatisticData(rows){
+      if(rows.length > 0){
+        let thisYearRow = rows.filter(item => item.CWRQ.substring(0, 4) == this.thisYear.toString())
+        let nextYearRow = rows.filter(item => item.CWRQ.substring(0, 4) != this.thisYear.toString())
+        this.seriesNextYearData = []
+        nextYearRow.forEach(item => {
+          this.seriesNextYearData.push(item.SSZJE)
+        });
+        this.seriesThisYearData = []
+        thisYearRow.forEach(item => {
+          this.seriesThisYearData.push(item.SSZJE)
+        });
+        if(this.seriesThisYearData.length < 12){
+          let arr = []
+          for(let i = this.seriesThisYearData.length ; i<12;i++){
+            arr.push(0)
+          }
+          this.seriesThisYearData.push(...arr)
+        }
+        this.drawChart()
+      }
+    },
     drawChart() {
       this.isLine = !this.isLine;
       const chartReady = this.$echarts.init(this.$refs.chart);
@@ -36,7 +69,7 @@ export default {
           axisPointer: {
             type: "shadow",
           },
-          formatter: "{b0}<br />{a0}: {c0} m³<br />{a1}: {c1} m³",
+          formatter: "{b0}<br />{a0}: {c0} 元<br />{a1}: {c1} 元",
         },
         grid: {
           top: "15%",
@@ -104,7 +137,7 @@ export default {
           {
             name: "今年",
             type: "bar",
-            data: this.seriesData2,
+            data: this.seriesThisYearData,
             // smooth: true,
             barWidth: "36%",
             itemStyle: {
@@ -118,7 +151,7 @@ export default {
           {
             name: "去年",
             type: "line",
-            data: this.seriesData1,
+            data: this.seriesNextYearData,
             smooth: true,
           },
         ],
@@ -129,9 +162,6 @@ export default {
       }else{
         options.series[0].type='bar'
       }
-      // options.series.forEach((item) => {
-      //     item.type = this.isLine ? "bar" : "line";
-      // });
       chartReady.setOption(options);
 
       //自定义缩放

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">323.24</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">323.24</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">323.24</label><label>万元</label></div>
+        <div class="money"><label class="ledfont">{{ curYearPay }}</label><label>万元</label></div>
         <div class="title">本年度收费</div>
       </div>
     </div>
@@ -24,18 +24,29 @@
 </template>
 
 <script>
+import {getThisYearPay}  from '@/api/comprehensive'
+import config from '@/views/config/requestConfig'
 export default {
   name: 'yearmoney',
   data() {
     return {
-      sliderList:[
-    
-      ]
+      beforeNextMonthPay:0,
+      nextMonthPay:0,
+      curYearPay:0,
+      curMonthPay:0
     }
   },
   components: {
   },
   created(){
+    getThisYearPay({token:config.token}).then(res=>{
+      if(res.Code == 200){
+        this.curYearPay = parseFloat(res.Result.ThisYearPay)
+        this.curMonthPay = parseFloat(res.Result.ThismonthPay)
+        this.nextMonthPay = parseFloat(res.Result.lastmonthPay)
+        this.beforeNextMonthPay = this.curYearPay - this.curMonthPay - this.nextMonthPay
+      }
+    })
   },
   mounted() {
     this.drawChart()

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

@@ -6,7 +6,8 @@
 </template>
 
 <script>
-
+import {getUserCount,getUpUser}  from '@/api/comprehensive'
+import config from '@/views/config/requestConfig'
 export default {
   name: 'usercount',
   props:{
@@ -14,8 +15,9 @@ export default {
   },
   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]
+      yearMonth:[],
+      seriesCountData:[1,2,4,5,6,2,2,9,2,11,2,5],
+      seriesUpData:[4,2,4,5,4,7,5,9,2,5,4,8]
     }
   },
   components: {
@@ -23,10 +25,59 @@ export default {
   created(){
   
   },
-  mounted() {
+  async mounted() {
+    //用户总数
+    let userCount = await this.getUserCount()
+    userCount.sort((a,b)=>{ return a.CWRQ-b.CWRQ})
+    //新增用户数
+    let upUser = await this.getUpUser()
+    upUser.sort((a,b)=>{ return a.CWRQ-b.CWRQ})
+    this.yearMonth = []
+    this.seriesCountData = []
+    userCount.forEach(item=>{
+      const year = item.CWRQ.substring(0, 4)
+      const month = item.CWRQ.substring(4, 2)
+      this.yearMonth.push(year + '/' + month)
+      this.seriesCountData.push(parseInt(item.NUM))
+    })
+    this.seriesUpData = []
+    upUser.forEach(item=>{
+      this.seriesUpData.push(parseInt(item.NUM))
+    })
     this.drawChart()
   },
   methods: {
+    /**
+     * 获取近12个月用户总数 getUserCount
+    */
+    getUserCount(){
+      return new Promise(resolve => {
+        getUserCount({token:config.token}).then(res=>{
+          if(res.Code == 200){
+            resolve(res.Result.rows)
+          }
+          else{
+            resolve([])
+          }
+        })
+      })
+    },
+     /**
+     * 获取近12个月用户新增数 getUpUser
+    */
+    getUpUser(){
+      return new Promise(resolve => {
+        getUpUser({token:config.token}).then(res=>{
+          if(res.Code == 200){
+            resolve(res.Result.rows)
+          }
+          else{
+             resolve([])
+          }
+        })
+      })
+    },
+
     drawChart() {
       const that = this;
       const chartReady = that.$echarts.init(that.$refs.chart)
@@ -36,7 +87,7 @@ export default {
           axisPointer: {           
               type: 'shadow'        
           },
-          formatter: '{b0}<br />{a0}: {c0} m³<br />{a1}: {c1} m³'
+          formatter: '{b0}<br />{a0}: {c0} 户<br />{a1}: {c1} 户'
         },
         grid: {
           top:'15%',
@@ -48,7 +99,8 @@ export default {
         xAxis: [
           {
             type: 'category',
-            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+            //data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+            data: this.yearMonth,
             boundaryGap: false,
             axisLine: {
               lineStyle: {
@@ -91,7 +143,7 @@ export default {
           {
             name: '新增',
             type: 'bar',
-            data: this.seriesData2,
+            data: this.seriesUpData,
             // smooth: true,
             barWidth:'36%',
             itemStyle: {
@@ -105,7 +157,7 @@ export default {
           {
             name: '总数',
             type: 'line',
-            data: this.seriesData1,
+            data: this.seriesCountData,
             smooth: true,
           }
         ]

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

@@ -4,19 +4,19 @@
       <div class="typetitle">用水性质统计</div>
       <div class="typenum">
         <div class="ys_water">
-          <div class="usernum topnum"><label class="ledfont">323.24</label><label>户</label></div>
+          <div class="usernum topnum"><label class="ledfont">{{ lifeUseWater }}</label><label>户</label></div>
           <div class="usertitle toptitle">生活用水</div>
         </div>
         <div class="ys_water">
-          <div class="usernum leftnum"><label class="ledfont">323.24</label><label>户</label></div>
+          <div class="usernum leftnum"><label class="ledfont">{{ businessUseWater }}</label><label>户</label></div>
           <div class="usertitle lefttitle">商业用水</div>
         </div>
         <div class="ys_water">
-          <div class="usernum bottomnum"><label class="ledfont">323.24</label><label>户</label></div>
+          <div class="usernum bottomnum"><label class="ledfont">{{ specialUseWater }}</label><label>户</label></div>
           <div class="usertitle bottomtitle">特殊用水</div>
         </div>
         <div class="ys_water">
-          <div class="usernum rightnum"><label class="ledfont">323.24</label><label>户</label></div>
+          <div class="usernum rightnum"><label class="ledfont">{{ otherUseWater }}</label><label>户</label></div>
           <div class="usertitle righttitle">其它用水</div>
         </div>
       </div>
@@ -29,11 +29,16 @@
 </template>
 
 <script>
+import {getUserSblb,getUserYsxz}  from '@/api/comprehensive'
+import config from '@/views/config/requestConfig'
 export default {
   name: 'usertype',
   data() {
     return {
-      seriesData1:[9,2,22,2,5]
+      lifeUseWater:0,
+      businessUseWater:0,
+      specialUseWater:0,
+      otherUseWater:0,
     }
   },
   components: {
@@ -41,10 +46,35 @@ export default {
   created(){
   },
   mounted() {
-    this.drawPieChart()
+    getUserYsxz({token:config.token}).then(res=>{
+      if(res.Code == 200){
+        const special = res.Result.rows.find(item=>item.MC == '特种用水')
+        if(special) this.specialUseWater = parseInt(special.NUM)
+        const life = res.Result.rows.find(item=>item.MC == '居民生活用水')
+        if(life) this.lifeUseWater = parseInt(life.NUM)
+        const business = res.Result.rows.find(item=>item.MC == '非居民生活用水')
+        if(business) this.businessUseWater = parseInt(business.NUM)
+        const other = res.Result.rows.find(item=>item.MC == '其他用水')
+        if(other) this.otherUseWater = parseInt(other.NUM)
+      }
+    })
+    getUserSblb({token:config.token}).then(res=>{
+      console.log('水表类型',res)
+      if(res.Code == 200){
+        let meterType = []
+        res.Result.rows.forEach(item=>{
+          meterType.push({
+            name:item.MC,
+            value: parseInt(item.NUM)
+          })
+        })
+        this.drawPieChart(meterType)
+      }
+    })
   },
   methods: {
-    drawPieChart(){
+
+    drawPieChart(meterType){
       const chartPieReady = this.$echarts.init(this.$refs.chart)
       const options = {
         tooltip: {
@@ -69,11 +99,12 @@ export default {
             label: {
               color: "#A4D9F9"
             },
-            data: [
-              { value: 1048, name: 'A类' },
-              { value: 735, name: 'B类' },
-              { value: 580, name: 'C类' }
-            ],
+            // data: [
+            //   { value: 1048, name: 'A类' },
+            //   { value: 735, name: 'B类' },
+            //   { value: 580, name: 'C类' }
+            // ],
+            data:meterType,
             emphasis: {
               itemStyle: {
                 shadowBlur: 5,
@@ -271,8 +302,6 @@ export default {
         color: #22AFFF;
         line-height: 16px;
         text-shadow: 0px 4px 5px rgba(1, 18, 32, 0.7);
-        position:absolute;
-        // border: 1px red solid;
 
         &::after {
           content: '';
@@ -297,7 +326,7 @@ export default {
 
       .meterchart{
         width: 100%;
-        height: 100%;
+        height: calc(100% - 16px);
       }
     }
 

src/views/dashboard/index copy.vue

@@ -1,438 +0,0 @@
-<template>
-  <div class="dashboard">
-    <div class="left">
-      <div class="box scadadata">
-        <div class="handertitle">生产数据展示</div>
-      </div>
-
-      <div class="box dmadata">
-        <div class="handertitle">漏损管控展示</div>
-      </div>
-    </div>
-
-    <div class="center">
-      <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="note">{{data.typename}}</div>
-          </div>
-        </div>
-        <div class="mapdata">
-          <div class="leftdata">
-            <div class="numdata" v-bind:class="{ isActive: activeIndex == data.index }" 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)?'activenote':'defaultnote'">{{data.typename}}</div>
-            </div>
-          </div>
-          <div class="rightdata">
-            <div class="numdata " v-bind:class="{ isActive: activeIndex == data.index }" 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)?'activenote':'defaultnote'">{{data.typename}}</div>
-            </div>
-          </div>
-          <div class="chartdata">
-            ttt杀杀杀
-          </div>
-        </div>
-      </div>
-      <div class="box xjdata">
-        <div class="handertitle">管网巡检展示</div>
-      </div>
-    </div>
-
-    <div class="right">
-      <div class="box misdata">
-        <div class="handertitle">生产数据展示</div>
-      </div>
-      <div class="box userdata">
-        <div class="handertitle">用户数据展示</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src //  lang='scss'
-
-export default {
-  name: 'dashboard',
-  components: {
-  },
-  data() {
-    return {
-      numList:[
-        {
-          typename:'设计供水能力',
-          typevalue:'12.3',
-          unit1:'万',
-          unit2:'m³/d',
-        },
-        {
-          typename:'昨日供水量',
-          typevalue:'6',
-          unit1:'万',
-          unit2:'吨',
-        },
-        {
-          typename:'漏损率',
-          typevalue:'12.3',
-          unit1:'',
-          unit2:'%',
-        },
-        {
-          typename:'产销差',
-          typevalue:'12.3',
-          unit1:'',
-          unit2:'%',
-        },
-        {
-          typename:'安全生产天数',
-          typevalue:'7822',
-          unit1:'',
-          unit2:'天',
-        }
-      ],
-      leftdata:[
-        {
-          index:0,
-          typename:'水源地数量',
-          typevalue:'3',
-          unit:'个',
-        },
-        {
-          index:1,
-          typename:'加压站数量',
-          typevalue:'22',
-          unit:'座',
-        },
-        {
-          index:2,
-          typename:'制水厂数量',
-          typevalue:'22',
-          unit:'处',
-        },
-        {
-          index:3,
-          typename:'阀门数量',
-          typevalue:'67',
-          unit:'个',
-        },
-        {
-          index:4,
-          typename:'视频监控',
-          typevalue:'67',
-          unit:'个',
-        },
-      ],
-      rightdata:[
-        {
-          index:5,
-          typename:'管网水质监测点',
-          typevalue:'20',
-          unit:'个',
-        },
-        {
-          index:6,
-          typename:'管网压力监测点',
-          typevalue:'51',
-          unit:'个',
-        },
-        {
-          index:7,
-          typename:'流量监测点',
-          typevalue:'30',
-          unit:'个',
-        },
-        {
-          index:8,
-          typename:'噪声检测仪',
-          typevalue:'12',
-          unit:'个',
-        },
-        {
-          index:9,
-          typename:'设备完好率',
-          typevalue:'96',
-          unit:'%',
-        },
-      ],
-
-      activeIndex:'0'
-    }
-  },
-  computed: {
-    activeClass:function(){
-      let _activeClass = '';
-      if(this.activeIndex <=4 ){
-        _activeClass += " activeleft"
-      }
-      if(this.activeIndex > 4){
-        _activeClass += " activeright"
-      }
-
-      return _activeClass
-    }
-  },
-  methods: {
-    numClick(e){
-       console.log(JSON.stringify(e))
-      this.activeIndex = e.index
-    }
-  }
-}
-</script>
-
-<style lang='scss'>
-  .dashboard{
-    width: 100%;
-    height: 100%;
-    border: 1px red solid;
-    display: flex;
-    flex-direction:row;
-    justify-content:space-between;
-
-    .left{
-      width:30%;
-      height:100%;
-      padding: 6px;
-      border:1px red solid;
-
-      .scadadata{
-        height: 40%;
-        width:calc(100% - 10px);
-      }
-
-      .dmadata{
-        margin-top: 6px;
-        height: calc(60% - 10px);;
-        width:calc(100% - 10px);
-      }
-    }
-
-    .center{
-      width:40%;
-      height:100%;
-      padding: 6px;
-      border:1px red solid;
-
-      .maindata{
-        height: 64%;
-        width:calc(100% - 10px);
-
-        .labeldata{
-          width:100%;
-          height: 88px;
-          display:flex;
-          align-items:center;
-          justify-content: space-around;
-
-          .numdata{
-            width: 170px;
-            height: 88px;
-            background: url('~@/assets/label.png') no-repeat;
-            background-size:100%100%;
-            border: 1px red solid;
-            text-align: center;
-            cursor: pointer;
-          }
-          
-          .labelfont{
-            color: #EFDF8D;
-            font-size: 20px;
-            padding-top: 10%;
-            border: 1px red solid;
-          }
-
-          .ledfont{
-            font-size:24px;
-            font-family: "myFont";
-            color: #EFDF8D;
-          }
-          .fontdata{
-            color: #A4D9F9;
-            border: 1px red solid;
-          }
-          .unitfont{
-            font-size: 16px;
-          }
-          .note{
-            color: #A4D9F9;
-            font-weight: 400;
-          }
-        }
-
-        .mapdata{
-          width:100%;
-          margin-top:6px;
-          height: calc(100% - 94px);
-          position:relative;
-          border: 1px red solid;
-
-          .chartdata{
-            // background-color: yellow;
-          }
-
-          .leftdata{
-            position:absolute;
-            // border: 1px red solid; 
-            left: 0px;
-            width: 110px;
-
-            .numdata{
-              width: 100px;
-              height: 65px;
-             
-              text-align: left;
-              cursor: pointer;
-            }
-
-            // .numdata:hover{
-            //   background: url('~@/assets/hovernum.png') no-repeat;
-            //   border-left: 0px;
-            //   padding-left: 10px;
-            //   cursor: pointer;
-            // }
-
-            .isActive {
-              background: url('~@/assets/hovernum.png') no-repeat;
-              border-left: 0px;
-              padding-left: 24px;
-            }
-          }
-
-          .rightdata{
-            // border: 1px #EFDF8D solid; 
-            width: 154px;
-            position:absolute; 
-            // left:calc(100% - 110px);
-            // float: right;
-            right: 0px;
-
-            .numdata{
-              width: 130px;
-              height: 65px;
-              text-align: right;
-              // border: 1px red solid;;
-            }
-
-            .isActive {
-              // background: url('~@/assets/hovernum.png') no-repeat ;
-              // transform: rotate(180deg);
-              // background-position:right bottom;
-            //  image-orientation: flip; 
-              border-right: 0px;
-              padding-right: 24px;
-              position: relative;
-            }
-
-            .isActive::before {
-              content: "";
-              position: absolute;
-              width: 100%;
-              height: 100%;
-              right: 0;
-              // z-index: -1;
-              background: url('~@/assets/hovernum.png') no-repeat ;
-              transform: rotate(180deg);
-            }
-          }
-
-          .activeleft{
-            padding-left: 19px;
-            border-left: 5px rgba($color: #1EAAFE, $alpha: 0.3) solid;
-          }
-
-          .activeright{
-            padding-right: 19px;
-            border-right: 5px rgba($color: #1EAAFE, $alpha: 0.3) solid;
-          }
-
-          .labelfont{
-            color: #29B1FF;
-            font-size: 20px;
-            // border: 1px red solid;
-          }
-
-          .defaultlabelfont{
-            color: #29B1FF;
-            font-weight: 400;
-            
-          }
-          .activelabelfont{
-            color: #FFFFFF;
-            font-weight: 400; transform: rotate(0deg);
-          }
-
-          .ledfont{
-            font-size:24px;
-            font-family: "myFont";
-          }
-          .unitfont{
-            font-size: 1rem;
-          }
-          .defaultnote{
-            color: #A4D9F9;
-            font-weight: 400;
-          }
-          .activenote{
-            color: #FFFFFF;
-            font-weight: 400;
-          }
-        }
-      }
-
-      .xjdata{
-        margin-top: 6px;
-        height: calc(36% - 10px);;
-        width:calc(100% - 10px);
-      }
-    }
-
-    .right{
-      width:30%;
-      height:100%;
-      padding: 6px;
-      border:1px red solid;
-
-      .misdata{
-        height: 50%;
-        width:calc(100% - 10px);
-      }
-
-      .userdata{
-        margin-top: 6px;
-        height: calc(50% - 10px);;
-        width:calc(100% - 10px);
-      }
-    }
-  }
-
-  .handertitle{
-    background: url('~@/assets/handertitle.png') no-repeat;
-    background-size:100%100%;
-    height: 46px;
-    font-weight: 400;
-    color: #FFFFFF;
-    line-height: 46px;
-    width: 100%;
-  }
-
-  .box{
-    border: 1px #2BAEFD solid;
-    padding: 5px;
-    background: linear-gradient(to top, #28ACFF , #28ACFF ) left top no-repeat,/*上左*/
-            linear-gradient(to right, #28ACFF , #28ACFF ) left top no-repeat,/*左上*/
-            linear-gradient(to left, #28ACFF , #28ACFF ) right top no-repeat,/*上右*/
-            linear-gradient(to bottom, #28ACFF , #28ACFF ) right top no-repeat,/*上右*/
-            linear-gradient(to left, #28ACFF , #28ACFF ) left bottom no-repeat,/*下左*/
-            linear-gradient(to bottom, #28ACFF , #28ACFF ) left bottom no-repeat,/*左下*/
-            linear-gradient(to top, #28ACFF , #28ACFF ) right bottom no-repeat,/*下右*/
-            linear-gradient(to left, #28ACFF , #28ACFF ) right bottom no-repeat;/*右下*/
-    background-size: 5px 5px, 5px 5px, 5px 5px, 5px 5px;
-    /* background-color: rgba(36,56,128,0.21); */
-    }
-
-</style>
-
-