manage-client 3.1.26 → 3.1.27

package/src/components/daping/DataManagement.vue

@@ -1,703 +1,543 @@
-<template>
-
-
-    <div class="flex-row" style="height: 44%">
-      <div id="top-left">
-        <div class="flex">
-
-          <div class="flex">
-            <div class="flex-row" style="height: 15%">
-              <p class="top-left-title">城市门站:</p>
-            </div>
-            <div class="flex call" style="height: 90%">
-              <table>
-<!--                <thead  style="border:1px solid #227ad8;height: 25px;width:100%;padding-top: 2px;background-color: #002f45">-->
-                <thead class="thead"  style=" border: solid 1px #0093ff;">
-                  <tr>
-                    <th class="font-14-medium1 col-sm-2">城区</th>
-                    <th class="font-14-medium1 col-sm-3">进站压力(Mpa)</th>
-                    <th class="font-14-medium1 col-sm-3">出站压力(Mpa)</th>
-                    <th class="font-14-medium1 col-sm-3">瞬时流量(Nm³/h)</th>
-<!--                    <th class="font-14-medium1 col-sm-3">累计流量</th>-->
-                  </tr>
-
-                </thead>
-                <tbody >
-                <tr v-for="item in datas1" style="margin-top: 10px;">
-                  <td>{{item.f_name}}</td>
-                  <td>{{item.f_input_pressure}}</td>
-                  <td>{{item.f_output_pressure}}</td>
-                  <td>{{item.f_instantaneous_flow}}</td>
-<!--                  <td>{{item.f_cumulative_flow}}</td>-->
-                </tr>
-                </tbody>
-              </table>
-
-
-            </div>
-          </div>
-          <div class="flex" style="height: 30%">
-<!--            <p class="top-left-title"  style="height: 5%">高中压调压站:</p>-->
-<!--            <div class="flex" style="height: 90%">-->
-<!--              <table>-->
-<!--                &lt;!&ndash;                <thead  style="border:1px solid #227ad8;height: 25px;width:100%;padding-top: 2px;background-color: #002f45">&ndash;&gt;-->
-<!--                <thead class="thead"  style=" border: solid 1px #0093ff;">-->
-<!--                <tr>-->
-<!--                  <th class="font-14-medium1 col-sm-2">城区</th>-->
-<!--                  <th class="font-14-medium1 col-sm-3">进站压力</th>-->
-<!--                  <th class="font-14-medium1 col-sm-3">出站压力</th>-->
-<!--                  <th class="font-14-medium1 col-sm-3">瞬时流量</th>-->
-<!--                  <th class="font-14-medium1 col-sm-3">累计流量</th>-->
-<!--                </tr>-->
-
-<!--                </thead>-->
-<!--                <tbody class="scroll-content">-->
-<!--                <tr v-for="item in dane2"><td>{{item.f_name}}</td><td>{{item.f_input_pressure}}</td><td>{{item.f_output_pressure}}</td><td>{{item.f_instantaneous_flow}}</td><td>{{item.f_cumulative_flow}}</td></tr>-->
-<!--                </tbody>-->
-<!--              </table>-->
-
-
-<!--            </div>-->
-          </div>
-          <div class="flex">
-<!--            <p class="top-left-title"  style="height: 5%">热源厂:</p>-->
-<!--            <div class="flex" style="height: 90%">-->
-<!--              <table>-->
-<!--                &lt;!&ndash;                <thead  style="border:1px solid #227ad8;height: 25px;width:100%;padding-top: 2px;background-color: #002f45">&ndash;&gt;-->
-<!--                <thead class="thead"  style=" border: solid 1px #0093ff;">-->
-<!--                <tr>-->
-<!--                  <th class="font-14-medium1 col-sm-2">城区</th>-->
-<!--                  <th class="font-14-medium1 col-sm-3">进站压力</th>-->
-<!--                  <th class="font-14-medium1 col-sm-3">出站压力</th>-->
-<!--                  <th class="font-14-medium1 col-sm-3">瞬时流量</th>-->
-<!--                  <th class="font-14-medium1 col-sm-3">累计流量</th>-->
-<!--                </tr>-->
-
-<!--                </thead>-->
-<!--                <tbody class="scroll-content">-->
-<!--                <tr v-for="item in dane3"><td>{{item.f_name}}</td><td>{{item.f_input_pressure}}</td><td>{{item.f_output_pressure}}</td><td>{{item.f_instantaneous_flow}}</td><td>{{item.f_cumulative_flow}}</td></tr>-->
-<!--                </tbody>-->
-<!--              </table>-->
-
-<!--              &lt;!&ndash;&lt;!&ndash;              <div class="flex-row scada-title" style="background:rgba(1,44,69,1)" v-for="item in items">&ndash;&gt;&ndash;&gt;-->
-<!--              &lt;!&ndash;&lt;!&ndash;                <span  class="font-16 flex-1">{{item.ssn}}</span>&ndash;&gt;&ndash;&gt;-->
-<!--              &lt;!&ndash;&lt;!&ndash;                <span  class="font-16 flex-1">{{item.sbsjfl}}</span>&ndash;&gt;&ndash;&gt;-->
-<!--              &lt;!&ndash;&lt;!&ndash;                <span  class="font-16 flex-1">{{item.tb}}</span>&ndash;&gt;&ndash;&gt;-->
-<!--              &lt;!&ndash;&lt;!&ndash;              </div>&ndash;&gt;&ndash;&gt;-->
-<!--              &lt;!&ndash;              <div class="flex-row" style="background:rgba(1,44,69,1)">&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-2">12312</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-3">412412</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-3">124124</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-3">22222</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-3">3333</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;              </div>&ndash;&gt;-->
-<!--              &lt;!&ndash;              <div class="flex-row" style="background:rgba(1,44,69,1)">&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-2">111111</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-3">222222</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-3">333333</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-3">444444444</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-3">55555555555</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;              </div>&ndash;&gt;-->
-<!--              &lt;!&ndash;              <div class="flex-row" style="background:rgba(1,44,69,1)">&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-2">111111</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-3">222222</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-3">333333</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-3">444444444</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;                <span  class="font-16 col-sm-3">55555555555</span>&ndash;&gt;-->
-<!--              &lt;!&ndash;              </div>&ndash;&gt;-->
-
-
-<!--            </div>-->
-          </div>
-        </div>
-      </div>
-      <div id="top-mid" >
-        <qinhua-map  class="qinhuamap" mode="1" idname="shanximap"></qinhua-map>
-<!--          <gmap  :point="point"> </gmap>-->
-      </div>
-      <div id="top-right" >
-        <div class="flex" >
-          <div class="background-content-img scade-box col-sm-12 col-md-12"  style="height: 30%">
-            <div class="flex-row" style="height: 3%;margin-top: 1%;margin-left: 5%">
-              <p style="color:white;padding-left: 40%;
-    margin-top: -1%;">换表数量</p>
-            </div>
-            <div class="flex-row">
-              <div class="row col-sm-3" style="padding: 20px 0px 10px 30px;">
-                <span class="font-14-medium1">上周物联网表</span>
-                <p style="color:#00f6ff"><span class="scada-font-title">{{changeMeter.wlwnum}}</span></p>
-
-                <!--              <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
-                <!--              <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
-              </div>
-              <div class="row col-sm-3" style="padding: 20px 0px 10px 30px;">
-                <span class="font-14-medium1">上周射频表</span>
-                <p style="color:#f27c79"><span class="scada-font-title">{{changeMeter.spnum}}</span></p>
-
-                <!--              <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
-                <!--              <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
-              </div>
-              <div class="row col-sm-6" style="padding: 20px 0px 10px 30px;">
-                <span class="font-14-medium1">全年累计换表数量(所有表型)</span>
-                <p style="color:#d5a329"><span class="scada-font-title">{{changeMeter.totalnum}}</span></p>
-
-                <!--              <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
-                <!--              <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
-              </div>
-            </div>
-
-
-          </div>
-          <div class="background-content-img1 scade-box col-sm-12 col-md-12"  style="height: 65%;margin-top: 4%">
-            <div class="flex-row" style="height: 3%;margin-top: 1%;margin-left: 5%">
-              <p style="color:white;padding-left: 40%;
-    margin-top: -1%;">分户挂表</p>
-            </div>
-            <div class="flex">
-              <div class="row" style="height: 45%">
-                <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
-                  <span class="font-14-medium1">当月工单总数</span>
-                  <p style="color:#00f6ff"><span class="scada-font-title">{{ changeMeterByType.monthToatl }}</span></p>
-
-
-                </div>
-                <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
-                  <span class="font-14-medium1">安装大于10天</span>
-                  <p style="color:#f27c79"><span class="scada-font-title">{{ changeMeterByType.tenType }}</span></p>
-
-                </div>
-                <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
-                  <span class="font-14-medium1">不具备安装</span>
-                  <p style="color:#d5a329"><span class="scada-font-title">{{ changeMeterByType.dnh }}</span></p>
-
-                  <!--              <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
-                  <!--              <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
-                </div>
-              </div>
-              <div class="row"  style="height: 45%">
-
-                <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
-                  <span class="font-14-medium1">未完工</span>
-                  <p style="color:#8969ff"><span class="scada-font-title">{{ changeMeterByType.unfinished }}</span></p>
-
-                  <!--              <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
-                  <!--              <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
-                </div>
-                <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
-                </div>
-                <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
-                  <span class="font-14-medium1">工商安检数量</span>
-                  <p style="color:#0a9aff"><span class="scada-font-title">{{ changeMeterByType.gstotal }}</span></p>
-
-                </div>
-              </div>
-            </div>
-
-
-          </div>
-        </div>
-
-      </div>
-    </div>
-    <div class="flex-row " style="height: 47%;margin-top: 1em;">
-
-      <div class="flex background-left-bottom" style="height: 100%;width: 50%">
-
-        <div class="flex-row" style="width: 100%;height:50%">
-
-          <div style="width:35%;height:100%;">
-            <sell-echarts class=""></sell-echarts>
-          </div>
-          <div   style="width:65%;height:100%;">
-            <bar-chart></bar-chart>
-          </div>
-        </div>
-        <div class="flex-row" style="width: 100%;height:50%">
-          <div id="pie-one" >
-            <pie-sell></pie-sell>
-          </div>
-          <div  style="width:65%;height: 100%">
-            <ring-sell></ring-sell>
-          </div>
-        </div>
-      </div>
-      <div class="flex background-left-bottom" style="height: 100%;width: 48%;margin-left:1%">
-        <qh-call-center></qh-call-center>
-      </div>
-    </div>
-
-
-
-</template>
-
-<script>
-import {HttpResetClass} from 'vue-client'
-export default {
-  title: '数据展示',
-  data() {
-    return{
-      sumnum:0,
-      showChart1 : true,
-      showChart2 : false,
-      moveDistance:'15',
-      viewHeight:'400px',
-      point:{
-        url:'getDapingStationMap',
-        data:{}
-      },
-      dane1:[],
-      dane2:[],
-      dane3:[],
-      datass:[
-        {fen:'汉投',name:'SCA系统2',money:10,state:'在建',state1:'在建'},
-        {fen:'汉投1',name:'SCA系统2',money:21,state:'在建',state1:'在建'},
-        {fen:'汉投2',name:'SDA系统3',money:131,state:'在建',state1:'在建'},
-        {fen:'汉投3',name:'SDA系统4',money:41,state:'在建',state1:'在建'},
-        {fen:'汉投4',name:'SDA系统4',money:51,state:'在建',state1:'在建'},
-        {fen:'汉投5',name:'SCA系统22',money:81,state:'在建',state1:'在建'},
-        {fen:'汉投6',name:'SDA系统4',money:21,state:'在建',state1:'在建'},
-        {fen:'汉投7',name:'SDA系统21',money:221,state:'在建',state1:'在建'}
-
-      ],
-      datas1:[],
-      datas2:[],
-      datas3:[],
-      //焕表
-      changeMeter :{},
-      changeMeterByType :{},
-    }
-  },
-  methods: {
-    async resize() {
-      console.log('穿过来的值')
-      this.changeshow = !this.changeshow
-      console.log(this.changeshow)
-      let http = new HttpResetClass()
-      // await http.load('post', '/rs/sql/getRegulatorTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
-      //   console.log('高中压调压站---------------')
-      //   console.log(res)
-      //   for (let i = 0; i < res.data.length; i++) {
-      //     console.log(res.data[i])
-      //     let info = {
-      //       f_name : res.data[i].f_name,
-      //       f_cumulative_flow : res.data[i].f_cumulative_flow,
-      //       f_input_pressure : res.data[i].f_input_pressure,
-      //       f_instantaneous_flow : res.data[i].f_instantaneous_flow,
-      //       f_output_pressure : res.data[i].f_output_pressure
-      //     }
-      //     this.datas2.push(info)
-      //   }
-      // })
-      // await http.load('post', '/rs/sql/getHeatStationTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
-      //   console.log('热源厂---------------')
-      //   console.log(res)
-      //   for (let i = 0; i < res.data.length; i++) {
-      //     console.log(res.data[i])
-      //     let info = {
-      //       f_name : res.data[i].f_name,
-      //       f_cumulative_flow : res.data[i].f_cumulative_flow,
-      //       f_input_pressure : res.data[i].f_input_pressure,
-      //       f_instantaneous_flow : res.data[i].f_instantaneous_flow,
-      //       f_output_pressure : res.data[i].f_output_pressure
-      //     }
-      //     this.datas3.push(info)
-      //   }
-      // })
-      await http.load('post', '/rs/sql/getCityStationTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
-        console.log('城市门站---------------')
-        console.log(res)
-        for (let i = 0; i < res.data.length; i++) {
-          console.log(res.data[i])
-          let info = {
-              f_name : res.data[i].f_name,
-              f_cumulative_flow : res.data[i].f_cumulative_flow,
-              f_input_pressure : res.data[i].f_input_pressure,
-              f_instantaneous_flow : res.data[i].f_instantaneous_flow,
-              f_output_pressure : res.data[i].f_output_pressure
-            }
-          this.datas1.push(info)
-        }
-      console.log('this.datas1===================')
-      console.log(this.datas1)
-      })
-      //换表
-      await http.load('post', '/rs/sql/getChangeMeter', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
-        console.log('换表~~~~~~~~~~~~~~~~')
-        let info ={
-          wlwnum : res.data[0].wlwnum,
-          spnum : res.data[0].spnum,
-          totalnum : res.data[0].totalnum
-        }
-
-        this.changeMeter =info
-        console.log(this.changeMeter)
-      })
-      //分户换表
-      await http.load('post', '/rs/sql/getChangeMeterByType', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
-        console.log('分户换表~~~~~~~~~~~~~~~~')
-        console.log( res.data[0])
-        let info ={
-          monthToatl : res.data[0].monthtoatl,
-          tenType : res.data[0].tentype,
-          dnh : res.data[0].dnh,
-          unfinished : res.data[0].unfinished,
-          gstotal : res.data[0].gstotal,
-        }
-        this.changeMeterByType =info
-        console.log(this.changeMeterByType)
-      })
-      var self=this
-      var index=-1
-
-
-      // setInterval(()=>{
-      //   self.dane1.splice(0,self.dane1.length)
-      //   index=(index+1)%self.datas1.length
-      //   var maxid=0
-      //   if(index>self.datas1.length-9){
-      //     maxid=self.datas1.length-1
-      //   }else {
-      //     maxid=index+8
-      //   }
-      //   var i=0
-      //   self.datas1.forEach(function (s) {
-      //     if(i>=index&&i<=maxid){
-      //       self.dane1.push(s)
-      //     }
-      //     i++
-      //   })
-      //   var s=this.dane1.length
-      //   if(this.dane1.length<9){
-      //     for(var i =0;i<9-s;i++){
-      //       this.dane1.push(  {f_name:'',f_cumulative_flow:'',f_input_pressure:'',f_instantaneous_flow:'', f_output_pressure:''},)
-      //     }
-      //   }
-      // }, 3000)
-
-      // setInterval(()=>{
-      //   self.dane2.splice(0,self.dane2.length)
-      //   index=(index+1)%self.datas2.length
-      //   var maxid=0
-      //   if(index>self.datas2.length-9){
-      //     maxid=self.datas2.length-1
-      //   }else {
-      //     maxid=index
-      //   }
-      //   var i=0
-      //   self.datas2.forEach(function (s) {
-      //     if(i>=index&&i<=maxid){
-      //       self.dane2.push(s)
-      //     }
-      //     i++
-      //   })
-      //   var s=this.dane2.length
-      //   if(this.dane2.length<9){
-      //     for(var i =0;i<9-s;i++){
-      //
-      //       this.dane2.push(  {f_name:'',f_cumulative_flow:'',f_input_pressure:'',f_instantaneous_flow:'', f_output_pressure:''},)
-      //     }
-      //   }
-      // }, 2000)
-      // setInterval(()=>{
-      //   self.dane3.splice(0,self.dane3.length)
-      //   index=(index+1)%self.datas3.length
-      //   var maxid=0
-      //   if(index>self.datas3.length-9){
-      //     maxid=self.datas3.length-1
-      //   }else {
-      //     maxid=index
-      //   }
-      //   var i=0
-      //   self.datas3.forEach(function (s) {
-      //     if(i>=index&&i<=maxid){
-      //       self.dane3.push(s)
-      //     }
-      //     i++
-      //   })
-      //   var s=this.dane3.length
-      //   if(this.dane3.length<9){
-      //     for(var i =0;i<9-s;i++){
-      //       this.dane3.push(  {fen:'',name:'',money:'',state:''},)
-      //     }
-      //   }
-      // }, 2000)
-
-    },
-
-
-
-    showCharts(title) {
-      this.$emit("showCharts", title)
-    }
-    },
-  ready () {
-    this.resize()
-
-  },
-
-  props: ['changeshow'],
-  computed: {
-    top() {
-      console.log('ssss')
-      return -this.activeIndex * this.moveDistance + "px"; //定义移动的单元高度
-    },
-  },
-}
-</script>
-<style scoped>
-@media screen and (max-width: 1920px) {
-  .main {
-    height: 100%;
-    padding: 1em;
-    flex: 1 1 auto;
-    flex-direction: column;
-    display: flex;
-  }
-  .top-left-title{
-      color: #ffc21f;
-    font-size: 13px;
-  }
-
-  table {
-    /*设置相邻单元格的边框间的距离*/
-    border-spacing: 0;
-    /*表格设置合并边框模型*/
-    border-collapse: collapse;
-    text-align: center;
-    /*background-color: red;*/
-  }
-  /*关键设置 tbody出现滚动条*/
-  table tbody {
-    display: block;
-    height: 70px;
-
-  }
-
-
-
-
-  table thead,
-  tbody tr {
-    display: table;
-    width: 100%;
-    table-layout: fixed;
-    border: 1px;
-    background-color: #012C45;
-    margin-top: 2px;
-  }
-  tbody tr td {
-    text-align: left;
-    color: #00F6FF;
-  }
-
-
-
-
-
-
-  /*关键设置 tbody出现滚动条*/
-  #tableLast tbody {
-    display: block;
-    height: 45px;
-
-  }
-
-  #tableLast thead,
-  #tbodyLast tr {
-    display: table;
-    width: 100%;
-    table-layout: fixed;
-    border: 1px;
-    background-color: #012C45;
-    margin-top: 4px;
-  }
-  #tbodyLast tr td {
-    text-align: left;
-    color: #00F6FF;
-  }
-
-
-
-  .font-14-medium1{
-    color: #ffffff;
-    line-height: 24px;
-    font-size: 16px;
-    font-family: font-pingfang-medium;
-  }
-  .scada-font-title {
-    margin-right: 1em;
-    font-family: tRends;
-    font-size: 25px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 30px;
-    letter-spacing: 0px;
-  }
-  .font-14 {
-    font-size: 14px;
-    font-family: tRends;
-  }
-  #top-left {
-    /*padding: 1em;*/
-    width: 32%;
-    height: 100%;
-  }
-
-  #top-mid {
-    /*padding: 1em;*/
-    width: 30%;
-    height: 100%;
-  }
-
-  #top-right {
-    width: 37%;
-    height: 100%;
-  }
-
-  .title-font {
-    font-family: HYk2gj;
-    font-size: 40px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 26px;
-    letter-spacing: 2px;
-    color: #ffffff;
-  }
-
-  .title-main {
-    margin: 0 auto;
-  }
-
-  .flex-inline {
-    display: inline-flex;
-    justify-content: space-around;
-  }
-
-  #pie-one {
-    height: 100%;
-    width: 35%;
-  }
-
-  #weiruhu {
-    font-family: tRends;
-    font-size: 24px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 35px;
-    letter-spacing: 0px;
-    color: #00f6ff;
-  }
-
-  #anjian {
-    font-family: tRENDS;
-    font-size: 24px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 35px;
-    letter-spacing: 0px;
-    color: #ffc21f;
-  }
-
-  .qinhuamap {
-    position: absolute;
-    top: 2%;
-    left: 35%;
-    width: 28%;
-    height: 57%;
-  }
-  .scroll-content {
-    position: relative;
-    transition: top 0.825s;
-  }
-
-}
-@media screen and (max-width: 1440px) {
-  .main {
-    height: 100%;
-    padding: 1em;
-    flex: 1 1 auto;
-    flex-direction: column;
-    display: flex;
-  }
-
-  #top-left {
-    /*padding: 1em;*/
-    width: 32%;
-    height: 100%;
-  }
-
-  #top-mid {
-    /*padding: 1em;*/
-    width: 30%;
-    height: 100%;
-  }
-
-  #top-right {
-    width: 37%;
-    height: 100%;
-  }
-
-  .title-font {
-    font-family: HYk2gj;
-    font-size: 30px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 22px;
-    letter-spacing: 2px;
-    color: #ffffff;
-  }
-
-  .title-main {
-    margin: 0 auto;
-  }
-
-  .flex-inline {
-    display: inline-flex;
-    justify-content: space-around;
-  }
-
-  #pie-one {
-    height: 100%;
-    width: 35%;
-  }
-
-  #weiruhu {
-    font-family: tRends;
-    font-size: 18px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 22px;
-    letter-spacing: 0px;
-    color: #00f6ff;
-  }
-
-  #anjian {
-    font-family: tRENDS;
-    font-size: 18px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 22px;
-    letter-spacing: 0px;
-    color: #ffc21f;
-  }
-
-  .qinhuamap {
-    position: absolute;
-    top: 2%;
-    left: 35%;
-    width: 28%;
-    height: 57%;
-  }
-  .font-14-medium{
-    color: #ffffff !important;
-    line-height: 18px;
-    font-size: 12px;
-    font-family: font-pingfang-medium;
-  }
-  .scroll-content {
-    position: relative;
-    transition: top 0.825s;
-  }
-}
-</style>
-
+<template>
+
+
+    <div class="flex-row" style="height: 44%">
+      <div id="top-left">
+        <div class="flex">
+          <net-work-ping></net-work-ping>
+        </div>
+      </div>
+      <div id="top-mid" >
+        <wu-hai-map  class="qinhuamap" mode="1" idname="wuhaimap"></wu-hai-map>
+<!--          <gmap  :point="point"> </gmap>-->
+      </div>
+      <div id="top-right" >
+
+          <div class="flex background-left-bottom">
+
+            <div class="flex" >
+              <div class="flex-row" style="height: 40%">
+
+                <div  class="auto col-sm-12" style="width: 40%;height: 100%;padding: 1em" >
+                  <div class=" col-sm-12 auto" style="padding-left: 1em">
+                    <span class="font-title">安检</span>
+                  </div>
+                  <div  class="flex-inline col-sm-6 auto" >
+                    <span id="weiruhu">121万</span>
+                  </div>
+                  <div  class="flex-inline col-sm-6 auto" >
+                    <span id="anjian">73万</span>
+                  </div>
+                  <div class="flex-inline col-sm-6 auto" >
+                    <span class="normal-font" >三年未入户总数</span>
+                  </div>
+
+                  <div class="flex-inline col-sm-6 auto" >
+                    <span class="normal-font" >计划安检量</span>
+                  </div>
+                </div>
+                <div style="width: 60%">
+                  <ring-safecheck-wh></ring-safecheck-wh>
+                </div>
+              </div>
+              <div  style="height: 58%">
+                <safe-check-wh></safe-check-wh>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+    </div>
+    <div class="flex-row " style="height: 47%;margin-top: 1em;">
+
+      <div class="flex background-left-bottom" style="height: 100%;width: 50%">
+
+        <div class="flex-row" style="width: 100%;height:50%">
+
+          <div style="width:35%;height:100%;">
+            <sell-echarts class=""></sell-echarts>
+          </div>
+          <div   style="width:65%;height:100%;">
+            <bar-chart1></bar-chart1>
+          </div>
+        </div>
+        <div class="flex-row" style="width: 100%;height:50%">
+          <div id="pie-one" >
+            <pie-sell></pie-sell>
+          </div>
+          <div  style="width:65%;height: 100%">
+            <ring-sell></ring-sell>
+          </div>
+        </div>
+      </div>
+      <div class="flex background-left-bottom" style="height: 100%;width: 48%;margin-left:1%">
+        <qh-call-center></qh-call-center>
+      </div>
+    </div>
+
+
+
+</template>
+
+<script>
+import {HttpResetClass} from 'vue-client'
+export default {
+  title: '数据展示',
+  data() {
+    return{
+      sumnum:0,
+      showChart1 : true,
+      showChart2 : false,
+      moveDistance:'15',
+      viewHeight:'400px',
+      point:{
+        url:'getDapingStationMap',
+        data:{}
+      },
+      dane1:[],
+      dane2:[],
+      dane3:[],
+      datass:[],
+      datas1:[],
+      datas2:[],
+      datas3:[],
+      //焕表
+      changeMeter :{},
+      changeMeterByType :{},
+    }
+  },
+  methods: {
+    async resize() {
+      console.log('穿过来的值')
+      this.changeshow = !this.changeshow
+      console.log(this.changeshow)
+      let http = new HttpResetClass()
+      // await http.load('post', '/rs/sql/getRegulatorTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
+      //   console.log('高中压调压站---------------')
+      //   console.log(res)
+      //   for (let i = 0; i < res.data.length; i++) {
+      //     console.log(res.data[i])
+      //     let info = {
+      //       f_name : res.data[i].f_name,
+      //       f_cumulative_flow : res.data[i].f_cumulative_flow,
+      //       f_input_pressure : res.data[i].f_input_pressure,
+      //       f_instantaneous_flow : res.data[i].f_instantaneous_flow,
+      //       f_output_pressure : res.data[i].f_output_pressure
+      //     }
+      //     this.datas2.push(info)
+      //   }
+      // })
+      // await http.load('post', '/rs/sql/getHeatStationTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
+      //   console.log('热源厂---------------')
+      //   console.log(res)
+      //   for (let i = 0; i < res.data.length; i++) {
+      //     console.log(res.data[i])
+      //     let info = {
+      //       f_name : res.data[i].f_name,
+      //       f_cumulative_flow : res.data[i].f_cumulative_flow,
+      //       f_input_pressure : res.data[i].f_input_pressure,
+      //       f_instantaneous_flow : res.data[i].f_instantaneous_flow,
+      //       f_output_pressure : res.data[i].f_output_pressure
+      //     }
+      //     this.datas3.push(info)
+      //   }
+      // })
+      // await http.load('post', '/rs/sql/getCityStationTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
+      //   console.log('城市门站---------------')
+      //   console.log(res)
+      //   for (let i = 0; i < res.data.length; i++) {
+      //     console.log(res.data[i])
+      //     let info = {
+      //         f_name : res.data[i].f_name,
+      //         f_cumulative_flow : res.data[i].f_cumulative_flow,
+      //         f_input_pressure : res.data[i].f_input_pressure,
+      //         f_instantaneous_flow : res.data[i].f_instantaneous_flow,
+      //         f_output_pressure : res.data[i].f_output_pressure
+      //       }
+      //     this.datas1.push(info)
+      //   }
+      // console.log('this.datas1===================')
+      // console.log(this.datas1)
+      // })
+      // //换表
+      // await http.load('post', '/rs/sql/getChangeMeter', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
+      //   console.log('换表~~~~~~~~~~~~~~~~')
+      //   let info ={
+      //     wlwnum : res.data[0].wlwnum,
+      //     spnum : res.data[0].spnum,
+      //     totalnum : res.data[0].totalnum
+      //   }
+      //
+      //   this.changeMeter =info
+      //   console.log(this.changeMeter)
+      // })
+      // //分户换表
+      // await http.load('post', '/rs/sql/getChangeMeterByType', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
+      //   console.log('分户换表~~~~~~~~~~~~~~~~')
+      //   console.log( res.data[0])
+      //   let info ={
+      //     monthToatl : res.data[0].monthtoatl,
+      //     tenType : res.data[0].tentype,
+      //     dnh : res.data[0].dnh,
+      //     unfinished : res.data[0].unfinished,
+      //     gstotal : res.data[0].gstotal,
+      //   }
+      //   this.changeMeterByType =info
+      //   console.log(this.changeMeterByType)
+      // })
+      var self=this
+      var index=-1
+
+
+      // setInterval(()=>{
+      //   self.dane1.splice(0,self.dane1.length)
+      //   index=(index+1)%self.datas1.length
+      //   var maxid=0
+      //   if(index>self.datas1.length-9){
+      //     maxid=self.datas1.length-1
+      //   }else {
+      //     maxid=index+8
+      //   }
+      //   var i=0
+      //   self.datas1.forEach(function (s) {
+      //     if(i>=index&&i<=maxid){
+      //       self.dane1.push(s)
+      //     }
+      //     i++
+      //   })
+      //   var s=this.dane1.length
+      //   if(this.dane1.length<9){
+      //     for(var i =0;i<9-s;i++){
+      //       this.dane1.push(  {f_name:'',f_cumulative_flow:'',f_input_pressure:'',f_instantaneous_flow:'', f_output_pressure:''},)
+      //     }
+      //   }
+      // }, 3000)
+
+      // setInterval(()=>{
+      //   self.dane2.splice(0,self.dane2.length)
+      //   index=(index+1)%self.datas2.length
+      //   var maxid=0
+      //   if(index>self.datas2.length-9){
+      //     maxid=self.datas2.length-1
+      //   }else {
+      //     maxid=index
+      //   }
+      //   var i=0
+      //   self.datas2.forEach(function (s) {
+      //     if(i>=index&&i<=maxid){
+      //       self.dane2.push(s)
+      //     }
+      //     i++
+      //   })
+      //   var s=this.dane2.length
+      //   if(this.dane2.length<9){
+      //     for(var i =0;i<9-s;i++){
+      //
+      //       this.dane2.push(  {f_name:'',f_cumulative_flow:'',f_input_pressure:'',f_instantaneous_flow:'', f_output_pressure:''},)
+      //     }
+      //   }
+      // }, 2000)
+      // setInterval(()=>{
+      //   self.dane3.splice(0,self.dane3.length)
+      //   index=(index+1)%self.datas3.length
+      //   var maxid=0
+      //   if(index>self.datas3.length-9){
+      //     maxid=self.datas3.length-1
+      //   }else {
+      //     maxid=index
+      //   }
+      //   var i=0
+      //   self.datas3.forEach(function (s) {
+      //     if(i>=index&&i<=maxid){
+      //       self.dane3.push(s)
+      //     }
+      //     i++
+      //   })
+      //   var s=this.dane3.length
+      //   if(this.dane3.length<9){
+      //     for(var i =0;i<9-s;i++){
+      //       this.dane3.push(  {fen:'',name:'',money:'',state:''},)
+      //     }
+      //   }
+      // }, 2000)
+
+    },
+
+
+
+    showCharts(title) {
+      this.$emit("showCharts", title)
+    }
+    },
+  ready () {
+    this.resize()
+
+  },
+
+  props: ['changeshow'],
+  computed: {
+    top() {
+      console.log('ssss')
+      return -this.activeIndex * this.moveDistance + "px"; //定义移动的单元高度
+    },
+  },
+}
+</script>
+<style scoped>
+@media screen and (max-width: 1920px) {
+  .main {
+    height: 100%;
+    padding: 1em;
+    flex: 1 1 auto;
+    flex-direction: column;
+    display: flex;
+  }
+  .top-left-title{
+      color: #ffc21f;
+    font-size: 13px;
+  }
+
+  table {
+    /*设置相邻单元格的边框间的距离*/
+    border-spacing: 0;
+    /*表格设置合并边框模型*/
+    border-collapse: collapse;
+    text-align: center;
+    /*background-color: red;*/
+  }
+  /*关键设置 tbody出现滚动条*/
+  table tbody {
+    display: block;
+    height: 70px;
+
+  }
+
+
+
+
+  table thead,
+  tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+    border: 1px;
+    background-color: #012C45;
+    margin-top: 2px;
+  }
+  tbody tr td {
+    text-align: left;
+    color: #00F6FF;
+  }
+
+
+
+
+
+
+  /*关键设置 tbody出现滚动条*/
+  #tableLast tbody {
+    display: block;
+    height: 45px;
+
+  }
+
+  #tableLast thead,
+  #tbodyLast tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+    border: 1px;
+    background-color: #012C45;
+    margin-top: 4px;
+  }
+  #tbodyLast tr td {
+    text-align: left;
+    color: #00F6FF;
+  }
+
+
+
+  .font-14-medium1{
+    color: #ffffff;
+    line-height: 24px;
+    font-size: 16px;
+    font-family: font-pingfang-medium;
+  }
+  .scada-font-title {
+    margin-right: 1em;
+    font-family: tRends;
+    font-size: 25px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 30px;
+    letter-spacing: 0px;
+  }
+  .font-14 {
+    font-size: 14px;
+    font-family: tRends;
+  }
+  #top-left {
+    /*padding: 1em;*/
+    width: 40%;
+    height: 100%;
+  }
+
+  #top-mid {
+    /*padding: 1em;*/
+    width: 20%;
+    height: 100%;
+  }
+
+  #top-right {
+    width: 40%;
+    height: 100%;
+  }
+
+  .title-font {
+    font-family: HYk2gj;
+    font-size: 40px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 26px;
+    letter-spacing: 2px;
+    color: #ffffff;
+  }
+
+  .title-main {
+    margin: 0 auto;
+  }
+
+  .flex-inline {
+    display: inline-flex;
+    justify-content: space-around;
+  }
+
+  #pie-one {
+    height: 100%;
+    width: 35%;
+  }
+
+  #weiruhu {
+    font-family: tRends;
+    font-size: 24px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 35px;
+    letter-spacing: 0px;
+    color: #00f6ff;
+  }
+
+  #anjian {
+    font-family: tRENDS;
+    font-size: 24px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 35px;
+    letter-spacing: 0px;
+    color: #ffc21f;
+  }
+
+  .qinhuamap {
+    position: absolute;
+    top: 2%;
+    left: 35%;
+    width: 28%;
+    height: 57%;
+  }
+  .scroll-content {
+    position: relative;
+    transition: top 0.825s;
+  }
+
+}
+@media screen and (max-width: 1440px) {
+  .main {
+    height: 100%;
+    padding: 1em;
+    flex: 1 1 auto;
+    flex-direction: column;
+    display: flex;
+  }
+
+  #top-left {
+    /*padding: 1em;*/
+    width: 32%;
+    height: 100%;
+  }
+
+  #top-mid {
+    /*padding: 1em;*/
+    width: 30%;
+    height: 100%;
+  }
+
+  #top-right {
+    width: 37%;
+    height: 100%;
+  }
+
+  .title-font {
+    font-family: HYk2gj;
+    font-size: 30px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 22px;
+    letter-spacing: 2px;
+    color: #ffffff;
+  }
+
+  .title-main {
+    margin: 0 auto;
+  }
+
+  .flex-inline {
+    display: inline-flex;
+    justify-content: space-around;
+  }
+
+  #pie-one {
+    height: 100%;
+    width: 35%;
+  }
+
+  #weiruhu {
+    font-family: tRends;
+    font-size: 18px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 22px;
+    letter-spacing: 0px;
+    color: #00f6ff;
+  }
+
+  #anjian {
+    font-family: tRENDS;
+    font-size: 18px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 22px;
+    letter-spacing: 0px;
+    color: #ffc21f;
+  }
+
+  .qinhuamap {
+    position: absolute;
+    top: 2%;
+    left: 35%;
+    width: 28%;
+    height: 57%;
+  }
+  .font-14-medium{
+    color: #ffffff !important;
+    line-height: 18px;
+    font-size: 12px;
+    font-family: font-pingfang-medium;
+  }
+  .scroll-content {
+    position: relative;
+    transition: top 0.825s;
+  }
+}
+</style>
+