manage-client 3.1.32 → 3.1.36

package/src/components/daping/DataManagement.vue

@@ -1,548 +1,537 @@
-<template>
-
-
-    <div class="flex-row" style="height: 44%">
-      <div id="top-left">
-<!--        <div class="flex background-left-bottom">-->
-        <div class="flex background-content-img scade-box">
-          <net-work-ping></net-work-ping>
-        </div>
-      </div>
-      <div id="top-mid" >
-        <div class="flex">
-          <wu-hai-map  mode="1" idname="wuhaimap"></wu-hai-map>
-        </div>
-<!--          <gmap  :point="point"> </gmap>-->
-      </div>
-      <div id="top-right" >
-
-          <div class="flex background-content-img scade-box">
-
-            <div class="flex" >
-              <div class="flex-row" style="height: 40%;margin-top: 2%;">
-
-                <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: 49%;margin-right: 1%">
-
-        <div class="flex-row" style="width: 100%;height:49%;margin-top: 2%;">
-
-          <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:49%">
-          <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: 49%;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: 38%;
-    height: 100%;
-    margin-right: 2%;
-  }
-
-  #top-mid {
-    /*padding: 1em;*/
-    width: 20%;
-    height: 100%;
-  }
-
-  #top-right {
-    width: 38%;
-    height: 100%;
-    margin-left: 2%;
-  }
-
-  .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: 49%">
+      <div id="top-left">
+<!--        <div class="flex background-left-bottom">-->
+        <div class="flex background-left-top">
+          <net-work-ping></net-work-ping>
+        </div>
+      </div>
+      <div id="top-mid" >
+        <div class="flex">
+          <wu-hai-map  mode="1" idname="wuhaimap"></wu-hai-map>
+        </div>
+<!--          <gmap  :point="point"> </gmap>-->
+      </div>
+      <div id="top-right" >
+
+          <div class="flex background-right-top">
+
+            <div class="flex" >
+              <div class="flex-row" style="height: 40%;margin-top: 2%;">
+
+                <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">{{checkData.wrhsum > 10000 ? (checkData.wrhsum/10000).toFixed(0) + '万' : checkData.wrhsum}}</span>
+                  </div>
+                  <div  class="flex-inline col-sm-6 auto" >
+                    <span id="anjian">{{checkData.jhsum > 10000 ? (checkData.jhsum/10000).toFixed(0) + '万' : checkData.jhsum}}</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: 48%;margin-top: 1%;">
+
+      <div class="flex background-left-bottom" style="height: 100%;width: 49%;margin-right: 1%">
+
+        <div class="flex-row" style="width: 100%;height:49%;margin-top: 2%;">
+
+          <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:49%">
+          <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: 49%;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:{}
+      },
+      checkData:{},
+      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/getCheckSum', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
+        this.checkData = res.data[0]
+      })
+      // 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: 38%;
+    height: 100%;
+    margin-right: 2%;
+  }
+
+  #top-mid {
+    /*padding: 1em;*/
+    width: 20%;
+    height: 100%;
+  }
+
+  #top-right {
+    width: 38%;
+    height: 100%;
+    margin-left: 2%;
+  }
+
+  .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>
+