no message

src/api/common.js

@@ -17,6 +17,22 @@ export function bigGetLarge1(params) {
   })
 }
 
+export function bigGetLarge11(params) {
+  return request({
+    url: '/big/getLarge11',
+    method: 'get',
+    params
+  })
+}
+
+export function bigList(params) {
+  return request({
+    url: '/big/list',
+    method: 'get',
+    params
+  })
+}
+
 export function bigGetLarge10(params) {
   return request({
     url: '/big/getLarge10',

src/views/bigViews/dataView1/components/mapdata.vue

@@ -18,17 +18,18 @@
           </div>
           <div class="pingtaixianshisheng" v-if="shengData">
             <div class="shengbiaoti">
-              广东省
+              {{ isSelectBool }}
               <i @click="() => {
             shengData = null
-            if(myChart){
+            if (isSelectBool) {
               myChart.dispatchAction({
-                type: 'downplay',
-                seriesIndex: 0
+                type: 'unselect',
+                name: [isSelectBool]
               })
+              isSelectBool = ''
             }
-          }" style="float: right;color: #fff;margin-top: 12px; margin-right: -8px;"
-                class="el-icon-circle-close"></i>
+
+          }" style="float: right;color: #fff;margin-top: 12px; margin-right: -8px;" class="el-icon-circle-close"></i>
             </div>
             <div class="shengshujukuang">
               <div>商户数：{{ shengData.companyNum }}</div>
@@ -41,6 +42,84 @@
               <div>增值订单：{{ shengData.increOrderNum }}</div>
             </div>
           </div>
+          <div v-if="list_.length" class="pingtaixianshisheng" style="width: 100%;height: auto;min-height: 100px;">
+            <div class="shengbiaoti"
+              style="font-size: 16px;border-bottom: 1px solid #50C9FD; line-height: 38px; margin-bottom: 8px;display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;position: relative;padding-right: 30px;">
+              <!-- <span>{{ isSelectBool }}</span> -->
+              <span>{{ userInfo && userInfo.city }}</span>
+              <span>总已完工 {{ cityInfo.num }}单/台 总未完工 <span>{{ cityInfo.numWwg }}</span>单/台</span>
+              <i @click="guanbitanchuang2" style="position: absolute; top: 10px; right: -8px;color: #fff;"
+                class="el-icon-circle-close"></i>
+            </div>
+            <div style="width:100%;">
+              <table style="width:100%;">
+                <thead style="width:100%;">
+                  <tr>
+                    <th style="color: #50C9FD;font-size:14px;width: 17.5%;text-align: left;">
+                      <div align="left">街道</div>
+                    </th>
+                    <th style="color: #50C9FD;font-size:14px;width: 16.5%;text-align: left;">
+                      <div align="left">安装完工/未完工</div>
+                    </th>
+                    <th style="color: #50C9FD;font-size:14px;width: 16.5%;text-align: left;">
+                      <div align="left">维修完工/未完工</div>
+                    </th>
+                    <th style="color: #50C9FD;font-size:14px;width: 16.5%;text-align: left;">
+                      <div align="left">清洗完工/未完工</div>
+                    </th>
+                    <th style="color: #50C9FD;font-size:14px;width: 16.5%;text-align: left;">
+                      <div align="left">增值完工/未完工</div>
+                    </th>
+                    <th style="color: #50C9FD;font-size:14px;width: 16.5%;text-align: left;">
+                      <div align="left">维保完工/未完工</div>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(item, index) in list_" :key="index">
+                    <td>
+                      <div class="bkiuybhlinjm" style="font-size: 14px;">{{ item.streetName }}</div>
+                    </td>
+                    <td>
+                      <div class="bkiuybhlinjm">
+                        <span style="font-size: 14px;">{{ item.azgd }}台</span>
+                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.azgdwwg }}</span>台</span>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="bkiuybhlinjm">
+                        <span style="font-size: 14px;">{{ item.wxgd }}台</span>
+                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.wxgdwwg }}</span>台</span>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="bkiuybhlinjm">
+                        <span style="font-size: 14px;">{{ item.qxgd }}台</span>
+                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.qxgdwwg }}</span>台</span>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="bkiuybhlinjm">
+                        <span style="font-size: 14px;">{{ item.zzgd }}台</span>
+                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.zzgdwwg }}</span>台</span>
+                      </div>
+                    </td>
+                    <td>
+                      <div class="bkiuybhlinjm">
+                        <span style="font-size: 14px;">{{ item.wbgd }}台</span>
+                        <span style="font-size: 14px;"><span style="color:#50C9FD">{{ item.wbgdwwg }}</span>台</span>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <div style="width:100%;display: flex;justify-content: center;align-items: center">
+                <el-button type="text" :disabled="!(pageNum > 1)" @click="shangyiye">上一页</el-button>
+                <div style="width:50px;text-align: center;color:#50C9FD">{{ pageNum }}</div>
+                <el-button type="text" :disabled="!(parseInt(total / 5) > pageNum)" @click="xiayiye">下一页</el-button>
+              </div>
+            </div>
+          </div>
         </div>
       </zj-page-fill>
     </zj-page-container>
@@ -52,8 +131,7 @@ import zhejiang from './js/zhejiang.js';
 import moduleEnclosure from '@/components/moduleEnclosure.vue';
 import mapDataStatistics from './mapDataStatistics.vue';
 import * as echarts from 'echarts';
-import { bigGetRegion, bigGetLarge9, bigGetLarge10 } from '@/api/common.js';
-import { bigGetLarge1 } from '@/api/common.js';
+import { bigGetRegion, bigGetLarge9, bigGetLarge10, bigList, bigGetLarge1, bigGetLarge11 } from '@/api/common.js';
 // 计算 GeoJSON 数据的边界框
 function calculateBoundingBox(geoJsonData) {
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
@@ -108,7 +186,12 @@ export default {
       myChart: null,
       getLarge9: [],
       getLarge10: [],
-      shengData: null
+      shengData: null,
+      isSelectBool: "",
+      pageNum: 1,
+      total: 0,
+      list_: [],
+      cityInfo: {}
     };
   },
   computed: {
@@ -119,39 +202,62 @@ export default {
   watch: {
     "userInfo.type": {
       handler(newVal, oldVal) {
-        this.init()
+        this.init(true)
       },
       deep: true,
       immediate: true,
     }
   },
   methods: {
-    init(bol) {
+    guanbitanchuang() {
+      this.shengData = null
+      if (this.isSelectBool) {
+        this.myChart.dispatchAction({
+          type: 'unselect',
+          name: [this.isSelectBool]
+        })
+        this.isSelectBool = ''
+      }
+    },
+    guanbitanchuang2() {
+      this.pageNum = 1
+      this.total = 0
+      this.list_ = []
+      this.cityInfo = {}
+      if (this.isSelectBool) {
+        this.myChart.dispatchAction({
+          type: 'unselect',
+          name: [this.isSelectBool]
+        })
+        this.isSelectBool = ''
+      }
+    },
+    init() {
       if (this.userInfo) {
         if (this.userInfo.type == 2) {
-          this.getbigGetLarge9({ country: 100000 }, bol);
+          this.getbigGetLarge9({ country: 100000 });
         } else {
-          this.getbigGetLarge10({ province: this.userInfo.province, city: this.userInfo.city }, bol);
+          this.getbigGetLarge10({ province: this.userInfo.province, city: this.userInfo.city });
         }
       }
     },
-    getbigGetLarge9(pam, bol) {
+    getbigGetLarge9(pam) {
       bigGetLarge9().then(res => {
         this.getLarge9 = res.data
         this.getLarge10 = []
-        this.echart_7(pam,bol);
+        this.echart_7(pam);
       })
     },
-    getbigGetLarge10(pam, bol) {
+    getbigGetLarge10(pam) {
       bigGetLarge10(pam).then(res => {
         this.getLarge9 = []
         this.getLarge10 = res.data
-        this.echart_7({ province: this.userInfo.province, city: this.userInfo.city },bol);
+        this.echart_7({ province: this.userInfo.province, city: this.userInfo.city });
       })
     },
-    echart_7(pam, bol) {
+    echart_7(pam) {
       var that = this;
-      if (that.myChart && !bol) {
+      if (that.myChart) {
         that.myChart.dispose();
       }
       bigGetRegion(pam).then(res => {
@@ -276,14 +382,13 @@ export default {
         };
         // 使用配置项生成图表
         that.myChart.setOption(option);
-
-        var isSelectBool = false
+        var bool_i = false
         that.myChart.on('selectchanged', function (params) {
-          isSelectBool = !!params.selected.length
+          bool_i = !!params.selected.length
         });
         // 监听点击事件
         that.myChart.on('click', function (params) {
-          if (isSelectBool) {
+          if (bool_i) {
             if (that.userInfo) {
               if (that.userInfo.type == 2) {
                 // 平台
@@ -292,21 +397,59 @@ export default {
                     province: params.name
                   }).then(res => {
                     that.shengData = res.data
-                    console.log(that.shengData)
+                    that.isSelectBool = params.name
                   })
                 }
               } else {
                 // 商户
-
+                that.isSelectBool = params.name
+                that.pageNum = 1
+                that.total = 0
+                that.pagedatalist()
+                bigGetLarge11({
+                  // area: that.isSelectBool,
+                  city: that.userInfo.city,
+                  province: that.userInfo.province,
+                }).then(res => {
+                  that.cityInfo = res.data
+                })
               }
             }
           } else {
-            // 没有选中或者取消选中
           }
         });
       });
+    },
+    pagedatalist() {
+      if (this.isSelectBool) {
+        bigList({
+          pageNum: this.pageNum,
+          pageSize: 5,
+          city: this.userInfo.city,
+          province: this.userInfo.province,
+          area: this.isSelectBool
+        }).then(res => {
+          this.total = res.data.total
+          this.list_ = res.data.records
+        })
+      }
+    },
+    xiayiye() {
+      if (parseInt(this.total / 5) > this.pageNum) {
+        this.pageNum++
+        this.pagedatalist()
+      } else {
 
+      }
     },
+    shangyiye() {
+      if (this.pageNum > 1) {
+        this.pageNum--
+        this.pagedatalist()
+      } else {
+
+      }
+    }
   },
 };
 </script>
@@ -420,4 +563,15 @@ export default {
 .c9 {
   background: linear-gradient(0deg, #3ce783 0%, #3ce783 100%);
 }
+
+.bkiuybhlinjm {
+  padding: 8px 0;
+  color: #fff;
+  box-sizing: border-box;
+  padding-right: 8px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
 </style>