更新

.env.test

@@ -4,7 +4,7 @@
 
 NODE_ENV = 'production'
 # base api
-VUE_APP_BASE_API = 'https://apitest.eliangeyun.com'
+VUE_APP_BASE_API = 'https://apitest2.eliangeyun.com'
 
 # 微服务相关接口配置
 ## 任务消息

package-lock.json

@@ -3751,6 +3751,59 @@
         "postcss": "^7.0.0"
       }
     },
+    "@jiaminghi/bezier-curve": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz",
+      "integrity": "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "@jiaminghi/c-render": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz",
+      "integrity": "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/bezier-curve": "*",
+        "@jiaminghi/color": "*",
+        "@jiaminghi/transition": "*"
+      }
+    },
+    "@jiaminghi/charts": {
+      "version": "0.2.18",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz",
+      "integrity": "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/c-render": "^0.4.3"
+      }
+    },
+    "@jiaminghi/color": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
+      "integrity": "sha512-M09+Sb5HGqVim0zo+nG5gU1v+6gXT8ptr0BZR6dMGt83XmCJgnZtO8s7llTW4hLFFFM5co6geZvTekqLpSPAAQ==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "@jiaminghi/data-view": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz",
+      "integrity": "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@jiaminghi/charts": "*"
+      }
+    },
+    "@jiaminghi/transition": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz",
+      "integrity": "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "@malept/cross-spawn-promise": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@malept/cross-spawn-promise/-/cross-spawn-promise-1.1.1.tgz",
@@ -5355,6 +5408,11 @@
         "xml2js": "^0.4.16"
       },
       "dependencies": {
+        "js-base64": {
+          "version": "2.6.4",
+          "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-2.6.4.tgz",
+          "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
+        },
         "mime": {
           "version": "2.5.2",
           "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
@@ -10618,9 +10676,9 @@
       }
     },
     "element-ui": {
-      "version": "2.13.2",
-      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.13.2.tgz",
-      "integrity": "sha512-r761DRPssMPKDiJZWFlG+4e4vr0cRG/atKr3Eqr8Xi0tQMNbtmYU1QXvFnKiFPFFGkgJ6zS6ASkG+sellcoHlQ==",
+      "version": "2.15.9",
+      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.9.tgz",
+      "integrity": "sha512-dx45nQLt4Hn87/Z9eRr3ex6KFZbxlFAwEU3QoW3wA5EsYftvHTyL9Pq7VnXXD7hu1Eiaup2jcs6kp+/VSFmXuA==",
       "requires": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",
@@ -10632,7 +10690,7 @@
       "dependencies": {
         "async-validator": {
           "version": "1.8.5",
-          "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+          "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
           "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
           "requires": {
             "babel-runtime": "6.x"
@@ -13506,9 +13564,9 @@
       "dev": true
     },
     "js-base64": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npm.taobao.org/js-base64/download/js-base64-2.5.2.tgz",
-      "integrity": "sha1-MTtidN2nGPcU0AszMLuubjjpAgk="
+      "version": "3.7.2",
+      "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.2.tgz",
+      "integrity": "sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ=="
     },
     "js-cookie": {
       "version": "2.2.0",
@@ -15946,8 +16004,8 @@
     },
     "normalize-wheel": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
-      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+      "resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
     },
     "npm-bundled": {
       "version": "1.1.1",
@@ -18698,6 +18756,11 @@
         "source-map": "^0.4.2"
       },
       "dependencies": {
+        "js-base64": {
+          "version": "2.6.4",
+          "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-2.6.4.tgz",
+          "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
+        },
         "source-map": {
           "version": "0.4.4",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",

public/index.html

@@ -22,6 +22,7 @@
   <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css[process.env.VUE_APP_PACKAGE_ENV]) { %>
       <link href="<%= htmlWebpackPlugin.options.cdn.css[process.env.VUE_APP_PACKAGE_ENV][i] %>" rel="stylesheet">
   <% } %>
+  <script src="./js/echarts.min.js"></script>
   <title>易粮易运</title>
   <link rel="icon" href="<%= BASE_URL %>/logo.ico">
   <% if (process.env.NODE_ENV === 'production') { %>

src/components/echart/index.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Author: daidai
+ * @Date: 2022-02-28 16:29:08
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-04-25 15:45:57
+ * @FilePath: \web-pc\src\pages\big-screen\components\echart\index.vue
+-->
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+
+export default {
+  name: 'echart',
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    options: {
+      type: Object,
+      default: ()=>({})
+    }
+  },
+  data () {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler (options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    // echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  beforeDestroy () {
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart () {
+      // 初始化echart
+      this.chart = echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/components/echart/theme.json

@@ -0,0 +1,490 @@
+{
+  "color": [
+    "#2d8cf0",
+    "#19be6b",
+    "#ff9900",
+    "#E46CBB",
+    "#9A66E4",
+    "#ed3f14"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#516b91"
+    },
+    "subtextStyle": {
+      "color": "#93b7e3"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "normal": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      },
+      "emphasis": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "normal": {
+        "color": "#edafda",
+        "color0": "transparent",
+        "borderColor": "#d680bc",
+        "borderColor0": "#8fd3e8",
+        "borderWidth": "2"
+      }
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 1,
+        "color": "#aaa"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2d8cf0",
+      "#19be6b",
+      "#f5ae4a",
+      "#9189d5",
+      "#56cae2",
+      "#cbb0e3"
+    ],
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#fff"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#8fd3e8",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#8fd3e8"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#8fd3e8",
+      "borderColor": "rgba(138,124,168,0.37)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#516b91",
+      "#59c4e6",
+      "#a5e7f0"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(0,0,0,0)",
+    "dataBackgroundColor": "rgba(255,255,255,0.3)",
+    "fillerColor": "rgba(167,183,204,0.4)",
+    "handleColor": "#a7b7cc",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,97 @@
+<!--
+ * @Author: daidai
+ * @Date: 2022-03-01 09:16:22
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-05-07 11:06:23
+ * @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue
+-->
+<template>
+  <dv-border-box-13 class="lr_titles">
+    <div class="item_title" v-if="title !== ''">
+      <div class="zuo"></div>
+      <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
+      <div class="you"></div>
+    </div>
+    <div
+      :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
+    >
+      <slot></slot>
+    </div>
+  </dv-border-box-13>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    title: {
+      type: String,
+      default: () => '',
+    },
+  },
+  created() {},
+
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang='scss' scoped>
+$item-title-height: 38px;
+$item_title_content-height: calc(100% - 38px);
+
+.lr_titles {
+  box-sizing: border-box;
+
+  ::v-deep .border-box-content {
+    box-sizing: border-box;
+    padding: 6px 16px 0px;
+  }
+
+  .item_title {
+    height: $item-title-height;
+    line-height: $item-title-height;
+    width: 100%;
+    color: #31abe3;
+    text-align: center;
+    // background: linear-gradient(to right, transparent, #0f0756, transparent);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: 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;
+    }
+  }
+
+  .item_title_content {
+    height: $item_title_content-height;
+  }
+
+  .item_title_content_def {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/kong.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class='kong'>
+      <slot></slot>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {},
+  data() {
+    return {
+    
+    };
+  },
+  props:{
+    data:{
+      type:Array,
+      default:()=>[]
+    }
+  },
+  computed: {},
+  methods: {
+    init(){
+    },
+  },
+  created() {
+  
+  },
+  mounted() {
+  
+  },
+  beforeDestroy() { 
+  },
+}
+</script>
+
+<style lang='scss' scoped>
+.kong{
+    width: 100%;
+    height: 100%;
+}
+</style>

src/lib/currency.js

@@ -0,0 +1,432 @@
+/*
+ * @Author: daidai
+ * @Date: 2021-12-06 15:53:24
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-04-22 09:31:24
+ * @FilePath: \web-pc\src\lib\currency.js
+ */
+import router from '@/router'
+import { isString, isHtmlElement } from './types'
+import UtilVar from "@/config/UtilVar";
+export const returnWeek = () => {
+  var week = new Date().getDay();
+  switch (week) {
+    case 1:
+      return '周一'
+    case 2:
+      return '周二'
+    case 3:
+      return '周三'
+    case 4:
+      return '周四'
+    case 5:
+      return '周五'
+    case 6:
+      return '周六'
+    case 0:
+      return '周日'
+  }
+}
+
+/**
+ * 获取uuid
+ */
+export function getUUID() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+    return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
+  })
+}
+
+/**
+ * 是否有权限
+ * @param {*} key
+ */
+export function isAuth(key) {
+  // console.log("key",key,sessionStorage.getItem('permissions'))
+  // if(process.env.VUE_APP_CONFIG=="dev"){
+  //   return true
+  // }
+  return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
+}
+export const rowClassName = ({ row, rowIndex }) => {
+  if (rowIndex % 2 == 0) {
+    return 'lightColour';
+  } else {
+    return 'DarkColor';
+  }
+}
+
+export const getToken = () => {
+  return localStorage.getItem("token");
+}
+//跳转当前页面并传参
+export const currentQuery = (param) => {
+  let newParam = { ...param }
+  for (let i in newParam) {
+    if (newParam[i] === "") {
+      delete newParam[i]
+    }
+  }
+  // console.log(newParam)
+  router.push({
+    path: router.currentRoute.path,
+    query: newParam
+  })
+}
+/**
+ * 树形数据转换
+ * @param {*} data
+ * @param {*} id
+ * @param {*} pid
+ * @param {*} order
+ */
+export function treeDataTranslate(data, id, pid, order) {
+  // console.log(Array.isArray(data))
+  if (data == null || !Array.isArray(data)) {
+    return [];
+  }
+  if (order) {
+    data.sort(function (a, b) {
+      return a[order] - b[order];
+    })
+  }
+  // console.log(data)
+  var res = []
+  var temp = {}
+  for (var i = 0; i < data.length; i++) {
+    temp[data[i][id]] = data[i]
+  }
+  for (var k = 0; k < data.length; k++) {
+
+    if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
+      if (!temp[data[k][pid]]['subs']) {
+        temp[data[k][pid]]['subs'] = []
+      }
+      if (!temp[data[k][pid]]['_level']) {
+        temp[data[k][pid]]['_level'] = 1
+      }
+      data[k]['_level'] = temp[data[k][pid]]._level + 1
+      temp[data[k][pid]]['subs'].push(data[k])
+
+
+    } else {
+      res.push(data[k])
+    }
+  }
+  // console.log(outurls)
+  // console.log(res)
+  return res
+}
+
+//带了一个 margin-left  
+export const dragss = (e, marginleft) => {
+
+  let odiv = e.currentTarget.parentElement;
+  let disX = e.clientX - odiv.offsetLeft;
+  let disY = e.clientY - odiv.offsetTop;
+  document.onmousemove = (e) => {
+    odiv.style.left = e.clientX - disX + marginleft + 'px';
+    odiv.style.top = e.clientY - disY + 'px';
+    return false;
+  };
+  document.onmouseup = (e) => {
+    document.onmousemove = null;
+    document.onmouseup = null;
+  };
+  return false;
+}
+
+//转base64
+
+export const turnStr = (data) => {
+  return window.btoa(window.encodeURI(JSON.stringify(data)));
+}
+// 验证只能输入数字和小数，小数且只能输入2位，第一位不能输入小数点
+//   .replace(/[^\d.]/g, '')
+//   .replace(/\.{2,}/g, '.')
+//   .replace('.', '$#$')
+//   .replace(/\./g, '')
+//   .replace('$#$', '.')
+//   .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
+//   .replace(/^\./g, '')
+/**
+ * 清除登录信息
+ */
+export function clearLoginInfo() {
+  router.options.isAddDynamicMenuRoutes = false;
+  localStorage.removeItem('token')
+  sessionStorage.removeItem("menuList")
+  sessionStorage.removeItem("permissions")
+}
+
+
+//对象拼成路径传参
+export const convertObj = (data) => {
+  var _result = [];
+  for (var key in data) {
+    var value = data[key];
+    if (value.constructor == Array) {
+      value.forEach(function (_value) {
+        _result.push(key + "=" + _value);
+      });
+    } else {
+      _result.push(key + '=' + value);
+    }
+  }
+  return _result.join('&');
+}
+//判断浏览器
+function getExplorer() {
+  var explorer = window.navigator.userAgent;
+  if (explorer.indexOf('MSIE') >= 0) {
+    return 'ie';        // ie
+  } else if (explorer.indexOf('Firefox') >= 0) {
+    return 'Firefox';   // firefox
+  } else if (explorer.indexOf('Chrome') >= 0) {
+    return 'Chrome';    // Chrome
+  } else if (explorer.indexOf('Opera') >= 0) {
+    return 'Opera';     // Opera
+  } else if (explorer.indexOf('Safari') >= 0) {
+    return 'Safari';    // Safari
+  } else if (!!explorer.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
+    return 'IOS';
+  } else if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
+    return 'Android';
+  } else {
+    return explorer
+  }
+};
+
+//导出文档流
+export const exportFile = (data, name) => {
+  return new Promise((resolve, reject) => {
+    let types = getExplorer()
+    if (types == 'IOS') {
+      resolve({
+        success: false,
+        msg: "请使用设备自带浏览器导出！"
+      })
+      return
+    }
+    if (data.type && data.type.indexOf('application/vnd.ms-excel') >= 0) {
+      // console.log(data)
+      try {
+        let blob = new Blob([data], {
+          type:data.type|| 'application/vnd.ms-excel;charset=UTF-8'
+        })
+        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+          window.navigator.msSaveOrOpenBlob(blob, name);
+        } else {
+          const link = document.createElement('a')
+          link.style.display = 'none';
+          link.href = URL.createObjectURL(blob);
+          if (types == 'Safari') {
+            link.download = `${name || "未命名"}`;
+          } else {
+            link.download = `${name || "未命名"}.xlsx`;
+          }
+          // Safari thinks _blank anchor are pop ups. We only want to set _blank
+          // target if the browser does not support the HTML5 download attribute.
+          // This allows you to download files in desktop safari if pop up blocking
+          // is enabled.
+          if (typeof link.download === 'unde fined') {
+            tempLink.setAttribute('target', '_blank');
+          }
+          document.body.appendChild(link)
+          link.click()
+          // Fixes "webkit blob resource error 1"
+          let timer = setTimeout(function () {
+            document.body.removeChild(link)
+            window.URL.revokeObjectURL(link.href);
+            clearTimeout(timer)
+          }, 200)
+        }
+        resolve({
+          success: true,
+          msg: "导出成功"
+        })
+      } catch (error) {
+        resolve({
+          success: false,
+          msg: "未知异常，请联系管理员！"
+        })
+      }
+    } else {
+      // console.log(data)
+       readFile(data).then(res => {
+        resolve(res)
+      }).catch(err => {
+        resolve({
+          success: false,
+          msg: "未知异常，请联系管理员！"
+        })
+      })
+    }
+  })
+
+}
+//阅读 blod
+export const readFile = (data) => {
+  return new Promise((resole, reject) => {
+    if (Object.prototype.toString.call(data)==='[object Blob]') {
+      let reader = new FileReader()
+      reader.readAsText(data, 'utf-8')
+      reader.onload = (e) => {
+        console.log('--导出--', JSON.parse(reader.result))
+        let result = JSON.parse(reader.result)
+        if (result.code == UtilVar.code) {
+          router.push("/login")
+        }
+        resole(result)
+      }
+    } else {
+      resole(data)
+    }
+
+    // reader.readAsText(data)
+  })
+
+}
+
+//element 时间选择
+
+
+
+export const shortcuts = [{
+  text: '最近一周',
+  onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+    picker.$emit('pick', [start, end]);
+  }
+}, {
+  text: '最近一个月',
+  onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+    picker.$emit('pick', [start, end]);
+  }
+}, {
+  text: '最近三个月',
+  onClick(picker) {
+    const end = new Date();
+    const start = new Date();
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 89);
+    picker.$emit('pick', [start, end]);
+  }
+}]
+export const pickerOptions = {
+  shortcuts: shortcuts
+}
+/**
+ * 清除相同
+ * @param {*} origin
+ * @param {*} target
+ */
+export const ArrayCleanRepeat = (origin, target) => {
+  if (target) origin = origin.concat(target);
+  const result = []
+  const tagObj = {}
+  for (const i of origin) {
+    if (!tagObj[i]) {
+      result.push(i)
+      tagObj[i] = 1
+    }
+  }
+  return result
+}
+/**
+ * @description: 
+ * @param {file:Object} 文件
+ * @return {*}
+ */
+export const beforeUpoads = (file) => {
+  // console.log(file)
+  var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
+  if (
+    testmsg != 'png' &&
+    testmsg != 'jpg' &&
+    testmsg != 'jpeg' &&
+    testmsg != 'webp'
+  ) {
+    // testmsg != 'gif' &&
+    return {
+      success: false,
+      msg: "上传图片格式不正确！"
+    }
+  }
+  const if10M = file.size / 1024 / 1024 < 20
+  if (!if10M) {
+    return {
+      success: false,
+      msg: "上传图片大小不能超过20M!"
+    }
+  }
+  // console.log("上传前",file, this.filelist)
+  return {
+    success: true
+  }
+}
+//复制文字
+export const copy = (value) => {
+  let transfer = document.createElement('input')
+
+  document.body.appendChild(transfer)
+  transfer.value = value // 这里表示想要复制的内容
+  transfer.focus()
+  transfer.select()
+  if (document.execCommand('copy')) {
+    document.execCommand('copy')
+  }
+  transfer.blur()
+  document.body.removeChild(transfer)
+  //选中文字
+  //   let range = document.createRange()
+  //   let referenceNode = this.$refs.xy
+  //   range.selectNodeContents(referenceNode)
+  //   var selection = window.getSelection()
+  //   selection.removeAllRanges()
+  //   selection.addRange(range)
+}
+// 取出两个数组的不同元素
+export const getArrDifference = (arr1, arr2) => {
+  return arr1.concat(arr2).filter(function (v, i, arr) {
+    return arr.indexOf(v) === arr.lastIndexOf(v);
+  });
+}
+
+/**
+ * 表格最大高度
+ * @param {ElementDom} dom 
+ * @param {Boolean} isPaging 是否拥有分页 false 没有 ||  true 有 默认有
+ * @returns 
+ */
+export const tableHeight = (dom,isPaging=true) => {
+  //定位父级到文档高度
+  if (isString(dom)) {
+    dom = document.querySelector(dom)
+    // if (dom) {
+    //   return window.innerHeight - top
+    // }
+  }
+  if (isHtmlElement(dom)) {
+    var parent = dom.offsetParent;
+    var top = dom.offsetTop
+    if(isPaging){
+      top= top+ 63 + 4
+    }else{
+      top= top+ 16
+    }
+    while (parent != null) {
+      top += parent.offsetTop;
+      parent = parent.offsetParent;
+    };
+    return window.innerHeight - top
+  }
+
+  return null
+}
+
+//

src/lib/dd-moment.js

@@ -0,0 +1,93 @@
+
+/*
+ * @Author: daidai
+ * @Date: 2021-12-16 14:40:18
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-04-19 14:44:14
+ * @FilePath: \web-pc\src\lib\dd-moment.js
+ */
+
+
+const DDmoment = function (date) {
+    let time;
+    if (!date) {
+        time = new Date()
+    }else if(date){
+        time=new Date(date);
+    }
+    return {
+        time,
+        format,
+        subtract,
+        getTime,
+    }
+}
+/**
+ * @content 前多少天
+ * @param  days  天 ||  years 年  || months 月 ||  weeks 周 
+ * @returns 
+ */
+function subtract(num, type) {
+    let time = this.time
+    time.setTime(time.getTime()-getNeedTime(num, type))
+    time=new Date(time)
+    return {
+        time,
+        format,
+        getTime
+    }
+}
+/**
+ * @param  Yy年  ||  M 月  || Dd 日 ||  Hh 时 || m 分 || Ss 秒
+ * @returns 
+ */
+function format(fmt) {
+    let date = this.time
+    let ret;
+    const opt = {
+        "Y+": date.getFullYear().toString(),        // 年
+        "y+": date.getFullYear().toString(),        // 年
+        "M+": (date.getMonth() + 1).toString(),     // 月
+        "d+": date.getDate().toString(),            // 日
+        "D+": date.getDate().toString(),            // 日
+        "h+": date.getHours().toString(),           // 时
+        "H+": date.getHours().toString(),           // 时
+        "m+": date.getMinutes().toString(),         // 分
+        "S+": date.getSeconds().toString(),         // 秒
+        "s+": date.getSeconds().toString()          // 秒
+        // 有其他格式化字符需求可以继续添加，必须转化成字符串
+    };
+    for (let k in opt) {
+        ret = new RegExp("(" + k + ")").exec(fmt);
+        if (ret) {
+            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+        };
+    };
+    return fmt;
+}
+//时间戳转时间
+function getTime() {
+    return new Date(this.time)
+}
+//获取需要的时间
+function getNeedTime(num, type) {
+    let time=0
+    switch (type) {
+        case "days":
+            time= 3600 * 1000 * 24 * num;
+            break;
+        case "years":
+            time=3600 * 1000 * 24 *365 *num;
+            break;
+        case "months":
+            time = 3600 * 1000 * 24 *30* num;
+            break;
+        case "weeks":
+            time= 3600 * 1000 * 24 *7* num;
+            break;
+        default:
+            break;
+    }
+    return time;
+}
+export default DDmoment

src/lib/index.js

@@ -0,0 +1,9 @@
+import DDmoment from "./dd-moment"
+import { colors,colors2 } from "./modules/echarts-options"
+import { shortcuts } from "./currency";
+
+export {DDmoment,colors,colors2}
+
+export {
+    shortcuts
+}

src/lib/types.js

@@ -0,0 +1,46 @@
+/*
+ * @Author: daidai
+ * @Date: 2021-12-14 09:15:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-04-25 10:11:04
+ * @FilePath: \web-pc\src\lib\types.js
+ */
+
+export function hasOwn(obj, key) {
+    return hasOwnProperty.call(obj, key);
+  };
+  export function isVNode(node) {
+    return node !== null && typeof node === 'object' && hasOwn(node, 'componentOptions');
+  };
+  
+// 是否字符串
+export function isString2(str) {
+    return (typeof str == 'string') && str.constructor == String;
+}
+export function isString(obj) {
+    return Object.prototype.toString.call(obj) === '[object String]';
+}
+export function isObject(obj) {
+    return Object.prototype.toString.call(obj) === '[object Object]';
+}
+export function isNumber(obj) {
+    return Object.prototype.toString.call(obj) === '[object Number]';
+}
+// 是否完整的
+export function isDef(val) {
+    return val !== undefined && val !== null;
+}
+//
+export function isKorean(text) {
+    const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi;
+    return reg.test(text);
+}
+
+export function isHtmlElement(node) {
+    return node && node.nodeType === Node.ELEMENT_NODE;
+}
+export const isUndefined = (val) => {
+    return val === void 0;
+};
+
+

src/main.js

@@ -38,6 +38,10 @@ import axios from 'axios';
 Vue.prototype.$axios = axios;
 import global from './global.js'
 Vue.prototype.global = global
+import ItemWrap from './components/item-wrap/item-wrap.vue'
+Vue.component('ItemWrap',ItemWrap)
+import Echart from './components/echart/index.vue'
+Vue.component('Echart',Echart)
     // 初始化vue-amap
     // AMap.initAMapApiLoader({
     //   // 高德key

src/utils/index.js

@@ -91,3 +91,34 @@ export function debounce (func, wait, immediate) {
   }
 }
 
+export function formatTime(time, fmt) {
+  if (!time) return '';
+  else {
+    const date = new Date(time);
+    const o = {
+      'M+': date.getMonth() + 1,
+      'd+': date.getDate(),
+      'H+': date.getHours(),
+      'm+': date.getMinutes(),
+      's+': date.getSeconds(),
+      'q+': Math.floor((date.getMonth() + 3) / 3),
+      S: date.getMilliseconds(),
+    };
+    if (/(y+)/.test(fmt))
+      fmt = fmt.replace(
+        RegExp.$1,
+        (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+      );
+    for (const k in o) {
+      if (new RegExp('(' + k + ')').test(fmt)) {
+        fmt = fmt.replace(
+          RegExp.$1,
+          RegExp.$1.length === 1
+            ? o[k]
+            : ('00' + o[k]).substr(('' + o[k]).length)
+        );
+      }
+    }
+    return fmt;
+  }
+}

src/utils/map/xzqCode.js

@@ -0,0 +1,217 @@
+/*
+ * @Author: daidai
+ * @Date: 2022-03-02 09:51:44
+ * @LastEditors: daidai
+ * @LastEditTime: 2022-03-02 09:51:45
+ * @FilePath: \web-pc\src\pages\big-screen\utils\map\xzqCode.js
+ */
+   //获取中国行政区 code
+//    AMap.plugin("AMap.DistrictSearch", function () {
+//     var districtSearch = new AMap.DistrictSearch({
+//       // 关键字对应的行政区级别，country表示国家
+//       level: "country",
+//       //  显示下级行政区级数，1表示返回下一级行政区
+//       subdistrict: 1,
+//     });
+//     let xzqCode = {};
+//     // 搜索所有省/直辖市信息
+//     districtSearch.search("中国", function (status, result) {
+//       // console.log(result);
+//       result.districtList[0].districtList.forEach((item) => {
+//         // console.log(item);
+//         xzqCode[item.name] = {
+//           adcode: item.adcode,
+//           level: item.level,
+//           name: item.name,
+//         };
+//       });
+//     });
+//     xzqCode["中国"] = {
+//       adcode: "100000",
+//       level: "country",
+//       name: "中华人民共和国",
+//     };
+//     setTimeout(() => {
+//     console.log(JSON.stringify(xzqCode),);
+
+//     }, 1000);
+//   });
+
+
+export default {
+    "中国": {
+        "adcode": "100000",
+        "level": "country",
+        "name": "中华人民共和国"
+    },
+    "新疆维吾尔自治区": {
+        "adcode": "650000",
+        "level": "province",
+        "name": "新疆维吾尔自治区"
+    },
+    "湖北省": {
+        "adcode": "420000",
+        "level": "province",
+        "name": "湖北省"
+    },
+    "辽宁省": {
+        "adcode": "210000",
+        "level": "province",
+        "name": "辽宁省"
+    },
+    "广东省": {
+        "adcode": "440000",
+        "level": "province",
+        "name": "广东省"
+    },
+    "内蒙古自治区": {
+        "adcode": "150000",
+        "level": "province",
+        "name": "内蒙古自治区"
+    },
+    "黑龙江省": {
+        "adcode": "230000",
+        "level": "province",
+        "name": "黑龙江省"
+    },
+    "河南省": {
+        "adcode": "410000",
+        "level": "province",
+        "name": "河南省"
+    },
+    "山东省": {
+        "adcode": "370000",
+        "level": "province",
+        "name": "山东省"
+    },
+    "陕西省": {
+        "adcode": "610000",
+        "level": "province",
+        "name": "陕西省"
+    },
+    "贵州省": {
+        "adcode": "520000",
+        "level": "province",
+        "name": "贵州省"
+    },
+    "上海市": {
+        "adcode": "310000",
+        "level": "province",
+        "name": "上海市"
+    },
+    "重庆市": {
+        "adcode": "500000",
+        "level": "province",
+        "name": "重庆市"
+    },
+    "西藏自治区": {
+        "adcode": "540000",
+        "level": "province",
+        "name": "西藏自治区"
+    },
+    "安徽省": {
+        "adcode": "340000",
+        "level": "province",
+        "name": "安徽省"
+    },
+    "福建省": {
+        "adcode": "350000",
+        "level": "province",
+        "name": "福建省"
+    },
+    "湖南省": {
+        "adcode": "430000",
+        "level": "province",
+        "name": "湖南省"
+    },
+    "海南省": {
+        "adcode": "460000",
+        "level": "province",
+        "name": "海南省"
+    },
+    "江苏省": {
+        "adcode": "320000",
+        "level": "province",
+        "name": "江苏省"
+    },
+    "青海省": {
+        "adcode": "630000",
+        "level": "province",
+        "name": "青海省"
+    },
+    "广西壮族自治区": {
+        "adcode": "450000",
+        "level": "province",
+        "name": "广西壮族自治区"
+    },
+    "宁夏回族自治区": {
+        "adcode": "640000",
+        "level": "province",
+        "name": "宁夏回族自治区"
+    },
+    "浙江省": {
+        "adcode": "330000",
+        "level": "province",
+        "name": "浙江省"
+    },
+    "河北省": {
+        "adcode": "130000",
+        "level": "province",
+        "name": "河北省"
+    },
+    "香港特别行政区": {
+        "adcode": "810000",
+        "level": "province",
+        "name": "香港特别行政区"
+    },
+    "台湾省": {
+        "adcode": "710000",
+        "level": "province",
+        "name": "台湾省"
+    },
+    "澳门特别行政区": {
+        "adcode": "820000",
+        "level": "province",
+        "name": "澳门特别行政区"
+    },
+    "甘肃省": {
+        "adcode": "620000",
+        "level": "province",
+        "name": "甘肃省"
+    },
+    "四川省": {
+        "adcode": "510000",
+        "level": "province",
+        "name": "四川省"
+    },
+    "天津市": {
+        "adcode": "120000",
+        "level": "province",
+        "name": "天津市"
+    },
+    "江西省": {
+        "adcode": "360000",
+        "level": "province",
+        "name": "江西省"
+    },
+    "云南省": {
+        "adcode": "530000",
+        "level": "province",
+        "name": "云南省"
+    },
+    "山西省": {
+        "adcode": "140000",
+        "level": "province",
+        "name": "山西省"
+    },
+    "北京市": {
+        "adcode": "110000",
+        "level": "province",
+        "name": "北京市"
+    },
+    "吉林省": {
+        "adcode": "220000",
+        "level": "province",
+        "name": "吉林省"
+    }
+}

src/views/home/api.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+export const GETNOBASE = async (url, params) => {
+    try {
+        const data = await axios.get(url, {
+            params: params,
+        });
+        return data;
+    } catch (error) {
+        return error;
+    }
+}

src/views/home/center-map.vue

@@ -0,0 +1,428 @@
+<!--
+ * @Author: daidai
+ * @Date: 2022-03-01 11:17:39
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-05-07 10:59:56
+ * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
+-->
+<template>
+  <div class="centermap">
+    <div class="maptitle">
+      <div class="zuo"></div>
+      <span class="titletext">{{ maptitle }}</span>
+      <div class="you"></div>
+    </div>
+    <div class="mapwrap">
+       <dv-border-box-13 >
+      <div class="quanguo" @click="getData(-1)" v-if="code !== 'china' && userCode == -1">
+        中国
+      </div>
+
+      <Echart id="CenterMap" :options="options" ref="CenterMap" />
+      </dv-border-box-13>
+    </div>
+  </div>
+</template>
+
+<script>
+import xzqCode from "../../utils/map/xzqCode";
+// import { currentGET } from 'api/modules'
+
+import { GETNOBASE } from './api'
+export default {
+  data() {
+    return {
+      maptitle: "设备分布图",
+      options: {},
+      code: "china",
+      userCode: -1,//-1 代表中国 用户权限的行政区code
+      echartBindClick: false
+    };
+  },
+  created() { },
+
+  mounted() {
+    // console.log(xzqCode);
+    this.getData()
+
+
+  },
+  methods: {
+    getData(code) {
+      let res = {
+        data:{
+          dataList:[
+            {
+              name: "重庆",
+value: 382
+            },
+                    {
+              name: "湖南省",
+value: 179
+            },        {
+              name: "江西省",
+value: 766
+            }
+          ],
+          regionCode:-1
+        }
+      }
+                if (!code) {
+            this.userCode = res.data.regionCode;
+          }
+          this.getGeojson(res.data.regionCode, res.data.dataList);
+          this.mapclick();
+      // currentGET('big8',{regionCode:code}).then(res => {
+      //   console.log('设备分布', res);
+      //   if (res.success) {
+      //     if (!code) {
+      //       this.userCode = res.data.regionCode;
+      //     }
+      //     this.getGeojson(res.data.regionCode, res.data.dataList);
+      //     this.mapclick();
+
+      //   } else {
+      //     this.$Message.warning(res.msg)
+      //   }
+      // })
+    },
+    getGeojson(name, mydata) {
+
+      if (name == -1) {
+        name = 'china'
+      }
+      this.code = name;
+      GETNOBASE("./map-geojson/" + name + ".json").then((res) => {
+        // console.log('地图行政区划', name, res);
+        let cityCenter = {};
+        let arr = res.features;
+        arr.map((item) => {
+          cityCenter[item.properties.name] =
+            item.properties.centroid || item.properties.center;
+        });
+        let newData = [];
+        // console.log('中心点',cityCenter);
+        mydata.map((item) => {
+          if (cityCenter[item.name]) {
+            let color = this.getColor(item.value);
+            newData.push({
+              name: item.name,
+              value: cityCenter[item.name].concat(item.value),
+              // itemStyle: {
+              //   color: color,
+              //   borderColor: color,
+              //   // borderWidth: 4,
+              // },
+            });
+          }
+        });
+        let mapjson = echarts.getMap(name);
+        if (!mapjson) {
+          echarts.registerMap(name, res);
+        }
+        this.init(name, mydata, newData);
+      });
+    },
+    getColor(num) {
+      if (num > 0 && num < 9) {
+        return "#035cf5";
+      } else if (num > 10 && num < 49) {
+        return "#3375e4";
+      } else if (num > 50 && num < 199) {
+        return "#6797ef";
+      } else if (num > 200 && num < 499) {
+        return "#96b5ef";
+      } else if (num > 500 && num < 9999) {
+        return "#bacae8";
+      } else if (num > 1000) {
+        return "#3FF4FF";
+      } else {
+        return "";
+      }
+    },
+    init(name, data, data2) {
+      let top = 45;
+      let zoom = 1.05;
+      if (name == "china") {
+        top = 140;
+        zoom = 1.42;
+      }
+
+      let option = {
+        backgroundColor: "rgba(0,0,0,0)",
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          show: false,
+        },
+        visualMap: {
+          left: 20,
+          bottom: 20,
+          pieces: [
+            { gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
+            { gte: 600, lte: 999, label: "600-999个" },
+            { gte: 200, lte: 599, label: "200-599个" },
+            { gte: 50, lte: 199, label: "49-199个" },
+            { gte: 10, lte: 49, label: "10-49个" },
+            { lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
+          ],
+          inRange: {
+            // 渐变颜色，从小到大
+            color: [
+              "#c3d7df",
+              "#5cb3cc",
+              "#8abcd1",
+              "#66a9c9",
+              "#2f90b9",
+              "#1781b5",
+            ],
+          },
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        geo: {
+          map: name,
+          roam: false,
+          selectedMode: false, //是否允许选中多个区域
+          zoom: zoom,
+          top: top,
+          aspectScale: 0.78,
+          tooltip: {
+            show: false,
+          },
+          label: {
+            show: false,
+          }, //地图中文字内容及样式控制
+          itemStyle: {
+            areaColor: "rgba(0,0,0,0)",
+            borderColor: "rgba(0,0,0,0)",
+          },
+          emphasis: {
+            disabled: true,
+          },
+        },
+        series: [
+          {
+            name: "MAP",
+            type: "map",
+            mapType: name,
+            aspectScale: 0.78,
+            data: data,
+            // data: [1,100],
+
+            selectedMode: false, //是否允许选中多个区域
+            zoom: zoom,
+            geoIndex: 1,
+            top: top,
+            tooltip: {
+              show: true,
+              formatter: function (params) {
+                if (params.data) {
+                  return params.name + "：" + params.data["value"];
+                } else {
+                  return params.name;
+                }
+              },
+              backgroundColor: "rgba(0,0,0,.6)",
+              borderColor: "rgba(147, 235, 248, .8)",
+              textStyle: {
+                color: "#FFF",
+              },
+            },
+            label: {
+              show: false,
+              color: "#000",
+              // position: [-10, 0],
+              formatter: function (val) {
+                // console.log(val)
+                if (val.data !== undefined) {
+                  return val.name.slice(0, 2);
+                } else {
+                  return "";
+                }
+              },
+              rich: {},
+              emphasis: { show: false },
+            },
+            itemStyle: {
+              borderColor: "rgba(147, 235, 248, .8)",
+              borderWidth: 1,
+              areaColor: {
+                type: "radial",
+                x: 0.5,
+                y: 0.5,
+                r: 0.8,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
+                  },
+                ],
+                globalCoord: false, // 缺为 false
+              },
+              shadowColor: "rgba(128, 217, 248, .3)",
+              shadowOffsetX: -2,
+              shadowOffsetY: 2,
+              shadowBlur: 10,
+              emphasis: {
+                areaColor: "#389BB7",
+                borderWidth: 1,
+              },
+            },
+          },
+          {
+            data: data2,
+            type: "effectScatter",
+            coordinateSystem: "geo",
+            symbolSize: function (val) {
+              return 4;
+              // return val[2] / 50;
+            },
+            legendHoverLink: true,
+            showEffectOn: "render",
+            rippleEffect: {
+              // period: 4,
+              scale: 6,
+              color: "rgba(255,255,255, 1)",
+              brushType: "fill",
+            },
+            tooltip: {
+              show: true,
+              formatter: function (params) {
+                if (params.data) {
+                  return params.name + "：" + params.data["value"][2];
+                } else {
+                  return params.name;
+                }
+              },
+              backgroundColor: "rgba(0,0,0,.6)",
+              borderColor: "rgba(147, 235, 248, .8)",
+              textStyle: {
+                color: "#FFF",
+              },
+            },
+            label: {
+              formatter: (param) => {
+                return param.name.slice(0, 2);
+              },
+
+              fontSize: 11,
+              offset: [0, 2],
+              position: "bottom",
+              textBorderColor: "#fff",
+              textShadowColor: "#000",
+              textShadowBlur: 10,
+              textBorderWidth: 0,
+              color: "#FFF",
+              show: true,
+            },
+            // colorBy: "data",
+            itemStyle: {
+              color: "rgba(255,255,255,1)",
+              borderColor: "rgba(2255,255,255,2)",
+              borderWidth: 4,
+              shadowColor: "#000",
+              shadowBlur: 10,
+            },
+          },
+        ],
+      };
+      this.options = option;
+    },
+    message(text) {
+      this.$Message({
+        text: text,
+        type: 'warning'
+      })
+    },
+    mapclick() {
+      if (this.echartBindClick || this.userCode !== -1) return
+      //单击切换到级地图，当mapCode有值,说明可以切换到下级地图
+      this.$refs.CenterMap.chart.on("click", (params) => {
+        // console.log(params);
+        let xzqData = xzqCode[params.name];
+        if (xzqData) {
+          this.getData(xzqData.adcode);
+        } else {
+          this.message("暂无下级地市!");
+        }
+      });
+      this.echartBindClick = true
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.centermap {
+  margin-bottom: 30px;
+
+  .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 {
+      background: url("../../assets/images/xiezuo.png") no-repeat;
+    }
+
+    .you {
+      background: url("../../assets/images/xieyou.png") no-repeat;
+    }
+  }
+
+  .mapwrap {
+   
+    height: 548px;
+    width: 100%;
+    // padding: 0 0 10px 0;
+    box-sizing: border-box;
+    position: relative;
+
+    .quanguo {
+      position: absolute;
+      right: 20px;
+      top: -46px;
+      width: 80px;
+      height: 28px;
+      border: 1px solid #00eded;
+      border-radius: 10px;
+      color: #00f7f6;
+      text-align: center;
+      line-height: 26px;
+      letter-spacing: 6px;
+      cursor: pointer;
+      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
+        0 0 6px rgba(0, 237, 237, 0.4);
+    }
+  }
+}
+</style>

src/views/home/home.scss

@@ -0,0 +1,264 @@
+#index {
+    color: #d3d6dd;
+    width: 1920px;
+    height: 1080px;
+    overflow: hidden;
+
+    &.pageisScale {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        transform-origin: left top;
+    }
+
+
+    .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 {
+        height: 100%;
+
+        .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;
+                }
+            }
+        }
+
+        .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));
+        }
+    }
+}
+
+.setting {
+    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: 0;
+        right: 0;
+        top: 0;
+    }
+
+    .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_body {
+            padding: 0px 16px;
+            box-sizing: border-box;
+            position: relative;
+        }
+
+        .setting_item {
+            font-size: 14px;
+            line-height: 1.5;
+
+            // display: flex;
+            .setting_label {
+                color: #555454;
+            }
+            .setting_label_tip{
+                font-size: 12px;
+                color: #838282;
+            }
+        }
+    }
+
+    .setting_inner {
+        animation: rtl-drawer-out .3s;
+    }
+}
+
+
+.settingShow {
+    .setting_inner {
+        animation: rtl-drawer-in .3s 1ms;
+    }
+
+}
+
+.yh-setting-fade-enter-active {
+    animation: yh-setting-fade-in .3s;
+}
+
+.yh-setting-fade-leave-active {
+
+    animation: yh-setting-fade-out .3s;
+
+}
+
+@keyframes yh-setting-fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes yh-setting-fade-out {
+    0% {
+        opacity: 1;
+
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+
+@keyframes rtl-drawer-in {
+    0% {
+        transform: translate(100%, 0)
+    }
+
+    100% {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0)
+    }
+}
+
+@keyframes rtl-drawer-out {
+    0% {
+        transform: translate(0, 0)
+    }
+
+    100% {
+        transform: translate(100%, 0)
+    }
+}

src/views/home/index.vue

@@ -1,331 +1,135 @@
-<!-- 首页模块 首页面 -->
+<!--
+ * @Author: daidai
+ * @Date: 2022-03-04 09:23:59
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-05-07 11:05:02
+ * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
+-->
 <template>
-  <div id="index" ref="appRef">
-     <!-- <dv-loading v-show="loading">Loading...</dv-loading> -->
-     <div class='bg'>
-     <div class="host-body">
-        <div>
-          <!-- 顶部title部分 -->
-          <el-row>
-            <el-col :span="6"
-              ><dv-decoration-8
-                class="title_right"
-                :color="['#008CFF', '#00ADDD']"
-            /></el-col>
-            <el-col :span="12"
-              ><div class="title_text">易 粮 易 运 大 数 据 平 台</div>
-              <dv-decoration-5
-                class="title_center"
-                :dur='Number(5)'
-                :color="['#008CFF', '#00ADDD']"
-            /></el-col>
-            <el-col :span="6"
-              ><div class="title_time">{{ dateYear + dateWeek + dateDay }}</div>
-              <dv-decoration-8
-                :reverse="true"
-                class="title_left"
-                :color="['#008CFF', '#00ADDD']"
-            /></el-col>
-          </el-row>
-          <!-- 主体部分 -->
-          <el-row>
-            <!-- 第一列 -->
-            <el-col :span="6">
-              <div class="left_box1">
-                <dv-border-box-11 title="采 购 合 同">
-                  <dv-scroll-ranking-board
-                    id="left1"
-                    :config="configLeft1"
-                    style="width: 90%; height: 87%; margin-left: 5%; padding-top:10%"
-                  />
-                </dv-border-box-11>
-              </div>
-              <div class="left_box2">
-               <dv-border-box-11 title="头  寸">
-                  <div id="Rose_diagram"></div>
-                  <dv-active-ring-chart
-                    :config="configLeft2"
-                    class="left_box1_rose_right"
-                  />
-                  <div
-                    class="rose_text"
-                    v-for="(item, index) in numberData"
-                    :key="index"
-                  >
-                    <p>
-                      <span class="rose_text_nmb">{{
-                        item.number.number
-                      }}</span>
-                    </p>
-                    <p>
-                      <span>{{ item.text }}</span>
-                    </p>
-                  </div>
-                </dv-border-box-11>
-              </div>
-              <!-- <div class="left_box3">
-                <dv-border-box-11 style="padding-top: 10px" title="物 流 监 控">
-                </dv-border-box-11>
-              </div> -->
-            </el-col>
-            <!-- 第二列 -->
-            <el-col :span="12">
-              <!-- 中国地图 -->
-              <div id="china-map"></div>
-              <div class="line_center">
-                 <dv-scroll-board
-                    :config="board_info"
-                    class="carousel_list"
-                    oddRowBGC="#fff"
-                  />
-              </div>
-            </el-col>
-            <!-- 第三列 -->
-            <el-col :span="6">
-              <div class="right_box1">
-                <dv-border-box-11 title="销 售 合 同">
-                  <dv-scroll-ranking-board
-                  id="right1"
-                    :config="configRight1"
-                    style="width: 90%; height: 87%; margin-left: 5%; padding-top:10%"
-                  />
-                </dv-border-box-11>
-              </div>
-              <div class="right_box2">
-                <dv-border-box-11 style="padding-top: 10px" title="物 流 监 控">
-                </dv-border-box-11>
-              </div>
-              <!-- 部分 -->
-              <!-- <div class="right_box3">
-                <dv-border-box-11 style="padding-top: 10px" title="物 流 监 控">
-                </dv-border-box-11>
-              </div> -->
-            </el-col>
-          </el-row>
+<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>
       </div>
+      <div class="timers ">
+
+        {{ 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/>
+      </ItemWrap>
+       <ItemWrap class="contetn_left-center contetn_lr-item" title="用户总览">
+        <LeftCenter />
+      </ItemWrap>
+       <ItemWrap class="contetn_left-bottom contetn_lr-item" title="设备提醒" style="padding: 0 10px 16px 10px">
+        <LeftBottom />
+      </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>
+     
+      <!-- <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 />
+      </ItemWrap>
+      <ItemWrap
+        class="contetn_left-bottom contetn_lr-item"
+        title="报警排名(TOP8)"
+        style="padding: 0 10px 16px 10px"
+      >
+        <RightCenter />
+      </ItemWrap>
+      <ItemWrap
+        class="contetn_left-bottom contetn_lr-item"
+        title="数据统计图 "
+      >
+        <RightBottom />
+      </ItemWrap>
+    </div>
+  </div>
+</div>
 </template>
 
 <script>
-   import {
-    gChartsData,
-  } from '@/model/home/index'
-import drawMixin from './drawMixin'; //自适应缩放
-import { formatTime } from './format.js'; //日期格式转换
-  export default {
-    mixins: [drawMixin],
-    components: {
-    },
-
-    data() {
-      return {
-        //定时器
-      timing: null,
-      //loading图
+import { formatTime } from '../../utils/index.js';
+import LeftTop from './left-top.vue'
+import LeftCenter from './left-center.vue';
+import LeftBottom from './left-bottom.vue';
+import RightTop from './right-top.vue';
+import RightCenter from './right-center.vue';
+import RightBottom from './right-bottom.vue';
+// import CenterMap from "./center-map.vue";
+export default {
+  components: {
+    LeftTop,
+    LeftCenter,
+    LeftBottom,
+    // CenterMap,
+    RightTop,
+   RightCenter,
+   RightBottom
+  },
+  data() {
+    return {
+     timing: null,
       loading: true,
-      //时分秒
       dateDay: null,
-      //年月日
       dateYear: null,
-      //周几
       dateWeek: null,
-      //周几
       weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
-      //轮播排行榜
-      config: {
-        data: [
-          {
-            name: '玉米',
-            value: 20,
-          },
-          {
-            name: '白小麦',
-            value: 30,
-          },
-          {
-            name: '混合麦',
-            value: 50,
-          }
-        ],
-      },
-      configRight1: {
-        data: [
-          {
-            name: '玉米',
-            value: 20,
-          },
-          {
-            name: '白小麦',
-            value: 30,
-          },
-          {
-            name: '混合麦',
-            value: 50,
-          }
-        ],
-      },
-      configLeft1: {
-        data: [
-          {
-            name: '玉米',
-            value: 55,
-          },
-          {
-            name: '白小麦',
-            value: 120,
-          },
-          {
-            name: '混合麦',
-            value: 78,
-          },
-          {
-            name: '玉米',
-            value: 55,
-          },
-          {
-            name: '白小麦',
-            value: 120,
-          },
-          {
-            name: '混合麦',
-            value: 78,
-          },
-          {
-            name: '玉米',
-            value: 55,
-          },
-          {
-            name: '白小麦',
-            value: 120,
-          },
-          {
-            name: '混合麦',
-            value: 78,
-          },
-        ],
-      },
-      configLeft2: {
-        data: [
-          {
-            name: '库存',
-            value: 55,
-          },
-          {
-            name: '采购',
-            value: 120,
-          },
-          {
-            name: '销售',
-            value: 78,
-          }
-        ],
-      },
-      //左侧饼图文字
-      numberData: [
-        {
-          number: {
-            number: 15,
-          },
-          text: '实际库存',
-        },
-        {
-          number: {
-            number: 1144,
-          },
-          text: '采购合同',
-        },
-        {
-          number: {
-            number: 361,
-          },
-          text: '销售合同',
-        },
-      ],
-      //左侧轮播表格配置项
-      board_info: {
-        header: ['车牌号', '始发地', '目的地','装车时间','净重（吨）'],
-        data: [
-          ['辽HVX951', '鲅鱼圈祥腾库', '山东诸城迈饶库','2022-09-07 15:23','54.5'],
-          ['辽HVX952', '山东诸城迈饶库', '白城内陆港','2022-09-07 15:23','54.5'],
-          ['辽HVX953', '白城内陆港', '甘南宏旗库','2022-09-07 15:23','54.5'],
-          ['辽HVX954', '甘南宏旗库', '克东千丰库','2022-09-07 15:23','54.5'],
-          ['辽HVX955', '克东千丰库', '克东千丰库','2022-09-07 15:23','54.5'],
-          ['辽HVX956', '肇东金信库', '肇东金信库','2022-09-07 15:23','54.5'],
-          ['辽HVX957', '山东园丰库', '鲅鱼圈金信库','2022-09-07 15:23','54.5'],
-          ['辽HVX958', '鲅鱼圈金信库', '龙江金信库','2022-09-07 15:23','54.5'],
-          ['辽HVX959', '龙江金信库', '鲅鱼圈祥腾库','2022-09-07 15:23','54.5'],
-        ],
-        index:true,
-        evenRowBGC: 'rgb(19 28 70)',
-        oddRowBGC: 'rgb(13 22 62)',
-        headerBGC: 'rgb(22 36 104)',
-      },
-      }
-    },
-  compute:{
 
+    };
   },
+  filters: {
+    numsFilter(msg) {
+      return msg || 0;
+    },
+  },
+  created() {
+  },
+
   mounted() {
-    gChartsData({
-        compId: localStorage.getItem('ws-pf_compId'),
-        loadingstatus: 1,
-        seachMoth: '2022'
-      }).toPromise().then(res => {debugger
-        console.log('··············', res)
-        
-        this.configRight1.data = res[0].biViewInfoList
-        this.configLeft1.data = res[1].biViewInfoList
-         //获取实时时间
-        this.timeFn();
-        //中国地图
-        this.china_map();
-        let left1 = this.$echarts.init(
-          document.getElementById('left1')
-        );
-        
-        window.onresize = left1.resize; //如果容器变大小，自适应从新构图
-        left1.setOption(this.configLeft1)
-        // this.chartsData = res
-        // this.carCount1 = res[1].biViewInfoList[0].count
-        // this.carCount2 = res[6].biViewInfoList[1].count
-        // this.carCount3 = res[6].biViewInfoList[2].count
-        // this.physicalInventory = Number(res[7].biViewInfoList[0].count).toFixed(2)
-        // this.procurementPending= Number(res[7].biViewInfoList[1].count).toFixed(2)
-        // this.salesPending =  Number(res[7].biViewInfoList[2].count).toFixed(2)
-        // this.position = Number(Number(this.physicalInventory)+Number(this.procurementPending) - Number(this.salesPending)).toFixed(2)
-        // this.totalReserves = res[8].biViewInfoList
-        // this.mapInfo = res[9]
-        console.log(res)
-        // this.initCharts()
-      })
-   
+     this.timeFn();
+    this.cancelLoading();
+      this.china_map();
   },
-  beforeDestroy() {
-    //离开时删除计时器
+   beforeDestroy() {
     clearInterval(this.timing);
   },
   methods: {
-    //右上角当前日期时间显示：每一秒更新一次最新时间
-    timeFn() {
-      this.timing = setInterval(() => {
-        //获取当前时分秒
-        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
-        //获取当前年月日
-        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
-        //获取当前周几
-        this.dateWeek = this.weekday[new Date().getDay()];
-      }, 1000);
-    },
-    //loading图
-    cancelLoading() {
-      setTimeout(() => {
-        this.loading = false;
-      }, 500);
-    },
     //中国地图
     china_map() {
+      debugger
       let mapChart = this.$echarts.init(document.getElementById('china-map')); //图表初始化，china-map是绑定的元素
       window.onresize = mapChart.resize; //如果容器变大小，自适应从新构图
       let series = []; //存放循环配置项
@@ -684,192 +488,386 @@ import { formatTime } from './format.js'; //日期格式转换
       };
       mapChart.setOption(option); //生成图表
     },
+    showSetting(){
+        this.$refs.setting.init()
+    },
+    timeFn() {
+      this.timing = setInterval(() => {
+        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
+        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
+        this.dateWeek = this.weekday[new Date().getDay()];
+      }, 1000);
+    },
+    cancelLoading() {
+      setTimeout(() => {
+        this.loading = false;
+      }, 500);
+    },
   },
-    
-  }
+};
 </script>
-
 <style lang="scss" scoped>
-* {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  outline: none;
-  box-sizing: border-box;
+    // &.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;
+    }
+
+    .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;
+                }
+            }
+        }
+
+        .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));
+        }
+    }
+}
+
+.setting {
+    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: 0;
+        right: 0;
+        top: 0;
+    }
+
+    .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_body {
+            padding: 0px 16px;
+            box-sizing: border-box;
+            position: relative;
+        }
+
+        .setting_item {
+            font-size: 14px;
+            line-height: 1.5;
+
+            // display: flex;
+            .setting_label {
+                color: #555454;
+            }
+            .setting_label_tip{
+                font-size: 12px;
+                color: #838282;
+            }
+        }
+    }
+
+    .setting_inner {
+        animation: rtl-drawer-out .3s;
+    }
 }
-html {
-  margin: 0;
-  padding: 0;
+
+
+.settingShow {
+    .setting_inner {
+        animation: rtl-drawer-in .3s 1ms;
+    }
+
 }
-body {
-  font-family: Arial, Helvetica, sans-serif;
-  line-height: 1.2em;
-  background-color: #f1f1f1;
-  margin: 0;
-  padding: 0;
+
+.yh-setting-fade-enter-active {
+    animation: yh-setting-fade-in .3s;
 }
-a {
-  color: #343440;
-  text-decoration: none;
+
+.yh-setting-fade-leave-active {
+
+    animation: yh-setting-fade-out .3s;
+
 }
-//页面样式部分！！！！
-#index {
-  color: #d3d6dd;
-  width: 100vw;
-  height: 100vh;
-  // height: 100%;
-  //  width: 1920px;
-  height: 1000px;
-  // position: absolute;
-  // top: 50%;
-  // left: 50%;
-  // transform: translate(-50%, -50%);
-  transform-origin: 50px 10px;
-  // overflow: hidden;
-    background: #2a2a2a;
-    // background-image: url("../../../public/img/homebg2.png"); 
-    // background-size: 100%; //背景尺寸
-    // background-position: center center; //背景位置
-  .bg {
-    //整体页面背景
-    width: 100%;
-    height: 100%;
-    padding: 16px 16px 0 16px;
-    background-image: url("../../../public/img/homebg2.png"); //背景图
-    background-size: cover; //背景尺寸
-    background-position: center center; //背景位置
+
+@keyframes yh-setting-fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes yh-setting-fade-out {
+    0% {
+        opacity: 1;
+
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+
+@keyframes rtl-drawer-in {
+    0% {
+        transform: translate(100%, 0)
+    }
+
+    100% {
+        -webkit-transform: translate(0, 0);
+        transform: translate(0, 0)
+    }
+}
+
+@keyframes rtl-drawer-out {
+    0% {
+        transform: translate(0, 0)
+    }
+
+    100% {
+        transform: translate(100%, 0)
+    }
+}
+// 内容
+.contents {
+  width: 100%;
+    display: flex;
+    min-height: calc(100% - 60px);
+    justify-content: space-between;
+  .contetn_left,
+  .contetn_right {
+    width: 540px;
+    box-sizing: border-box;
+    // padding: 16px 0;
   }
-  //顶部右边装饰效果
-  .title_left {
-    width: 100%;
-    height: 82px;
-    margin-top: 28px;
+
+  .contetn_center {
+    width: 720px;
   }
-  //顶部左边装饰效果
-  .title_right {
-    width: 100%;
-    height: 82px;
-    margin-top: 47px;
+
+  //左右两侧 三个块
+  .contetn_lr-item {
+    height: 270px;
   }
-  //顶部中间装饰效果
-  .title_center {
+
+  .contetn_center_top {
     width: 100%;
-    height: 22px;
-  }
-  //顶部中间文字数据可视化系统
-  .title_text {
-    text-align: center;
-    font-size: 24px;
-    font-weight: bold;
-    margin-top: 14px;
-    color: #008cff;
   }
-  //时间日期
-  .title_time {
-    text-align: center;
-  }
-  //中国地图
-  #china-map {
-    height: 582px;
-    width: 100%;
-    top: -60px;
+
+  // 中间
+  .contetn_center {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
   }
-  //中间折线图
-  .line_center {
-    width: 100%;
-    height: 278px;
+
+  .contetn_center-bottom {
+    height: 315px;
   }
-  //左1模块
-  .left_box1 {
-    height: 302px;
-    width: 100%;
-    margin-bottom: 10px;
-    margin-top: 80px;
+
+  //左边 右边 结构一样
+  .contetn_left,
+  .contetn_right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
     position: relative;
+
+  
   }
-  //左2模块
-  .left_box2 {
-    height: 302px;
-    width: 100%;
-    margin-bottom: 10px;
-    margin-top: 80px;
-  }
-  //左3模块
-  .left_box3 {
-    height: 302px;
-    width: 100%;
-  }
-  .left_box3_dv{
-    width: 50%;
-    height: 50%;
-    margin-left: 10%;
-    margin-top: 10%;
-  }
-  //右1模块
-  .right_box1 {
-    height: 302px;
-    width: 100%;
-    margin-bottom: 10px;
-    margin-top: 80px;
-  }
-  //右2模块
-  .right_box2 {
-    height: 302px;
-    width: 100%;
-    margin-bottom: 10px;
-    margin-top: 80px;
-  }
-  //右3模块
-  .right_box3 {
-    height: 302px;
+}
+
+
+@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);
+    }
+}
+ #china-map {
+    height: 540px;
     width: 100%;
-  }
-  .right_box3_dv{
-    width: 80%;
-    height: 80%;
-    margin-left: 10%;
-    margin-top: 10%;
-  }
-  //左1模块-玫瑰饼图
-  #Rose_diagram {
-    height: 70%;
-    width: 15%;
-    padding-top: 40px;
-  }
-  //左1模块-圆环图
-  .left_box1_rose_right {
-    height: 90%;
-    width: 55%;
-    position: absolute;
-    right: 25%;
     top: 0;
   }
-  //左1模块-文字部分
-  .rose_text {
-    display: inline-block;
-    margin-top: 1%;
-    margin-left: 15%;
-  }
-  // 左1模块-￥符号样式
-  .coin {
-    font-size: 20px;
-    color: #ffc107;
-  }
-  //左1模块-（件）样式
-  .colorYellow {
-    color: yellowgreen;
-  }
-  //左1模块-数字样式
-  .rose_text_nmb {
-    font-size: 30px;
-    color: #00b891;
-  }
-  //轮播表格
-  .carousel_list {
-    width: 96%;
-    height: 98%;
-    margin-left: 10px;
-    top: -60px;
+  
+  .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 {
+      background: url("../../assets/images/xiezuo.png") no-repeat;
+    }
+
+    .you {
+      background: url("../../assets/images/xieyou.png") no-repeat;
+    }
   }
-}
 </style>

src/views/home/left-bottom.vue

@@ -0,0 +1,504 @@
+<!--
+ * @Author: daidai
+ * @Date: 2022-03-01 09:43:37
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-05-07 11:36:18
+ * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-bottom.vue
+-->
+<template>
+  <div
+    v-if="pageflag"
+    class="left_boottom_wrap beautify-scroll-def"
+    :class="{ 'overflow-y-auto': !sbtxSwiperFlag }"
+  >
+    <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>
+          <div class="inner_right">
+            <div class="dibu"></div>
+            <div class="flex">
+              <div class="info">
+                <span class="labels">设备ID：</span>
+                <span class="contents zhuyao doudong wangguan">
+                  {{ item.gatewayno }}</span
+                >
+              </div>
+              <div class="info">
+                <span class="labels">时间：</span>
+                <span class="contents " style="font-size: 12px">
+                  {{ item.createTime }}</span
+                >
+              </div>
+            </div>
+
+              <span
+                class="types doudong"
+                :class="{
+                  typeRed: item.onlineState == 0,
+                  typeGreen: item.onlineState == 1,
+                }"
+                >{{ item.onlineState == 1 ? "上线" : "下线" }}</span
+              >
+
+            <div class="info addresswrap">
+              <span class="labels">地址：</span>
+              <span class="contents ciyao" style="font-size: 12px">
+                {{ addressHandle(item) }}</span
+              >
+            </div>
+          </div>
+        </li>
+      </ul>
+    </component>
+  </div>
+
+  <Reacquire v-else @onclick="getData" style="line-height: 200px" />
+</template>
+
+<script>
+// import { currentGET } from "api";
+import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
+import Kong from "../../components/kong.vue";
+export default {
+  components: { vueSeamlessScroll, Kong },
+  data() {
+    return {
+      list: [],
+      pageflag: true,
+      components: vueSeamlessScroll,
+      defaultOption: {
+        step: 0.5, // 数值越大速度滚动越快
+            hoverStop: true, // 是否开启鼠标悬停stop
+            openWatch: true, // 开启数据实时监控刷新dom
+            direction: 1, // 0向下 1向上 2向左 3向右
+            limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
+            singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+            singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+            waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
+      },
+    };
+  },
+  computed: {
+    sbtxSwiperFlag() {
+      debugger
+      let sbtxSwiper = true;
+      if (sbtxSwiper) {
+        this.components = vueSeamlessScroll;
+      } else {
+        this.components = Kong;
+      }
+      return sbtxSwiper;
+    },
+  },
+  created() {
+    this.getData();
+  },
+
+  mounted() {},
+  methods: {
+    addressHandle(item) {
+      let name = item.provinceName;
+      if (item.cityName) {
+        name += "/" + item.cityName;
+        if (item.countyName) {
+          name += "/" + item.countyName;
+        }
+      }
+      return name;
+    },
+    getData() {
+      debugger
+      this.pageflag = true;
+      // this.pageflag =false
+      // currentGET("big3", { limitNum: 20 }).then((res) => {
+      //   console.log("设备提醒", res);
+      //   if (res.success) {
+      //     this.countUserNumData = res.data;
+      //     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({
+      //       text: res.msg,
+      //       type: "warning",
+      //     });
+      //   }
+      // });
+        this.countUserNumData = {
+        list: [
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市1',
+          countyName: '千山区1',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省1',
+        },
+        ],
+      }
+      this.list = [
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市',
+          countyName: '千山区',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省',
+        },
+        {
+          cityName: '营口市1',
+          countyName: '千山区1',
+          createTime: '2021-05-15 08:27:26',
+          deviceId: '6c512d754bbcd6d7cd86abce0e0cac58',
+          gatewayno: 10000,
+          onlineState: 0,
+          provinceName: '福建省1',
+        },
+      ]
+      let that = this
+      let timer = setTimeout(() => {
+        clearTimeout(timer)
+        that.defaultOption.step = 0.5
+      }, 5000)
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.left_boottom_wrap {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.doudong {
+  //  vertical-align:middle;
+  overflow: hidden;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.left_boottom {
+  width: 100%;
+  height: 100%;
+
+  .left_boottom_item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    font-size: 14px;
+    margin: 10px 0;
+    .orderNum {
+      margin: 0 16px 0 -20px;
+    }
+
+    .info {
+      margin-right: 10px;
+      display: flex;
+      align-items: center;
+      color: #fff;
+
+      .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;
+      }
+    }
+
+    .inner_right {
+      position: relative;
+      height: 100%;
+      width: 380px;
+      flex-shrink: 0;
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      .dibu {
+        position: absolute;
+        height: 2px;
+        width: 104%;
+        background-image: url("../../assets/images/zuo_xuxian.png");
+        bottom: -10px;
+        left: -2%;
+        background-size: cover;
+      }
+      .addresswrap {
+        width: 100%;
+        display: flex;
+        margin-top: 8px;
+      }
+    }
+
+    .wangguan {
+      color: #1890ff;
+      font-weight: 900;
+      font-size: 15px;
+      width: 80px;
+      flex-shrink: 0;
+    }
+
+
+    .time {
+      font-size: 12px;
+      // color: rgba(211, 210, 210,.8);
+      color: #fff;
+    }
+
+    .address {
+      font-size: 12px;
+      cursor: pointer;
+      // @include text-overflow(1);
+    }
+
+    .types {
+      width: 30px;
+      flex-shrink: 0;
+    }
+
+    .typeRed {
+      color: #fc1a1a;
+    }
+
+    .typeGreen {
+      color: #29fc29;
+    }
+  }
+}
+</style>

src/views/home/left-center.vue

@@ -0,0 +1,249 @@
+<!--
+ * @Author: daidai
+ * @Date: 2022-02-28 16:16:42
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-04-28 09:46:18
+ * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
+-->
+<template>
+  <Echart
+    id="leftCenter"
+    :options="options"
+    class="left_center_inner"
+    v-if="pageflag"
+    ref="charts"
+  />
+  <Reacquire v-else @onclick="getData" style="line-height: 200px">
+    重新获取
+  </Reacquire>
+</template>
+
+<script>
+// import { currentGET } from 'api/modules'
+export default {
+  data() {
+    return {
+      options: {},
+      countUserNumData: {
+        lockNum: 0,
+        onlineNum: 0,
+        offlineNum: 0,
+        totalNum: 0,
+      },
+      pageflag: true,
+      timer: null,
+      a:1
+    }
+  },
+  created() {
+    this.getData()
+  },
+  mounted() {},
+  beforeDestroy() {
+    this.clearData()
+  },
+  methods: {
+    clearData() {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
+    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
+
+      // 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'
+      //     })
+      //   }
+      // })
+    },
+    //轮询
+    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() {
+      debugger
+      let total = this.countUserNumData.totalNum
+      let colors = ['#ECA444', '#33A1DB', '#56B557']
+      let piedata = {
+        name: '用户总览',
+        type: 'pie',
+        radius: ['42%', '65%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 4,
+          borderColor: 'rgba(0,0,0,0)',
+          borderWidth: 2,
+        },
+
+        color: colors,
+        data: [
+          // {
+          //   value: 0,
+          //   name: "告警",
+          //   label: {
+          //     shadowColor: colors[0],
+          //   },
+          // },
+          {
+            value: this.countUserNumData.lockNum,
+            name: '锁定',
+            label: {
+              shadowColor: colors[0],
+            },
+          },
+          {
+            value: this.countUserNumData.onlineNum,
+            name: '在线',
+            label: {
+              shadowColor: colors[2],
+            },
+          },
+          {
+            value: this.countUserNumData.offlineNum,
+            name: '离线',
+            label: {
+              shadowColor: colors[1],
+            },
+          },
+        ],
+      }
+      this.options = {
+        title: {
+          // zlevel: 0,
+          text: ['{value|' + total + '}', '{name|总数}'].join('\n'),
+          top: 'center',
+          left: 'center',
+          textStyle: {
+            rich: {
+              value: {
+                color: '#ffffff',
+                fontSize: 24,
+                fontWeight: 'bold',
+                lineHeight: 20,
+              },
+              name: {
+                color: '#ffffff',
+                lineHeight: 20,
+              },
+            },
+          },
+        },
+        tooltip: {
+          trigger: 'item',
+          backgroundColor: 'rgba(0,0,0,.6)',
+          borderColor: 'rgba(147, 235, 248, .8)',
+          textStyle: {
+            color: '#FFF',
+          },
+        },
+        legend: {
+          show: false,
+          top: '5%',
+          left: 'center',
+        },
+        series: [
+          //展示圆点
+          {
+            ...piedata,
+            tooltip: { show: true },
+            label: {
+              formatter: '   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ',
+              //   position: "outside",
+              rich: {
+                b: {
+                  color: '#fff',
+                  fontSize: 12,
+                  lineHeight: 26,
+                },
+                c: {
+                  color: '#31ABE3',
+                  fontSize: 14,
+                },
+                per: {
+                  color: '#31ABE3',
+                  fontSize: 14,
+                },
+              },
+            },
+            labelLine: {
+              length: 20, // 第一段线 长度
+              length2: 36, // 第二段线 长度
+              show: true,
+              emphasis: {
+                show: true,
+              },
+            },
+          },
+          {
+            ...piedata,
+            tooltip: { show: true },
+            itemStyle: {},
+            label: {
+              backgroundColor: 'auto', //圆点颜色，auto：映射的系列色
+              height: 0,
+              width: 0,
+              lineHeight: 0,
+              borderRadius: 2.5,
+              shadowBlur: 8,
+              shadowColor: 'auto',
+              padding: [2.5, -2.5, 2.5, -2.5],
+            },
+            labelLine: {
+              length: 20, // 第一段线 长度
+              length2: 36, // 第二段线 长度
+              show: false,
+            },
+          },
+        ],
+      }
+    },
+  },
+}
+</script>
+<style lang='scss' scoped>
+</style>

src/views/home/left-top.vue

@@ -0,0 +1,232 @@
+<!--
+ * @Author: daidai
+ * @Date: 2022-02-28 16:16:42
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-07-20 17:57:11
+ * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
+-->
+<template>
+    <ul class="user_Overview flex">
+        <li class="user_Overview-item" style="color: #00fdfa">
+            <div class="user_Overview_nums allnum ">
+                <dv-digital-flop :config="config" style="width:100%;height:100%;" />
+            </div>
+            <p>总设备数</p>
+        </li>
+        <li class="user_Overview-item" style="color: #07f7a8">
+            <div class="user_Overview_nums online">
+                <dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
+            </div>
+            <p>在线数</p>
+        </li>
+        <li class="user_Overview-item" style="color: #e3b337">
+            <div class="user_Overview_nums offline">
+                <dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />
+
+            </div>
+            <p>掉线数</p>
+        </li>
+        <li class="user_Overview-item" style="color: #f5023d">
+            <div class="user_Overview_nums laramnum">
+                <dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
+            </div>
+            <p>告警次数</p>
+        </li>
+    </ul>
+    <!-- <Reacquire v-else @onclick="getData" line-height="200px">
+        重新获取
+    </Reacquire> -->
+</template>
+
+<script>
+// import { currentGET } from 'api/modules'
+let style = {
+    fontSize: 24
+}
+export default {
+    data() {
+        return {
+            num:0,
+            options: {},
+            userOverview: {
+                alarmNum: 0,
+                offlineNum: 0,
+                onlineNum: 0,
+                totalNum: 0,
+            },
+            pageflag: true,
+            timer: null,
+            config: {
+                number: [100],
+                content: '{nt}',
+                style: {
+                    ...style,
+                    // stroke: "#00fdfa",
+                    fill: '#00fdfa',
+                },
+            },
+            onlineconfig: {
+                number: [0],
+                content: '{nt}',
+                style: {
+                    ...style,
+                    // stroke: "#07f7a8",
+                    fill: '#07f7a8',
+                },
+            },
+            offlineconfig: {
+                number: [0],
+                content: '{nt}',
+                style: {
+                    ...style,
+                    // stroke: "#e3b337",
+                    fill: '#e3b337',
+                },
+            },
+            laramnumconfig: {
+                number: [0],
+                content: '{nt}',
+                style: {
+                    ...style,
+                    // stroke: "#f5023d",
+                    fill: '#f5023d',
+                },
+            }
+
+        };
+    },
+    filters: {
+        numsFilter(msg) {
+            return msg || 0;
+        },
+    },
+    created() {
+        this.getData()
+    },
+    mounted() {
+    },
+    beforeDestroy() {
+        this.clearData()
+
+    },
+    methods: {
+        clearData() {
+            if (this.timer) {
+                clearInterval(this.timer)
+                this.timer = null
+            }
+        },
+        getData() {
+            // this.pageflag = true;
+            console.log('111')
+                //  this.switper()
+            // currentGET('big2').then((res) => {
+            //     if (!this.timer) {
+            //         console.log('设备总览', res);
+            //     }
+            //     if (res.success) {
+            //         this.userOverview = res.data;
+            //         this.onlineconfig = {
+            //             ...this.onlineconfig,
+            //             number: [res.data.onlineNum]
+            //         }
+                    this.config = {
+                        ...this.config,
+                        number: [this.num++]
+                    }
+            //         this.offlineconfig = {
+            //             ...this.offlineconfig,
+            //             number: [res.data.offlineNum]
+            //         }
+            //         this.laramnumconfig = {
+            //             ...this.laramnumconfig,
+            //             number: [res.data.alarmNum]
+            //         }
+                    this.switper()
+            //     } else {
+            //         this.pageflag = false;
+            //         this.$Message.warning(res.msg);
+            //     }
+            // });
+        },
+        //轮询
+        switper() {
+            if (this.timer) {
+                return
+            }
+            let looper = (a) => {
+                this.getData()
+            };
+            this.timer = setInterval(looper, 1000);
+        },
+    },
+};
+</script>
+<style lang='scss' scoped>
+.user_Overview {
+    li {
+        flex: 1;
+
+        p {
+            text-align: center;
+            height: 16px;
+            font-size: 16px;
+        }
+
+        .user_Overview_nums {
+            width: 100px;
+            height: 100px;
+            text-align: center;
+            line-height: 100px;
+            font-size: 22px;
+            margin: 50px auto 30px;
+            background-size: cover;
+            background-position: center center;
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                top: 0;
+                left: 0;
+            }
+
+            &.bgdonghua::before {
+                animation: rotating 14s linear infinite;
+            }
+        }
+
+        .allnum {
+
+            // background-image: url("../../assets/images/left_top_lan.png");
+            &::before {
+                background-image: url("../../assets/images/left_top_lan.png");
+
+            }
+        }
+
+        .online {
+            &::before {
+                background-image: url("../../assets/images/left_top_lv.png");
+
+            }
+        }
+
+        .offline {
+            &::before {
+                background-image: url("../../assets/images/left_top_huang.png");
+
+            }
+        }
+
+        .laramnum {
+            &::before {
+                background-image: url("../../assets/images/left_top_hong.png");
+
+            }
+        }
+    }
+}
+</style>

src/views/home/right-bottom.vue

@@ -0,0 +1,727 @@
+<!--
+ * @Author: daidai
+ * @Date: 2022-03-01 15:27:58
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-05-07 11:24:14
+ * @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 ">设备ID：</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" style="font-size:12px"> {{ item.provinceName }}/{{ item.cityName }}/{{ item.countyName }}</span>
+              </div>
+              <div class="info time">
+                <span class="labels">时间：</span>
+                <span class="contents" style="font-size:12px"> {{ item.createtime }}</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" />
+
+</template>
+
+<script>
+// import { currentGET } from 'api/modules'
+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)
+      //   }
+      // })
+    },
+
+  },
+};
+</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;
+      }
+    }
+
+  }
+}
+
+.right_center_wrap {
+  overflow: hidden;
+  width: 100%;
+  height: 190px;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+</style>

src/views/home/right-center.vue

@@ -0,0 +1,181 @@
+<!--
+ * @Author: daidai
+ * @Date: 2022-03-01 15:51:43
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-04-28 15:24:27
+ * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-bottom.vue
+-->
+<template>
+  <div class="right_bottom">
+    <dv-capsule-chart :config="config" style="width:100%;height:220px" />
+  </div>
+</template>
+
+<script>
+// import { currentGET } from 'api/modules'
+export default {
+  data() {
+    return {
+      gatewayno: '',
+      config: {
+        showValue: true,
+        unit: "次",
+        data: []
+      },
+      value:0,    
+    };
+  },
+  created() {
+    this.getData()
+
+  },
+  computed: {
+  },
+  mounted() { },
+  beforeDestroy() {
+    this.clearData()
+  },
+  methods: {
+    clearData() {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
+    //轮询
+    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>
+<style lang='scss' scoped>
+.list_Wrap {
+  height: 100%;
+  overflow: hidden;
+
+  ::v-deep  .kong {
+    width: auto;
+  }
+}
+
+.sbtxSwiperclass {
+  .img_wrap {
+    overflow-x: auto;
+  }
+
+}
+
+.right_bottom {
+  box-sizing: border-box;
+  padding: 0 16px;
+
+  .searchform {
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .searchform_item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      label {
+        margin-right: 10px;
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      button {
+        margin-left: 30px;
+      }
+
+      input {}
+    }
+  }
+
+  .img_wrap {
+    display: flex;
+    // justify-content: space-around;
+    box-sizing: border-box;
+    padding: 0 0 20px;
+    // overflow-x: auto;
+
+    li {
+      width: 105px;
+      height: 137px;
+      border-radius: 6px;
+      overflow: hidden;
+      cursor: pointer;
+      // background: #84ccc9;
+      // border: 1px solid #ffffff;
+      overflow: hidden;
+      flex-shrink: 0;
+      margin: 0 10px;
+
+      img {
+        flex-shrink: 0;
+      }
+    }
+
+
+
+
+  }
+
+  .noData {
+    width: 100%;
+    line-height: 100px;
+    text-align: center;
+    color: rgb(129, 128, 128);
+
+  }
+}
+</style>

src/views/home/right-top.vue

@@ -0,0 +1,316 @@
+<!--
+ * @Author: daidai
+ * @Date: 2022-03-01 14:13:04
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-05-07 11:17:49
+ * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
+-->
+<template>
+  <Echart
+    id="rightTop"
+    :options="option"
+    class="right_top_inner"
+    v-if="pageflag"
+    ref="charts"
+  />
+  <Reacquire v-else @onclick="getData" style="line-height: 200px">
+    重新获取
+  </Reacquire>
+</template>
+
+<script>
+// import { currentGET } from "api/modules";
+
+export default {
+  data() {
+    return {
+      option: {},
+      pageflag: false,
+      timer: null,
+    };
+  },
+  created() {
+    debugger
+    this.getData();
+  },
+
+  mounted() {},
+  beforeDestroy() {
+    this.clearData();
+  },
+  methods: {
+    clearData() {
+      if (this.timer) {
+        clearInterval(this.timer);
+        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]
+        }
+  
+      }
+       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",
+      //     });
+      //   }
+      // });
+    },
+    //轮询
+    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: {
+          type: "category",
+          data: xData,
+          boundaryGap: false, // 不留白，从原点开始
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(31,99,163,.2)",
+            },
+          },
+          axisLine: {
+            // show:false,
+            lineStyle: {
+              color: "rgba(31,99,163,.1)",
+            },
+          },
+          axisLabel: {
+            color: "#7EB7FD",
+            fontWeight: "500",
+          },
+        },
+        yAxis: {
+          type: "value",
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(31,99,163,.2)",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(31,99,163,.1)",
+            },
+          },
+          axisLabel: {
+            color: "#7EB7FD",
+            fontWeight: "500",
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#FFF",
+          },
+        },
+        grid: {
+          //布局
+          show: true,
+          left: "10px",
+          right: "30px",
+          bottom: "10px",
+          top: "28px",
+          containLabel: true,
+          borderColor: "#1F63A3",
+        },
+        series: [
+          {
+            data: yData,
+            type: "line",
+            smooth: true,
+            symbol: "none", //去除点
+            name: "报警1次数",
+            color: "rgba(252,144,16,.7)",
+            areaStyle: {
+              normal: {
+                //右，下，左，上
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(252,144,16,.7)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(252,144,16,.0)",
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            markPoint: {
+              data: [
+                {
+                  name: "最大值",
+                  type: "max",
+                  valueDim: "y",
+                  symbol: "rect",
+                  symbolSize: [60, 26],
+                  symbolOffset: [0, -20],
+                  itemStyle: {
+                    color: "rgba(0,0,0,0)",
+                  },
+                  label: {
+                    color: "#FC9010",
+                    backgroundColor: "rgba(252,144,16,0.1)",
+                    borderRadius: 6,
+                    padding: [7, 14],
+                    borderWidth: 0.5,
+                    borderColor: "rgba(252,144,16,.5)",
+                    formatter: "报警1：{c}",
+                  },
+                },
+                {
+                  name: "最大值",
+                  type: "max",
+                  valueDim: "y",
+                  symbol: "circle",
+                  symbolSize: 6,
+                  itemStyle: {
+                    color: "#FC9010",
+                    shadowColor: "#FC9010",
+                    shadowBlur: 8,
+                  },
+                  label: {
+                    formatter: "",
+                  },
+                },
+              ],
+            },
+          },
+          {
+            data: yData2,
+            type: "line",
+            smooth: true,
+            symbol: "none", //去除点
+            name: "报警2次数",
+            color: "rgba(9,202,243,.7)",
+            areaStyle: {
+              normal: {
+                //右，下，左，上
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(9,202,243,.7)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(9,202,243,.0)",
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            markPoint: {
+              data: [
+                {
+                  name: "最大值",
+                  type: "max",
+                  valueDim: "y",
+                  symbol: "rect",
+                  symbolSize: [60, 26],
+                  symbolOffset: [0, -20],
+                  itemStyle: {
+                    color: "rgba(0,0,0,0)",
+                  },
+                  label: {
+                    color: "#09CAF3",
+                    backgroundColor: "rgba(9,202,243,0.1)",
+
+                    borderRadius: 6,
+                    borderColor: "rgba(9,202,243,.5)",
+                    padding: [7, 14],
+                    formatter: "报警2：{c}",
+                    borderWidth: 0.5,
+                  },
+                },
+                {
+                  name: "最大值",
+                  type: "max",
+                  valueDim: "y",
+                  symbol: "circle",
+                  symbolSize: 6,
+                  itemStyle: {
+                    color: "#09CAF3",
+                    shadowColor: "#09CAF3",
+                    shadowBlur: 8,
+                  },
+                  label: {
+                    formatter: "",
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.right_top_inner {
+  margin-top: -8px;
+}
+</style>