feat: 接口的对接

src/api/home/index.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+// 首页列表
+export const getHomeList = (query) => {
+  return request({
+    url: '/wpr/home/info',
+    method: 'get',
+    params: query
+  });
+};

src/api/tmn/index.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 设备列表
+export const getBaseList = (query) => {
+  return request({
+    url: '/tmn/base/list',
+    method: 'get',
+    params: query
+  });
+};
+// 基本信息
+export const getTopList = (query) => {
+  return request({
+    url: '/tmn/base/top/stat',
+    method: 'get',
+    params: query
+  });
+};

src/components/Table/index.vue

@@ -5,6 +5,7 @@
       :data="localDataSource"
       :border="border"
       v-bind="args"
+      row-key="id"
       :show-summary="totalPrice"
       :summary-method="getSummaries"
       class="b-table"
@@ -13,6 +14,7 @@
       @sort-change="handleSortChange"
       @current-change="handleCurrentChange"
       v-loading="loading"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       :header-row-style="{ background: '#E5EEED' }"
       :header-cell-style="{ background: '#E5EEED' }"
     >
@@ -179,7 +181,6 @@ export default {
         typeof result.then === 'function'
       ) {
         this.loading = true;
-
         result
           .then((r) => {
             if (r.total == undefined) {

src/views/gisShow/components/dataReportLeft.vue

@@ -1,88 +0,0 @@
-<template>
-  <div>
-    <el-tree
-     :data="data"
-     node-key="id"
-     :default-expanded-keys="[1]"
-     :props="defaultProps"
-     @node-click="handleNodeClick"
-     ></el-tree>
-  </div>
-</template>
-<script>
-  export default {
-    name: 'dataReportLeft',
-    data() {
-      return {
-        data: [{
-          id:1,
-          label: '一级 1',
-          children: [{
-            id:2,
-            label: '二级 1-1',
-            children: [{
-              id:3,
-              label: '三级 1-1-1',
-              children:[{
-                id:4,
-                label: '四级 1-1-1',
-                children:[{
-                  id:5,
-                  label: '五级 1-1-1',
-                }]
-              }]
-            }]
-          }]
-        }, {
-          id:2,
-          label: '一级 2',
-          children: [{
-            id:6,
-            label: '二级 2-1',
-            children: [{
-            id:7,
-              label: '三级 2-1-1'
-            }]
-          }, {
-            id:8,
-            label: '二级 2-2',
-            children: [{
-              id:9,
-              label: '三级 2-2-1'
-            }]
-          }]
-        }, {
-          id:3,
-          label: '一级 3',
-          children: [{
-            id:10,
-            label: '二级 3-1',
-            children: [{
-              id:11,
-              label: '三级 3-1-1'
-            }]
-          }, {
-            id:12,
-            label: '二级 3-2',
-            children: [{
-              id:13,
-              label: '三级 3-2-1'
-            }]
-          }]
-        }],
-        defaultProps: {
-          children: 'children',
-          label: 'label'
-        }
-      };
-    },
-    methods: {
-      handleNodeClick(data) {
-        console.log(data);
-      }
-    }
-  };
-</script>
-<style lang="sass" scoped>
-
-</style>

src/views/gisShow/components/mapContainer.vue

@@ -51,7 +51,7 @@ import shuijing from '../assets/shuijing.svg'
         })
         var layers = [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()];
         this.positions.forEach(item => {
-          const { lng, lat } = item
+          const lng = item?.tmnLongitude || 0, lat = item?.tmnLatitude || 0
           const icons = new AMap.Icon({
             image: shuijing, //自定义图标路径
             size: new AMap.Size(130, 130), //图片大小

src/views/gisShow/components/rightEquipment.vue

@@ -41,7 +41,17 @@
       </el-row>
       <div class="year_history">
         <h3>年度使用记录</h3>
-        <el-select placeholder="年份" style="width: 150px;">
+        <el-select
+          placeholder="年份"
+          style="width: 150px;"
+          v-model="currentDate"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :value="item.value"
+            :label="item.value"
+          ></el-option>
         </el-select>
       </div>
       <el-row>
@@ -65,7 +75,6 @@
 </template>
 
 <script>
-import { assign } from 'lodash-es';
 import equipment from './assets/equipment.svg'
 import echartsGradient from './echartsGradient.vue';
 export default {
@@ -137,53 +146,44 @@ export default {
         label: '运行状态：',
         text: '开'
       }],
-      equipment: equipment,
+      equipment,
       dialogVisible: false,
-      baseForm: {
-        productValue: '',
-        productName: '',
-        stockAmount: '',
-        goodsUnit: '',
-        goodsSpecValue: '',
-        imageArr1: [],
-        supplierId: '',
-        imageArr2: []
-      },
-      hasFetched: false,
+      currentDate: new Date().getFullYear(),
+      options: []
     };
   },
+  mounted() { 
+    this.setYearList()
+  },
   watch: {
     visible(val) {
       if (val !== this.dialogVisible) {
         this.dialogVisible = val;
-        if (val) {
-          assign(this.baseForm, this.data);
-          if (!this.hasFetched) {
-            this.hasFetched = true;
-          }
-        }
       }
     },
-    data: {
-      deep: true,
-      handler(val) {
-        assign(this.baseForm, val);
-      }
-    }
   },
   methods: {
-    resetForm(formName) {
-      this.dialogVisible = false;
+    setYearList() {
+      let currentYear = new Date().getFullYear()
+      for (let i = 0; i < 5; i++) {
+        const currentTime = currentYear--
+        this.options.push({
+          label: currentTime,
+          value: currentTime
+        })
+      }
     },
     handleClose() {
       this.$emit('update:visible', false);
-      this.resetForm('baseForm');
     },
   }
 };
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-input__inner{
+  border: 1px solid #DCDFE6 !important;
+}
 .container_left{
   width: 90%;
   padding: 0 5%;
@@ -223,4 +223,4 @@ export default {
     align-items: center;
   }
 }
-</style>
+</style>

src/views/gisShow/gisShow.scss

@@ -1,15 +1,14 @@
-::v-deep .el-input__inner{
-  height: 30px;
-  border: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-::v-deep .el-input__suffix{
-  margin-top: -3px;
-  font-size: 12px;
+.inpu{
+  ::v-deep input{
+    height: 30px;
+    border: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 }
+
 ::v-deep.el-col-4{
-  width: 20%;
+  width: 25%;
   display: flex;
   height: 50px;
   justify-content: center;
@@ -76,7 +75,7 @@
   padding: 10px;
 }
 .left{
-  width: 350px;
+  width: 300px;
   height: 50px;
   border-radius: 4px;
   background: rgba(0, 0, 0, 0.60);

src/views/gisShow/index.vue

@@ -15,7 +15,7 @@
           class="item_style"
         >
           <span :class="item.styleClass"></span>
-          <p @click="handlerLeft">{{item.title}}</p>
+          <p @click="() => handlerLeft(item)">{{item.title}}</p>
         </el-col>
       </el-row>
     </div>
@@ -28,85 +28,92 @@
   </div>
 </template>
 <script>
-  import rightEquipmentVue from './components/rightEquipment.vue';
-  import MapContainer from './components/mapContainer.vue'
-  export default {
-    name: 'gisShow',
-    data() {
-      return {
-        bottom_left:[{
-          title: '在线',
-          styleClass: 'radius'
-        },{
-          title: '运行',
-          styleClass: 'radius run'
-        },{
-          title: '故障',
-          styleClass: 'radius error'
-        },{
-          title: '告警',
-          styleClass: 'radius waring'
-        },{
-          title: '离线',
-          styleClass: 'radius nolive'
+import { getBaseList } from '@/api/tmn/index.js'
+import rightEquipmentVue from './components/rightEquipment.vue';
+import MapContainer from './components/mapContainer.vue'
+export default {
+  name: 'gisShow',
+  data() {
+    return {
+      bottom_left:[{
+        title: '在线',
+        styleClass: 'radius',
+        tmnstatusRunstatus: 'I'
+      },{
+        title: '运行',
+        styleClass: 'radius run',
+        tmnstatusRunstatus: 'W'
+      },{
+        title: '故障',
+        styleClass: 'radius error',
+        tmnstatusRunstatus: 'E'
+      },{
+        title: '离线',
+        styleClass: 'radius nolive',
+        tmnstatusRunstatus: 'O'
         }],
-        search_model:'',
-        state: {
-          keyWord: ""
-        },
-        positions: [{
-          lng: 115.857194, 
-          lat: 34.041573
-        },{
-          lng: 115.850, 
-          lat: 34.041573
-        }],
-        map: null,
-        recomposeShow: false,
-        address: '',
-        center: [115.857193,34.041573],
-        zoom: 16,
-        lng: '',
-        lat: ''
-      }
-    },
-    components: {
-      rightEquipmentVue,
-      MapContainer
-    },
-    methods:{
-      handlerLeft() {
-        this.positions = this.positions.splice(0,1)
-      },
-      recomposeShowHandler(flag) {
-        this.recomposeShow = flag
-      },
-      searchMap() {
-        let that = this;
-        let address = this.address;
-        var geocoder = new AMap.Geocoder({
-          city: "", //城市设为北京，默认：“全国”
-        });
-        geocoder.getLocation(address, function(status, result) {
-          if (status === 'complete' && result.geocodes.length) {
-            var lnglat = result.geocodes[0].location;
-            that.center = [lnglat.lng, lnglat.lat]
-            that.lng = lnglat.lng;
-            that.lat = lnglat.lat;
-            that.markers = [{
-              position: that.center,
-            }]
-            that.zoom = 11
-          } else {
-            console.log('根据地址查询位置失败');
-          }
-        });
-      },
-      getCoordinate(data) {
-        console.log("getCoordinate:", data)
+      tmnstatusRunstatus: '',
+      search_model:'',
+      state: {
+        keyWord: ""
       },
+      positions: [],
+      map: null,
+      recomposeShow: false,
+      address: '',
+      center: [],
+      zoom: 12,
+      lng: '',
+      lat: '',
     }
-  };
+  },
+  components: {
+    rightEquipmentVue,
+    MapContainer
+  },
+  mounted() { 
+    this.getBaseListHandler()
+  },
+  methods: {
+    handlerLeft(item) {
+      this.tmnstatusRunstatus = item?.tmnstatusRunstatus
+      this.getBaseListHandler()
+      // this.positions = this.positions.splice(0,1)
+    },
+    recomposeShowHandler(flag) {
+      this.recomposeShow = flag
+    },
+    async getBaseListHandler() { 
+      const res = await getBaseList({
+        pageSize: 999,
+        tmnstatusRunstatus: this.tmnstatusRunstatus
+      })
+      this.positions = res?.data
+      this.center = [res?.data[0].tmnLongitude, res?.data[0].tmnLatitude]
+    },
+    searchMap() {
+      let that = this;
+      let address = this.address;
+      var geocoder = new AMap.Geocoder({
+        city: "", //城市设为北京，默认：“全国”
+      });
+      geocoder.getLocation(address, function(status, result) {
+        if (status === 'complete' && result.geocodes.length) {
+          var lnglat = result.geocodes[0].location;
+          that.center = [lnglat.lng, lnglat.lat]
+          that.lng = lnglat.lng;
+          that.lat = lnglat.lat;
+          that.markers = [{
+            position: that.center,
+          }]
+          that.zoom = 12
+        } else {
+          console.log('根据地址查询位置失败');
+        }
+      });
+    },
+  }
+};
 </script>
 <style lang="scss" scoped>
 @import './gisShow.scss'

src/views/home/components/echartsGradient.vue

@@ -19,18 +19,45 @@ export default {
     height: {
       type: String,
       default: '390px'
+    },
+    byMonthList: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
-      chart: null
+      chart: null,
+      elecNumTotalList: [],
+      waterNumTotalList: [],
+      elecMax: 0,
+      waterMax: 0
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
+  watch: {
+    byMonthList: {
+      handler(val) {
+        const elecNumTotalList = [], waterNumTotalList = []
+        val.forEach(item => {
+          elecNumTotalList.push(item?.elecNumTotal)
+          waterNumTotalList.push(item?.waterNumTotal)
+        })
+        this.elecMax = Math.max(...elecNumTotalList)
+        this.waterMax = Math.max(...waterNumTotalList)
+        this.elecNumTotalList = elecNumTotalList
+        this.waterNumTotalList = waterNumTotalList
+        this.$nextTick(() => {
+          this.initChart()
+        }) },
+      deep: true
+    }
   },
+  // mounted() {
+  //   console.log(this.byMonthList,'byMonthListbyMonthListbyMonthList')
+  //   this.$nextTick(() => {
+  //     this.initChart()
+  //   })
+  // },
   beforeDestroy() {
     if (!this.chart) {
       return
@@ -63,18 +90,18 @@ export default {
           selectedMode: false,
           data: [
             {
-              name:'用水',
+              name: '用电',
               icon: 'circle',
               itemStyle: {
-                color: '#F4A72F'
-              },
+                color: '#1890FF',
+              }
             },
             {
-              name:'用电',
+              name:'用水',
               icon: 'circle',
               itemStyle: {
-                color: '#1890FF',
-              }
+                color: '#F4A72F'
+              },
             }
           ]
         },
@@ -110,7 +137,7 @@ export default {
           nameTextStyle: {color: '#333'},
           type: "value",
           min:0,
-          max:1000,
+          max:this.waterMax,
           splitLine: {
             show: true,
             lineStyle: {
@@ -127,7 +154,7 @@ export default {
           nameTextStyle: {color: '#333',padding:[0,0,0,0]},
           type: "value",
           min:0,
-          max:1000,
+          max:this.elecMax,
           splitLine: {
             show: true,
             lineStyle: {
@@ -142,61 +169,61 @@ export default {
         }],
         series: [
           {
-            name: '用水',
+            name: '用电',
             type: 'line',
             smooth: true,
-            symbol: 'none',
+            symbol: 'circle',
             symbolSize: 5,
-            showSymbol: false,
             sampling: 'average',
             lineStyle: {
               width: 1,
-              color: '#F4A72F',
+              color: '#1890FF',
               type: 'solid',
             },
+            showSymbol: false,
             areaStyle: {
-              opacity: 0.5,
+              opacity: 0.8,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
                   offset: 0,
-                  color: 'rgba(244,167,47,0.5)'
+                  color: 'rgba(24, 144, 255, 0.5)'
                 },
                 {
                   offset: 1,
-                  color: 'rgba(244,167,47,0.1)'
+                  color: 'rgba(24, 144, 255, 0.1)'
                 }
               ])
             },
-            data: [0, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90]
+            data: this.elecNumTotalList
           },
           {
-            name: '用电',
+            name: '用水',
             type: 'line',
-            smooth: true,      
-            symbol: 'circle',
+            smooth: true,
+            symbol: 'none',
             symbolSize: 5,
+            showSymbol: false,
             sampling: 'average',
             lineStyle: {
               width: 1,
-              color: '#1890FF',
+              color: '#F4A72F',
               type: 'solid',
             },
-            showSymbol: false,
             areaStyle: {
-              opacity: 0.8,
+              opacity: 0.5,
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
                   offset: 0,
-                  color: 'rgba(24, 144, 255, 0.5)'
+                  color: 'rgba(244,167,47,0.5)'
                 },
                 {
                   offset: 1,
-                  color: 'rgba(24, 144, 255, 0.1)'
+                  color: 'rgba(244,167,47,0.1)'
                 }
               ])
             },
-            data: [420, 282, 111, 234, 220, 0, 310,120, 282, 111, 234, 220]
-          }
+            data:  this.waterNumTotalList
+          },
         ]
       })
     }

src/views/home/components/echartsPie.vue

@@ -19,6 +19,12 @@ export default {
     height: {
       type: String,
       default: '390px'
+    },
+    useWaterNumTotal: {
+      type: Number,
+    },
+    waterNum: {
+      type: Number,
     }
   },
   data() {
@@ -76,7 +82,7 @@ export default {
               show: true,
               color: '#1E7CE8',
               formatter: [
-                '{a|6,256 m³}',
+                '{a|'+ this.useWaterNumTotal +' m³}',
                 '{b|已使用}',
               ].join('\n'),
               rich: {
@@ -132,8 +138,8 @@ export default {
               show: false
             },
             data: [
-              { value: 1048, name: 'Direct',itemStyle:{color: '#1890FF'} },
-              { value: 1048, name: 'Direct2',itemStyle:{color: '#D9D9D9'} }
+              { value: this.useWaterNumTotal, name: 'Direct',itemStyle:{color: '#1890FF'} },
+              { value: this.waterNum, name: 'Direct2',itemStyle:{color: '#D9D9D9'} }
             ]
           }
         ]

src/views/home/index.vue

@@ -1,80 +1,101 @@
 <template>
   <div style="padding: 20px">
     <el-card>
-      <el-select
-        placeholder="区域选择"
-        v-model="areaId"
+      <div style="display:flex">
+       <select-tree 
+          :placeholder="'年份'" 
+          style="width:200px"
+          :treeData="treeData"
+          @handlerClick="handlerClick"
+          :checkVal="cusareaName"
+        ></select-tree>
+        <el-select
+          style="width: 200px;margin-left:16px;"
+          laceholder="请选择您的年份"
+          v-model="waterrightYear"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      <el-button
+        style="margin-left: 16px;"
+        type="primary"
+        size="small"
+        @click="handleSearch"
+        >查询</el-button
       >
-        <el-option
-          label=""
-          :value="area"
-        ></el-option>
-      </el-select>
-      
-      <el-select
-        style="margin-left:10px"
-        placeholder="年份"
-        v-model="year"
-      >
-      <el-option
-        label="2023"
-        :value="year"
-      ></el-option>
-      </el-select>
+      </div>
     </el-card>
-    <el-card style="margin: 16px 0">
-      <el-row :gutter="20"
-        v-for="(item,index) in list"
-        :key="index"
-      >
-      <el-col :span="4"
-        v-for="(i,index) in item"
-        :key="index"
-      >
-        <div class="card">
-          <img :src="i.imageSrc"/>
-          <div class="card_content_right">
-            <span>{{i.title}}</span>
-            <div>{{i.number}}</div>
-          </div>
-        </div>
-      </el-col>
-      </el-row>
-    </el-card>
-    <el-row :gutter="20">
-      <el-col :span="10">
-        <el-card class="pie-container">
-          <echartsPieVue />
-          <div class="pie-right">
-            <div class="pie-item">
-              <span>额定水量：</span>
-              <span>6256 m³</span>
-            </div>
-            <div class="pie-item">
-              <span>剩余水量：</span>
-              <span>6256 m³</span>
-            </div>
-            <div class="pie-item">
-              <span>去年同期节水：</span>
-              <span>6256 m³</span>
-            </div>
-            <div class="pie-item">
-              <span>节水率：</span>
-              <span>6223456 m³</span>
+    <div
+      v-loading="loading"
+    >
+      <el-card style="margin: 16px 0">
+          <el-skeleton  v-if="isSkeleton"/>
+        <el-row v-else :gutter="20"
+          v-for="(item,index) in list"
+          :key="index"
+        >
+        <el-col :span="4"
+          v-for="(i,index) in item"
+          :key="index"
+        >
+          <div class="card">
+            <img :src="i.imageSrc"/>
+            <div class="card_content_right">
+              <span>{{i.title}}</span>
+              <div>{{i.number}}</div>
             </div>
           </div>
-        </el-card>
-      </el-col>
-      <el-col :span="14">
-        <el-card>
-          <echartsGradient/>
-        </el-card>
-      </el-col>
-    </el-row>
+        </el-col>
+        </el-row>
+      </el-card>
+      <el-row :gutter="20">
+        <el-col :span="10">
+          <el-card class="pie-container">
+            <echartsPieVue 
+              :useWaterNumTotal="useWaterNumTotal"
+              :waterNum="waterNum"
+            />
+            <div class="pie-right">
+              <div class="pie-item">
+                <span>额定水量：</span>
+                <span>{{ waterNum || 0 }} m³</span>
+              </div>
+              <div class="pie-item">
+                <span>剩余水量：</span>
+                <span>{{ waterBalance || 0 }} m³</span>
+              </div>
+              <div class="pie-item">
+                <span>去年同期节水：</span>
+                <span>{{ waterSave || 0 }} m³</span>
+              </div>
+              <div class="pie-item">
+                <span>节水率：</span>
+                <span>{{ waterSaveProportion || 0}} m³</span>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="14">
+          <el-card>
+            <echartsGradient
+              :byMonthList="byMonthList"
+            />
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
+import { getTree } from '@/api/tree.js'
+import SelectTree from '@/components/SelectTree';
+import { getHomeList } from '@/api/home/index.js'
 import numberWells from './assets/number_wells.svg'
 import electricity from './assets/electricity.svg'
 import moneyIcon from './assets/money_icon.svg'
@@ -90,18 +111,55 @@ export default {
   props: {},
   components:{
     echartsPieVue,
-    echartsGradient
+    echartsGradient,
+    SelectTree
   },
   data() {
     return {
+      loading: true,
+      options: [
+        {
+          value: '2023',
+          label: '2023'
+        }, {
+          value: '2022',
+          label: '2022'
+        }, {
+          value: '2021',
+          label: '2021'
+        }, {
+          value: '2020',
+          label: '2020'
+        }, {
+          value: '2019',
+          label: '2019'
+        }
+      ],
+      byMonthList: [],
+      treeData:[],
+      cusareaName:'',
       areaId: '',
-      area:'',
+      area: '',
+      isSkeleton: true,
       areaSelect: '',
-      year: '2023',
+      elecNumTotal: 0,
+      farmerNum: 0,
+      rechargeAmountTotal: 0,
+      useMoneyPerMu: 0,
+      useMoneyTotal: 0,
+      useTimeTotal: 0,
+      useWaterNumTotal: 0,
+      useWaterPerMu: 0,
+      waterBalance: 0,
+      waterNum: 0,
+      waterNumTotal: 0,
+      waterSave: 0,
+      waterSaveProportion: 0,
+      waterrightYear: '2023',
       list: [[{
         imageSrc: electricity,
         title: '水晶数目(口)',
-        number: 551 
+        number: 551
       },{
         imageSrc: numberWells,
         title: '使用电量(度)',
@@ -141,7 +199,97 @@ export default {
       }]]
     }
   },
-  methods: {}
+  methods: {
+    handlerClick(value) {
+      this.areaId = value?.cusareaId
+    },
+    handleSearch() {
+      this.getHomeListHandler()
+     },
+    async getArea() {
+      const treeList = this.$store.state.tree.treeList
+      let res = []
+      if (treeList.code === '000000') {
+        res = treeList
+      } else {
+        res = await getTree()
+        this.$store.dispatch('tree/setTree', res)
+      }
+      this.treeData = res?.data
+      this.cusareaName ||= this.treeData[0].cusareaName
+      this.areaId = this.treeData[0].cusareaId
+      this.getHomeListHandler()
+    },
+    async getHomeListHandler() { 
+      const params = {
+        areaId: this.areaId,
+        year: this.waterrightYear
+      }
+      this.loading = true
+      const res = await getHomeList(params)
+      this.loading = false
+      this.isSkeleton = false
+      this.requestData = res?.data
+      this.elecNumTotal = this.requestData.elecNumTotal
+      this.farmerNum = this.requestData.farmerNum
+      this.rechargeAmountTotal = this.requestData.rechargeAmountTotal
+      this.useMoneyPerMu = this.requestData.useMoneyPerMu
+      this.useMoneyTotal = this.requestData.useMoneyTotal
+      this.useTimeTotal = this.requestData.useTimeTotal
+      this.useWaterNumTotal = this.requestData.useWaterNumTotal
+      this.useWaterPerMu = this.requestData.useWaterPerMu
+      this.waterBalance = this.requestData.waterBalance
+      this.waterNum = this.requestData.waterNum
+      this.waterNumTotal = this.requestData.waterNumTotal
+      this.waterSave = this.requestData.waterSave
+      this.waterSaveProportion = this.requestData.waterSaveProportion
+      this.byMonthList = this.requestData.byMonthList
+      this.list = [[{
+        imageSrc: numberWells,
+        title: '水晶数目(口)',
+        number: this.waterNumTotal || 0
+      }, {
+        imageSrc: electricity,
+        title: '使用电量(度)',
+        number: this.elecNumTotal || 0
+      }, {
+        imageSrc: waterYield,
+        title: '使用水量(方)',
+        number: this.useWaterNumTotal || 0
+      }, {
+        imageSrc: moneyIcon,
+        title: '使用金额(元)',
+        number: this.useMoneyTotal || 0
+      }, {
+        imageSrc: person,
+        title: '用户数量(人)',
+        number: this.farmerNum || 0
+      }], [{
+        imageSrc: moneyIcon,
+        title: '充值金额(元)',
+        number: this.rechargeAmountTotal || 0
+      }, {
+        imageSrc: area,
+        title: '灌溉面积(亩)',
+        number: this.areaSize || 0
+      }, {
+        imageSrc: water,
+        title: '亩均用水量(方)',
+        number: this.useWaterPerMu || 0
+      }, {
+        imageSrc: moneyIcon,
+        title: '亩均用金额(元)',
+        number: this.useMoneyPerMu || 0
+      }, {
+        imageSrc: time,
+        title: '累计使用时间(H)',
+        number: this.useTimeTotal || 0
+      }]]
+    }
+  },
+  mounted() { 
+    this.getArea()
+  }
 };
 </script>
 

src/views/infrastructure/components/recompose.vue

@@ -179,7 +179,11 @@ export default {
       this.infoData = res?.data
     },
     resetForm() {
-      this.dialogVisible = false;
+      this.dialogVisible = false; 
+      this.baseForm = {
+        area: '',
+        ratedWater: '',
+      }
     },
     async editRecompose() { 
       const { waterrightId } = this.editRow

src/views/infrastructure/components/setPreferenc.vue

@@ -5,7 +5,7 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     @close="handleClose"
-    width="1200px"
+    width="800px"
   >
     <el-form
       ref="baseForm"
@@ -23,7 +23,7 @@
               <el-form-item label="电表品牌型号：" prop="productName">
                 <el-input
                   placeholder="请输入"
-                  v-model="textarea">
+                  v-model="tmnBizcode1">
                 </el-input>
               </el-form-item>
             </el-col>
@@ -31,7 +31,7 @@
               <el-form-item label="电表品牌型号：" prop="productName">
                 <el-input
                   placeholder="请输入"
-                  v-model="textarea">
+                  v-model="tmnBizcode2">
                 </el-input>
               </el-form-item>
             </el-col>
@@ -93,17 +93,16 @@ export default {
   },
   data() {
     return {
+      tmnBizcode1: '',
+      tmnBizcode2: '',
+      textarea:'',
       dialogSubmitLoading: false,
       dialogVisible: false,
       baseForm: {
-        productValue: '',
         productName: '',
         stockAmount: '',
-        goodsUnit: '',
         goodsSpecValue: '',
-        imageArr1: [],
         supplierId: '',
-        imageArr2: []
       },
       hasFetched: false,
       rules: {

src/views/infrastructure/deviceSetup.vue

@@ -19,14 +19,23 @@
         <el-col :span="24" class="elrow-main__col-top">
           <div>
             <el-input
-              v-model="form.goodsName"
+              v-model="waterKeyword"
               style="width: 250px"
               placeholder="请输入机井编号/机井名称"
-              @keyup.enter.native="handleSearch"
               clearable
             />
-            <el-select placeholder="在线状态" style="margin: 0 10px">
-
+            <el-select
+              placeholder="在线状态"
+              style="margin: 0 10px"
+              v-model="tmnstatusRunstatus"
+            >
+              <el-option
+                v-for="item in tmnstatusList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
             </el-select>
             <el-button
               type="primary"
@@ -46,8 +55,11 @@
           >
             <template #status="scope">
               <span style="display:flex;align-items:center;justify-content:center">
-                <span class="status"></span>
-                {{ scope.row.name }}
+                <span class="status nowork" v-if="scope.row.tmnstatusRunstatusContent == '空闲中'"></span>
+                <span class="status work" v-if="scope.row.tmnstatusRunstatusContent == '工作中'"></span>
+                <span class="status error" v-if="scope.row.tmnstatusRunstatusContent == '故障'"></span>
+                <span class="status nolive" v-if="scope.row.tmnstatusRunstatusContent == '离线'"></span>
+                {{ scope.row.tmnstatusRunstatusContent }}
               </span>
             </template>
             <template #operate="scope">
@@ -55,9 +67,9 @@
                 size="small"
                 :underline="false"
                 type="primary"
-                style="margin-right: 10px"
+                style="margin-right: 10px;color:rgb(219, 162, 28)"
                 @click="irrigationShowHistory(scope.row)"
-                >灌溉记录</el-link
+                >参数设置</el-link
               >
               <el-link
                 size="small"
@@ -66,21 +78,6 @@
                 style="margin-right: 10px"
                 @click="download(scope.row)"
               >修改</el-link>
-              <el-link
-                size="small"
-                :underline="false"
-                type="primary"
-                style="margin-right: 10px"
-                @click="showDetails(scope.row)"
-              >详情</el-link>
-              <el-link
-                slot="reference"
-                size="small"
-                :underline="false"
-                type="danger"
-                style="margin-right: 10px"
-                @click="deleteRow(scope.row)"
-              >删除</el-link>
             </template>
           </b-table>
         </el-col>
@@ -93,6 +90,7 @@
 </template>
 
 <script>
+import { getBaseList } from '@/api/tmn/index.js'
 import { getTree } from '@/api/tree.js'
 import BTable from '@/components/Table/index.vue';
 import DataReportLeft from '@/components/DataReportLeft/index.vue'
@@ -104,58 +102,65 @@ export default {
   components: { BTable,DataReportLeft,setPreferencs },
   data() {
     return {
+      tmnstatusRunstatus:'I',
       treeData: [],
-      form: {
-        productName: ''
-      },
+      waterKeyword: '',
+      tmnstatusList: [{
+        label: '空闲中',
+        value: 'I'
+      }, {
+        label: '工作中',
+        value: 'W'
+      }, {
+        label: '故障',
+        value: 'E'
+      }, {
+        label: '离线',
+        value: 'O'
+      }],
       loading: false,
       associationManageShow: false,
       currentClickId: '',
+      areaId: '',
       columns: [
         {
           label: '水电双计编号',
-          prop: 'person',
+          prop: 'tmnBizcode',
           customRender: '',
           align: 'center'
         },
         {
           label: '设备名称',
-          prop: 'area',
+          prop: 'tmnName',
           customRender: '',
           align: 'center'
         },
         {
           label: '水源名称',
-          prop: 'name',
+          prop: 'waterName',
           customRender: '',
           align: 'center'
         },
         {
           label: '设备状态',
-          prop: 'phone',
+          prop: 'tmnstatusRunstatusContent',
           customRender: 'status',
           align: 'center'
         },{
           label: '累计用水量',
-          prop: 'phone',
+          prop: 'waterNumTotal',
           customRender: '',
           align: 'center'
         },{
           label: '累计用电量',
-          prop: 'phone',
+          prop: 'elecNumTotal',
           customRender: '',
           align: 'center'
         },{
           label: '更新时间',
-          prop: 'phone',
+          prop: 'tmnstatusUpdateddate',
           customRender: '',
           align: 'center'
-        },
-        {
-          label: '操作',
-          customRender: 'operate',
-          width: '200',
-          align: 'center'
         }
       ]
     };
@@ -168,6 +173,15 @@ export default {
       })
       this.userList = res.data
     },
+    setCurrentData(areaId) {
+      this.currentClickId = areaId
+      this.areaId = areaId
+      this.$refs.tableRef.refresh(false);
+    },
+    irrigationShowHistory(row) {
+      this.setEdit = row
+      this.associationManageShow = true
+     },
     async loadData(parameter) {
       if (!this.currentClickId) {
         const treeList = this.$store.state.tree.treeList
@@ -181,43 +195,18 @@ export default {
         this.treeData = res?.data
         this.currentClick = res?.data[0]
         this.currentClickId = this.currentClick?.cusareaId
+        this.areaId = this.currentClickId
       }
-      this.searchHandler(this.farmerName, this.currentClickId)
-      return this.getTableData(this.currentClickId);
-    },
-    setCurrentData(areaId) {
-      this.currentClickId = areaId
-      this.$refs.tableRef.refresh(false);
-      this.searchHandler(this.farmerName, areaId)
+      const params = {
+        areaId: this.areaId,
+        waterKeyword: this.waterKeyword,
+        tmnstatusRunstatus: this.tmnstatusRunstatus
+      }
+      const payload = omit(assign({}, parameter, params), []);
+      return this.getTableData(payload);
     },
-    getTableData() {
-      return Promise.resolve({
-        data: [{
-            person:"王大虎",
-            area: '2016-05-02',
-            name: '王小虎',
-            phone: 1588888888,
-            address: '上海市普陀区金沙江路 1518 弄'
-          }, {
-            person:"王大虎",
-            area: '2016-05-04',
-            name: '王小虎',
-            phone: 1588888888,
-            address: '上海市普陀区金沙江路 1517 弄'
-          }, {
-            person:"王大虎",
-            area: '2016-05-01',
-            name: '王小虎',
-            phone: 1588888888,
-            address: '上海市普陀区金沙江路 1519 弄'
-          }, {
-            person:"王大虎",
-            area: '2016-05-03',
-            name: '王小虎',
-            phone: 1588888888,
-            address: '上海市普陀区金沙江路 1516 弄'
-          }]
-      })
+    getTableData(payload) {  
+      return getBaseList(payload)
     },
     handleSearch() {
       this.$refs.tableRef.refresh(true);
@@ -254,10 +243,21 @@ export default {
 }
 .status{
   display: inline-block;
-  width: 15px;
-  height: 15px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
-  background: red;
-  margin-left: 5px;
+  margin-right: 8px;
+}
+.nowork{
+  background: #14A478;
+}
+.work{
+  background: #1890FF;
+}
+.error{
+  background: #F4A72F;
+}
+.nolive{
+  background: rgba(0, 0, 0, 0.26);
 }
 </style>

src/views/infrastructure/waterEstablishment.vue

@@ -30,7 +30,7 @@
               style="margin-left: 16px;"
               type="primary"
               size="small"
-              @click="getWaterrightList"
+              @click="handleSearch"
               >查询</el-button
             >
           </div>
@@ -45,23 +45,24 @@
         </el-col>
         <el-col :span="24" class="elrow-main__col-bottom">
           <!--  -->
-          <!-- <b-table
+          <b-table
             ref="tableRef"
             :args="{ 'highlight-current-row': true }"
-            :data="tableData"
+            :data="loadData"
             :columns="columns"
-            isShowIndex
           >
             <template #operate="scope">
               <el-link
-                type="primary"
+                size="small"
                 :underline="false"
-                @click="goDetail(scope.row)"
+                type="primary"
+                style="margin-right: 10px"
+                @click="handlerRecompose(scope.row)"
                 >修改</el-link
               >
             </template>
-          </b-table> -->
-        <el-table
+          </b-table>
+        <!-- <el-table
           ref="tableRef"
           :args="{ 'highlight-current-row': true }"
           :data="tableData"
@@ -90,9 +91,8 @@
                 >修改</el-link
               >
             </template>
-            
         </el-table-column>
-        </el-table>
+        </el-table> -->
         </el-col>
       </el-card>
     </el-col>
@@ -100,15 +100,15 @@
       :visible.sync="recomposeShow"
       :editRow="editRow"
       @resetEdit="resetEdit"
-      @refresh="getWaterrightList"
+      @refresh="handleSearch"
     />
-    <water-price-setting :visible.sync="waterprice" @refresh="getWaterrightList"/>
+    <water-price-setting :visible.sync="waterprice" @refresh="handleSearch"/>
   </el-row>
 </template>
 
 <script>
 import { getTree } from '@/api/tree.js'
-import { getWaterrightList,editWaterright,getWaterrightUpareaInfo } from '@/api/waterright/index.js'
+import { getWaterrightList } from '@/api/waterright/index.js'
 import SelectTree from '@/components/SelectTree';
 import BTable from '@/components/Table/index.vue';
 import setAnnualWaterRight from './components/setAnnualWaterRight.vue'
@@ -154,38 +154,40 @@ export default {
         {
           label: '行政区',
           prop: 'cusareaName',
-          customRender: 'cusareaName',
-          align: 'center'
+          customRender: '',
+          align: 'left'
         },
         {
           label: '灌区总面积（亩）',
           prop: 'waterrightAreasize',
           customRender: '',
-          align: 'center'
+          align: 'left'
         },
         {
           label: '初始水权（m³）',
           prop: 'waterrightAmount',
           customRender: '',
-          align: 'center'
+          align: 'left'
         },{
           label: '亩均水权（亩/立方）',
           prop: 'phone',
           customRender: 'Permuarea',
-          align: 'center'
+          align: 'left'
+        },
+        {
+          label: '操作',
+          customRender: 'operate',
+          align: 'left'
         }
       ],
       tableData: []
     };
   },
-  mounted() {
-    this.getWaterrightList()
-  },
   methods: {
     resetEdit() {
       this.editRow = {}
     },
-    async getWaterrightList() {
+    async loadData(parameter) {
       if(!this.areaId) {
         const treeList = this.$store.state.tree.treeList
         let res = []
@@ -199,29 +201,33 @@ export default {
         this.cusareaName ||= this.treeData[0].cusareaName
         this.areaId = this.treeData[0].cusareaId
       }
-      this.getWaterrightListHandler()
-    },
-    async getWaterrightListHandler() {
-      const res = await getWaterrightList({
+      const params = {
         areaId: this.areaId,
         waterrightYear: this.waterrightYear
-      })
-      this.tableData = res?.data
+      }
+      const payload = omit(assign({}, parameter, params), []);
+      return this.getTableData(payload)
+    },
+    getTableData(payload) {
+      return getWaterrightList(payload)
     },
     handlerClick(value) {
       this.areaId = value?.cusareaId
     },
+    handleSearch() { 
+      this.$refs.tableRef.refresh(true);
+    },
     setAnnualWaterRight() {
       this.waterprice = true
     },
-    loadData(parameter) {
-      const queryform = this.form;
-      const payload = omit(assign({}, parameter, queryform, {orderByColumn:'tarcecodeapplyCreateddate',isAsc:'desc'}), []);
-      return this.getTableData(payload);
-    },
-    getTableData(payload) {
-      return {}
-    },
+    // loadData(parameter) {
+    //   const queryform = this.form;
+    //   const payload = omit(assign({}, parameter, queryform, {orderByColumn:'tarcecodeapplyCreateddate',isAsc:'desc'}), []);
+    //   return this.getTableData(payload);
+    // },
+    // getTableData(payload) {
+    //   return {}
+    // },
     handlerRecompose(row) {
       this.editRow = row
       this.recomposeShow = true

src/views/monitoringMamage/components/echartsPie.vue

@@ -11,6 +11,10 @@ export default {
     className: {
       type: String,
       default: 'chart'
+    },
+    proportion: {
+      type: Number,
+      default: 0
     }
   },
   data() {
@@ -63,14 +67,14 @@ export default {
               position: 'center',
               show: true,
               color: '#1E7CE8',
-              formatter: ['{a|60}%','{b|实际用水量}'].join('\n'),
+              formatter: ['{a|'+this.proportion +'}%','{b|实际用水量}'].join('\n'),
               rich: {
                 a: {
                   fontSize:'22px',
                 },
                 b:{
                   color: '#333333',
-                  fontSize: '12px',
+                  fontSize: '10px',
                   padding:[10,0,0,0]
                 }
               },
@@ -112,8 +116,8 @@ export default {
               show: false
             },
             data: [
-              { value: 1048, name: 'Direct',itemStyle:{color: '#1890FF'} },
-              { value: 1048, name: 'Direct2',itemStyle:{color: '#D9D9D9'} }
+              { value: this.proportion, name: 'Direct',itemStyle:{color: '#1890FF'} },
+              { value: 1, name: 'Direct2',itemStyle:{color: '#D9D9D9'} }
             ]
           }
         ]

src/views/monitoringMamage/index.vue

@@ -5,14 +5,39 @@
       style="height:100%;padding-bottom:32px;"
     >
     <el-card style="margin:16px;height: 100%; overflow-y: auto">
-      <data-report-left :treeData="treeData"></data-report-left>
+      <data-report-left
+        @setCurrentData="setCurrentData"
+        :treeData="treeData"
+      ></data-report-left>
     </el-card>
     </el-col>
     <el-col
       :span="20"
     >
     <el-card style="overflow-y: hidden;min-height:180px;margin-bottom:16px;">
-      <div style="margin-bottom: 16px;"><span style="font-weight:bold">机井情况</span>(总数: 256口)</div>
+      <div style="margin-bottom: 16px; display:flex;justify-content:space-between">
+        <div>
+          <span style="font-weight:bold">机井情况</span>(总数: {{ resData.tmnCount }} 口)
+        </div>
+        <div>
+          <el-date-picker
+            v-model="dateValue"
+            type="daterange"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :default-time="['00:00:00', '23:59:59']"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width: 300px; margin:0 16px"
+          >
+          </el-date-picker>
+          <el-button
+            type="primary"
+            size="small"
+            @click="getTopListHandler"
+            >查询</el-button
+          >
+        </div>
+      </div>
       <div style="height:100px;width:auto;overflow:hidden">
         <el-row>
           <el-col :span="14">
@@ -36,33 +61,33 @@
             </el-row>
           </el-col>
           <el-col :span="10">
-            <div style="display:flex;justify-content: space-evenly">
-              <echarts-pie/>
-              <div style="position:relative;left:-50px;">
+            <div style="display:flex;justify-content: space-around">
+              <echarts-pie style="width:30%;margin-left:5%" :proportion="proportion"/>
+              <div style="width:65%">
               <el-row :gutter="20">
                 <el-col :span="12">
                   <div class="radius_container">
                     <span class="radius"></span>
-                    <span class="label">额定用水量:</span> 6256吨
+                    <span class="label">计划用水量： </span> {{ resData.waterrightAmount }} 吨
                   </div>
                   <div class="radius_container">
                     <span class="radius"></span>
-                    <span class="label">额定用水量:</span> 6256吨
+                    <span class="label">累计用水量： </span>  {{ resData.waterNumTotal }} 吨
                   </div>
                   <div class="radius_container">
                     <span class="radius"></span>
-                    <span class="label">额定用水量:</span> 6256吨
+                    <span class="label">累计用电量： </span>  {{ resData.elecNumTotal }} 吨
                   </div>
                 </el-col>
                 <el-col :span="12">
                   <div class="radius_container">
-                    <span class="label">额定用水量:</span> 6256吨
+                    <span class="label">累计费用： </span>  {{ resData.useMoneyTotal }} 元
                   </div>
                   <div class="radius_container">
-                    <span class="label">额定用水量:</span> 6256吨
+                    <span class="label">累计用水费用： </span>  {{ resData.usewatermoneyTotal }} 元
                   </div>
                   <div class="radius_container">
-                    <span class="label">额定用水量:</span> 6256吨
+                    <span class="label">累计用电费用： </span>  {{ resData.useelecmoneyTotal }} 元
                   </div>
                 </el-col>
               </el-row>
@@ -76,28 +101,24 @@
       <el-col :span="24" class="elrow-main__col-top">
         <div>
           <el-input
-            v-model="form.goodsName"
+            v-model="waterKeyword"
             style="width: 250px;margin-right:20px;"
             placeholder="请输入机井编号/机井名称"
-            @keyup.enter.native="handleSearch"
             clearable
           />
           <el-select
-            v-model="form.goodsName"
-            style="width: 200px;"
+            v-model="tmnstatusRunstatus"
+            style="width: 200px;margin-right:16px"
             placeholder="设备状态"
             clearable
-          ></el-select>
-          <el-date-picker
-            v-model="dateValue"
-            type="daterange"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            :default-time="['00:00:00', '23:59:59']"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            style="width: 300px; margin:0 20px"
           >
-          </el-date-picker>
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          ></el-option>
+        </el-select>
           <el-button
             type="primary"
             size="small"
@@ -116,8 +137,11 @@
         >
           <template #status="scope">
             <span style="display:flex;align-items:center;justify-content:center">
-              <span class="status"></span>
-              {{ scope.row.name }}
+              <span class="status nowork" v-if="scope.row.tmnstatusRunstatusContent == '空闲中'"></span>
+              <span class="status work" v-if="scope.row.tmnstatusRunstatusContent == '工作中'"></span>
+              <span class="status error" v-if="scope.row.tmnstatusRunstatusContent == '故障'"></span>
+              <span class="status nolive" v-if="scope.row.tmnstatusRunstatusContent == '离线'"></span>
+              {{ scope.row.tmnstatusRunstatusContent }}
             </span>
           </template>
 
@@ -149,12 +173,14 @@
 </template>
 
 <script>
+import { getBaseList, getTopList } from '@/api/tmn/index.js'
 import EchartsPie from './components/echartsPie.vue'
 import BTable from '@/components/Table/index.vue';
 import DataReportLeft from '@/components/DataReportLeft/index.vue'
 import realTimeMonitor from './components/realTimeMonitor.vue';
 import IrrigationRecord from './components/IrrigationRecord.vue';
 import { getTree } from '@/api/tree.js'
+import { assign, omit } from 'lodash-es';
 
 export default {
   name: 'monitoringMamage',
@@ -167,69 +193,98 @@ export default {
       },
       dataList: [{
         title: '在线',
-        number: 551,
+        number: 0,
         styleClass: 'radius'
-      },{
+      }, {
         title: '运行',
-        number: 551,
+        number: 0,
         styleClass: 'radius run'
-      },{
+      }, {
         title: '故障',
-        number: 551,
+        number: 0,
         styleClass: 'radius error'
-      },{
+      }, {
         title: '告警',
-        number: 551,
+        number: 0,
         styleClass: 'radius waring'
-      },{
+      }, {
         title: '离线',
-        number: 551,
+        number: 0,
         styleClass: 'radius noliving'
       }],
+      options: [
+        {
+          label: '全部',
+          value: ''
+        },
+        {
+          label: '空闲中',
+          value: 'I'
+        },
+        {
+          label: '工作中',
+          value: 'W'
+        },
+        {
+          label: '故障',
+          value: 'E'
+        },
+        {
+          label: '离线',
+          value: 'O'
+        },
+      ],
       treeData: [],
       loading: false,
       realTimeShow: false,
       irrigationShow: false,
+      waterKeyword: '',
+      tmnstatusRunstatus: '',
+      areaId: '',
+      startTime: '',
+      endTime: '',
+      proportion: 0,
+      resData: {},
       columns: [
         {
           label: '水电双计编号',
-          prop: 'person',
+          prop: 'tmnBizcode',
           customRender: '',
           align: 'center'
         },
         {
           label: '设备名称',
-          prop: 'area',
+          prop: 'tmnName',
           customRender: '',
           align: 'center'
         },
         {
           label: '水源名称',
-          prop: 'name',
+          prop: 'waterName',
           customRender: '',
           align: 'center'
         },
         {
           label: '设备状态',
-          prop: 'phone',
+          prop: 'tmnstatusRunstatusContent',
           customRender: 'status',
           align: 'center'
-        },{
+        }, {
           label: '累计用水量',
-          prop: 'phone',
+          prop: 'waterNumTotal',
           customRender: '',
           align: 'center'
-        },{
+        }, {
           label: '累计用电量',
-          prop: 'phone',
+          prop: 'elecNumTotal',
           customRender: '',
           align: 'center'
-        },{
+        }, {
           label: '更新时间',
-          prop: 'phone',
+          prop: 'tmnstatusUpdateddate',
           customRender: '',
           align: 'center'
-        },
+        }, 
         {
           label: '操作',
           customRender: 'operate',
@@ -240,55 +295,89 @@ export default {
     };
   },
   methods: {
-    async getTreeList() {
-      const treeList = this.$store.state.tree.treeList
-      let res = []
-      if (treeList.code === '000000') {
-        res = treeList
-      } else {
-        res = await getTree()
-        this.$store.dispatch('tree/setTree', res)
-      }
-      const data = res?.data
-      this.treeData = data
-    },
+    // async getTreeList() {
+    //   const treeList = this.$store.state.tree.treeList
+    //   let res = []
+    //   if (treeList.code === '000000') {
+    //     res = treeList
+    //   } else {
+    //     res = await getTree()
+    //     this.$store.dispatch('tree/setTree', res)
+    //   }
+    //   const data = res?.data
+    //   this.treeData = data
+    // },
     irrigationShowHistory() {
       this.irrigationShow = true
     },
+    
+    setCurrentData(areaId) {
+      this.currentClickId = areaId
+      this.$refs.tableRef.refresh(false);
+    },
     realTime() {
       this.realTimeShow = true
     },
-    loadData() {
-      return this.getTableData();
+    async loadData(parameter) {
+      if (!this.areaId) {
+        const treeList = this.$store.state.tree.treeList
+        let res = []
+        if (treeList.code === '000000') {
+          res = treeList
+        } else {
+          res = await getTree()
+          this.$store.dispatch('tree/setTree', res)
+        }
+        this.treeData = res?.data
+        this.cusareaName ||= this.treeData[0].cusareaName
+        this.areaId = this.treeData[0].cusareaId
+      }
+      const params = {
+        areaId: this.areaId,
+        tmnstatusRunstatus: this.tmnstatusRunstatus,
+        waterKeyword: this.waterKeyword
+      }
+      const payload = omit(assign({}, parameter, params), []);
+      this.getTopListHandler()
+      return this.getTableData(payload)
+    },
+    getTableData(payload) {
+      return getBaseList(payload)
     },
-    getTableData() {
-      return Promise.resolve({
-        data: [{
-          person:"王大虎",
-          area: '2016-05-02',
-          name: '王小虎',
-          phone: 1588888888,
-          address: '上海市普陀区金沙江路 1518 弄'
+    async getTopListHandler() { 
+      let [startTime, endTime] = this.dateValue
+      startTime ||= new Date().getFullYear()
+      const res = await getTopList({
+        areaId: this.areaId,
+        startTime,
+        endTime
+      })
+      const resData = res?.data
+      this.resData = resData
+      this.proportion = this.resData.proportion
+      this.dataList = [
+        {
+          title: '在线',
+          number: resData?.tmnCount1,
+          styleClass: 'radius'
         }, {
-          person:"王大虎",
-          area: '2016-05-04',
-          name: '王小虎',
-          phone: 1588888888,
-          address: '上海市普陀区金沙江路 1517 弄'
+          title: '运行',
+          number: resData?.tmnCount2,
+          styleClass: 'radius run'
         }, {
-          person:"王大虎",
-          area: '2016-05-01',
-          name: '王小虎',
-          phone: 1588888888,
-          address: '上海市普陀区金沙江路 1519 弄'
+          title: '故障',
+          number: resData?.tmnCount3,
+          styleClass: 'radius error'
         }, {
-          person:"王大虎",
-          area: '2016-05-03',
-          name: '王小虎',
-          phone: 1588888888,
-          address: '上海市普陀区金沙江路 1516 弄'
-        }]
-      })
+          title: '告警',
+          number: resData?.tmnCount5,
+          styleClass: 'radius waring'
+        }, {
+          title: '离线',
+          number: resData?.tmnCount4,
+          styleClass: 'radius noliving'
+        }
+      ]
     },
     handleSearch() {
       this.$refs.tableRef.refresh(true);
@@ -298,7 +387,7 @@ export default {
     },
   },
   mounted() {
-    this.getTreeList()
+    // this.getTreeList()
   }
 };
 </script>

src/views/monitoringMamage/monitoringMamage.scss

@@ -14,6 +14,9 @@
   display: flex;
   align-items: center;
   margin-bottom:8px;
+  overflow:hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   .radius{
     position: absolute;
     left:-16px;
@@ -116,6 +119,17 @@
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: red;
   margin-right: 8px;
+}
+.nowork{
+  background: #14A478;
+}
+.work{
+  background: #1890FF;
+}
+.error{
+  background: #F4A72F;
+}
+.nolive{
+  background: rgba(0, 0, 0, 0.26);
 }