!39 新增大屏展示

Merge pull request !39 from 孙阿龙/master

vue/package.json

@@ -51,7 +51,6 @@
     "jsencrypt": "3.2.1",
     "jshint": "^2.13.4",
     "jsonlint": "^1.6.3",
-    "less-loader": "^10.2.0",
     "mqtt": "^4.3.3",
     "nprogress": "0.2.0",
     "quill": "^1.3.7",
@@ -69,7 +68,11 @@
     "vue-qr": "^4.0.9",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+
+    "@jiaminghi/data-view": "^2.10.0",
+    "vue-easytable": "^2.14.0",
+    "vue-seamless-scroll": "^1.1.23"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",
@@ -86,7 +89,8 @@
     "sass-loader": "10.1.1",
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",
-    "vue-template-compiler": "2.6.12"
+    "vue-template-compiler": "2.6.12",
+    "mockjs": "^1.1.0"
   },
   "engines": {
     "node": ">=8.9",

vue/public/index.html

@@ -6,6 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script src="./js/echarts.min.js"></script>
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>

vue/public/map-geojson/710000.json

@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"adcode":710000,"name":"台湾省","center":[121.509062,25.044332],"centroid":[120.971485,23.749452],"childrenNum":0,"level":"province","acroutes":[100000],"parent":{"adcode":100000}},"geometry":{"type":"MultiPolygon","coordinates":[[[[120.443558,22.441245],[120.517584,22.408536],[120.569903,22.361728],[120.640505,22.241347],[120.659209,22.15432],[120.662001,22.066983],[120.651464,22.033165],[120.667691,21.983168],[120.70157,21.927065],[120.743246,21.915569],[120.78155,21.923957],[120.85468,21.883333],[120.87291,21.897387],[120.866482,21.98436],[120.907315,22.033208],[120.904154,22.119757],[120.914955,22.302718],[120.981658,22.528305],[121.015009,22.584168],[121.033292,22.650725],[121.078498,22.669656],[121.170544,22.723133],[121.210481,22.770665],[121.237931,22.836327],[121.324708,22.945666],[121.354687,23.01006],[121.370388,23.084347],[121.409535,23.102669],[121.430294,23.137196],[121.415015,23.195973],[121.440358,23.272096],[121.479558,23.3223],[121.497788,23.419789],[121.521497,23.483198],[121.523078,23.538708],[121.587778,23.76102],[121.621604,23.92075],[121.659381,24.006893],[121.639992,24.064276],[121.643838,24.097713],[121.678085,24.133906],[121.689044,24.174401],[121.809172,24.339055],[121.826717,24.423579],[121.867498,24.478978],[121.885464,24.529677],[121.892524,24.617912],[121.862598,24.671515],[121.837993,24.76015],[121.845053,24.836269],[121.932883,24.938645],[122.012178,25.001469],[121.980776,25.03079],[121.947425,25.031955],[121.917077,25.137908],[121.842155,25.135332],[121.782407,25.160425],[121.750531,25.160716],[121.707327,25.191493],[121.700319,25.226913],[121.655324,25.241859],[121.623026,25.294694],[121.584986,25.308926],[121.535038,25.307515],[121.444415,25.270624],[121.413487,25.238912],[121.371864,25.159885],[121.319281,25.140691],[121.209322,25.127104],[121.133135,25.078728],[121.102102,25.075153],[121.024704,25.040479],[121.009688,24.993649],[120.960899,24.940227],[120.908475,24.852012],[120.892299,24.767526],[120.823753,24.688321],[120.762371,24.658335],[120.688661,24.600678],[120.64277,24.490172],[120.589187,24.432354],[120.546299,24.370413],[120.521009,24.312038],[120.470534,24.24259],[120.451461,24.182691],[120.392029,24.11824],[120.316158,23.984881],[120.278276,23.927798],[120.245768,23.840553],[120.175377,23.807385],[120.102773,23.700981],[120.094817,23.587466],[120.121741,23.504664],[120.107831,23.341264],[120.081434,23.29191],[120.018947,23.073115],[120.029537,23.048623],[120.131382,23.002118],[120.149138,22.896715],[120.200403,22.721101],[120.274272,22.560181],[120.297191,22.531315],[120.443558,22.441245]]],[[[124.542984,25.903911],[124.586346,25.913777],[124.572805,25.93974],[124.541825,25.931031],[124.542984,25.903911]]],[[[123.445286,25.725966],[123.472104,25.713024],[123.508933,25.723237],[123.514834,25.751226],[123.483063,25.768587],[123.444496,25.746514],[123.445286,25.725966]]],[[[119.64597,23.55091],[119.701081,23.550657],[119.678057,23.600041],[119.610089,23.603953],[119.594388,23.577245],[119.566306,23.584732],[119.562565,23.530377],[119.573788,23.505885],[119.609141,23.503864],[119.64597,23.55091]]],[[[123.667207,25.914066],[123.707092,25.916873],[123.678008,25.938667],[123.667207,25.914066]]],[[[119.506031,23.625567],[119.505241,23.575814],[119.472416,23.557136],[119.523207,23.563699],[119.525578,23.624895],[119.506031,23.625567]]],[[[119.49739,23.386683],[119.495125,23.350156],[119.516885,23.349903],[119.49739,23.386683]]],[[[119.557454,23.666474],[119.604083,23.616989],[119.615516,23.660925],[119.586485,23.675974],[119.557454,23.666474]]],[[[121.46823,22.676644],[121.476502,22.64166],[121.513541,22.631833],[121.5147,22.67639],[121.46823,22.676644]]],[[[121.510538,22.087185],[121.507693,22.048523],[121.534089,22.022146],[121.594522,21.995382],[121.604586,22.022699],[121.575028,22.037122],[121.575607,22.084421],[121.510538,22.087185]]],[[[122.097533,25.500168],[122.093581,25.47183],[122.124825,25.475932],[122.097533,25.500168]]],[[[119.421467,23.216684],[119.421309,23.18935],[119.453396,23.217697],[119.421467,23.216684]]],[[[120.355042,22.327259],[120.395454,22.342287],[120.383072,22.355573],[120.355042,22.327259]]]]}}]}

vue/src/App.vue

@@ -1,5 +1,8 @@
 <template>
-  <div id="app">
+  <div id="app" style="background-color:#03050C" v-if="$route.meta.bigScreen">
+    <router-view />
+  </div>
+    <div id="app" v-else>
     <router-view />
   </div>
 </template>

vue/src/api/bigScreen/api.js

@@ -0,0 +1,168 @@
+
+/*
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-04-28 10:25:38
+ */
+import axios from 'axios';
+import UtilVar from "@/config/UtilVar";
+import router from '@/router'
+
+let baseUrl = UtilVar.baseUrl
+const CancelToken = axios.CancelToken;
+export { baseUrl };
+// axios.defaults.withCredentials = true;
+// 添加请求拦截器
+axios.interceptors.request.use(function (config) {
+    // 在发送请求之前做些什么 传token
+    let token = localStorage.getItem("token");
+    config.headers.common['Content-Type'] = "application/json;charset=utf-8";
+    config.headers.common['token'] = token;  //Authorization
+    return config;
+}, function (error) {
+    // 对请求错误做些什么
+    console.log(error)
+    return Promise.reject(error);
+});
+/**
+ * @响应拦截
+ */
+axios.interceptors.response.use(response => {
+  
+    if (response.status !== 200) {
+        return Promise.reject(response)
+    }
+      /**
+     * @code 登录过期 token验证失败 根据后端调 
+     */
+    if (response.data.code == UtilVar.code) {
+        // router.push("/login")
+    }
+    return response.data
+}, error => {
+    // console.log('axiosError',error);
+    let err = {
+        success: false,
+        msg: "未知异常，请联系管理员！"
+    }
+    return Promise.reject(err)
+})
+
+let configs_ENC = {
+    headers: { 'enc': UtilVar.ENC }
+}
+//处理是否加密数据
+let isEncryptionParam = (params) => {
+    return params
+
+}
+export const GET = async (url, params) => {
+    try {
+        params = isEncryptionParam(params)
+        const data = await axios.get(`${baseUrl}${url}`, {
+            params: params,
+            headers: configs_ENC.headers
+        }, configs_ENC);
+        return data;
+    } catch (error) {
+        return error;
+    }
+}
+//没有基地址 访问根目录下文件
+
+export const GETNOBASE = async (url, params) => {
+    try {
+        const data = await axios.get(url, {
+            params: params,
+        });
+        return data;
+    } catch (error) {
+        return error;
+    }
+}
+export const POST = async (url, params) => {
+    try {
+        params = isEncryptionParam(params)
+        const data = await axios.post(`${baseUrl}${url}`, params, configs_ENC);
+        return data;
+    } catch (error) {
+        return error;
+    }
+}
+export const PUT = async (url, params) => {
+    try {
+        params = isEncryptionParam(params)
+        const data = await axios.put(`${baseUrl}${url}`, params, configs_ENC);
+        return data;
+    } catch (error) {
+        return error;
+    }
+}
+export const DELETE = async (url, params) => {
+    // console.log(params)
+    try {
+        params = isEncryptionParam(params)
+        const data = await axios.delete(`${baseUrl}${url}`, { data: params, headers: configs_ENC.headers }, configs_ENC);
+        return data;
+    } catch (error) {
+        return error;
+    }
+}
+
+
+/**
+ * @文件类型提交方法
+ */
+let configs = {
+    headers: { 'Content-Type': 'multipart/form-data' },
+
+}
+export const FILESubmit = async (url, params, config) => {
+    try {
+        const data = await axios.post(`${baseUrl}${url}`, params, {
+            ...configs,
+            cancelToken: new CancelToken(function executor(c) {
+                config.setCancel && config.setCancel(c)
+            }),
+            onUploadProgress: (e) => {
+                if (e.total > 0) {
+                    e.percent = e.loaded / e.total * 100;
+                }
+                // console.log(config)
+                config.onProgress && config.onProgress(e)
+            },
+
+        });
+        return data;
+    } catch (err) {
+        return err;
+    }
+}
+
+/**
+ * 下载文档流
+ * @param {config.responseType} 下载文件流根据后端 配置   arraybuffer || blod
+ */
+export const FILE = async (config = {}, body, params) => {
+    try {
+        const data = await axios({
+            method: config.method || 'get',
+            url: `${baseUrl}${config.url}`,
+            data: body,
+            params: params,
+            responseType: config.responseType || 'blob',
+            onDownloadProgress: (e) => {
+                // console.log(e,e.currentTarget)
+                // if (e.currentTarget.response.size > 0) {
+                //     e.percent = e.loaded / e.currentTarget.response.size * 100;
+                // }
+                // event.srcElement.getResponseHeader('content-length')
+                config.onProgress && config.onProgress(e)
+            },
+        });
+        return data;
+    } catch (err) {
+        return err;
+    }
+}
+
+

vue/src/api/bigScreen/index.js

@@ -0,0 +1,46 @@
+/*
+ * @Author: daidai
+ * @Date: 2021-12-09 10:47:56
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-04-27 16:32:31
+ * @FilePath: \web-pc\src\api\index.js
+ */
+
+
+import {    currentList,
+    currentPage,
+    currentSave,
+    currentUpdate,
+    currentDelete,
+    currentSelect,
+    currentSelectList,
+
+    currentPOST,
+    currentGET,
+    currentApi
+
+} from './modules'
+import { 
+    GETNOBASE,
+    GET
+} from './api'
+
+
+export {
+    GETNOBASE,
+    GET
+}
+
+
+export {
+    currentApi,
+    currentList,
+    currentPage,
+    currentSave,
+    currentUpdate,
+    currentDelete,
+    currentSelect,
+    currentSelectList,
+    currentPOST,
+    currentGET
+}

vue/src/api/bigScreen/modules/index.js

@@ -0,0 +1,97 @@
+/*
+ * @Author: daidai
+ * @Date: 2021-12-23 11:18:37
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-04-28 15:10:45
+ * @FilePath: \web-pc\src\api\modules\index.js
+ */
+import * as API from "../api";
+
+export const paramType ={
+    'big1':"/bigscreen/countUserNum", //用户总览
+    'big2':"/bigscreen/countDeviceNum", //设备总览 
+    'big3':"/bigscreen/sbtx", //设备提醒
+    'big4':"/bigscreen/alarmNum", //报警次数
+    'big5':'/bigscreen/ssyj',//实时预警 
+    'big6':'/bigscreen/installationPlan',// 安装计划
+    'big7':'/bigscreen/ranking',// 报警排名
+    'big8':'/bigscreen/centermap',// //中间地图
+
+}
+/******************      通用增删改查       ********************* */
+/**
+ * 通用列表
+ * @param {*} param 
+ */
+ export const currentList =  (key,param)=> {
+    return API.GET(paramType[key]+"/list", param)
+}
+export const currentPage =  (key,param)=> {
+    return API.GET(paramType[key]+"/page", param)
+}
+/**
+ * 查询可选择的列表
+ * @param {*} param 
+ */
+ export const currentSelectList=  (key,param)=> {
+    return API.GET(paramType[key]+"/selectList", param)
+}
+
+
+/**
+ * 通用新增
+ * @param {*} param 
+ */
+ export const currentSave= (key,param)=> {
+    return API.POST(paramType[key]+"/save", param)
+}
+/**
+ * 通用修改
+ * @param {*} param 
+ */
+ export const currentUpdate=  (key,param) => {
+    return API.POST(paramType[key]+"/update", param)
+}
+
+/**
+ * 通用删除
+ * @param {*} param 
+ */
+ export const currentDelete= (key,param) => {
+    return API.POST(paramType[key]+"/delete", param)
+}
+
+/**
+ * 通用获取所有不分页
+ * @param {*} param 
+ */
+ export const currentSelect=  (key,param)=> {
+    return API.GET(paramType[key]+"/select", param)
+}
+
+/**
+ * 通用GET
+ * @param {*} param 
+ */
+ export const currentGET=  (key,param)=> {
+    return API.GET(paramType[key], param)
+}
+/**
+ * 通用POST
+ * @param {*} param 
+ */
+ export const currentPOST=  (key,param)=> {
+    return API.POST(paramType[key], param)
+}
+// 通用接口集合
+export const currentApi={
+    currentList,
+    currentPage,
+    currentSave,
+    currentUpdate,
+    currentDelete,
+    currentSelect,
+    currentSelectList,
+    currentPOST,
+    currentGET
+}

vue/src/assets/bigScreen/css/index.scss

@@ -0,0 +1,361 @@
+@import "./modules/reset.scss";
+@import "./modules/variables.scss";
+@import './theme/index.css';
+@import '../iconfont//iconfont.css';
+
+[class*=" blq-icon-"],
+[class^=blq-icon-] {
+  font-family: iconfont !important;
+  speak: none;
+  font-style: normal;
+  font-weight: 400;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: middle;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
+}
+
+*,
+:after,
+:before {
+  box-sizing: content-box;
+}
+
+.clearfix {
+  &::after {
+    content: "";
+    display: table;
+    height: 0;
+    line-height: 0;
+    visibility: hidden;
+    clear: both;
+  }
+}
+
+.contents {
+  width: 100%;
+  display: flex;
+  min-height: calc(100% - 60px);
+  justify-content: space-between;
+}
+
+.beautify-scroll-def {
+  overflow-y: auto;
+
+  &::-webkit-scrollbar-thumb {
+    //滚动条的设置
+    background-color: rgba(14, 59, 150, 0);
+    background-clip: padding-box;
+    border-radius: 4px;
+  }
+
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      //滚动条的设置
+      background-color: rgba(14, 59, 150, 0.5);
+      background-clip: padding-box;
+      border-radius: 4px;
+    }
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    //滚动条凹槽的颜色，还可以设置边框属性
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar {
+    //滚动条的宽度
+    width: 8px;
+    height: 8px;
+  }
+
+
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(14, 59, 150, .8);
+  }
+}
+
+
+.orderNum {
+  // min-width: 22px;
+  // height: 22px;
+  // background: #00b8ff;
+  // border-radius: 50%;
+  // text-align: center;
+  // line-height: 22px;
+  // font-size: 13px;
+  // font-weight: 900;
+  // color: #0f2854;
+  color: #00b8ff;
+}
+
+.yh-big-input {
+  width: 253px;
+  height: 14px;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, .53);
+  border-radius: 4px;
+  color: #fff;
+  padding: 6px 10px;
+  font-size: 14px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  &:focus {
+    outline: none;
+    border-color: #31abe3;
+  }
+}
+
+.yh-big-el-input {
+  width: 253px;
+  font-size: 14px;
+
+  .el-input__inner {
+    padding: 6px 10px;
+    border: 1px solid rgba(255, 255, 255, .53);
+    background-color: transparent;
+    font-size: 14px;
+    line-height: 1;
+    color: #fff;
+    &:hover{
+      border-color: rgba(255, 255, 255, .8);
+    }
+    &:focus {
+      outline: none;
+      border-color: #31abe3;
+    }
+
+  }
+
+}
+
+.yh-big-button {
+  width: 53px;
+  height: 26px;
+  background: #00b1d6;
+  border-radius: 4px;
+  // border-color: #00b1d6;
+  border-width: 1px;
+  border: none;
+  cursor: pointer;
+  color: #fff;
+  font-size: 15px;
+
+  &:hover,
+  &:focus {
+    // border-color: #0597b4;
+    background: #0597b4;
+  }
+}
+
+
+//浮动
+.float-r {
+  float: right;
+}
+
+//浮动
+.float-l {
+  float: left;
+}
+
+// 字体加粗
+.fw-b {
+  font-weight: bold;
+}
+
+//文章一行显示，多余省略号显示
+.title-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+//表格样式重置
+.ve-table {
+  $border-color: #525371;
+  // $border-color: rgba(255, 255, 255, .43);
+  box-sizing: border-box;
+
+  .ve-table-container {
+    &::-webkit-scrollbar-track-piece {
+      //滚动条凹槽的颜色，还可以设置边框属性
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar {
+      //滚动条的宽度
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      //滚动条的设置
+      background-color: rgba(14, 59, 150, 0.5);
+      background-clip: padding-box;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: rgba(14, 59, 150, .8);
+    }
+
+    .ve-table-content {
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0px;
+        width: 1px;
+        height: 100%;
+        background-color: $border-color;
+        z-index: 20;
+
+      }
+    }
+
+  }
+
+  &.ve-table-border-around {
+    border-color: $border-color;
+  }
+
+  .ve-table-container table.ve-table-content thead.ve-table-header tr.ve-table-header-tr {
+    height: 34px;
+    box-sizing: border-box;
+
+    th.ve-table-header-th {
+      background: #04004E;
+      color: #FFF;
+      border-color: $border-color;
+      box-sizing: border-box;
+      line-height: 1;
+    }
+  }
+
+  .ve-table-container table.ve-table-content tbody.ve-table-body {
+
+    tr.ve-table-body-tr td.ve-table-body-td,
+    tr.ve-table-expand-tr td.ve-table-body-td,
+    tr.ve-table-body-tr td.ve-table-expand-td,
+    tr.ve-table-expand-tr td.ve-table-expand-td {
+      background: transparent;
+      color: #FFF;
+      border-color: $border-color;
+      box-sizing: border-box;
+    }
+
+    tr.ve-table-body-tr,
+    tr.ve-table-expand-tr {
+      height: 34px;
+      box-sizing: border-box;
+    }
+
+    &.ve-table-row-hover tr.ve-table-body-tr:hover td {
+      background-color: rgba(0, 0, 0, .22);
+      box-sizing: border-box;
+    }
+  }
+
+
+
+  .ve-table-container .ve-table-border-x th,
+  .ve-table-container .ve-table-border-x td {
+    border-color: $border-color;
+    box-sizing: border-box;
+  }
+
+}
+
+
+
+//颜色
+@each $colorkey,
+$color in $colors {
+  .text-#{$colorkey} {
+    color: $color;
+  }
+
+  .bg-#{$colorkey} {
+    background-color: $color;
+  }
+}
+
+//对齐
+@each $var in (left, center, right) {
+  .text-#{$var} {
+    text-align: $var !important;
+  }
+}
+
+//flex
+@each $key,
+$value in $flex-jc {
+  .jc-#{$key} {
+    justify-content: $value;
+  }
+}
+
+@each $key,
+$value in $flex-ai {
+  .ai-#{$key} {
+    align-items: $value;
+  }
+}
+
+//字体
+@each $fontkey,
+$fontvalue in $font-sizes {
+  .fs-#{$fontkey} {
+    font-size: $fontvalue * $base-font-size;
+  }
+}
+
+//.mt-1 => margin top
+//spacing
+
+@each $typekey,
+$type in $spacing-types {
+
+  //.m-1
+  @each $sizekey,
+  $size in $spacing-sizes {
+    .#{$typekey}-#{$sizekey} {
+      #{$type}: $size * $spacing-base-size;
+    }
+  }
+
+  //.mx-1
+  @each $sizekey,
+  $size in $spacing-sizes {
+    .#{$typekey}x-#{$sizekey} {
+      #{$type}-left: $size * $spacing-base-size;
+      #{$type}-right: $size * $spacing-base-size;
+    }
+
+    .#{$typekey}y-#{$sizekey} {
+      #{$type}-top: $size * $spacing-base-size;
+      #{$type}-bottom: $size * $spacing-base-size;
+    }
+  }
+
+  //.mt-1
+  @each $directionkey,
+  $direction in $spacing-directions {
+
+    @each $sizekey,
+    $size in $spacing-sizes {
+      .#{$typekey}#{$directionkey}-#{$sizekey} {
+        #{$type}-#{$direction}: $size * $spacing-base-size;
+      }
+    }
+  }
+
+  .#{$typekey} {
+    #{$type}: 0;
+  }
+}

vue/src/assets/bigScreen/css/modules/reset.scss

@@ -0,0 +1,200 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video,
+input {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font-weight: normal;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* custom */
+
+a {
+  color: #7e8c8d;
+  -webkit-backface-visibility: hidden;
+  text-decoration: none;
+}
+
+li {
+  list-style: none;
+}
+
+body {
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.olControlScaleLineBottom {
+  display: none;
+}
+
+.olControlScaleLineTop {
+  color: #000 !important;
+  border-bottom: solid 3px #000 !important;
+  border-left: solid 2px #000 !important;
+  border-right: solid 2px #000 !important;
+  background-color: rgba(255, 255, 255, .4);
+  font-size: 10px;
+  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
+}
+
+.olControlScaleLine {
+  z-index: 900 !important;
+}
+/*清除浮动*/
+.clearfix:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+.clearfix {display: inline-block;}
+/* 点击搜索框获取焦点 placeholder消失-开始 */
+/* WebKit browsers */
+
+// input:focus::-webkit-input-placeholder {
+//   color: transparent;
+// }
+
+
+// /* Mozilla Firefox 4 to 18 */
+
+// input:focus:-moz-placeholder {
+//   color: transparent;
+// }
+
+
+// /* Mozilla Firefox 19+ */
+
+// input:focus::-moz-placeholder {
+//   color: transparent;
+// }
+
+
+// /* Internet Explorer 10+ */
+
+// input:focus:-ms-input-placeholder {
+//   color: transparent;
+// }
+
+/* 点击搜索框获取焦点 placeholder消失-结束 */

vue/src/assets/bigScreen/css/modules/variables.scss

@@ -0,0 +1,98 @@
+// 颜色
+$colors: (
+  "primary": #1A5CD7,
+  "info-1": #4394e4,
+  "info": #4b67af,
+  "white": #ffffff,
+  "light": #f9f9f9,
+  "grey-1": #999999,
+  "grey": #666666,
+  "dark-1": #5f5f5f,
+  "dark": #222222,
+  "black-1": #171823,
+  "black": #000000,
+  "icon": #5cd9e8
+);
+
+// 字体大小
+$base-font-size: 0.2rem;
+$font-sizes: (
+  xxs: 0.1,
+  //8px
+    xs: 0.125,
+  //10px
+    sm: 0.2875,
+  //12px
+    md: 0.1625,
+  //13px
+    lg: 0.175,
+  //14px
+    xl: 0.2,
+  //16px
+    xxl: 0.225,
+  //18px
+    xxxl: 0.25 //20px,,,,
+);
+
+// 宽高
+.w-100 {
+  width: 100%;
+}
+.h-100 {
+  height: 100%;
+}
+
+//flex
+.flex {
+  display: flex;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+$flex-jc: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly,
+);
+
+$flex-ai: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  stretch: stretch,
+);
+
+.flex-1 {
+  flex: 1;
+}
+
+//.mt-1 => margin top
+//spacing
+$spacing-types: (
+  m: margin,
+  p: padding,
+);
+$spacing-directions: (
+  t: top,
+  r: right,
+  b: bottom,
+  l: left,
+);
+$spacing-base-size: 0.5rem;
+$spacing-sizes: (
+  0: 0,
+  1: 0.5,
+  2: 1,
+  3: 1.5,
+  4: 2,
+  5: 2.5,
+);

vue/src/assets/bigScreen/css/public.scss

@@ -0,0 +1,156 @@
+.flex {
+	display: flex;
+}
+
+.flex-direction {
+	flex-direction: column;
+}
+
+.flex-wrap {
+	flex-wrap: wrap;
+}
+
+.align-start {
+	align-items: flex-start;
+}
+
+.align-end {
+	align-items: flex-end;
+}
+
+.align-center {
+	align-items: center;
+}
+
+.align-stretch {
+	align-items: stretch;
+}
+
+.self-start {
+	align-self: flex-start;
+}
+
+.self-center {
+	align-self: flex-center;
+}
+
+.self-end {
+	align-self: flex-end;
+}
+
+.self-stretch {
+	align-self: stretch;
+}
+
+.align-stretch {
+	align-items: stretch;
+}
+
+.justify-start {
+	justify-content: flex-start;
+}
+
+.justify-end {
+	justify-content: flex-end;
+}
+
+.justify-center {
+	justify-content: center;
+}
+
+.justify-between {
+	justify-content: space-between;
+}
+
+.justify-around {
+	justify-content: space-around;
+}
+@for $i from 0 through 12 {
+  .rdx-flex-#{$i} {
+    flex: $i;
+  }
+}
+
+@for $i from 9 to 50 {
+  .rdx-font-#{$i} {
+    font-size: $i + px;
+  }
+}
+
+@for $i from 2 to 50 {
+  .rdx-radius-#{$i} {
+    border-radius: $i + px;
+  }
+}
+@for $i from 10 to 50 {
+  .rdx-line-height-#{$i} {
+    line-height: $i + px;
+  }
+}
+
+// 定义内外边距，历遍1-80
+@for $i from 0 through 80 {
+  // 只要双数和能被5除尽的数
+  @if $i % 2 == 0 or $i % 5 == 0 {
+    // 得出：u-margin-30或者u-m-30
+    .rdx-m-#{$i} {
+      margin: $i + px !important;
+    }
+    // 得出：u-padding-30或者u-p-30
+    .rdx-p-#{$i} {
+      padding: $i + px !important;
+    }
+
+    @each $short, $long in l left, t top, r right, b bottom {
+      // 缩写版，结果如： u-m-l-30
+      // 定义外边距
+      .rdx-m-#{$short}-#{$i} {
+        margin-#{$long}: $i + px !important;
+      }
+
+      // 定义内边距
+      .rdx-p-#{$short}-#{$i} {
+        padding-#{$long}: $i + px !important;
+      }
+
+	 //自定义左右内边距
+	  .rdx-p-lr-#{$i} {
+		padding-left:$i + px !important;
+		padding-right:$i + px !important;
+	  }
+	  //自定义上下内边距
+	   .rdx-p-tb-#{$i} {
+	  		padding-top:$i + px !important;
+	  		padding-bottom:$i + px !important;
+	   }
+    }
+  }
+}
+i{font-style: normal;}
+.position-re{position: relative;}
+.position-ab{position: absolute; z-index: 9;}
+.position-fixed{position: fixed; background: rgba(92, 116, 143, 0.45); width: 100%; height: 100%; left: 0px; top: 0px; z-index: 10;}
+.round{border-radius: 50%;}
+.font-strong{font-weight: bold;}
+// .color-del{color:$del-color}
+// .color-primary{color: $primary-color;}
+.color-remark{color: #666666;}
+.color-9{color: #999999;}
+.color-green{color: #38a800;}
+.bg-white{background-color: white;}
+.line-bottom{border-bottom: 1px solid #eeeeee;}
+.button-pointer{cursor: pointer;}
+.box-shadow-item{box-shadow: 0px 0px 4px 0px rgba(45, 45, 46, 0.1);}
+.search-form .search-form-item label {text-align: right; padding-right: 6px;}
+
+
+.break-all{
+  word-break: break-all;
+}
+.blocks{
+  width: 100%;
+  height: 100%;
+}
+.cursor-pointer{
+  cursor: pointer;
+}

vue/src/assets/bigScreen/css/variable.scss

@@ -0,0 +1,50 @@
+// 颜色
+$primary-color: #1890ff;
+$primary-color-hl: rgb(41, 52, 67);
+$default-color: #006569;
+$link: #1890ff;
+$active-color: rgb(0, 101, 105);
+$del-color: #ff1839;
+$content-background: #f3f5fa;
+$table-header-background: #d8eaff;
+
+$primary-color-rgba: rgba($color: $primary-color,
+  $alpha: 0.1,
+);
+//表格上面button按钮颜色
+$table-header-button: #18d1ff;
+// 阴影
+$primary-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
+0 0 6px rgba(0, 0, 0, 0.04);
+$primary-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+$baidu-shadow: 1px 2px 1px rgba(0, 0, 0, 0.15);
+$gaode-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
+0 2px 6px 0 rgba(0, 0, 0, 0.19);
+
+// box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
+
+$primary-border: $primary-color solid 1px;
+
+$tool-top: 20px;
+
+//header 的高度
+$index-height: 60px;
+$index-content-height: calc(100% - 60px);
+$index-tags-height: 36px;
+// 宽度侧边栏
+$aside-width: 200px;
+$content-padding: 16px;
+
+$default-zindex: 99;
+
+/*文本格式化，超出范围，显示省略号*/
+@mixin text-overflow($num: 1) {
+  word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: $num;
+  -webkit-box-orient: vertical;
+}
+
+

vue/src/assets/bigScreen/css/webfont/index.css

@@ -0,0 +1,18 @@
+/* @font-face {
+    font-family: 'webfont';
+    font-display: swap;
+    src: url('//at.alicdn.com/t/webfont_c14qx7m7htb.eot');
+    src: 
+    url('//at.alicdn.com/t/webfont_c14qx7m7htb.woff2') format('woff2'),
+    url('//at.alicdn.com/t/webfont_c14qx7m7htb.woff') format('woff'), 
+
+
+  }
+
+.number-font{
+    font-family:"webfont" !important;
+    font-size:16px;font-style:normal;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0.2px;
+    -moz-osx-font-smoothing: grayscale;
+} */

vue/src/assets/bigScreen/iconfont/iconfont.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2995337 */
+  src: url('iconfont.woff2?t=1638871675242') format('woff2'),
+       url('iconfont.woff?t=1638871675242') format('woff'),
+       url('iconfont.ttf?t=1638871675242') format('truetype');
+}
+
+/* .iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+} */
+
+.blq-icon-shezhi01:before {
+  content: "\e610";
+}
+
+.blq-icon-shezhi02:before {
+  content: "\e611";
+}
+

vue/src/config/UtilVar.js

@@ -0,0 +1,15 @@
+/*
+ * @Author: daidai
+ * @Date: 2021-12-06 10:58:24
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-04-27 16:54:32
+ * @FilePath: \web-pc\src\config\UtilVar.js
+ */
+var UtilVar = {
+    ENC: false, //返回结果是否加密
+    baseUrl: `http://locolhost:8888`,
+    code: 401,
+}
+
+export default UtilVar
+

vue/src/directive/filters.js

@@ -0,0 +1,11 @@
+/*
+ * @Author: daidai
+ * @Date: 2022-01-11 15:27:31
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-04-21 14:32:03
+ * @FilePath: \web-pc\src\directives\filters.js
+ */
+export function montionFilter (val) {
+    // console.log(val);
+    return val ? Number(val).toFixed(2) : '--'
+}

vue/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
+}
+
+//

vue/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

vue/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
+}

vue/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;
+};
+
+

vue/src/main.js

@@ -42,7 +42,30 @@ import VueClipboard from 'vue-clipboard2'
 // Mqtt工具
 import mqttTool from '@/utils/mqttTool'
 
+import ItemWrap from './views/bigScreen/components/item-wrap/item-wrap.vue'
+import Message from './views/bigScreen/components/message/message.vue'
+import Reacquire from './views/bigScreen/components/reacquire/reacquire.vue'
+import Echart from './views/bigScreen/components/echart/index.vue'
 
+import  '@/assets/bigScreen/css/public.scss'
+import "@/assets/bigScreen/css/index.scss"
+import {loading,borderBox13,digitalFlop,capsuleChart,borderBox8} from '@jiaminghi/data-view'
+import * as filters from '@/directive/filters'
+
+require('./mock/mock')//是否使用mock
+
+// datav组件
+Vue.use(loading)
+Vue.use(borderBox13)
+Vue.use(borderBox8)
+Vue.use(digitalFlop)
+Vue.use(capsuleChart)
+
+// 自定义组件
+Vue.component("Echart",Echart)
+Vue.component("ItemWrap",ItemWrap)
+Vue.component("Message",Message)
+Vue.component("Reacquire",Reacquire)
 
 
 
@@ -73,7 +96,8 @@ Vue.use(plugins)
 Vue.use(VueMeta)
 DictData.install()
 
-
+// 全局数据过滤器
+Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

vue/src/mock/mock.js

@@ -0,0 +1,233 @@
+import Mock from 'mockjs'
+//延时200-600毫秒请求到数据
+Mock.setup({
+    timeout: '200-600'
+})
+
+const Random = Mock.Random;
+// 用户总览
+function countUserNum() {
+    const a = Mock.mock({
+        success: true,
+        data: {
+            offlineNum:'@integer(1, 100)',
+            lockNum: '@integer(1, 10)',
+            totalNum:218
+        }
+    })
+    a.data.onlineNum=a.data.totalNum-a.data.offlineNum-a.data.lockNum
+    return a
+}
+
+// 接口，第一个参数url，第二个参数请求类型，第三个参数响应回调
+Mock.mock(new RegExp('countUserNum'), 'get', countUserNum)
+
+// /设备总览 
+
+function countDeviceNum() {
+    const a = Mock.mock({
+        success: true,
+        data: {
+            alarmNum: '@integer(100, 1000)',
+            offlineNum: '@integer(0, 50)',
+            totalNum:698
+        }
+    })
+    a.data.onlineNum=a.data.totalNum-a.data.offlineNum
+
+
+    return a
+}
+
+Mock.mock(new RegExp('countDeviceNum'), 'get', countDeviceNum)
+
+// /设备总览 
+
+function sbtx() {
+    const a = Mock.mock({
+        success: true,
+        data: {
+            "list|20": [
+                {
+                    provinceName: "@province()",
+                    cityName: '@city()',
+                    countyName: "@county()",
+                    createTime: "@datetime('yyyy-MM-dd HH:mm:ss')",
+                    deviceId: "6c512d754bbcd6d7cd86abce0e0cac58",
+                    "gatewayno|+1": 10000,
+                    "onlineState|1": [0, 1],
+
+                }
+            ]
+        }
+    })
+    return a
+}
+
+Mock.mock(new RegExp('sbtx'), 'get', sbtx)
+
+
+
+//中间地图
+
+function centermap(options) {
+    let params = parameteUrl(options.url)
+    if (params.regionCode && params.regionCode != -1) {
+        const a = Mock.mock({
+            success: true,
+            data: {
+                "dataList|30": [
+                    {
+                        name: "@city()",
+                        value: '@integer(1, 1000)'
+                    }
+                ],
+                regionCode: params.regionCode,//-代表中国
+            }
+        })
+        return a
+    } else {
+        const a = Mock.mock({
+            success: true,
+            data: {
+                "dataList|8": [
+                    {
+                        name: "@province()",
+                        value: '@integer(1, 1000)'
+                    }
+                ],
+                regionCode: -1,//-代表中国
+            }
+        })
+        return a
+    }
+
+}
+
+Mock.mock(new RegExp('centermap'), 'get', centermap)
+
+// 报警次数
+
+function alarmNum() {
+    const a = Mock.mock({
+        success: true,
+        data: {
+            dateList:['2021-11', '2021-12', '2022-01', '2022-02', '2022-03',"2022-04"],
+            "numList|6":[
+                '@integer(0, 1000)'
+            ],
+            "numList2|6":[
+                '@integer(0, 1000)'
+            ]
+        }
+    })
+    return a
+}
+Mock.mock(new RegExp('alarmNum'), 'get', alarmNum)
+
+// 实时预警
+
+function ssyj() {
+    const a = Mock.mock({
+        success: true,
+        data: {
+            "list|40":[{
+                alertdetail: "@csentence(5,10)",
+                "alertname|1": ["水浸告警","各种报警"],
+                alertvalue: "@float(60, 200)",
+                createtime: "2022-04-19 08:38:33",
+                deviceid: null,
+                "gatewayno|+1": 10000,
+                phase: "A1",
+                sbInfo: "@csentence(10,18)",
+                "terminalno|+1": 100,
+                provinceName: "@province()",
+                cityName: '@city()',
+                countyName: "@county()",
+            }],
+            
+        }
+    })
+    return a
+}
+Mock.mock(new RegExp('ssyj'), 'get', ssyj)
+//安装计划 
+function installationPlan() {
+    let num=  RandomNumBoth(26,32);
+    const a = Mock.mock({
+        ["category|"+num]:["@city()"],
+        ["barData|"+num]:["@integer(10, 100)"],
+    })
+    let lineData=[],rateData=[];
+    for (let index = 0; index < num; index++) {
+        let lineNum = Mock.mock('@integer(0, 100)')+a.barData[index]
+        lineData.push(lineNum)
+        let rate = a.barData[index] / lineNum;
+        rateData.push((rate*100).toFixed(0))
+    }
+    a.lineData=lineData
+    a.rateData=rateData
+    return {
+        success: true,
+        data:a
+    }
+}
+Mock.mock(new RegExp('installationPlan'), 'get', installationPlan)
+
+
+
+
+//报警排名 
+function ranking() {
+   //多生成几个避免重复 重复会报错
+  let num =Mock.mock({"list|48":[{ value:"@integer(50,1000)",name:"@city()"}]}).list
+//   console.log(num);
+  let newNum =[],numObj={}
+  num.map(item=>{
+    if(!numObj[item.name] && newNum.length<8){
+        numObj[item.name] =true
+        newNum.push(item)
+    }
+  })
+  let arr = newNum.sort((a,b)=>{
+    return b.value-a.value
+  })
+  let a ={
+      success:true,
+      data:arr
+  }
+  return a
+}
+Mock.mock(new RegExp('ranking'), 'get', ranking)
+/**
+ * @description: min ≤ r ≤ max  随机数
+ * @param {*} Min
+ * @param {*} Max
+ * @return {*}
+ */
+function RandomNumBoth(Min,Max){
+    var Range = Max - Min;
+    var Rand = Math.random();
+    var num = Min + Math.round(Rand * Range); //四舍五入
+    return num;
+}
+/**
+ * @description: 获取路径参数
+ * @param {*} url
+ * @return {*}
+ */
+function parameteUrl(url) {
+    var json = {}
+    if (/\?/.test(url)) {
+        var urlString = url.substring(url.indexOf("?") + 1);
+        var urlArray = urlString.split("&");
+        for (var i = 0; i < urlArray.length; i++) {
+            var urlItem = urlArray[i];
+            var item = urlItem.split("=");
+            console.log(item);
+            json[item[0]] = item[1];
+        }
+        return json;
+    }
+    return {};
+}

vue/src/router/index.js

@@ -39,6 +39,12 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/bigScreen',
+    component: (resolve) => require(['@/views/bigScreen/home'], resolve),
+    hidden: true,
+    meta: { bigScreen: true }
+  },
   {
     path: '/login',
     component: (resolve) => require(['@/views/login'], resolve),

vue/src/store/modules/settings.js

@@ -12,7 +12,22 @@ const state = {
   tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
   fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
   sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
-  dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
+  dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle,
+
+  sbtxSwiper: true, //设备提醒轮播
+  ssyjSwiper: true, //实时预警轮播
+  isScale: true, //是否进行全局适配
+  defaultOption: {
+    step: 4.4, // 数值越大速度滚动越快
+    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: 3000 // 单步运动停止的时间(默认值1000ms)
+  },
+  echartsAutoTime: 3000, //echarts 图自动请求接口时间
 }
 const mutations = {
   CHANGE_SETTING: (state, { key, value }) => {

vue/src/utils/bigScreen/drawMixin.js

@@ -0,0 +1,75 @@
+/*
+ * @Author: daidai
+ * @Date: 2022-02-28 10:48:02
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-04-26 14:55:41
+ * @FilePath: \web-pc\src\pages\big-screen\utils\drawMixin.js
+ */
+// 屏幕适配 mixin 函数
+
+// * 默认缩放值
+const scale = {
+  width: '1',
+  height: '1',
+}
+
+// * 设计稿尺寸（px）
+const baseWidth = 1920
+const baseHeight = 1080
+
+// * 需保持的比例（默认1.77778）
+const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+
+export default {
+  data() {
+    return {
+      // * 定时函数
+      drawTiming: null,
+    }
+  },
+  computed: {
+    isScale(){
+      return this.$store.state.settings.isScale
+    }
+  },
+  mounted () {
+    if(!this.isScale){
+      return
+    }
+    this.calcRate()
+    window.addEventListener('resize', this.resize)
+  },
+  beforeDestroy () {
+       window.removeEventListener('resize', this.resize)
+  },
+  methods: {
+    calcRate () {
+      const appRef = this.$refs["appRef"]
+      if (!appRef) return 
+      // 当前宽高比
+      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
+      if (appRef) {
+        if (currentRate > baseProportion) {
+          // 表示更宽
+          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
+          scale.height = (window.innerHeight / baseHeight).toFixed(5)
+          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+        } else {
+          // 表示更高
+          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
+          scale.width = (window.innerWidth / baseWidth).toFixed(5)
+          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+        }
+      }
+    },
+    resize () {
+      if(!this.isScale){
+        return
+      }
+      clearTimeout(this.drawTiming)
+      this.drawTiming = setTimeout(() => {
+        this.calcRate()
+      }, 200)
+    }
+  },
+}

vue/src/utils/bigScreen/index.js

@@ -0,0 +1,58 @@
+/*
+ * @Author: daidai
+ * @Date: 2022-02-23 08:59:26
+ * @LastEditors: daidai
+ * @LastEditTime: 2022-02-24 17:11:58
+ * @FilePath: \big-screen-vue-datav\src\utils\index.js
+ */
+
+/**
+ * @param {Function} fn 防抖函数
+ * @param {Number} delay 延迟时间
+ */
+export function debounce(fn, delay) {
+  var timer;
+  return function () {
+    var context = this;
+    var args = arguments;
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      fn.apply(context, args);
+    }, delay);
+  };
+}
+/**
+ * @param {date} time 需要转换的时间
+ * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
+ */
+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;
+  }
+}

vue/src/utils/bigScreen/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": "吉林省"
+    }
+}

vue/src/views/bigScreen/components/echart/index.vue

@@ -0,0 +1,65 @@
+<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>

vue/src/views/bigScreen/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"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,90 @@
+<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/bigScreen/img/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>

vue/src/views/bigScreen/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>

vue/src/views/bigScreen/components/message/message.js

@@ -0,0 +1,49 @@
+/*
+ * @Author: daidai
+ * @Date: 2022-02-16 17:08:26
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-04-25 10:12:36
+ * @FilePath: \yhht-ui\yhht-ui\packagesEle\getXY\src\main.js
+ */
+import Vue from 'vue';
+import Main from './message.vue';
+import {isObject,isVNode} from '@/lib/types'
+let Message = Vue.extend(Main);
+let instance;
+var message = function (options) {
+    if (Vue.prototype.$isServer) return;
+    if(!instance){
+        instance = new Message({
+            data: {
+                ...options               
+            },
+         
+        });
+        instance.$mount();
+    }
+    instance.destroy=()=>{
+        document.body.removeChild(instance.$el);
+        instance&&instance.$destroy()
+        instance=null
+        return null
+    }
+    instance.init(options)
+    document.body.appendChild(instance.$el);
+    return instance;
+};
+['success', 'warning', 'info', 'error'].forEach(type => {
+    message[type] = (options) => {
+      if (isObject(options) && !isVNode(options)) {
+        return message({
+          ...options,
+          type
+        });
+      }
+      return message({
+        type,
+        text: options
+      });
+    };
+  });
+
+export default message;

vue/src/views/bigScreen/components/message/message.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="messages" v-if="visible">
+    <svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="message-icon">
+      <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
+        fill-opacity="0.9" v-if="'warning'==type"></path>
+    </svg>
+    {{ text }}
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      text: "",
+      type:'warning'
+    };
+  },
+  props: {},
+  created() { },
+
+  mounted() { },
+  methods: {
+    init(param) {
+      clearTimeout(this.timer);
+      this.visible = true;
+      this.text = param.text || "";
+      this.type = param.type || "success";
+      this.timer = setTimeout(() => {
+        this.visible = false;
+        clearTimeout(this.timer);
+      }, 2000);
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.messages {
+  position: fixed;
+  min-width: 200px;
+  top: 160px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  border: solid 1px #4b4b4b;
+  //   box-shadow: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 12%),
+  //     0 8px 10px rgba(0, 0, 0, 20%), inset 0 0.5px 0 #5e5e5e,
+  //     inset 0.5px 0 0 #5e5e5e, inset 0 -0.5px 0 #5e5e5e, inset -0.5px 0 0 #5e5e5e;
+  width: fit-content;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  z-index: 999;
+  color: rgba(255, 255, 255, 0.9);
+  background-color: #242424;
+  line-height: 22px;
+  font-size: 14px;
+  padding: 13px 16px;
+
+  .message-icon {
+    color: #cf6e2d;
+    font-size: 20px;
+    margin-right: 8px;
+    fill: currentColor;
+  }
+}
+</style>

vue/src/views/bigScreen/components/reacquire/reacquire.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class='reacquire flex justify-center  blocks  cursor-pointer' :style="{ lineHeight: lineHeight }"
+        @click="getData">
+        <span>
+             重新获取
+        </span>
+       
+    </div>
+</template>
+
+<script>
+export default {
+    components: {},
+    props: {
+        lineHeight: {
+            type: String,
+            default: '200px'
+        }
+    },
+    data() {
+        return {
+
+        };
+    },
+    computed: {},
+    methods: {
+        init() {
+        },
+        getData(e){
+            this.$emit("onclick",e)
+        }
+    },
+    created() {
+
+    },
+    mounted() {
+
+    },
+    beforeDestroy() {
+    },
+}
+</script>
+
+<style lang='scss' scoped>
+.reacquire {
+
+    user-select:none;
+    color: rgb(168, 168, 168);
+    span:hover{
+        // color:$primary-color ;
+        text-decoration: underline;
+    }
+}
+
+.blocks {
+    width: 100%;
+    height: 100%;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+</style>

vue/src/views/bigScreen/home.scss

@@ -0,0 +1,267 @@
+#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/bigScreen/img/pageBg.png");
+        background-size: cover;
+        background-position: center center;
+    }
+
+    .host-body {
+        height: 100%;
+
+        .title_wrap {
+            height: 60px;
+            background-image: url("../../assets/bigScreen/img/top.png");
+            background-size: cover;
+            background-position: center center;
+            position: relative;
+            margin-bottom: 4px;
+
+            .guang {
+                position: absolute;
+                bottom: -26px;
+                background-image: url("../../assets/bigScreen/img/guang.png");
+                background-position: 80px center;
+                width: 100%;
+                height: 56px;
+            }
+
+            .zuojuxing,
+            .youjuxing {
+                position: absolute;
+                top: -2px;
+                width: 140px;
+                height: 6px;
+                background-image: url("../../assets/bigScreen/img/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 {
+    width: 100vw;
+    height: 100vh;
+    background-color: #03050C;
+    .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)
+    }
+}

vue/src/views/bigScreen/home.vue

@@ -0,0 +1,93 @@
+<template>
+  <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: true }">
+    <div class="bg">
+      <dv-loading v-if="loading">Loading...</dv-loading>
+      <div v-else class="host-body">
+        <!-- 头部 s -->
+        <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>
+        <!-- 头部 e-->
+        <!-- 内容  s-->
+        <index></index>
+        <!-- 内容 e -->
+      </div>
+    </div>
+    <Setting ref="setting"/>
+  </div>
+</template>
+
+<script>
+import drawMixin from "../../utils/bigScreen/drawMixin";
+import { formatTime } from "../../utils/bigScreen/index.js";
+import Setting from './setting.vue'
+import index from './indexs/index.vue'
+export default {
+  mixins: [drawMixin],
+  components:{Setting,index},
+  data() {
+    return {
+      timing: null,
+      loading: true,
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+
+
+
+    };
+  },
+  filters: {
+    numsFilter(msg) {
+      return msg || 0;
+    },
+  },
+  computed:{
+    
+  },
+  created(){
+   
+  },
+  mounted() {
+    this.timeFn();
+    this.cancelLoading();
+  },
+  beforeDestroy() {
+    clearInterval(this.timing);
+  },
+  methods: {
+    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">
+@import "./home.scss";
+</style>

vue/src/views/bigScreen/indexs/center-bottom.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="center_bottom">
+    <Echart :options="options" id="bottomLeftChart" class="echarts_bottom"></Echart>
+  </div>
+</template>
+
+<script>
+import {currentGET} from '@/api/bigScreen/modules'
+export default {
+  data() {
+    return {
+      options: {},
+    };
+  },
+  props: {
+
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    getData() {
+      this.pageflag = true
+      currentGET('big6', { companyName: this.companyName }).then(res => {
+        console.log('安装计划', res);
+        if (res.success) {
+          this.init(res.data)
+        } else {
+          this.pageflag = false
+          this.$Message({
+            text: res.msg,
+            type: 'warning'
+          })
+        }
+      })
+    },
+    init(newData) {
+      this.options = {
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#FFF",
+          },
+          formatter: function (params) {
+              // 添加单位
+                var result = params[0].name + "<br>";
+                params.forEach(function (item) {
+                    if (item.value) {
+                      if(item.seriesName=="安装率"){
+                        result += item.marker + " " + item.seriesName + " : " + item.value + "%</br>";
+                      }else{
+                        result += item.marker + " " + item.seriesName + " : " + item.value + "个</br>";
+                      }
+                    } else {
+                        result += item.marker + " " + item.seriesName + " :  - </br>";
+                    }
+                });
+                return result;
+              }
+        },
+        legend: {
+          data: ["已安装", "计划安装", "安装率"],
+          textStyle: {
+            color: "#B4B4B4"
+          },
+          top: "0"
+        },
+        grid: {
+          left: "50px",
+          right: "40px",
+          bottom: "30px",
+          top: "20px",
+        },
+        xAxis: {
+          data: newData.category,
+          axisLine: {
+            lineStyle: {
+              color: "#B4B4B4"
+            }
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "#B4B4B4"
+              }
+            },
+
+            axisLabel: {
+              formatter: "{value}"
+            }
+          },
+          {
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "#B4B4B4"
+              }
+            },
+            axisLabel: {
+              formatter: "{value}% "
+            }
+          }
+        ],
+        series: [
+          
+          {
+            name: "已安装",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#956FD4" },
+                  { offset: 1, color: "#3EACE5" }
+                ])
+              }
+            },
+            data: newData.barData
+          },
+          {
+            name: "计划安装",
+            type: "bar",
+            barGap: "-100%",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "rgba(156,107,211,0.8)" },
+                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                  { offset: 1, color: "rgba(156,107,211,0.2)" }
+                ])
+              }
+            },
+            z: -12,
+            data: newData.lineData
+          },
+          {
+            name: "安装率",
+            type: "line",
+            smooth: true,
+            showAllSymbol: true,
+            symbol: "emptyCircle",
+            symbolSize: 8,
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                color: "#F02FC2"
+              }
+            },
+            data: newData.rateData
+          },
+        ]
+      }
+    }
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.center_bottom {
+  width: 100%;
+  height: 100%;
+
+  .echarts_bottom {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

vue/src/views/bigScreen/indexs/center-map.vue

@@ -0,0 +1,398 @@
+<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/bigScreen/map/xzqCode";
+import { currentGET } from '@/api/bigScreen/modules'
+
+import { GETNOBASE } from '@/api/bigScreen/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) {
+      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/bigScreen/img/xiezuo.png") no-repeat;
+    }
+
+    .you {
+      background: url("../../../assets/bigScreen/img/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>

vue/src/views/bigScreen/indexs/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <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">
+      <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>
+</template>
+
+<script>
+import LeftTop from './left-top.vue'
+import LeftCenter from "./left-center.vue";
+import LeftBottom from "./left-bottom.vue";
+import CenterMap from "./center-map.vue";
+import CenterBottom from "./center-bottom.vue";
+import RightTop from "./right-top.vue";
+import RightCenter from "./right-center.vue";
+import RightBottom from "./right-bottom.vue";
+
+export default {
+  components: {
+    LeftTop,
+    LeftCenter,
+    LeftBottom,
+    CenterMap,
+    RightTop,
+    RightCenter,
+    RightBottom,
+    CenterBottom,
+  },
+  data() {
+    return {
+    
+    };
+  },
+  filters: {
+    numsFilter(msg) {
+      return msg || 0;
+    },
+  },
+  created() {
+  },
+
+  mounted() {},
+  methods: {
+  
+  },
+};
+</script>
+<style lang="scss" scoped>
+// 内容
+.contents {
+  .contetn_left,
+  .contetn_right {
+    width: 540px;
+    box-sizing: border-box;
+    // padding: 16px 0;
+  }
+
+  .contetn_center {
+    width: 720px;
+  }
+
+  //左右两侧 三个块
+  .contetn_lr-item {
+    height: 310px;
+  }
+
+  .contetn_center_top {
+    width: 100%;
+  }
+
+  // 中间
+  .contetn_center {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  .contetn_center-bottom {
+    height: 315px;
+  }
+
+  //左边 右边 结构一样
+  .contetn_left,
+  .contetn_right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    position: relative;
+
+  
+  }
+}
+
+
+@keyframes rotating {
+    0% {
+        -webkit-transform: rotate(0) scale(1);
+        transform: rotate(0) scale(1);
+    }
+    50% {
+        -webkit-transform: rotate(180deg) scale(1.1);
+        transform: rotate(180deg) scale(1.1);
+    }
+    100% {
+        -webkit-transform: rotate(360deg) scale(1);
+        transform: rotate(360deg) scale(1);
+    }
+}
+</style>

vue/src/views/bigScreen/indexs/left-bottom.vue

@@ -0,0 +1,246 @@
+<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/bigScreen/modules";
+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: {
+        ...this.$store.state.settings.defaultOption,
+        singleHeight: 240,
+        limitMoveNum: 5, 
+        step: 0,
+      },
+    };
+  },
+  computed: {
+    sbtxSwiperFlag() {
+      let sbtxSwiper = this.$store.state.settings.sbtxSwiper;
+      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() {
+      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.settings.defaultOption.step;
+          }, this.$store.state.settings.defaultOption.waitTime);
+        } else {
+          this.pageflag = false;
+          this.$Message({
+            text: res.msg,
+            type: "warning",
+          });
+        }
+      });
+    },
+  },
+};
+</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: $primary-color;
+        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/bigScreen/img/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>

vue/src/views/bigScreen/indexs/left-center.vue

@@ -0,0 +1,223 @@
+<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/bigScreen/modules'
+export default {
+  data() {
+    return {
+      options: {},
+      countUserNumData: {
+        lockNum: 0,
+        onlineNum: 0,
+        offlineNum: 0,
+        totalNum: 0
+      },
+      pageflag: true,
+      timer: null
+    };
+  },
+  created() {
+    this.getData()
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+    this.clearData()
+
+  },
+  methods: {
+    clearData() {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
+    getData() {
+      this.pageflag = true
+      // 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, this.$store.state.settings.echartsAutoTime);
+      let myChart = this.$refs.charts.chart
+      myChart.on('mouseover', params => {
+        this.clearData()
+      });
+      myChart.on('mouseout', params => {
+        this.timer = setInterval(looper, this.$store.state.settings.echartsAutoTime);
+      });
+    },
+    init() {
+      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>

vue/src/views/bigScreen/indexs/left-top.vue

@@ -0,0 +1,222 @@
+<template>
+    <ul class="user_Overview flex" v-if="pageflag">
+        <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/bigScreen/modules'
+let style = {
+    fontSize: 24
+}
+export default {
+    data() {
+        return {
+            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;
+            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: [res.data.totalNum]
+                    }
+                    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, this.$store.state.settings.echartsAutoTime);
+        },
+    },
+};
+</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/img/left_top_lan.png");
+            &::before {
+                background-image: url("../../../assets/bigScreen/img/left_top_lan.png");
+
+            }
+        }
+
+        .online {
+            &::before {
+                background-image: url("../../../assets/bigScreen/img/left_top_lv.png");
+
+            }
+        }
+
+        .offline {
+            &::before {
+                background-image: url("../../../assets/bigScreen/img/left_top_huang.png");
+
+            }
+        }
+
+        .laramnum {
+            &::before {
+                background-image: url("../../../assets/bigScreen/img/left_top_hong.png");
+
+            }
+        }
+    }
+}
+</style>