manage-client 3.2.88 → 3.2.89-aodeToV4

package/src/components/ManageHomeCS/Home/UserModule.vue

@@ -1,511 +1,527 @@
-<template>
-  <div>
-    <div class="f1">
-      <div class="label">客户</div>
-      <div class="f2">
-        <table>
-          <tr>
-            <td><span v-model="totaluser">{{totaluser}}</span><br/><font size="4">现有总客户</font></td>
-            <td><span v-model="apply">{{apply}}</span><br/><font size="4">民用生活用气户数</font></td>
-            <td><span v-model="boiler">{{boiler}}</span><br/><font size="4">民用壁挂锅炉户数</font></td>
-            <td><span v-model="hiddenuser">{{hiddenuser}}</span><br/><font size="4">非民用户数</font></td>
-          </tr>
-        </table>
-      </div>
-    </div>
-    <div id="userdata" class="f3"></div>
-  </div>
-</template>
-
-<script>
-  import * as DataSql from '../../../stores/DataSql'
-  import co from 'co'
-
-  export default {
-    name: "user-module",
-    props: {
-      listenheight: String,
-      f_filiale:String,
-    },
-    data() {
-      return {
-        xc: '',
-        usernum: [],     //用户数据
-        usernumstring: [],
-        totaluser: '',   //总用户数
-        hiddenuser: '', //潜在用户数
-        boiler:'',//民用锅炉
-        unit: [],        //用户数单位
-        resdata: [],    //用户数据
-        resdatapie: [],  //饼图数据
-        resdataapply: 0,  //报建用户数
-        apply: '',  //报建用户数
-        timer:''
-      }
-    },
-    beforeDestroy() {
-      //清除定时器
-      clearInterval(this.timer);
-    },
-    methods: {
-      //绘图
-      setBar() {
-        this.xc = this.$echarts.init(document.getElementById('userdata'))
-        var scale=this.$parent.$parent.$parent.scale*1.1
-        DataSql.dataunitarray(this, 'usernum', 'usernumstring')
-        var echartData = this.usernum
-        var echartData1 = this.usernumstring
-        var rich = {
-          blue: {
-            color: '#15dce2',
-            fontSize: 12 * scale,
-            align: 'center',
-            padding: [15*scale, 0, 15*scale, 0]
-          }
-        }
-        var total = 0; //用户总和
-        var result = ''
-        echartData.forEach(function (value) {
-          total += value.value;
-        });
-        var index = total.toString().length
-        if (index > 4) {
-          var t = total.toString().substring(0, index - 4)
-          var s = total.toString().substring(index - 4, index - 3)
-          var l = total.toString().substring(index - 3, index - 2)
-          if (l > 4) {
-            s = eval(s + '+1')
-          }
-          if (s > 9) {
-            s = 0
-            t = eval(t + '+1')
-          }
-          result = t + '.' + s + '万'
-        } else {
-          result = total
-        }
-        this.xc.setOption({
-          title: [
-            {
-              text: '总客户数',
-              left: '45%',
-              top: '31%',
-              textStyle: {
-                color: '#ffffff',
-                fontSize: 10 ,
-
-              }
-            },
-            {
-              text: result,
-              left: '46%',
-              top: '40%',
-              textStyle: {
-                color: '#00e2ea',
-                fontSize: 10 ,
-
-              }
-            }],
-          tooltip: {
-            show: true,
-            alwaysShowContent:true,
-            backgroundColor:'rgba(2, 59, 63, 0.6)',
-            // borderColor :'rgba(13, 109, 180)',
-            borderWidth:0,
-            hideDelay:100,
-              padding:10*scale,
-              textStyle:{
-                  fontSize:16*scale
-              },
-            triggerOn:'mousemove',
-              padding:10*scale,
-              textStyle:{
-                  fontSize:16*scale
-              },
-            formatter: function (params) {
-              return  params.marker + " " + params.name + "  <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;&nbsp;" + params.value + "</span>"
-            },
-            enterable:true,
-            position: function(point, params, dom, rect, size) {
-              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
-              var x = point[0]; //
-              var y = point[1];
-              var viewWidth = size.viewSize[0];
-              var viewHeight = size.viewSize[1];
-              var boxWidth = size.contentSize[0];
-              var boxHeight = size.contentSize[1];
-              var posX = 0; //x坐标位置
-              var posY = 0; //y坐标位置
-              if (x < boxWidth) { //左边放不开
-                posX = 5;
-              } else { //左边放的下
-                posX = x - boxWidth;
-              }
-
-              if (y < boxHeight) { //上边放不开
-                posY = 5;
-              } else { //上边放得下
-                posY = y - boxHeight;
-              }
-              return [posX, posY];
-            },
-            extraCssText:'width: auto;height:auto;',
-          },
-          legend: {
-            orient: 'horizontal',
-            icon: 'circle',
-            x: 'center',
-            bottom: '6%',
-            itemGap: 20,
-            itemWidth: 20 ,
-            itemHeight: 10 ,
-            textStyle: {
-              fontSize: 12 ,
-              // padding: [0, 0, 0, 4 * scale],
-              color: '#ffffff'
-            },
-            data: ['民用', '非民用', '民用锅炉']
-          },
-          series: [
-            // {
-            //   name: 'Line 1',
-            //   type: 'pie',
-            //   animation: false,
-            //   clockWise: false,
-            //   radius: ['35%', '36%'],
-            //   center: ['50%', '49%'],
-            //   itemStyle: {
-            //     normal: {
-            //       label: {
-            //         show: false
-            //       },
-            //       labelLine: {
-            //         show: false
-            //       },
-            //     }
-            //   },
-            //   hoverAnimation: false,
-            //   tooltip: {
-            //     show: false
-            //   },
-            //   data: [{
-            //     value: 100,
-            //     name: '02',
-            //     itemStyle: {
-            //       normal: {
-            //         color: '#29b7ff',//未完成的圆环的颜色
-            //         label: {
-            //           show: false
-            //         },
-            //         labelLine: {
-            //           show: false
-            //         }
-            //       }
-            //     }
-            //   }]
-            // },
-            {
-              name: '总客户数',
-              type: 'pie',
-              radius: ['40%', '60%'],
-              center: ['50%', '42%'],
-              minAngle: 15,//最小角度
-              startAngle: 300, //起始角度
-              hoverAnimation: false,
-              color: ['#6fd9d0', '#ede61f', '#6d9bdc'],
-              label: {
-                show:false
-                // normal: {
-                //   borderWidth: 20 * scale,
-                //   borderRadius: 4 * scale,
-                //   formatter: function (params, ticket, callback) {
-                //     for (var i = 0; i < echartData1.length; i++) {
-                //       if (echartData1[i].name == params.name) {
-                //         return '{blue|' + params.name + '}{blue|' + echartData1[i].value + '}\n';
-                //       }
-                //     }
-                //   },
-                //   padding: [0, -80 * scale],
-                //   rich: rich,
-                // }
-              },
-              labelLine: {
-                normal: {
-                  length: 25 * scale,
-                  length2: 90 * scale,
-                }
-              },
-              data: echartData
-            }
-            // , {
-            //   name: 'Line 2',
-            //   type: 'pie',
-            //   animation: false,
-            //   clockWise: false,
-            //   radius: ['54%', '55%'],
-            //   center: ['50%', '49%'],
-            //   itemStyle: {
-            //     normal: {
-            //       label: {
-            //         show: false
-            //       },
-            //       labelLine: {
-            //         show: false
-            //       },
-            //     }
-            //   },
-            //   hoverAnimation: false,
-            //   tooltip: {
-            //     show: false
-            //   },
-            //   data: [{
-            //     value: 100,
-            //     name: '02',
-            //     itemStyle: {
-            //       normal: {
-            //         color: '#29b7ff',//未完成的圆环的颜色
-            //         label: {
-            //           show: false
-            //         },
-            //         labelLine: {
-            //           show: false
-            //         }
-            //       }
-            //     }
-            //   }
-            //   ]
-            // }
-          ]
-        }, true)
-
-        let idx = 0;
-        var dataLen=echartData.length
-        var oroptionmapjsonr_charts=this.xc
-        this.timer=setInterval(()=>{
-          // 取消之前选中的图形
-          oroptionmapjsonr_charts.dispatchAction({
-            type: 'pieUnSelect',
-            seriesIndex: 0,
-            dataIndex: idx,
-          });
-
-          idx = (idx+ 1) % dataLen;
-          //console.log(app.currentIndex);
-          // 选中当前图形
-          oroptionmapjsonr_charts.dispatchAction({
-            type: 'pieSelect',
-            seriesIndex: 0,
-            dataIndex: idx
-          });
-          oroptionmapjsonr_charts.dispatchAction({
-            type: 'showTip',
-            seriesIndex: 0,
-            dataIndex: idx
-          });
-        }, 3000)
-      },
-      //请求后台数据
-      searchdata() {
-          let sqldata = DataSql.getData(this, 'user',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
-        co(sqldata)
-        // let sqldatapie = DataSql.getData(this,'useri',{f_filiale:this.$parent.$parent.f_filiale}, 'resdatapie')
-        // co(sqldatapie)
-        // let sqldataone = DataSql.getData(this,'userapply',{f_filiale:this.$parent.$parent.f_filiale}, 'resdataapply')
-        // co(sqldataone)
-      },
-    },
-    watch: {
-      // 监听用户数据并进行绘图
-      'usernum': {
-        deep: true,
-        handler(val) {
-          console.log('----------------------------------------------------------')
-          console.log(this.usernum,'usernum')
-          var value = this.usernum[0].value + this.usernum[1].value + this.usernum[2].value
-          var value1 = this.usernum[0].value
-          var value2 =this.usernum[1].value
-          var value3 =this.usernum[2].value
-          this.totaluser = DataSql.dataunit(value)
-          this.apply = DataSql.dataunit(value1)
-          this.hiddenuser = DataSql.dataunit(value2)
-          this.boiler = DataSql.dataunit(value3)
-          this.setBar()
-          this.$parent.loaddata++
-        }
-      },
-      //监听浏览器大小变化
-      'listenheight': {
-        deep: true,
-        handler(val) {
-          if (this.listenheight !== '') {
-            // this.$parent.$parent.changeresize(this.xc)
-          }
-        },
-      },
-      'resdata': {
-        deep: true,
-        handler(val) {
-          this.usernum = []
-          let result = {}
-          result.name = '民用'
-          result.value = this.resdata[0]['民用']
-          this.usernum.push(result)
-          let result1 = {}
-          result1.name = '非民用'
-          result1.value = this.resdata[0]['非民用']
-          this.usernum.push(result1)
-          let result2 = {}
-          result2.name = '民用锅炉'
-          result2.value = this.resdata[0]['民用锅炉']
-          this.usernum.push(result2)
-        }
-      },
-
-
-      'f_filiale'(){
-        clearInterval(this.timer);
-        this.searchdata()
-      }
-    },
-
-    ready() {
-      // 拼接sql，请求后台
-      this.searchdata()
-    }
-  }
-</script>
-
-<style scoped>
-
-  @media screen and (max-width: 1920px) {
-    /*标题样式*/
-    .label {
-      font-size: 1.85rem;
-      color: #fff;
-      height: 8%;
-      width: 100%;
-      margin-left: 6%;
-    }
-
-    /*标题及用户数据表格样式*/
-    .f1 {
-      height: 31%;
-      width: 100%;
-    }
-
-    /*用户数据表格样式*/
-    .f2 {
-      /*height: 72px;*/
-      /*width: 450px;*/
-      /*margin-left: 20px*/
-      padding: 2% 1%;
-      height: 92%;
-      width: 100%;
-    }
-
-    /*echarts绘制区域样式*/
-    .f3 {
-      height: 68.3%;
-      width: 100%;
-      padding-top: 3%;
-    }
-
-    table {
-      width: 100%;
-      height: 100%;
-    }
-
-    td {
-      /*height: 72px;*/
-      /*width: 140px;*/
-      height: 100%;
-      width: 18%;
-      font-size: 1.4rem;
-      text-align: center;
-      color: #ffffff;
-    }
-
-    /*td加载图片*/
-    .td-1 {
-      /*width: 40px;*/
-      width: 1%;
-      /*<img src="../../../static/ManageHomePic/椭圆4.png">*/
-      /*background-image: url("../../../../static/ManageHomePic/椭圆4.png");*/
-      /*background-repeat: no-repeat;!**!*/
-      /*background-size: 80% 40%;*/
-      /*background-position: center;*/
-    }
-
-    span {
-      font-size:2.2rem;
-      font-weight: bolder;
-      color: #69d8d2;
-    }
-  }
-  @media screen and (max-width: 1366px) {
-    /*标题样式*/
-    .label {
-      font-size: 1.85rem;
-      color: #fff;
-      height: 8%;
-      width: 100%;
-      margin-left: 6%;
-    }
-
-    /*标题及用户数据表格样式*/
-    .f1 {
-      height: 31%;
-      width: 100%;
-    }
-
-    /*用户数据表格样式*/
-    .f2 {
-      /*height: 72px;*/
-      /*width: 450px;*/
-      /*margin-left: 20px*/
-      padding: 2% 1%;
-      height: 92%;
-      width: 100%;
-    }
-
-    /*echarts绘制区域样式*/
-    .f3 {
-      height: 68.3%;
-      width: 100%;
-      padding-top: 3%;
-    }
-
-    table {
-      width: 100%;
-      height: 100%;
-    }
-
-    td {
-      /*height: 72px;*/
-      /*width: 140px;*/
-      height: 100%;
-      width: 18%;
-      font-size: 1rem;
-      text-align: center;
-      color: #ffffff;
-    }
-
-    /*td加载图片*/
-    .td-1 {
-      /*width: 40px;*/
-      width: 1%;
-      /*<img src="../../../static/ManageHomePic/椭圆4.png">*/
-      /*background-image: url("../../../../static/ManageHomePic/椭圆4.png");*/
-      /*background-repeat: no-repeat;!**!*/
-      /*background-size: 80% 40%;*/
-      /*background-position: center;*/
-    }
-
-    span {
-      font-size:1.8rem;
-      font-weight: bolder;
-      color: #69d8d2;
-    }
-  }
-
-</style>
+<template>
+  <div>
+    <div class="f1">
+      <div class="label">客户</div>
+      <div class="f2">
+        <table>
+          <tr>
+            <td style="width: 3%"></td>
+            <td><span v-model="totaluser">{{totaluser}}</span><br/>现有总客户</td>
+            <td class="td-1"></td>
+            <td><span v-model="apply">{{apply}}</span><br/>开发客户数</td>
+            <td class="td-1"></td>
+            <td><span v-model="hiddenuser">{{hiddenuser}}</span><br/>潜在客户数</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div id="userdata" class="f3"></div>
+  </div>
+</template>
+
+<script>
+  import * as DataSql from '../../../stores/DataSql'
+  import co from 'co'
+
+  export default {
+    name: "user-module",
+    props: {
+      listenheight: String,
+      f_filiale:String,
+    },
+    data() {
+      return {
+        xc: '',
+        usernum: [],     //用户数据
+        usernumstring: [],
+        totaluser: '',   //总用户数
+        hiddenuser: '', //潜在用户数
+        unit: [],        //用户数单位
+        resdata: [],    //用户数据
+        resdatapie: [],  //饼图数据
+        resdataapply: 0,  //报建用户数
+        apply: '',  //报建用户数
+        timer:''
+      }
+    },
+    beforeDestroy() {
+      //清除定时器
+      clearInterval(this.timer);
+    },
+    methods: {
+      //绘图
+      setBar() {
+        this.xc = this.$echarts.init(document.getElementById('userdata'))
+        var scale=this.$parent.$parent.$parent.scale*1.1
+        DataSql.dataunitarray(this, 'usernum', 'usernumstring')
+        var echartData = this.usernum
+        var echartData1 = this.usernumstring
+        var rich = {
+          blue: {
+            color: '#15dce2',
+            fontSize: 12 * scale,
+            align: 'center',
+            padding: [15*scale, 0, 15*scale, 0]
+          }
+        }
+        var total = 0; //用户总和
+        var result = ''
+        echartData.forEach(function (value) {
+          total += value.value;
+        });
+        var index = total.toString().length
+        if (index > 4) {
+          var t = total.toString().substring(0, index - 4)
+          var s = total.toString().substring(index - 4, index - 3)
+          var l = total.toString().substring(index - 3, index - 2)
+          if (l > 4) {
+            s = eval(s + '+1')
+          }
+          if (s > 9) {
+            s = 0
+            t = eval(t + '+1')
+          }
+          result = t + '.' + s + '万'
+        } else {
+          result = total
+        }
+        this.xc.setOption({
+          title: [
+            {
+              text: '总客户数',
+              left: '45%',
+              top: '31%',
+              textStyle: {
+                color: '#ffffff',
+                fontSize: 10 * scale,
+
+              }
+            },
+            {
+              text: result,
+              left: '45%',
+              top: '38%',
+              padding: [10 * scale, 10 * scale],
+              textStyle: {
+                color: '#00e2ea',
+                fontSize: 10 * scale,
+
+              }
+            }],
+          tooltip: {
+            show: true,
+            alwaysShowContent:true,
+            backgroundColor:'rgba(2, 59, 63, 0.6)',
+            // borderColor :'rgba(13, 109, 180)',
+            borderWidth:0,
+            hideDelay:100,
+              padding:10*scale,
+              textStyle:{
+                  fontSize:16*scale
+              },
+            triggerOn:'mousemove',
+              padding:10*scale,
+              textStyle:{
+                  fontSize:16*scale
+              },
+            formatter: function (params) {
+              return  params.marker + " " + params.name + "  <span style=\"color:#e1e52a;font-weight: bolder\">&nbsp;&nbsp;" + params.value + "</span>"
+            },
+            enterable:true,
+            position: function(point, params, dom, rect, size) {
+              //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
+              var x = point[0]; //
+              var y = point[1];
+              var viewWidth = size.viewSize[0];
+              var viewHeight = size.viewSize[1];
+              var boxWidth = size.contentSize[0];
+              var boxHeight = size.contentSize[1];
+              var posX = 0; //x坐标位置
+              var posY = 0; //y坐标位置
+              if (x < boxWidth) { //左边放不开
+                posX = 5;
+              } else { //左边放的下
+                posX = x - boxWidth;
+              }
+
+              if (y < boxHeight) { //上边放不开
+                posY = 5;
+              } else { //上边放得下
+                posY = y - boxHeight;
+              }
+              return [posX, posY];
+            },
+            extraCssText:'width: auto;height:auto;',
+          },
+          legend: {
+            orient: 'horizontal',
+            icon: 'circle',
+            x: 'center',
+            bottom: '6%',
+            itemGap: 20,
+            itemWidth: 20 * scale,
+            itemHeight: 10 * scale,
+            textStyle: {
+              fontSize: 12 * scale,
+              // padding: [0, 0, 0, 4 * scale],
+              color: '#ffffff'
+            },
+            data: ['民用', '非民用', '民用锅炉']
+          },
+          series: [
+            // {
+            //   name: 'Line 1',
+            //   type: 'pie',
+            //   animation: false,
+            //   clockWise: false,
+            //   radius: ['35%', '36%'],
+            //   center: ['50%', '49%'],
+            //   itemStyle: {
+            //     normal: {
+            //       label: {
+            //         show: false
+            //       },
+            //       labelLine: {
+            //         show: false
+            //       },
+            //     }
+            //   },
+            //   hoverAnimation: false,
+            //   tooltip: {
+            //     show: false
+            //   },
+            //   data: [{
+            //     value: 100,
+            //     name: '02',
+            //     itemStyle: {
+            //       normal: {
+            //         color: '#29b7ff',//未完成的圆环的颜色
+            //         label: {
+            //           show: false
+            //         },
+            //         labelLine: {
+            //           show: false
+            //         }
+            //       }
+            //     }
+            //   }]
+            // },
+            {
+              name: '总客户数',
+              type: 'pie',
+              radius: ['40%', '60%'],
+              center: ['50%', '42%'],
+              minAngle: 15,//最小角度
+              startAngle: 300, //起始角度
+              hoverAnimation: false,
+              color: ['#6fd9d0', '#ede61f', '#6d9bdc'],
+              label: {
+                show:false
+                // normal: {
+                //   borderWidth: 20 * scale,
+                //   borderRadius: 4 * scale,
+                //   formatter: function (params, ticket, callback) {
+                //     for (var i = 0; i < echartData1.length; i++) {
+                //       if (echartData1[i].name == params.name) {
+                //         return '{blue|' + params.name + '}{blue|' + echartData1[i].value + '}\n';
+                //       }
+                //     }
+                //   },
+                //   padding: [0, -80 * scale],
+                //   rich: rich,
+                // }
+              },
+              labelLine: {
+                normal: {
+                  length: 25 * scale,
+                  length2: 90 * scale,
+                }
+              },
+              data: echartData
+            }
+            // , {
+            //   name: 'Line 2',
+            //   type: 'pie',
+            //   animation: false,
+            //   clockWise: false,
+            //   radius: ['54%', '55%'],
+            //   center: ['50%', '49%'],
+            //   itemStyle: {
+            //     normal: {
+            //       label: {
+            //         show: false
+            //       },
+            //       labelLine: {
+            //         show: false
+            //       },
+            //     }
+            //   },
+            //   hoverAnimation: false,
+            //   tooltip: {
+            //     show: false
+            //   },
+            //   data: [{
+            //     value: 100,
+            //     name: '02',
+            //     itemStyle: {
+            //       normal: {
+            //         color: '#29b7ff',//未完成的圆环的颜色
+            //         label: {
+            //           show: false
+            //         },
+            //         labelLine: {
+            //           show: false
+            //         }
+            //       }
+            //     }
+            //   }
+            //   ]
+            // }
+          ]
+        }, true)
+
+        let idx = 0;
+        var dataLen=echartData.length
+        var oroptionmapjsonr_charts=this.xc
+        this.timer=setInterval(()=>{
+          // 取消之前选中的图形
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'pieUnSelect',
+            seriesIndex: 0,
+            dataIndex: idx,
+          });
+
+          idx = (idx+ 1) % dataLen;
+          //console.log(app.currentIndex);
+          // 选中当前图形
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'pieSelect',
+            seriesIndex: 0,
+            dataIndex: idx
+          });
+          oroptionmapjsonr_charts.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: idx
+          });
+        }, 3000)
+      },
+      //请求后台数据
+      searchdata() {
+        let sqldata = DataSql.getData(this, 'user',{f_filiale:this.$parent.$parent.f_filiale}, 'resdata')
+        co(sqldata)
+        let sqldatapie = DataSql.getData(this,'useri',{f_filiale:this.$parent.$parent.f_filiale}, 'resdatapie')
+        co(sqldatapie)
+        let sqldataone = DataSql.getData(this,'userapply',{f_filiale:this.$parent.$parent.f_filiale}, 'resdataapply')
+        co(sqldataone)
+      },
+    },
+    watch: {
+      // 监听用户数据并进行绘图
+      'usernum': {
+        deep: true,
+        handler(val) {
+          var value = this.usernum[0].value + this.usernum[1].value + this.usernum[2].value
+          this.totaluser = DataSql.dataunit(value)
+          this.setBar()
+          this.$parent.loaddata++
+        }
+      },
+      //监听浏览器大小变化
+      'listenheight': {
+        deep: true,
+        handler(val) {
+          if (this.listenheight !== '') {
+            // this.$parent.$parent.changeresize(this.xc)
+          }
+        },
+      },
+      'resdata': {
+        deep: true,
+        handler(val) {
+          this.usernum = []
+          let result = {}
+          result.name = '民用'
+          result.value = this.resdata[0]['民用']
+          this.usernum.push(result)
+          let result1 = {}
+          result1.name = '非民用'
+          result1.value = this.resdata[0]['非民用']
+          this.usernum.push(result1)
+          let result2 = {}
+          result2.name = '民用锅炉'
+          result2.value = this.resdata[0]['民用锅炉']
+          this.usernum.push(result2)
+        }
+      },
+      'resdatapie': {
+        deep: true,
+        handler(val) {
+          var totalnum = 0
+          if(this.resdatapie<1){
+            this.hiddenuser=0
+            return
+          }
+          for (var i = 1; i < 6; i++) {
+            let item0 = {}
+            totalnum = totalnum + this.resdatapie[i].totalnum
+          }
+          console.log(totalnum,'ceshi')
+          this.hiddenuser = DataSql.dataunit(totalnum / 5)
+          console.log(this.hiddenuser ,'ceshi')
+        }
+      },
+      'resdataapply': {
+        deep: true,
+        handler(val) {
+
+          this.apply = DataSql.dataunit(this.resdataapply[0].totalnum)
+        }
+      },
+      'f_filiale'(){
+        clearInterval(this.timer);
+        this.searchdata()
+      }
+    },
+
+    ready() {
+      // 拼接sql，请求后台
+      this.searchdata()
+    }
+  }
+</script>
+
+<style scoped>
+
+  @media screen and (max-width: 1920px) {
+    /*标题样式*/
+    .label {
+      font-size: 1.85rem;
+      color: #fff;
+      height: 8%;
+      width: 100%;
+      margin-left: 6%;
+    }
+
+    /*标题及用户数据表格样式*/
+    .f1 {
+      height: 31%;
+      width: 100%;
+    }
+
+    /*用户数据表格样式*/
+    .f2 {
+      /*height: 72px;*/
+      /*width: 450px;*/
+      /*margin-left: 20px*/
+      padding: 2% 1%;
+      height: 92%;
+      width: 100%;
+    }
+
+    /*echarts绘制区域样式*/
+    .f3 {
+      height: 68.3%;
+      width: 100%;
+      padding-top: 3%;
+    }
+
+    table {
+      width: 100%;
+      height: 100%;
+    }
+
+    td {
+      /*height: 72px;*/
+      /*width: 140px;*/
+      height: 100%;
+      width: 18%;
+      font-size: 1.4rem;
+      text-align: center;
+      color: #ffffff;
+    }
+
+    /*td加载图片*/
+    .td-1 {
+      /*width: 40px;*/
+      width: 1%;
+      /*<img src="../../../static/ManageHomePic/椭圆4.png">*/
+      /*background-image: url("../../../../static/ManageHomePic/椭圆4.png");*/
+      /*background-repeat: no-repeat;!**!*/
+      /*background-size: 80% 40%;*/
+      /*background-position: center;*/
+    }
+
+    span {
+      font-size:2.2rem;
+      font-weight: bolder;
+      color: #69d8d2;
+    }
+  }
+  @media screen and (max-width: 1366px) {
+    /*标题样式*/
+    .label {
+      font-size: 1.85rem;
+      color: #fff;
+      height: 8%;
+      width: 100%;
+      margin-left: 6%;
+    }
+
+    /*标题及用户数据表格样式*/
+    .f1 {
+      height: 31%;
+      width: 100%;
+    }
+
+    /*用户数据表格样式*/
+    .f2 {
+      /*height: 72px;*/
+      /*width: 450px;*/
+      /*margin-left: 20px*/
+      padding: 2% 1%;
+      height: 92%;
+      width: 100%;
+    }
+
+    /*echarts绘制区域样式*/
+    .f3 {
+      height: 68.3%;
+      width: 100%;
+      padding-top: 3%;
+    }
+
+    table {
+      width: 100%;
+      height: 100%;
+    }
+
+    td {
+      /*height: 72px;*/
+      /*width: 140px;*/
+      height: 100%;
+      width: 18%;
+      font-size: 1rem;
+      text-align: center;
+      color: #ffffff;
+    }
+
+    /*td加载图片*/
+    .td-1 {
+      /*width: 40px;*/
+      width: 1%;
+      /*<img src="../../../static/ManageHomePic/椭圆4.png">*/
+      /*background-image: url("../../../../static/ManageHomePic/椭圆4.png");*/
+      /*background-repeat: no-repeat;!**!*/
+      /*background-size: 80% 40%;*/
+      /*background-position: center;*/
+    }
+
+    span {
+      font-size:1.8rem;
+      font-weight: bolder;
+      color: #69d8d2;
+    }
+  }
+
+</style>