Merge branch 'master' of http://git.zthymaoyi.com/gdc/yiliangyiyun-pc

src/components/item-wrap/item-wrap.vue

@@ -46,7 +46,7 @@ $item_title_content-height: calc(100% - 38px);
 
   ::v-deep .border-box-content {
     box-sizing: border-box;
-    padding: 6px 16px 0px;
+    padding: 6px 0px 0px;
   }
 
   .item_title {

src/views/home/index.vue

@@ -6,29 +6,114 @@
  * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
 -->
 <template>
-<div class="winseaview-view">
-  <div class="host-body">
-    <div class="d-flex jc-center title_wrap">
-      <div class="zuojuxing"></div>
-      <div class="youjuxing"></div>
-      <div class="guang"></div>
-      <div class="d-flex jc-center">
-        <div class="title">
-          <span class="title-text">易粮易运大数据分析平台</span>
+  <div class="bg" id="index">
+    <div class="host-body">
+      <div class="d-flex jc-center title_wrap">
+        <!-- <div class="titlebgc"></div> -->
+        <div class="zuojuxing"></div>
+        <div class="youjuxing"></div>
+        <div class="guang"></div>
+        <div class="d-flex jc-center">
+          <div class="title">
+            <span class="title-text">易粮易运大数据分析平台</span>
+          </div>
         </div>
-      </div>
-      <div class="timers ">
+        <div class="timers ">
 
-        {{ dateYear }} {{ dateWeek }} {{ dateDay }}
-        <i class=" blq-icon-shezhi02" style="margin-left:10px" @click="showSetting"></i>
+          {{ dateYear }} {{ dateWeek }} {{ dateDay }}
+          <i class=" blq-icon-shezhi02" style="margin-left:10px" @click="showSetting"></i>
+        </div>
+      </div>
+    </div>
+    <div class="contents ">
+      <div class="contetn_left">
+        <!-- <div class="pagetab">
+          <div class="item">实时监测</div>
+
+        </div> -->
+        <ItemWrap class="contetn_left-top contetn_lr-item" title="在途信息统计">
+          <LeftTop :listData="leftTopDataList"/>
+        </ItemWrap>
+        <ItemWrap class="contetn_left-center contetn_lr-item" title="合营比例">
+          <LeftCenter :hylistData="leftCenterDataList"/>
+        </ItemWrap>
+        <ItemWrap class="contetn_left-bottom contetn_lr-item" title="在途信息" style="padding: 0 10px 16px 10px">
+          <LeftBottom :ztxxlistData="leftBottomDataList"/>
+        </ItemWrap>
+      </div>
+      <div class="contetn_center">
+        <div class="maptitle">
+          <div class="zuo"></div>
+          <span class="titletext">库点流向分布</span>
+          <div class="you"></div>
+        </div>
+        <dv-border-box-13>
+          <div id="china-map"></div>
+        </dv-border-box-13>
+        <dv-border-box-1 class="center_bottom">
+          <div class="center_bottom_content">
+            <div class="item">
+              <div class="title">头寸</div>
+              <div class="number">{{centerBottomDataList[0]}}吨</div>
+            </div>
+            <div class="item">
+              <div class="title">实际库存</div>
+              <div class="number">{{centerBottomDataList[1]}}吨</div>
+            </div>
+            <div class="item">
+              <div class="title">采购待执行</div>
+              <div class="number">{{centerBottomDataList[2]}}吨</div>
+            </div>
+            <div class="item">
+              <div class="title">销售待执行</div>
+              <div class="number">{{centerBottomDataList[3]}}吨</div>
+            </div>
+            <!-- <div class="row1">
+              <div class="item_title">
+                <span class="title-inner"> 头寸</span>
+              </div>
+              <div>123123吨</div>
+            </div>
+            <div class="row2 ">
+              <div class="item_title">
+                <span class="title-inner"> 实际库存</span>
+                <div>123123吨</div>
+              </div>
+              <div class="item_title">
+                <div class="title-inner">采购待执行（吨）</div>
+                <div>123123吨</div>
+              </div>
+              <div class="item_title">
+                <div class="title-inner">销售待执行（吨）</div>
+                <div>123123吨</div>
+              </div>
+            </div> -->
+          </div>
+        </dv-border-box-1>
+        <!-- <CenterMap class="contetn_center_top" /> -->
+        <!-- <ItemWrap class="contetn_center-bottom" title="安装计划">
+        <CenterBottom />
+      </ItemWrap> -->
+      </div>
+      <div class="contetn_right">
+        <ItemWrap class="contetn_left-bottom contetn_lr-item" title="出入库分布">
+          <RightTop :crklistData="rightTopDataObj"/>
+        </ItemWrap>
+        <ItemWrap class="contetn_left-bottom contetn_lr-item" title="库存排名" style="padding: 0 10px 16px 10px">
+          <RightCenter :phklistData="rightCenterDataList"/>
+        </ItemWrap>
+        <ItemWrap class="contetn_left-bottom contetn_lr-item" title="最新合同 ">
+          <RightBottom :htlistData="rightBottomDataList"/>
+        </ItemWrap>
       </div>
     </div>
   </div>
-   
-</div>
 </template>
 
 <script>
+import {
+  gChartsData,
+} from '@/model/home/index'
 import { formatTime } from '../../utils/index.js';
 import LeftTop from './left-top.vue'
 import LeftCenter from './left-center.vue';
@@ -44,12 +129,20 @@ export default {
     LeftBottom,
     // CenterMap,
     RightTop,
-   RightCenter,
-   RightBottom
+    RightCenter,
+    RightBottom
   },
   data() {
     return {
-     timing: null,
+      MapList:[],
+      rightBottomDataList:[],
+      rightCenterDataList:[],
+      centerBottomDataList:[],
+      leftBottomDataList:[],
+      leftTopDataList:[],
+      leftCenterDataList:[],
+      rightTopDataObj:{},
+      timing: null,
       loading: true,
       dateDay: null,
       dateYear: null,
@@ -65,13 +158,37 @@ export default {
   },
   created() {
   },
-
   mounted() {
-     this.timeFn();
-    this.cancelLoading();
+    gChartsData({
+      compId: localStorage.getItem('ws-pf_compId'),
+      loadingstatus: 1,
+      seachMoth: '2022'
+    }).toPromise().then(res => {
+      console.log('··············', res)
+      this.leftTopDataList = res[0].biViewInfoList
+      this.leftCenterDataList = res[6].biViewInfoList
+      this.leftBottomDataList = res[9].tranCarInfos
+      let _n = res[1].biViewInfoList
+      this.centerBottomDataList.push((Number(_n[0].count)+Number(_n[1].count)-Number(_n[2].count)).toFixed(0))
+      this.centerBottomDataList.push(Number(_n[0].count).toFixed(0))
+      this.centerBottomDataList.push(Number(_n[1].count).toFixed(0))
+      this.centerBottomDataList.push(Number(_n[2].count).toFixed(0))
+      this.rightTopDataObj = {
+        'ck':res[4].biViewInfoList,
+        'rk':res[5].biViewInfoList,
+        
+      }
+      this.rightCenterDataList = res[7].biViewInfoList
+      this.rightBottomDataList = res[8].contractManagementInfos
+      this.MapList =  res[3].biViewInfoList
+      this.timeFn();
+      this.cancelLoading();
       this.china_map();
+
+    })
+
   },
-   beforeDestroy() {
+  beforeDestroy() {
     clearInterval(this.timing);
   },
   methods: {
@@ -120,140 +237,34 @@ export default {
         香港: [114.6178, 22.3242],
         澳门: [113.5547, 21.6484],
       };
-      //后台给的数据模拟
-      let lineData = [
-        {
-          val: 32, //数据
-          blat: [86.9023, 41.148], //发射点
-          elon: [87.8695, 31.6846], //接收点
-          bcitysim: '新疆', //发射省的名字
-          ecitysim: '西藏', //接收省的名字
-        },
-        {
-          val: 31,
-          blat: [87.8695, 31.6846],
-          elon: [95.2402, 35.4199],
-          bcitysim: '西藏',
-          ecitysim: '青海',
-        },
-        {
-          val: 33,
-          blat: [86.9023, 41.148],
-          elon: [95.2402, 35.4199],
-          bcitysim: '新疆',
-          ecitysim: '青海',
-        },
-        {
-          val: 33,
-          blat: [116.4551, 40.2539],
-          elon: [119.8586, 32.915],
-          bcitysim: '北京',
-          ecitysim: '江苏',
-        },
-        {
-          val: 33,
-          blat: [120.8254, 23.5986],
-          elon: [109.9512, 19.2041],
-          bcitysim: '台湾',
-          ecitysim: '海南',
-        },
-        {
-          val: 33,
-          blat: [120.498, 29.0918],
-          elon: [115.7156, 27.99],
-          bcitysim: '浙江',
-          ecitysim: '江西',
-        },
-        {
-          val: 33,
-          blat: [117.2461, 31.0361],
-          elon: [119.8586, 32.915],
-          bcitysim: '安徽',
-          ecitysim: '江苏',
-        },
-        {
-          val: 33,
-          blat: [117.2461, 31.0361],
-          elon: [105.9961, 37.1096],
-          bcitysim: '安徽',
-          ecitysim: '宁夏',
-        },
-        {
-          val: 33,
-          blat: [117.2461, 31.0361],
-          elon: [107.7539, 29.8904],
-          bcitysim: '安徽',
-          ecitysim: '重庆',
-        },
-        {
-          val: 33,
-          blat: [117.2461, 31.0361],
-          elon: [123.0438, 41.0889],
-          bcitysim: '安徽',
-          ecitysim: '辽宁',
-        },
-        {
-          val: 33,
-          blat: [119.8586, 32.915],
-          elon: [102.7129, 38.166],
-          bcitysim: '江苏',
-          ecitysim: '甘肃',
-        },
-        {
-          val: 33,
-          blat: [119.8586, 32.915],
-          elon: [128.1445, 46.7156],
-          bcitysim: '江苏',
-          ecitysim: '黑龙江',
-        },
-        {
-          val: 33,
-          blat: [119.8586, 32.915],
-          elon: [110.5977, 41.3408],
-          bcitysim: '江苏',
-          ecitysim: '内蒙古',
-        },
-        {
-          val: 33,
-          blat: [119.8586, 32.915],
-          elon: [101.0652, 24.6807],
-          bcitysim: '江苏',
-          ecitysim: '云南',
-        },
-        {
-          val: 33,
-          blat: [119.8586, 32.915],
-          elon: [86.9023, 41.148],
-          bcitysim: '江苏',
-          ecitysim: '新疆',
-        },
-        {
-          val: 33,
-          blat: [86.9023, 41.148],
-          elon: [110.5977, 41.3408],
-          bcitysim: '新疆',
-          ecitysim: '内蒙古',
-        },
-        {
-          val: 33,
-          blat: [86.9023, 41.148],
-          elon: [102.9199, 30.1904],
-          bcitysim: '新疆',
-          ecitysim: '四川',
-        },
-      ];
-      //循环拿到处理好的数据
-      for (var i = 0; i < lineData.length; i++) {
-        province.push(lineData[i].bcitysim); //存进去每个省的名字
-        province.push(lineData[i].ecitysim); //存进去每个省的名字
+      let lineData = []
+      for(let i = 0;i<this.MapList.length;i++){
+        if(this.MapList[i].startPlace&&this.MapList[i].endPlace){
+          let _w = Number(this.MapList[i].startPlace.split(',')[0])
+        let _j = Number(this.MapList[i].startPlace.split(',')[1])
+        let _ew = Number(this.MapList[i].endPlace.split(',')[0])
+        let _ej = Number(this.MapList[i].endPlace.split(',')[1])
+        let _obj = {
+          val: 33, //数据
+          blat: [_j, _w], //发射点
+          elon: [_ej, _ew], //接收点
+        }
+        lineData.push(_obj)
+        }
+      
+      }
+      debugger
+      for(let k = 0; k < lineData.length; k++) {
+        // province.push(lineData[i].bcitysim); //存进去每个省的名字
+        // province.push(lineData[i].ecitysim); //存进去每个省的名字
         res.push({
-          fromName: lineData[i].bcitysim, //发射的省名，保存用于弹框显示
-          toName: lineData[i].ecitysim, //接收的省名，保存用于弹框显示
+          // fromName: lineData[i].bcitysim, //发射的省名，保存用于弹框显示
+          // toName: lineData[i].ecitysim, //接收的省名，保存用于弹框显示
           coords: [
-            lineData[i].blat, //发射
-            lineData[i].elon, //接收
+            lineData[k].blat, //发射
+            lineData[k].elon, //接收
           ],
-          count: lineData[i].val, //数据
+          count: lineData[k].val, //数据
         });
       }
       let index_data = new Set(province); //把省的名字去重
@@ -436,8 +447,8 @@ export default {
       };
       mapChart.setOption(option); //生成图表
     },
-    showSetting(){
-        this.$refs.setting.init()
+    showSetting() {
+      this.$refs.setting.init()
     },
     timeFn() {
       this.timing = setInterval(() => {
@@ -455,269 +466,282 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-    // &.pageisScale {
-    //     position: absolute;
-    //     top: 50%;
-    //     left: 50%;
-    //     transform: translate(-50%, -50%);
-    //     transform-origin: left top;
-    // }
-  .winseaview-view{
-    background:#03050C
-  }
+// &.pageisScale {
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+//     transform-origin: left top;
+// }
+.winseaview-view {
+  background: #03050C
+}
+
+.bg {
+  width: 100%;
+  height: 100%;
+  padding: 16px 16px 10px 16px;
+  box-sizing: border-box;
+  background-image: url("../../assets/images/pageBg.png");
+  background-size: cover;
+  background-position: center center;
+}
 
-    .bg {
-        width: 100%;
-        height: 100%;
-        padding: 16px 16px 10px 16px;
-        box-sizing: border-box;
-        background-image: url("../../assets/images/pageBg.png");
-        background-size: cover;
-        background-position: center center;
+.host-body {
+
+  .title_wrap {
+    height: 60px;
+    background-image: url("../../assets/images/top.png");
+    background-size: cover;
+    background-position: center center;
+    position: relative;
+    margin-bottom: 4px;
+
+    .guang {
+      position: absolute;
+      bottom:0px;
+      background: url("../../assets/images/guang.gif") no-repeat center;
+      background-position: cover;
+    height: 1px;
+    left: 0;
+      right: 0;
+      margin: auto;
+      width:40%
     }
 
-    .host-body {
-
-        .title_wrap {
-            height: 60px;
-            background-image: url("../../assets/images/top.png");
-            background-size: cover;
-            background-position: center center;
-            position: relative;
-            margin-bottom: 4px;
-
-            .guang {
-                position: absolute;
-                bottom: -26px;
-                background-image: url("../../assets/images/guang.png");
-                background-position: 80px center;
-                width: 100%;
-                height: 56px;
-            }
-
-            .zuojuxing,
-            .youjuxing {
-                position: absolute;
-                top: -2px;
-                width: 140px;
-                height: 6px;
-                background-image: url("../../assets/images/headers/juxing1.png");
-            }
-
-            .zuojuxing {
-
-                left: 11%;
-            }
-
-            .youjuxing {
-                right: 11%;
-                transform: rotate(180deg);
-            }
-
-            .timers {
-                position: absolute;
-                right: 0;
-                top: 30px;
-                font-size: 18px;
-                display: flex;
-                align-items: center;
-
-                .blq-icon-shezhi02 {
-                    cursor: pointer;
-                }
-            }
-        }
+    .zuojuxing,
+    .youjuxing {
+      position: absolute;
+      top: -2px;
+      width: 140px;
+      height: 6px;
+      background: url("../../assets/images/headers/juxing1.png");
+     
+    }
+    .titlebgc{
+      background: url("../../assets//top.gif") no-repeat center;
+      background-size: cover;
+    }
 
-        .title {
-            position: relative;
-            // width: 500px;
-            text-align: center;
-            background-size: cover;
-            color: transparent;
-            height: 60px;
-            line-height: 46px;
-
-            .title-text {
-                font-size: 38px;
-                font-weight: 900;
-                letter-spacing: 6px;
-                width: 100%;
-                background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-            }
-        }
+    .zuojuxing {
+
+      left: 11%;
     }
 
+    .youjuxing {
+      right: 11%;
+      transform: rotate(180deg);
+    }
+
+    .timers {
+      position: absolute;
+      right: 0;
+      top: 30px;
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      color:#fff;
+
+      .blq-icon-shezhi02 {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .title {
+    position: relative;
+    // width: 500px;
+    text-align: center;
+    background-size: cover;
+    color: transparent;
+    height: 60px;
+    line-height: 46px;
+
+    .title-text {
+      font-size: 38px;
+      font-weight: 900;
+      letter-spacing: 6px;
+      width: 100%;
+      background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+}
+
 
 .index_home {
-    .pagetab {
-        position: absolute;
-        top: -35px;
-        display: flex;
-
-        .item {
-            width: 130px;
-            height: 36px;
-            border-radius: 18px 0px 0px 18px;
-            color: #00FBF8;
-            text-indent: 26px;
-            line-height: 36px;
-            font-size: 16px;
-            margin-right: 20px;
-            background: linear-gradient(to right, rgba(76, 245, 255, .5), rgba(76, 245, 255, 0));
-        }
+  .pagetab {
+    position: absolute;
+    top: -35px;
+    display: flex;
+
+    .item {
+      width: 130px;
+      height: 36px;
+      border-radius: 18px 0px 0px 18px;
+      color: #00FBF8;
+      text-indent: 26px;
+      line-height: 36px;
+      font-size: 16px;
+      margin-right: 20px;
+      background: linear-gradient(to right, rgba(76, 245, 255, .5), rgba(76, 245, 255, 0));
     }
+  }
 }
 
 .setting {
-    position: fixed;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  top: 0;
+  left: 0;
+
+  .left_shu {
+    color: #000;
+    font-weight: 900;
+    position: relative;
+    text-indent: 10px;
+    padding: 16px 0 10px 0;
+
+    &::before {
+      display: block;
+      content: " ";
+      height: 16px;
+      width: 4px;
+      border-radius: 2px;
+      background: #0072FF;
+      position: absolute;
+      left: 0px;
+    }
+  }
+
+  .setting_dislog {
+    background-color: rgba($color: #000000, $alpha: .5);
+    position: absolute;
     width: 100%;
     height: 100%;
-    z-index: 999;
+    z-index: 0;
+    right: 0;
     top: 0;
-    left: 0;
+  }
 
-    .left_shu {
-        color: #000;
-        font-weight: 900;
-        position: relative;
-        text-indent: 10px;
-        padding:16px 0 10px 0 ;
-        &::before {
-            display: block;
-            content: " ";
-            height: 16px;
-            width: 4px;
-            border-radius: 2px;
-            background: #0072FF;
-            position: absolute;
-            left: 0px;
-        }
+  .setting_inner {
+    box-sizing: border-box;
+    background: #FFF;
+    width: 340px;
+    height: 100%;
+    position: absolute;
+    right: 0px;
+    top: 0;
+    z-index: 1;
+    color: #000000;
+    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
+
+    .setting_header {
+      font-size: 20px;
+      color: rgb(0, 0, 0);
+      font-weight: 900;
+      text-align: center;
+      line-height: 40px;
     }
 
-    .setting_dislog {
-        background-color: rgba($color: #000000, $alpha: .5);
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        z-index: 0;
-        right: 0;
-        top: 0;
+    .setting_body {
+      padding: 0px 16px;
+      box-sizing: border-box;
+      position: relative;
     }
 
-    .setting_inner {
-        box-sizing: border-box;
-        background: #FFF;
-        width: 340px;
-        height: 100%;
-        position: absolute;
-        right: 0px;
-        top: 0;
-        z-index: 1;
-        color: #000000;
-        box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
-
-        .setting_header {
-            font-size: 20px;
-            color: rgb(0, 0, 0);
-            font-weight: 900;
-            text-align: center;
-            line-height: 40px;
-        }
+    .setting_item {
+      font-size: 14px;
+      line-height: 1.5;
 
-        .setting_body {
-            padding: 0px 16px;
-            box-sizing: border-box;
-            position: relative;
-        }
+      // display: flex;
+      .setting_label {
+        color: #555454;
+      }
 
-        .setting_item {
-            font-size: 14px;
-            line-height: 1.5;
-
-            // display: flex;
-            .setting_label {
-                color: #555454;
-            }
-            .setting_label_tip{
-                font-size: 12px;
-                color: #838282;
-            }
-        }
+      .setting_label_tip {
+        font-size: 12px;
+        color: #838282;
+      }
     }
+  }
 
-    .setting_inner {
-        animation: rtl-drawer-out .3s;
-    }
+  .setting_inner {
+    animation: rtl-drawer-out .3s;
+  }
 }
 
 
 .settingShow {
-    .setting_inner {
-        animation: rtl-drawer-in .3s 1ms;
-    }
+  .setting_inner {
+    animation: rtl-drawer-in .3s 1ms;
+  }
 
 }
 
 .yh-setting-fade-enter-active {
-    animation: yh-setting-fade-in .3s;
+  animation: yh-setting-fade-in .3s;
 }
 
 .yh-setting-fade-leave-active {
 
-    animation: yh-setting-fade-out .3s;
+  animation: yh-setting-fade-out .3s;
 
 }
 
 @keyframes yh-setting-fade-in {
-    0% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
 
-    100% {
-        opacity: 1;
-    }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes yh-setting-fade-out {
-    0% {
-        opacity: 1;
+  0% {
+    opacity: 1;
 
-    }
+  }
 
-    100% {
-        opacity: 0;
-    }
+  100% {
+    opacity: 0;
+  }
 }
 
 
 @keyframes rtl-drawer-in {
-    0% {
-        transform: translate(100%, 0)
-    }
+  0% {
+    transform: translate(100%, 0)
+  }
 
-    100% {
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0)
-    }
+  100% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0)
+  }
 }
 
 @keyframes rtl-drawer-out {
-    0% {
-        transform: translate(0, 0)
-    }
+  0% {
+    transform: translate(0, 0)
+  }
 
-    100% {
-        transform: translate(100%, 0)
-    }
+  100% {
+    transform: translate(100%, 0)
+  }
 }
+
 // 内容
 .contents {
   width: 100%;
-    display: flex;
-    min-height: calc(100% - 60px);
-    justify-content: space-between;
+  display: flex;
+  min-height: calc(100% - 60px);
+  justify-content: space-between;
+
   .contetn_left,
   .contetn_right {
     width: 540px;
@@ -757,65 +781,140 @@ export default {
     justify-content: space-around;
     position: relative;
 
-  
+
   }
 }
 
 
 @keyframes rotating {
-    0% {
-        -webkit-transform: rotate(0) scale(1);
-        transform: rotate(0) scale(1);
-    }
-    50% {
-        -webkit-transform: rotate(180deg) scale(1.1);
-        transform: rotate(180deg) scale(1.1);
-    }
-    100% {
-        -webkit-transform: rotate(360deg) scale(1);
-        transform: rotate(360deg) scale(1);
-    }
+  0% {
+    -webkit-transform: rotate(0) scale(1);
+    transform: rotate(0) scale(1);
+  }
+
+  50% {
+    -webkit-transform: rotate(180deg) scale(1.1);
+    transform: rotate(180deg) scale(1.1);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg) scale(1);
+    transform: rotate(360deg) scale(1);
+  }
 }
- #china-map {
-    height: 540px;
-    width: 100%;
-    top: 0;
+
+#china-map {
+  height: 540px;
+  // height: 740px;
+  width: 100%;
+  top: 0;
+}
+
+.maptitle {
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  padding-top: 10px;
+  box-sizing: border-box;
+
+  .titletext {
+    font-size: 28px;
+    font-weight: 900;
+    letter-spacing: 6px;
+    background: linear-gradient(92deg,
+        #0072ff 0%,
+        #00eaff 48.8525390625%,
+        #01aaff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin: 0 10px;
   }
-  
-  .maptitle {
-    height: 60px;
-    display: flex;
-    justify-content: center;
-    padding-top: 10px;
-    box-sizing: border-box;
 
-    .titletext {
-      font-size: 28px;
-      font-weight: 900;
-      letter-spacing: 6px;
-      background: linear-gradient(92deg,
-          #0072ff 0%,
-          #00eaff 48.8525390625%,
-          #01aaff 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      margin: 0 10px;
-    }
+  .zuo,
+  .you {
+    background-size: 100% 100%;
+    width: 29px;
+    height: 20px;
+    margin-top: 8px;
+  }
 
-    .zuo,
-    .you {
-      background-size: 100% 100%;
-      width: 29px;
-      height: 20px;
-      margin-top: 8px;
-    }
+  .zuo {
+    background: url("../../assets/images/xiezuo.png") no-repeat;
+  }
 
-    .zuo {
-      background: url("../../assets/images/xiezuo.png") no-repeat;
-    }
+  .you {
+    background: url("../../assets/images/xieyou.png") no-repeat;
+  }
+}
 
-    .you {
-      background: url("../../assets/images/xieyou.png") no-repeat;
+.center_bottom {
+  color: #fff;
+  // font-size: 30px;
+  margin-top:50px;
+}
+
+.center_bottom_content {
+  padding: 20px;
+  height: 100%;
+  box-sizing: border-box;
+  display:flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom:50px;
+  box-sizing:border-box;
+  .item{
+    .title{
+      background: url("../../assets/index-1.png") no-repeat;
+      background-size: 100% 100%;
+      width: 140px;
+      height: 44px;
+      display: flex;
+      justify-content: center;
+      align-items:center
+    }
+    .number{
+      background: url("../../assets/index-2.png") no-repeat;
+      background-size: 100% 100%;
+      width: 152px;
+      height: 72px;
+      margin-top:10px;
+      display: flex;
+      justify-content: center;
+      align-items:center;
+      font-size: 26px;
+      color:#66FFFF;
     }
   }
+}
+
+.item_title {
+  display: flex;
+  align-items: center;
+}
+
+.zuo,
+.you {
+  width: 58px;
+  height: 14px;
+  background-image: url("../../assets/images/titles/zuo.png");
+}
+
+.you {
+  transform: rotate(180deg);
+}
+
+.title-inner {
+  font-weight: 900;
+  letter-spacing: 2px;
+  background: linear-gradient(92deg,
+      #0072ff 0%,
+      #00eaff 48.8525390625%,
+      #01aaff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.row1 {
+  display: flex
+}
 </style>

src/views/home/left-bottom.vue

@@ -14,43 +14,40 @@
     <component :is="components" :data="list" :class-option="defaultOption">
       <ul class="left_boottom">
         <li class="left_boottom_item" v-for="(item, i) in list" :key="i">
-          <span class="orderNum doudong">{{ i + 1 }}</span>
+          <!-- <span class="orderNum doudong">{{ i + 1 }}</span> -->
           <div class="inner_right">
             <div class="dibu"></div>
             <div class="flex">
               <div class="info">
                 <span class="labels">车牌号：</span>
                 <span class="contents zhuyao doudong wangguan">
-                  {{ item.gatewayno }}</span
+                  {{ item.carNo }}</span
                 >
               </div>
               <div class="info">
                 <span class="labels">装车时间：</span>
                 <span class="contents " style="font-size: 12px">
-                  {{ item.createTime }}</span
+                  {{ item.createDate }}</span
                 >
               </div>
             </div>
 
               <span
-                class="types doudong"
-                :class="{
-                  typeRed: item.onlineState == 0,
-                  typeGreen: item.onlineState == 1,
-                }"
-                >{{ item.onlineState == 1 ? "在途" : "60吨" }}</span
+                class="types doudong typeRed"
+               
+                >{{ item.tranTaskInfos.weight }}吨</span
               >
 
             <div class="info addresswrap">
               <span class="labels">始发地：</span>
               <span class="contents ciyao" style="font-size: 12px">
-                {{ addressHandle(item) }}</span
+                {{ addressHandle(item,0) }}</span
               >
             </div>
             <div class="info addresswrap">
               <span class="labels">目的地：</span>
               <span class="contents ciyao" style="font-size: 12px">
-                {{ addressHandle(item) }}</span
+                {{ addressHandle(item,1) }}</span
               >
             </div>
             
@@ -68,6 +65,7 @@
 import vueSeamlessScroll from 'vue-seamless-scroll'; // vue2引入方式
 import Kong from '../../components/kong.vue';
 export default {
+  props:['ztxxlistData'],
   components: { vueSeamlessScroll, Kong },
   data() {
     return {
@@ -86,6 +84,13 @@ export default {
       },
     };
   },
+  watch:{
+    ztxxlistData(res){
+      console.log('leftbottom')
+      console.log(res)
+      this.list = res
+        }
+    },
   computed: {
     sbtxSwiperFlag() {
       let sbtxSwiper = true;
@@ -98,23 +103,34 @@ export default {
     },
   },
   created() {
-    this.getData();
+    // this.getData();
   },
 
   mounted() {},
   methods: {
-    addressHandle(item) {
-      let name = item.provinceName;
-      if (item.cityName) {
-        name += '/' + item.cityName;
-        if (item.countyName) {
-          name += '/' + item.countyName;
+    addressHandle(item,type) {
+      let name;
+      if(type==0){
+         name = item.tranTaskInfos.startPrivate;
+      if (item.tranTaskInfos.startCity) {
+        name += '/' + item.tranTaskInfos.startCity;
+        if (item.tranTaskInfos.startArea) {
+          name += '/' + item.tranTaskInfos.startArea;
+        }
+      }
+      }else{
+         name = item.tranTaskInfos.endPrivate;
+      if (item.tranTaskInfos.endCity) {
+        name += '/' + item.tranTaskInfos.endCity;
+        if (item.tranTaskInfos.endArea) {
+          name += '/' + item.tranTaskInfos.endArea;
         }
       }
+      }
       return name;
     },
     getData() {
-      this.pageflag = true;
+      // this.pageflag = true;
       // this.pageflag =false
       // currentGET("big3", { limitNum: 20 }).then((res) => {
       //   console.log("设备提醒", res);
@@ -134,251 +150,133 @@ export default {
       //     });
       //   }
       // });
-        this.countUserNumData = {
-        list: [
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-          gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-          gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-          gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-          gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-          gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-          gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-          gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-          gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-          gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-          gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-          gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-          gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市1',
-          countyName: '千山区1',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-          gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省1',
-        },
-        ],
-      }
-      this.list = [
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-           gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-           gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-           gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-           gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-           gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-           gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-           gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-           gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-           gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-           gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-           gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市',
-          countyName: '千山区',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-           gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省',
-        },
-        {
-          cityName: '营口市1',
-          countyName: '千山区1',
-          createTime: '2021-05-15 08:27:26',
-          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
-           gatewayno: '辽H12345',
-          onlineState: 0,
-          provinceName: '福建省1',
-        },
-      ]
-      let that = this
-      let timer = setTimeout(() => {
-        clearTimeout(timer)
-        that.defaultOption.step = 0.5
-      }, 5000)
+      //   this.countUserNumData = {
+      //   list: [
+      //   {
+      //     cityName: '营口市',
+      //     countyName: '千山区',
+      //     createTime: '2021-05-15 08:27:26',
+      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+      //     gatewayno: '辽H12345',
+      //     onlineState: 0,
+      //     provinceName: '福建省',
+      //   },
+      //   {
+      //     cityName: '营口市',
+      //     countyName: '千山区',
+      //     createTime: '2021-05-15 08:27:26',
+      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+      //     gatewayno: '辽H12345',
+      //     onlineState: 0,
+      //     provinceName: '福建省',
+      //   },
+      //   {
+      //     cityName: '营口市',
+      //     countyName: '千山区',
+      //     createTime: '2021-05-15 08:27:26',
+      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+      //     gatewayno: '辽H12345',
+      //     onlineState: 0,
+      //     provinceName: '福建省',
+      //   },
+      //   {
+      //     cityName: '营口市',
+      //     countyName: '千山区',
+      //     createTime: '2021-05-15 08:27:26',
+      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+      //     gatewayno: '辽H12345',
+      //     onlineState: 0,
+      //     provinceName: '福建省',
+      //   },
+      //   {
+      //     cityName: '营口市',
+      //     countyName: '千山区',
+      //     createTime: '2021-05-15 08:27:26',
+      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+      //     gatewayno: '辽H12345',
+      //     onlineState: 0,
+      //     provinceName: '福建省',
+      //   },
+      //   {
+      //     cityName: '营口市',
+      //     countyName: '千山区',
+      //     createTime: '2021-05-15 08:27:26',
+      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+      //     gatewayno: '辽H12345',
+      //     onlineState: 0,
+      //     provinceName: '福建省',
+      //   },
+      //   {
+      //     cityName: '营口市',
+      //     countyName: '千山区',
+      //     createTime: '2021-05-15 08:27:26',
+      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+      //     gatewayno: '辽H12345',
+      //     onlineState: 0,
+      //     provinceName: '福建省',
+      //   },
+      //   {
+      //     cityName: '营口市',
+      //     countyName: '千山区',
+      //     createTime: '2021-05-15 08:27:26',
+      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+      //     gatewayno: '辽H12345',
+      //     onlineState: 0,
+      //     provinceName: '福建省',
+      //   },
+      //   {
+      //     cityName: '营口市',
+      //     countyName: '千山区',
+      //     createTime: '2021-05-15 08:27:26',
+      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+      //     gatewayno: '辽H12345',
+      //     onlineState: 0,
+      //     provinceName: '福建省',
+      //   },
+      //   {
+      //     cityName: '营口市',
+      //     countyName: '千山区',
+      //     createTime: '2021-05-15 08:27:26',
+      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+      //     gatewayno: '辽H12345',
+      //     onlineState: 0,
+      //     provinceName: '福建省',
+      //   },
+      //   {
+      //     cityName: '营口市',
+      //     countyName: '千山区',
+      //     createTime: '2021-05-15 08:27:26',
+      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+      //     gatewayno: '辽H12345',
+      //     onlineState: 0,
+      //     provinceName: '福建省',
+      //   },
+      //   {
+      //     cityName: '营口市',
+      //     countyName: '千山区',
+      //     createTime: '2021-05-15 08:27:26',
+      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+      //     gatewayno: '辽H12345',
+      //     onlineState: 0,
+      //     provinceName: '福建省',
+      //   },
+      //   {
+      //     cityName: '营口市1',
+      //     countyName: '千山区1',
+      //     createTime: '2021-05-15 08:27:26',
+      //     deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+      //     gatewayno: '辽H12345',
+      //     onlineState: 0,
+      //     provinceName: '福建省1',
+      //   },
+      //   ],
+      // }
+     
+      // let that = this
+      // let timer = setTimeout(() => {
+      //   clearTimeout(timer)
+      //   that.defaultOption.step = 0.5
+      // }, 5000)
     },
   },
 };
@@ -406,6 +304,7 @@ export default {
 .left_boottom {
   width: 100%;
   height: 100%;
+  padding-left: 0;
 
   .left_boottom_item {
     display: flex;
@@ -493,7 +392,8 @@ export default {
     }
 
     .types {
-      width: 30px;
+      width: 60px;
+      text-align: center;
       flex-shrink: 0;
     }
 

src/views/home/left-center.vue

@@ -21,6 +21,7 @@
 <script>
 // import { currentGET } from 'api/modules'
 export default {
+  props:['hylistData'],
   data() {
     return {
       options: {},
@@ -35,8 +36,24 @@ export default {
       a:1
     }
   },
+  watch:{
+    hylistData(res){
+      console.log('leftcenter')
+      console.log(res)
+      this.countUserNumData = {
+          lockNum: Number(res[1].count),
+          offlineNum: 55,
+          onlineNum: Number(res[0].count),
+          totalNum:Number(res[0].count)+Number(res[1].count) ,
+        }
+        this.$nextTick(() => {
+          this.init()
+          // that.switper()
+        })
+        }
+    },
   created() {
-    this.getData()
+    // this.getData()
   },
   mounted() {},
   beforeDestroy() {
@@ -49,62 +66,62 @@ export default {
         this.timer = null
       }
     },
-    getData() {
-      let that = this
-      this.pageflag = true
-      setTimeout(function () {
+    // getData() {
+    //   let that = this
+    //   this.pageflag = true
+    //   setTimeout(function () {
         
-        that.countUserNumData = {
-          lockNum: that.a++,
-          offlineNum: 55,
-          onlineNum: 162,
-          totalNum: 218,
-        }
-        that.$nextTick(() => {
-          that.init()
-          // that.switper()
-        })
-      }, 1000)
-      // this.pageflag =false
+    //     that.countUserNumData = {
+    //       lockNum: 1,
+    //       offlineNum: 55,
+    //       onlineNum: 162,
+    //       totalNum: 218,
+    //     }
+    //     that.$nextTick(() => {
+    //       that.init()
+    //       // that.switper()
+    //     })
+    //   }, 1000)
+    //   // this.pageflag =false
 
-      // currentGET('big1').then(res => {
-      //   //只打印一次
-      //   if (!this.timer) {
-      //     console.log('设备总览', res);
-      //   }
-      //   if (res.success) {
-      //     this.countUserNumData = res.data
-      //     this.$nextTick(() => {
-      //       this.init()
-      //       this.switper()
-      //     })
+    //   // currentGET('big1').then(res => {
+    //   //   //只打印一次
+    //   //   if (!this.timer) {
+    //   //     console.log('设备总览', res);
+    //   //   }
+    //   //   if (res.success) {
+    //   //     this.countUserNumData = res.data
+    //   //     this.$nextTick(() => {
+    //   //       this.init()
+    //   //       this.switper()
+    //   //     })
 
-      //   } else {
-      //     this.pageflag = false
-      //     this.$Message({
-      //       text: res.msg,
-      //       type: 'warning'
-      //     })
-      //   }
-      // })
-    },
+    //   //   } else {
+    //   //     this.pageflag = false
+    //   //     this.$Message({
+    //   //       text: res.msg,
+    //   //       type: 'warning'
+    //   //     })
+    //   //   }
+    //   // })
+    // },
     //轮询
-    switper() {
-      if (this.timer) {
-        return
-      }
-      let looper = (a) => {
-        this.getData()
-      }
-      this.timer = setInterval(looper, 1000)
-      let myChart = this.$refs.charts.chart
-      myChart.on('mouseover', (params) => {
-        this.clearData()
-      })
-      myChart.on('mouseout', (params) => {
-        this.timer = setInterval(looper, 1000)
-      })
-    },
+    // switper() {
+    //   if (this.timer) {
+    //     return
+    //   }
+    //   let looper = (a) => {
+    //     this.getData()
+    //   }
+    //   this.timer = setInterval(looper, 1000)
+    //   let myChart = this.$refs.charts.chart
+    //   myChart.on('mouseover', (params) => {
+    //     this.clearData()
+    //   })
+    //   myChart.on('mouseout', (params) => {
+    //     this.timer = setInterval(looper, 1000)
+    //   })
+    // },
     init() {
       let total = this.countUserNumData.totalNum
       let colors = ['#ECA444', '#33A1DB', '#56B557']

src/views/home/left-top.vue

@@ -193,7 +193,7 @@ export default {
             text-align: center;
             line-height: 100px;
             font-size: 22px;
-            margin: 50px auto 30px;
+            margin: 20px auto 30px;
             background-size: cover;
             background-position: center center;
             position: relative;

src/views/home/right-bottom.vue

@@ -6,54 +6,52 @@
  * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-center.vue
 -->
 <template>
-  <div v-if="pageflag" class="right_center_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }">
-    <component :is="components" :data="list" :class-option="defaultOption">
-      <ul class="right_center ">
-        <li class="right_center_item" v-for="(item, i) in list" :key="i">
-          <span class="orderNum">{{ i + 1 }}</span>
-          <div class="inner_right">
-            <div class="dibu"></div>
-            <div class="flex">
-              <div class="info">
-                <span class="labels ">合同编号</span>
-                <span class="contents zhuyao"> {{ item.gatewayno }}</span>
-              </div>
-              <div class="info">
-                <span class="labels">合同类型：</span>
-                <span class="contents "> {{ item.terminalno }}</span>
-              </div>
-              <div class="info">
-                <span class="labels">合同量：</span>
-                <span class="contents warning"> {{ item.alertvalue | montionFilter }}</span>
-              </div>
-            </div>
-			<div class="flex">
-              <div class="info">
-                <span class="labels">签订时间：</span>
-                <span class="contents ciyao" :class="{ warning: item.alertdetail }"> {{ item.alertdetail || '无'
-                }}</span>
-              </div>
-            </div>
-			<div class="flex">
-              <div class="info">
-                <span class="labels">买方：</span>
-                <span class="contents ciyao" :class="{ warning: item.alertdetail }"> {{ item.alertdetail || '无'
-                }}</span>
-              </div>
-            </div>
-            <div class="flex">
-              <div class="info">
-                <span class="labels">卖方：</span>
-                <span class="contents ciyao" :class="{ warning: item.alertdetail }"> {{ item.alertdetail || '无'
-                }}</span>
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </component>
-  </div>
-  <Reacquire v-else @onclick="getData" style="line-height:200px" />
+	<div v-if="pageflag" class="right_center_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !sbtxSwiperFlag }">
+		<component :is="components" :data="list" :class-option="defaultOption">
+			<ul class="right_center ">
+				<li class="right_center_item" v-for="(item, i) in list" :key="i">
+					<div class="inner_right">
+						<div class="dibu"></div>
+						<div class="flex">
+							<div class="info">
+								<span class="labels">合同编号：</span>
+								<span class="contents zhuyao"> {{ item.contractNo}}</span>
+							</div>
+							<div class="info">
+								<span class="labels">类型：</span>
+								<span class="contents "> {{ item.agreementType}}</span>
+							</div>
+						</div>
+						<div class="flex">
+							<div class="info">
+								<span class="labels">合同量：</span>
+								<span class="contents warning"> {{ item.weight}}吨</span>
+							</div>
+						</div>
+						<div class="flex">
+							<div class="info">
+								<span class="labels">签订时间：</span>
+								<span class="contents ciyao warning">{{item.createDate}}</span>
+							</div>
+						</div>
+						<div class="flex">
+							<div class="info">
+								<span class="labels">买方：</span>
+								<span class="contents ciyao warning"> {{ item.buyer}}</span>
+							</div>
+						</div>
+						<div class="flex">
+							<div class="info">
+								<span class="labels">卖方：</span>
+								<span class="contents ciyao warning"> {{ item.seller}}</span>
+							</div>
+						</div>
+					</div>
+				</li>
+			</ul>
+		</component>
+	</div>
+	<Reacquire v-else @onclick="getData" style="line-height:200px" />
 
 </template>
 
@@ -62,665 +60,167 @@
 import vueSeamlessScroll from 'vue-seamless-scroll'  // vue2引入方式
 import Kong from '../../components/kong.vue'
 export default {
-  components: { vueSeamlessScroll, Kong },
-
-  data() {
-    return {
-      list: [],
-      pageflag: true,
-        defaultOption: {
-        step: 0.5, // 数值越大速度滚动越快
-            hoverStop: true, // 是否开启鼠标悬停stop
-            openWatch: true, // 开启数据实时监控刷新dom
-            direction: 1, // 0向下 1向上 2向左 3向右
-            limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
-            singleHeight: 250, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
-            singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
-            waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
-      },
-    };
-  },
-  computed: {
-    sbtxSwiperFlag() {
-      let ssyjSwiper = true
-      if (ssyjSwiper) {
-        this.components = vueSeamlessScroll
-      } else {
-        this.components = Kong
-      }
-      return ssyjSwiper
-    }
-  },
-  created() {
-    this.getData()
-  },
-
-  mounted() { },
-  methods: {
-    getData() {
-      this.pageflag = true
-      let res = {
-        data:{
-          list:[{
-	'alertdetail': '主么本指美证队众。',
-	'alertname': '水浸告警',
-	'alertvalue': 76.35193366743,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10000,
-	'phase': 'A1',
-	'sbInfo': '先加话她为斗价难就结空心府。',
-	'terminalno': 100,
-	'provinceName': '广西壮族自治区',
-	'cityName': '延安市',
-	'countyName': '东区'
-}, {
-	'alertdetail': '这分龙理处决装制细。',
-	'alertname': '各种报警',
-	'alertvalue': 179.4578676454877,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10001,
-	'phase': 'A1',
-	'sbInfo': '说运务战用受到在厂变共。',
-	'terminalno': 101,
-	'provinceName': '香港特别行政区',
-	'cityName': '连云港市',
-	'countyName': '彭山县'
-}, {
-	'alertdetail': '经山义打己系意。',
-	'alertname': '各种报警',
-	'alertvalue': 112.23387347173968,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10002,
-	'phase': 'A1',
-	'sbInfo': '内维量强解基必号油来出至商议万。',
-	'terminalno': 102,
-	'provinceName': '云南省',
-	'cityName': '邢台市',
-	'countyName': '奇台县'
-}, {
-	'alertdetail': '手转京飞百。',
-	'alertname': '水浸告警',
-	'alertvalue': 110.15,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10003,
-	'phase': 'A1',
-	'sbInfo': '又新加看适成确道边型。',
-	'terminalno': 103,
-	'provinceName': '北京',
-	'cityName': '襄阳市',
-	'countyName': '浏阳市'
-}, {
-	'alertdetail': '例感改中京规。',
-	'alertname': '各种报警',
-	'alertvalue': 185.2746953,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10004,
-	'phase': 'A1',
-	'sbInfo': '党下江全准意场月义部次省消。',
-	'terminalno': 104,
-	'provinceName': '浙江省',
-	'cityName': '忻州市',
-	'countyName': '洮北区'
-}, {
-	'alertdetail': '应个命给转小变十何。',
-	'alertname': '水浸告警',
-	'alertvalue': 84.37245586588067,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10005,
-	'phase': 'A1',
-	'sbInfo': '学老节实果北果需何料化门织。',
-	'terminalno': 105,
-	'provinceName': '重庆',
-	'cityName': '贺州市',
-	'countyName': '巴楚县'
-}, {
-	'alertdetail': '段事华叫七然厂家。',
-	'alertname': '各种报警',
-	'alertvalue': 150.161361,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10006,
-	'phase': 'A1',
-	'sbInfo': '这飞世平海经合务石实别广不对只。',
-	'terminalno': 106,
-	'provinceName': '四川省',
-	'cityName': '黄冈市',
-	'countyName': '铁山港区'
-}, {
-	'alertdetail': '且事飞取清证。',
-	'alertname': '各种报警',
-	'alertvalue': 67.4,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10007,
-	'phase': 'A1',
-	'sbInfo': '月场保圆记光京公快龙就。',
-	'terminalno': 107,
-	'provinceName': '福建省',
-	'cityName': '博尔塔拉蒙古自治州',
-	'countyName': '静乐县'
-}, {
-	'alertdetail': '任加按过资因。',
-	'alertname': '水浸告警',
-	'alertvalue': 176.5,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10008,
-	'phase': 'A1',
-	'sbInfo': '改志业除金好历验标品口果之之。',
-	'terminalno': 108,
-	'provinceName': '新疆维吾尔自治区',
-	'cityName': '重庆市',
-	'countyName': '启东市'
-}, {
-	'alertdetail': '石团斗是思可。',
-	'alertname': '各种报警',
-	'alertvalue': 127.28686626615864,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10009,
-	'phase': 'A1',
-	'sbInfo': '人发感历手任门同次市况直。',
-	'terminalno': 109,
-	'provinceName': '西藏自治区',
-	'cityName': '烟台市',
-	'countyName': '新邱区'
-}, {
-	'alertdetail': '许导思头商面。',
-	'alertname': '各种报警',
-	'alertvalue': 74.7141208,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10010,
-	'phase': 'A1',
-	'sbInfo': '美术江按时经飞以商除思始起高术。',
-	'terminalno': 110,
-	'provinceName': '重庆',
-	'cityName': '天津市',
-	'countyName': '怀柔区'
-}, {
-	'alertdetail': '越习行算对参。',
-	'alertname': '各种报警',
-	'alertvalue': 134.9774247,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10011,
-	'phase': 'A1',
-	'sbInfo': '以精带样解见社七我北具先地列这能引。',
-	'terminalno': 111,
-	'provinceName': '澳门特别行政区',
-	'cityName': '和田地区',
-	'countyName': '抚远县'
-}, {
-	'alertdetail': '少书且维明我体。',
-	'alertname': '各种报警',
-	'alertvalue': 177.7125254463579,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10012,
-	'phase': 'A1',
-	'sbInfo': '认术快也装值精级路表任经为片及地极。',
-	'terminalno': 112,
-	'provinceName': '浙江省',
-	'cityName': '成都市',
-	'countyName': '其它区'
-}, {
-	'alertdetail': '传却温府历住分月华。',
-	'alertname': '各种报警',
-	'alertvalue': 68.8735,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10013,
-	'phase': 'A1',
-	'sbInfo': '府亲场人重素产或千天。',
-	'terminalno': 113,
-	'provinceName': '新疆维吾尔自治区',
-	'cityName': '澳门半岛',
-	'countyName': '芦溪县'
-}, {
-	'alertdetail': '满收应提观千细学别。',
-	'alertname': '各种报警',
-	'alertvalue': 200.0874694361121,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10014,
-	'phase': 'A1',
-	'sbInfo': '火本数专命向科百们维据且同太回实。',
-	'terminalno': 114,
-	'provinceName': '北京',
-	'cityName': '海外',
-	'countyName': '涟源市'
-}, {
-	'alertdetail': '低与金利许验。',
-	'alertname': '各种报警',
-	'alertvalue': 87.014122311,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10015,
-	'phase': 'A1',
-	'sbInfo': '南目时农天立声来会农满后手严化。',
-	'terminalno': 115,
-	'provinceName': '内蒙古自治区',
-	'cityName': '衡水市',
-	'countyName': '-'
-}, {
-	'alertdetail': '生路题你少队表。',
-	'alertname': '水浸告警',
-	'alertvalue': 105.65846324863895,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10016,
-	'phase': 'A1',
-	'sbInfo': '周动阶了节农给自流更土完新化号。',
-	'terminalno': 116,
-	'provinceName': '云南省',
-	'cityName': '锡林郭勒盟',
-	'countyName': '双桥区'
-}, {
-	'alertdetail': '本不叫间王装斯国强。',
-	'alertname': '各种报警',
-	'alertvalue': 103.73382063737,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10017,
-	'phase': 'A1',
-	'sbInfo': '第资有军器张几际红矿八们。',
-	'terminalno': 117,
-	'provinceName': '新疆维吾尔自治区',
-	'cityName': '来宾市',
-	'countyName': '让胡路区'
-}, {
-	'alertdetail': '建思很开应非文。',
-	'alertname': '各种报警',
-	'alertvalue': 161.2652895979,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10018,
-	'phase': 'A1',
-	'sbInfo': '通每土感何几千工铁完在区江儿。',
-	'terminalno': 118,
-	'provinceName': '辽宁省',
-	'cityName': '秦皇岛市',
-	'countyName': '龙海市'
-}, {
-	'alertdetail': '系它难持保。',
-	'alertname': '各种报警',
-	'alertvalue': 93.6,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10019,
-	'phase': 'A1',
-	'sbInfo': '北八约即于后志前极由习史。',
-	'terminalno': 119,
-	'provinceName': '黑龙江省',
-	'cityName': '太原市',
-	'countyName': '双牌县'
-}, {
-	'alertdetail': '油后基交要可议。',
-	'alertname': '水浸告警',
-	'alertvalue': 99.8360675,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10020,
-	'phase': 'A1',
-	'sbInfo': '所着百中何现石别开百人酸道民特往。',
-	'terminalno': 120,
-	'provinceName': '黑龙江省',
-	'cityName': '佛山市',
-	'countyName': '谢家集区'
-}, {
-	'alertdetail': '白长价办表干便。',
-	'alertname': '各种报警',
-	'alertvalue': 98.323,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10021,
-	'phase': 'A1',
-	'sbInfo': '由如至等这总且调张常话线有采。',
-	'terminalno': 121,
-	'provinceName': '四川省',
-	'cityName': '澳门半岛',
-	'countyName': '邹城市'
-}, {
-	'alertdetail': '真保重其导水例。',
-	'alertname': '各种报警',
-	'alertvalue': 89.1839,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10022,
-	'phase': 'A1',
-	'sbInfo': '变高值做经什无千年成且集须。',
-	'terminalno': 122,
-	'provinceName': '江西省',
-	'cityName': '九龙',
-	'countyName': '-'
-}, {
-	'alertdetail': '指况团将素定间消。',
-	'alertname': '水浸告警',
-	'alertvalue': 130.7253866476,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10023,
-	'phase': 'A1',
-	'sbInfo': '步十须东号部给米造属县该性。',
-	'terminalno': 123,
-	'provinceName': '浙江省',
-	'cityName': '唐山市',
-	'countyName': '通榆县'
-}, {
-	'alertdetail': '性选变安心斗道求。',
-	'alertname': '各种报警',
-	'alertvalue': 115.05665,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10024,
-	'phase': 'A1',
-	'sbInfo': '会整保术准许因圆引准因便品马济支。',
-	'terminalno': 124,
-	'provinceName': '吉林省',
-	'cityName': '韶关市',
-	'countyName': '中西区'
-}, {
-	'alertdetail': '处那率西导活相活来段。',
-	'alertname': '水浸告警',
-	'alertvalue': 112.35306815919544,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10025,
-	'phase': 'A1',
-	'sbInfo': '结中严听代验平想与导光设。',
-	'terminalno': 125,
-	'provinceName': '台湾',
-	'cityName': '澳门半岛',
-	'countyName': '葵青区'
-}, {
-	'alertdetail': '计保因除当。',
-	'alertname': '各种报警',
-	'alertvalue': 109.8,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10026,
-	'phase': 'A1',
-	'sbInfo': '公想路则头求该把音即国正内。',
-	'terminalno': 126,
-	'provinceName': '河南省',
-	'cityName': '重庆市',
-	'countyName': '寿阳县'
-}, {
-	'alertdetail': '保家林单会通以。',
-	'alertname': '水浸告警',
-	'alertvalue': 122.66135364618854,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10027,
-	'phase': 'A1',
-	'sbInfo': '南主历型教本上证格统积许感界后那。',
-	'terminalno': 127,
-	'provinceName': '广东省',
-	'cityName': '昌都地区',
-	'countyName': '榕城区'
-}, {
-	'alertdetail': '装场较次文造边海意。',
-	'alertname': '各种报警',
-	'alertvalue': 164.25152937377285,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10028,
-	'phase': 'A1',
-	'sbInfo': '形际管少回平至须具专日。',
-	'terminalno': 128,
-	'provinceName': '香港特别行政区',
-	'cityName': '云林县',
-	'countyName': '其它区'
-}, {
-	'alertdetail': '当市圆义作存业半。',
-	'alertname': '水浸告警',
-	'alertvalue': 161.01245771919,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10029,
-	'phase': 'A1',
-	'sbInfo': '历已出区图或规要关化。',
-	'terminalno': 129,
-	'provinceName': '江西省',
-	'cityName': '海外',
-	'countyName': '其它区'
-}, {
-	'alertdetail': '系想线想长。',
-	'alertname': '水浸告警',
-	'alertvalue': 91.21834139614853,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10030,
-	'phase': 'A1',
-	'sbInfo': '色量儿公运长声们入制么整离消志要。',
-	'terminalno': 130,
-	'provinceName': '安徽省',
-	'cityName': '云林县',
-	'countyName': '渝北区'
-}, {
-	'alertdetail': '并近住处太日天。',
-	'alertname': '水浸告警',
-	'alertvalue': 146.113779396,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10031,
-	'phase': 'A1',
-	'sbInfo': '事小即之适与日改单备部次完置最。',
-	'terminalno': 131,
-	'provinceName': '四川省',
-	'cityName': '晋城市',
-	'countyName': '伽师县'
-}, {
-	'alertdetail': '领造年算院十现他比。',
-	'alertname': '水浸告警',
-	'alertvalue': 96,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10032,
-	'phase': 'A1',
-	'sbInfo': '不往张着制色极命片布决。',
-	'terminalno': 132,
-	'provinceName': '陕西省',
-	'cityName': '宜兰县',
-	'countyName': '松溪县'
-}, {
-	'alertdetail': '化量毛见使而。',
-	'alertname': '各种报警',
-	'alertvalue': 89,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10033,
-	'phase': 'A1',
-	'sbInfo': '什果老例压争团事大光声选。',
-	'terminalno': 133,
-	'provinceName': '四川省',
-	'cityName': '临沧市',
-	'countyName': '闸北区'
-}, {
-	'alertdetail': '南青类科属体达名路。',
-	'alertname': '各种报警',
-	'alertvalue': 170.3138633584148,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10034,
-	'phase': 'A1',
-	'sbInfo': '除或究接北知龙老增之张争证公权。',
-	'terminalno': 134,
-	'provinceName': '江西省',
-	'cityName': '信阳市',
-	'countyName': '阜宁县'
-}, {
-	'alertdetail': '者使光矿照有水写。',
-	'alertname': '水浸告警',
-	'alertvalue': 117.82,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10035,
-	'phase': 'A1',
-	'sbInfo': '当越商受示议无社题本问目。',
-	'terminalno': 135,
-	'provinceName': '山东省',
-	'cityName': '龙岩市',
-	'countyName': '隆德县'
-}, {
-	'alertdetail': '志西院定自先变照今如。',
-	'alertname': '水浸告警',
-	'alertvalue': 85.754742662974,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10036,
-	'phase': 'A1',
-	'sbInfo': '当了型江在万近它且严民眼目。',
-	'terminalno': 136,
-	'provinceName': '海南省',
-	'cityName': '三门峡市',
-	'countyName': '通州区'
-}, {
-	'alertdetail': '代命不量花族斯题节想。',
-	'alertname': '各种报警',
-	'alertvalue': 98.38545528,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10037,
-	'phase': 'A1',
-	'sbInfo': '此本个理九道型中子每劳府象育到西交。',
-	'terminalno': 137,
-	'provinceName': '江苏省',
-	'cityName': '苗栗县',
-	'countyName': '平罗县'
-}, {
-	'alertdetail': '据切两它较般见林。',
-	'alertname': '各种报警',
-	'alertvalue': 155.737,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10038,
-	'phase': 'A1',
-	'sbInfo': '里力大下相为比每争当般求。',
-	'terminalno': 138,
-	'provinceName': '海南省',
-	'cityName': '日喀则地区',
-	'countyName': '金州区'
-}, {
-	'alertdetail': '引三可为比事常族现表。',
-	'alertname': '水浸告警',
-	'alertvalue': 131.4231678633,
-	'createtime': '2022-04-19 08:38:33',
-	'deviceid': null,
-	'gatewayno': 10039,
-	'phase': 'A1',
-	'sbInfo': '手提个加极地平每备统。',
-	'terminalno': 139,
-	'provinceName': '江西省',
-	'cityName': '大同市',
-	'countyName': '万荣乡'
-}]
-        }
-      }
-      this.list = res.data.list
-                let timer = setTimeout(() => {
-              clearTimeout(timer)
-              this.defaultOption.step=1
-          }, 1000);
-      // this.pageflag =false
-      // currentGET('big5', { limitNum: 50 }).then(res => {
-      //   console.log('实时预警', res);
-      //   if (res.success) {
-      //     this.list = res.data.list
-      //     let timer = setTimeout(() => {
-      //         clearTimeout(timer)
-      //         this.defaultOption.step=this.$store.state.setting.defaultOption.step
-      //     }, this.$store.state.setting.defaultOption.waitTime);
-      //   } else {
-      //     this.pageflag = false
-      //     this.$Message.warning(res.msg)
-      //   }
-      // })
-    },
-
-  },
+	props: ['htlistData'],
+	components: { vueSeamlessScroll, Kong },
+
+	data() {
+		return {
+			list: [],
+			pageflag: true,
+			defaultOption: {
+				step: 0.5, // 数值越大速度滚动越快
+				hoverStop: true, // 是否开启鼠标悬停stop
+				openWatch: true, // 开启数据实时监控刷新dom
+				direction: 1, // 0向下 1向上 2向左 3向右
+				limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
+				singleHeight: 250, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+				singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+				waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
+			},
+		};
+	},
+	computed: {
+		sbtxSwiperFlag() {
+			let ssyjSwiper = true
+			if (ssyjSwiper) {
+				this.components = vueSeamlessScroll
+			} else {
+				this.components = Kong
+			}
+			return ssyjSwiper
+		}
+	},
+	created() {
+		// this.getData()
+	},
+	watch: {
+		htlistData(res) {
+			console.log('rightbottom')
+			console.log(res)
+			this.list = res
+
+		}
+	},
+	mounted() { },
+	methods: {
+		//     getData() {
+		//       this.pageflag = true
+		//       let res = {
+		//         data:{
+		//           list:[ {
+		// 	'alertdetail': '引三可为比事常族现表。',
+		// 	'alertname': '水浸告警',
+		// 	'alertvalue': 131.4231678633,
+		// 	'createtime': '2022-04-19 08:38:33',
+		// 	'deviceid': null,
+		// 	'gatewayno': 10039,
+		// 	'phase': 'A1',
+		// 	'sbInfo': '手提个加极地平每备统。',
+		// 	'terminalno': 139,
+		// 	'provinceName': '江西省',
+		// 	'cityName': '大同市',
+		// 	'countyName': '万荣乡'
+		// }]
+		//         }
+		//       }
+		//       this.list = res.data.list
+		//                 let timer = setTimeout(() => {
+		//               clearTimeout(timer)
+		//               this.defaultOption.step=1
+		//           }, 1000);
+		//       // this.pageflag =false
+		//       // currentGET('big5', { limitNum: 50 }).then(res => {
+		//       //   console.log('实时预警', res);
+		//       //   if (res.success) {
+		//       //     this.list = res.data.list
+		//       //     let timer = setTimeout(() => {
+		//       //         clearTimeout(timer)
+		//       //         this.defaultOption.step=this.$store.state.setting.defaultOption.step
+		//       //     }, this.$store.state.setting.defaultOption.waitTime);
+		//       //   } else {
+		//       //     this.pageflag = false
+		//       //     this.$Message.warning(res.msg)
+		//       //   }
+		//       // })
+		//     },
+
+	},
 };
 </script>
 <style lang='scss' scoped>
 .right_center {
-  width: 100%;
-  height: 100%;
-
-  .right_center_item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: auto;
-    padding: 10px;
-    font-size: 14px;
-    color: #fff;
-
-    .orderNum {
-      margin: 0 20px 0 -20px;
-    }
-
-
-    .inner_right {
-      position: relative;
-      height: 100%;
-      width: 400px;
-      flex-shrink: 0;
-      line-height: 1.5;
-
-      .dibu {
-        position: absolute;
-        height: 2px;
-        width: 104%;
-        background-image: url("../../assets/images/zuo_xuxian.png");
-        bottom: -12px;
-        left: -2%;
-        background-size: cover;
-      }
-    }
-
-    .info {
-      margin-right: 10px;
-      display: flex;
-      align-items: center;
-
-      .labels {
-        flex-shrink: 0;
-        font-size: 12px;
-        color: rgba(255, 255, 255, 0.6);
-      }
-
-      .zhuyao {
-        color: red;
-        font-size: 15px;
-      }
-
-      .ciyao {
-        color: rgba(255, 255, 255, 0.8);
-      }
-
-      .warning {
-        color: #E6A23C;
-        font-size: 15px;
-      }
-    }
-
-  }
+	width: 100%;
+	height: 100%;
+	padding-left: 0;
+
+	.right_center_item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: auto;
+		padding: 10px;
+		font-size: 14px;
+		color: #fff;
+
+		.orderNum {
+			margin: 0 20px 0 -20px;
+		}
+
+
+		.inner_right {
+			position: relative;
+			height: 100%;
+			width: 400px;
+			flex-shrink: 0;
+			line-height: 1.5;
+
+			.dibu {
+				position: absolute;
+				height: 2px;
+				width: 104%;
+				background-image: url("../../assets/images/zuo_xuxian.png");
+				bottom: -12px;
+				left: -2%;
+				background-size: cover;
+			}
+		}
+
+		.info {
+			margin-right: 10px;
+			display: flex;
+			align-items: center;
+
+			.labels {
+				flex-shrink: 0;
+				font-size: 12px;
+				color: rgba(255, 255, 255, 0.6);
+			}
+
+			.zhuyao {
+				color: red;
+				font-size: 15px;
+			}
+
+			.ciyao {
+				color: rgba(255, 255, 255, 0.8);
+			}
+
+			.warning {
+				color: #E6A23C;
+				font-size: 15px;
+			}
+		}
+
+	}
 }
 
 .right_center_wrap {
-  overflow: hidden;
-  width: 100%;
-  height: 190px;
+	overflow: hidden;
+	width: 100%;
+	height: 190px;
 }
 
 .overflow-y-auto {
-  overflow-y: auto;
+	overflow-y: auto;
 }
 </style>

src/views/home/right-center.vue

@@ -14,6 +14,7 @@
 <script>
 // import { currentGET } from 'api/modules'
 export default {
+  props: ['phklistData'],
   data() {
     return {
       gatewayno: '',
@@ -22,11 +23,46 @@ export default {
         unit: '吨',
         data: []
       },
-      value:0,    
+      value: 0,
     };
   },
+  watch: {
+    phklistData(res) {
+      console.log('leftbottom')
+      console.log(res)
+      let _list = []
+      for (let i = 0; i < res.length; i++) {
+        let _obj = {
+          value: res[i].weight,
+          name: res[i].name
+        }
+        _list.push(_obj)
+      }
+      this.config = {
+        ...this.config,
+        data: _list
+      }
+      //       let res  = {
+      //         data:[
+      //           {value: this.value++, name: '鲅鱼圈金信库'},
+      // {value: 817, name: '鲅鱼圈金信库'},
+      // {value: 800, name: '鲅鱼圈金信库'},
+      // {value: 792, name: '鲅鱼圈金信库'},
+      // {value: 759, name: '鲅鱼圈金信库'},
+      // {value: 671, name: '鲅鱼圈金信库'},
+      // {value: 592, name: '鲅鱼圈金信库'},
+      // {value: 226, name: '鲅鱼圈金信库'}
+      //         ]
+      //       }
+      //            this.config = {
+      //             ...this.config,
+      //             data: res.data
+      //           }
+
+    }
+  },
   created() {
-    this.getData()
+    // this.getData()
 
   },
   computed: {
@@ -43,56 +79,56 @@ export default {
       }
     },
     //轮询
-    switper() {
-      if (this.timer) {
-        return
-      }
-      let looper = (a) => {
-        this.getData()
-      };
-      this.timer = setInterval(looper, 1000);
-    },
-    getData() {
-      this.pageflag = true
-      // this.pageflag =false
-      let res  = {
-        data:[
-          {value: this.value++, name: '鲅鱼圈金信库'},
-{value: 817, name: '鲅鱼圈金信库'},
-{value: 800, name: '鲅鱼圈金信库'},
-{value: 792, name: '鲅鱼圈金信库'},
-{value: 759, name: '鲅鱼圈金信库'},
-{value: 671, name: '鲅鱼圈金信库'},
-{value: 592, name: '鲅鱼圈金信库'},
-{value: 226, name: '鲅鱼圈金信库'}
-        ]
-      }
-           this.config = {
-            ...this.config,
-            data: res.data
-          }
-          this.switper()
-      // currentGET('big7', { gatewayno: this.gatewayno }).then(res => {
-
-      //   if (!this.timer) {
-      //     console.log('报警排名', res);
-      //   }
-      //   if (res.success) {
-      //     this.config = {
-      //       ...this.config,
-      //       data: res.data
-      //     }
-      //     this.switper()
-      //   } else {
-      //     this.pageflag = false
-      //     this.srcList = []
-      //     this.$Message({
-      //       text: res.msg,
-      //       type: 'warning'
-      //     })
-      //   }
-      // })
-    },
+    // switper() {
+    //   if (this.timer) {
+    //     return
+    //   }
+    //   let looper = (a) => {
+    //     this.getData()
+    //   };
+    //   this.timer = setInterval(looper, 1000);
+    // },
+    // getData() {
+    //   this.pageflag = true
+    //   // this.pageflag =false
+    //   let res = {
+    //     data: [
+    //       { value: this.value++, name: '鲅鱼圈金信库' },
+    //       { value: 817, name: '鲅鱼圈金信库' },
+    //       { value: 800, name: '鲅鱼圈金信库' },
+    //       { value: 792, name: '鲅鱼圈金信库' },
+    //       { value: 759, name: '鲅鱼圈金信库' },
+    //       { value: 671, name: '鲅鱼圈金信库' },
+    //       { value: 592, name: '鲅鱼圈金信库' },
+    //       { value: 226, name: '鲅鱼圈金信库' }
+    //     ]
+    //   }
+    //   this.config = {
+    //     ...this.config,
+    //     data: res.data
+    //   }
+    //   this.switper()
+    //   // currentGET('big7', { gatewayno: this.gatewayno }).then(res => {
+
+    //   //   if (!this.timer) {
+    //   //     console.log('报警排名', res);
+    //   //   }
+    //   //   if (res.success) {
+    //   //     this.config = {
+    //   //       ...this.config,
+    //   //       data: res.data
+    //   //     }
+    //   //     this.switper()
+    //   //   } else {
+    //   //     this.pageflag = false
+    //   //     this.srcList = []
+    //   //     this.$Message({
+    //   //       text: res.msg,
+    //   //       type: 'warning'
+    //   //     })
+    //   //   }
+    //   // })
+    // },
   },
 };
 </script>
@@ -101,7 +137,7 @@ export default {
   height: 100%;
   overflow: hidden;
 
-  ::v-deep  .kong {
+  ::v-deep .kong {
     width: auto;
   }
 }

src/views/home/right-top.vue

@@ -13,15 +13,16 @@
     v-if="pageflag"
     ref="charts"
   />
-  <Reacquire v-else @onclick="getData" style="line-height: 200px">
+  <!-- <Reacquire v-else @onclick="getData" style="line-height: 200px">
     重新获取
-  </Reacquire>
+  </Reacquire> -->
 </template>
 
 <script>
 // import { currentGET } from "api/modules";
 
 export default {
+  props:['crklistData'],
   data() {
     return {
       option: {},
@@ -29,8 +30,39 @@ export default {
       timer: null,
     };
   },
+  watch:{
+    crklistData(res){
+      console.log('rightyop')
+      console.log(res)
+      this.pageflag = true;
+//       let res = {
+//         data:{
+//       dateList:['2021-11', '2021-12', '2022-01', '2022-02', '2022-03', '2022-04'],
+// numList:[169, 645, 661, 38, 432, 176],
+// numList2:[659, 316, 710, 990, 26, 820]
+//         }
+  
+//       }
+  debugger
+      //  this.countUserNumData = res.data;
+      let ct = new Date().getMonth();
+      let dateList =[]
+      let numList =[]
+      let numList2 =[]
+      for(let i = 0;i<res.ck.length;i++){
+        if(i>ct) break
+        dateList.push(res.ck[i].name)
+        numList.push(Number(res.ck[i].count))
+      }
+      for(let i = 0;i<res.rk.length;i++){
+        if(i>ct) break
+        numList2.push(Number(res.rk[i].count))
+      }
+       this.init(dateList, numList,numList2)
+        }
+    },
   created() {
-    this.getData();
+    // this.getData();
   },
 
   mounted() {},
@@ -44,65 +76,65 @@ export default {
         this.timer = null;
       }
     },
-    getData() {
-      this.pageflag = true;
-      let res = {
-        data:{
-      dateList:['2021-11', '2021-12', '2022-01', '2022-02', '2022-03', '2022-04'],
-numList:[169, 645, 661, 38, 432, 176],
-numList2:[659, 316, 710, 990, 26, 820]
-        }
+//     getData() {
+//       this.pageflag = true;
+//       let res = {
+//         data:{
+//       dateList:['2021-11', '2021-12', '2022-01', '2022-02', '2022-03', '2022-04'],
+// numList:[169, 645, 661, 38, 432, 176],
+// numList2:[659, 316, 710, 990, 26, 820]
+//         }
   
-      }
-       this.countUserNumData = res.data;
-          this.$nextTick(() => {
-            this.init(res.data.dateList, res.data.numList, res.data.numList2),
-              this.switper();
-          });
+//       }
+//        this.countUserNumData = res.data;
+//           this.$nextTick(() => {
+//             this.init(res.data.dateList, res.data.numList, res.data.numList2),
+//               this.switper();
+//           });
 
-      // this.pageflag =false
-      // currentGET("big4").then((res) => {
-      //   if (!this.timer) {
-      //     console.log("报警次数", res);
-      //   }
-      //   if (res.success) {
-      //     this.countUserNumData = res.data;
-      //     this.$nextTick(() => {
-      //       this.init(res.data.dateList, res.data.numList, res.data.numList2),
-      //         this.switper();
-      //     });
-      //   } else {
-      //     this.pageflag = false;
-      //     this.$Message({
-      //       text: res.msg,
-      //       type: "warning",
-      //     });
-      //   }
-      // });
-    },
+//       // this.pageflag =false
+//       // currentGET("big4").then((res) => {
+//       //   if (!this.timer) {
+//       //     console.log("报警次数", res);
+//       //   }
+//       //   if (res.success) {
+//       //     this.countUserNumData = res.data;
+//       //     this.$nextTick(() => {
+//       //       this.init(res.data.dateList, res.data.numList, res.data.numList2),
+//       //         this.switper();
+//       //     });
+//       //   } else {
+//       //     this.pageflag = false;
+//       //     this.$Message({
+//       //       text: res.msg,
+//       //       type: "warning",
+//       //     });
+//       //   }
+//       // });
+//     },
     //轮询
-    switper() {
-      if (this.timer) {
-        return;
-      }
-      let looper = (a) => {
-        this.getData();
-      };
-      this.timer = setInterval(
-        looper,
-        1000
-      );
-      let myChart = this.$refs.charts.chart;
-      myChart.on('mouseover', (params) => {
-        this.clearData();
-      });
-      myChart.on('mouseout', (params) => {
-        this.timer = setInterval(
-          looper,
-         1000
-        );
-      });
-    },
+    // switper() {
+    //   if (this.timer) {
+    //     return;
+    //   }
+    //   let looper = (a) => {
+    //     this.getData();
+    //   };
+    //   this.timer = setInterval(
+    //     looper,
+    //     1000
+    //   );
+    //   let myChart = this.$refs.charts.chart;
+    //   myChart.on('mouseover', (params) => {
+    //     this.clearData();
+    //   });
+    //   myChart.on('mouseout', (params) => {
+    //     this.timer = setInterval(
+    //       looper,
+    //      1000
+    //     );
+    //   });
+    // },
     init(xData, yData, yData2) {
       this.option = {
         xAxis: {
@@ -200,7 +232,7 @@ numList2:[659, 316, 710, 990, 26, 820]
                   valueDim: 'y',
                   symbol: 'rect',
                   symbolSize: [60, 26],
-                  symbolOffset: [0, -20],
+                  symbolOffset: [80, -10],
                   itemStyle: {
                     color: 'rgba(0,0,0,0)',
                   },
@@ -269,7 +301,7 @@ numList2:[659, 316, 710, 990, 26, 820]
                   valueDim: 'y',
                   symbol: 'rect',
                   symbolSize: [60, 26],
-                  symbolOffset: [0, -20],
+                  symbolOffset: [80, -10],
                   itemStyle: {
                     color: 'rgba(0,0,0,0)',
                   },

src/views/platformAudit/component/routers/route.js

@@ -1,105 +1,105 @@
 import Layout from '@/layout/index';
 
 const platformauditRouter = {
-  path: '/platformaudit',
-  component: Layout,
-  redirect: '/platformaudit',
-  name: 'platformaudit',
-  alwaysShow: true, // will always show the root menu
-  meta: {
-    title: 'platformaudit',
-    module: 'audit',
-    icon: '-shenhe'
-  },
-  children: [
-
-    //粮商审核
-    {
-      path: 'grainmerchantreview',
-      component: () =>
-        import(/* webpackChunkName: "applDetail" */ '@/views/platformaudit/grainmerchantreview'),
-      name: 'grainmerchantreview',
-      meta: {
-        title: 'grainmerchantreview',
-        shortcutEntrance: 'grainmerchantreview',
-        module: 'audit.grainMerchant.grainMerchantInfo',
-        permissicon: [],
-        keepAlive: true
-      },
+    path: '/platformaudit',
+    component: Layout,
+    redirect: '/platformaudit',
+    name: 'platformaudit',
+    alwaysShow: true, // will always show the root menu
+    meta: {
+        title: 'platformaudit',
+        module: 'audit',
+        icon: '-shenhe'
     },
+    children: [
 
-    //司机审核
-    {
-      path: 'driverreview',
-      component: () =>
-        import(/* webpackChunkName: "applDetail" */ '@/views/platformaudit/driverreview'),
-      name: 'driverreview',
-      meta: {
-        title: 'driverreview',
-        shortcutEntrance: 'driverreview',
-        module: 'audit.driverMerchant.driverMerchantInfo',
-        permissicon: [],
-        keepAlive: true
-      },
-    },
+        //粮商审核
+        // {
+        //   path: 'grainmerchantreview',
+        //   component: () =>
+        //     import(/* webpackChunkName: "applDetail" */ '@/views/platformaudit/grainmerchantreview'),
+        //   name: 'grainmerchantreview',
+        //   meta: {
+        //     title: 'grainmerchantreview',
+        //     shortcutEntrance: 'grainmerchantreview',
+        //     module: 'audit.grainMerchant.grainMerchantInfo',
+        //     permissicon: [],
+        //     keepAlive: true
+        //   },
+        // },
 
-    //采购交易信息审核
-    {
-      path: 'transactioninformationreview',
-      component: () =>
-        import(/* webpackChunkName: "applDetail" */ '@/views/platformaudit/transactioninformationreview'),
-      name: 'transactioninformationreview',
-      meta: {
-        title: 'transactioninformationreview',
-        shortcutEntrance: 'transactioninformationreview',
-        module: 'audit.tranMerchant.tranMerchantInfo',
-        permissicon: [],
-        keepAlive: true
-      },
-    },
+        // //司机审核
+        // {
+        //   path: 'driverreview',
+        //   component: () =>
+        //     import(/* webpackChunkName: "applDetail" */ '@/views/platformaudit/driverreview'),
+        //   name: 'driverreview',
+        //   meta: {
+        //     title: 'driverreview',
+        //     shortcutEntrance: 'driverreview',
+        //     module: 'audit.driverMerchant.driverMerchantInfo',
+        //     permissicon: [],
+        //     keepAlive: true
+        //   },
+        // },
 
-    //销售交易信息审核
-    {
-      path: 'saletransactioninformationreview',
-      component: () =>
-        import(/* webpackChunkName: "applDetail" */ '@/views/platformaudit/saletransactioninformationreview'),
-      name: 'saletransactioninformationreview',
-      meta: {
-        title: 'saletransactioninformationreview',
-        shortcutEntrance: 'saletransactioninformationreview',
-        module: 'audit.tranMerchant.tranMerchantInfo',
-        permissicon: [],
-        keepAlive: true
-      },
-    },
-    //粮脉企业审核
-    {
-      path: 'grainpulseenterprisereview',
-      component: () =>
-        import(/* webpackChunkName: "applDetail" */ '@/views/platformaudit/grainpulseenterprisereview'),
-      name: 'grainpulseenterprisereview',
-      meta: {
-        title: 'grainpulseenterprisereview',
-        shortcutEntrance: 'grainpulseenterprisereview',
-        module: 'audit.tranMerchant.tranMerchantInfo',
-        permissicon: [],
-        keepAlive: true
-      },
-    },
-    //粮脉动态审核
-    {
-      path: 'grainPulseDynamic',
-      component: () =>
-        import(/* webpackChunkName: "applDetail" */ '@/views/platformaudit/grainPulseDynamic'),
-      name: 'grainPulseDynamic',
-      meta: {
-        title: 'grainPulseDynamic',
-        shortcutEntrance: 'grainPulseDynamic',
-        module: 'audit.grainMerchant.grainMerchantInfo.review',
-        permissicon: [],
-        keepAlive: true
-      },
-    },
-  ],
+        // //采购交易信息审核
+        // {
+        //   path: 'transactioninformationreview',
+        //   component: () =>
+        //     import(/* webpackChunkName: "applDetail" */ '@/views/platformaudit/transactioninformationreview'),
+        //   name: 'transactioninformationreview',
+        //   meta: {
+        //     title: 'transactioninformationreview',
+        //     shortcutEntrance: 'transactioninformationreview',
+        //     module: 'audit.tranMerchant.tranMerchantInfo',
+        //     permissicon: [],
+        //     keepAlive: true
+        //   },
+        // },
+
+        // //销售交易信息审核
+        // {
+        //   path: 'saletransactioninformationreview',
+        //   component: () =>
+        //     import(/* webpackChunkName: "applDetail" */ '@/views/platformaudit/saletransactioninformationreview'),
+        //   name: 'saletransactioninformationreview',
+        //   meta: {
+        //     title: 'saletransactioninformationreview',
+        //     shortcutEntrance: 'saletransactioninformationreview',
+        //     module: 'audit.tranMerchant.tranMerchantInfo',
+        //     permissicon: [],
+        //     keepAlive: true
+        //   },
+        // },
+        // //粮脉企业审核
+        // {
+        //   path: 'grainpulseenterprisereview',
+        //   component: () =>
+        //     import(/* webpackChunkName: "applDetail" */ '@/views/platformaudit/grainpulseenterprisereview'),
+        //   name: 'grainpulseenterprisereview',
+        //   meta: {
+        //     title: 'grainpulseenterprisereview',
+        //     shortcutEntrance: 'grainpulseenterprisereview',
+        //     module: 'audit.tranMerchant.tranMerchantInfo',
+        //     permissicon: [],
+        //     keepAlive: true
+        //   },
+        // },
+        // //粮脉动态审核
+        // {
+        //   path: 'grainPulseDynamic',
+        //   component: () =>
+        //     import(/* webpackChunkName: "applDetail" */ '@/views/platformaudit/grainPulseDynamic'),
+        //   name: 'grainPulseDynamic',
+        //   meta: {
+        //     title: 'grainPulseDynamic',
+        //     shortcutEntrance: 'grainPulseDynamic',
+        //     module: 'audit.grainMerchant.grainMerchantInfo.review',
+        //     permissicon: [],
+        //     keepAlive: true
+        //   },
+        // },
+    ],
 };
 export default platformauditRouter;