合并代码解决冲突

package.json

@@ -5,11 +5,8 @@
     "scripts": {
         "serve": "vue-cli-service serve",
         "build": "vue-cli-service build",
-
         "build:development": "vue-cli-service build --mode development",
         "build:production": "vue-cli-service build --mode production",
-
-
         "lint": "vue-cli-service lint",
         "clear": "rimraf node_modules&&npm install --registry=https://registry.npm.taobao.org",
         "use:npm": "nrm use npm",
@@ -33,12 +30,12 @@
         "videojs-contrib-hls": "^5.15.0",
         "vue": "^3.2.18",
         "vue-amap": "^0.5.10",
+        "vue-grid-layout": "^3.0.0-beta1",
         "vue-router": "^4.0.3",
         "vuex": "^4.0.0"
     },
     "devDependencies": {
         "@vue/cli-plugin-babel": "^4.5.9",
-        "@vue/cli-plugin-eslint": "^4.5.9",
         "@vue/cli-service": "^4.5.9",
         "@vue/compiler-sfc": "^3.0.5",
         "@vue/eslint-config-prettier": "^6.0.0",
@@ -46,7 +43,7 @@
         "body-parser": "^1.19.0",
         "chalk": "^4.1.0",
         "chokidar": "^3.5.1",
-        "eslint": "^7.19.0",
+        "eslint": "^8.17.0",
         "eslint-plugin-prettier": "^3.3.1",
         "eslint-plugin-vue": "^7.5.0",
         "filemanager-webpack-plugin": "^3.1.0",
@@ -58,7 +55,7 @@
         "node-sass": "^4.14.1",
         "prettier": "^2.2.1",
         "sass": "^1.42.1",
-        "sass-loader": "^8.0.2",
+        "sass-loader": "^7.3.1",
         "stylelint": "^13.9.0",
         "stylelint-config-prettier": "^8.0.2",
         "stylelint-config-recess-order": "^2.3.0",
@@ -75,4 +72,4 @@
             "git add"
         ]
     }
-}
+}

src/assets/css/index.scss

@@ -117,7 +117,7 @@ ul li {
 }
 
 .delete-text {
-    color: #F80000!important
+    color: #F80000 !important
 }
 
 .remarksTxt {
@@ -145,9 +145,11 @@ ul li {
     -ms-flex-pack: justify;
     justify-content: space-between;
     vertical-align: middle;
+
     .el-button+.el-button {
-        margin-left: 30px!important;
+        margin-left: 30px !important;
     }
+
     .filter-item {
         margin-right: 30px;
         display: inline-block;
@@ -165,7 +167,7 @@ ul li {
 }
 
 .el-table--small {
-    font-size: 14px!important
+    font-size: 14px !important
 }
 
 .el-table td,
@@ -192,6 +194,7 @@ ul li {
     padding: 10px 20px 30px 20px;
     text-align: center;
     position: relative;
+
     .goBack {
         position: absolute;
         left: 0;
@@ -229,7 +232,7 @@ ul li {
 .basic-info-page,
 .powerScore {
     .el-form-item {
-        margin-left: 0px!important
+        margin-left: 0px !important
     }
 }
 
@@ -267,6 +270,7 @@ ul li {
 }
 
 .planOutage {
+
     .el-date-editor.el-input,
     .el-date-editor.el-input__inner {
         width: 100%;
@@ -297,16 +301,16 @@ ul li {
 }
 
 .el-upload-list--picture-card .el-upload-list__item {
-    width: 92px!important;
-    height: 92px!important;
-    line-height: 92px!important;
+    width: 92px !important;
+    height: 92px !important;
+    line-height: 92px !important;
     text-align: center
 }
 
 .el-upload-list--picture-card .el-upload-list__item-thumbnail {
-    width: 90px!important;
-    height: 90px!important;
-    line-height: 90px!important;
+    width: 90px !important;
+    height: 90px !important;
+    line-height: 90px !important;
 }
 
 .avatar {
@@ -320,9 +324,11 @@ ul li {
     .el-form-item__content {
         width: 270px
     }
+
     .el-form-item__label {
-        width: 150px!important
+        width: 150px !important
     }
+
     .el-form-item__content {
         // margin-left: 150px!important
     }
@@ -337,6 +343,7 @@ ul li {
     .el-button+.el-button {
         margin-left: 20px !important;
     }
+
     .el-input {
         margin: 0 20px 0 0;
     }
@@ -362,12 +369,12 @@ ul li {
 // 告警管理渐变背景色
 .alarmingTable {
     a {
-        margin-right: 0!important;
+        margin-right: 0 !important;
     }
 }
 
 .alarmingManage .el-table .cell {
-    text-align: left!important;
+    text-align: left !important;
 }
 
 .gradualBg {
@@ -382,7 +389,7 @@ ul li {
 }
 
 .gradualBg.transparent {
-    background: linear-gradient(to right, transparent, transparent)!important;
+    background: linear-gradient(to right, transparent, transparent) !important;
 }
 
 //告警详情弹框组件
@@ -390,17 +397,20 @@ ul li {
     .el-form-item:not(.user-layout .el-form-item) {
         margin-bottom: 0
     }
+
     .deviceTit {
         font-size: 16px;
         color: #409EFF;
         padding: 20px 0
     }
+
     .basicTit {
         color: #4074e7;
         line-height: 49px;
         height: 49px;
         font-size: 16px
     }
+
     .basicTit:before {
         content: "";
         width: 3px;
@@ -411,9 +421,11 @@ ul li {
         display: inline-block;
         background: #4074e7;
     }
+
     .topInfo {
         position: relative;
         overflow: hidden;
+
         .lubo {
             // position: absolute;
             // right: 0px;
@@ -421,6 +433,7 @@ ul li {
             float: right;
             margin-bottom: 20px;
         }
+
         .handleStatus {
             position: absolute;
             right: 0px;
@@ -475,7 +488,7 @@ ul li {
 
 //评估报告
 .defaultCursor:hover {
-    cursor: default!important;
+    cursor: default !important;
 }
 
 .assePage .blanceChartTit {
@@ -484,6 +497,7 @@ ul li {
     display: flex;
     justify-content: space-between;
     vertical-align: middle;
+
     span {
         display: inline-block
     }
@@ -495,17 +509,21 @@ ul li {
         text-align: center;
         font-weight: bold
     }
+
     .assNum {
         font-size: 18px;
         color: #2EAEFF;
         margin-bottom: 10px;
     }
+
     .greenRate {
         color: #04A522
     }
+
     .assTxt {
         font-size: 14px
     }
+
     .assSmallbox {
         padding: 10px 0;
         text-align: center;
@@ -539,13 +557,14 @@ ul li {
     height: 40px;
     // line-height: 40px;
     width: 236px;
-    font-size: 16px!important;
+    font-size: 16px !important;
     // background: #6dc6ff;
     // color: #fff
 }
 
 .assCard {
-    min-height: 356px!important;
+    min-height: 356px !important;
+
     .noDataImg {
         width: 40%;
         margin-top: 40px;
@@ -556,21 +575,25 @@ ul li {
     text-align: left;
     margin: 0;
     padding: 15px 20px 0;
+
     li:not(:last-child) {
         border-bottom: 1px solid #F0F0F0;
     }
+
     li {
         line-height: 40px;
         display: flex;
         justify-content: space-between;
         vertical-align: middle;
         font-size: 14px;
+
         div {
             display: inline-block;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
         }
+
         span {
             color: #04A522;
             background: #F4F4F4;
@@ -582,6 +605,7 @@ ul li {
             width: 58px;
             margin-top: 10px;
         }
+
         span.overLimit {
             color: #F80000
         }
@@ -592,6 +616,7 @@ ul li {
     font-weight: bold;
     text-align: center;
     margin: 30px;
+
     .el-button {
         font-size: 16px;
         margin-left: 10px;
@@ -625,12 +650,14 @@ ul li {
 .loopHarmonicPanel {
     height: 591px;
     overflow: hidden;
+
     .el-row {
-        margin-bottom: 0!important;
+        margin-bottom: 0 !important;
     }
 }
 
 .loopUnbanlanceCard {
+
     // height: calc(100% - 100px);
     ul {
         padding: 0;
@@ -638,12 +665,15 @@ ul li {
         font-size: 14px;
         margin-top: 20px
     }
+
     li {
         display: flex;
+
         >div {
             margin: 2px 4px;
             line-height: 14px;
         }
+
         >div:first-child {
             // min-width: 64px;
         }
@@ -668,25 +698,30 @@ ul li {
 }
 
 .voltagePanel {
+
     .el-table--small th,
     .el-table--small td {
         padding: 15px 0
     }
+
     .uList p {
         margin-right: 10px;
         padding: 8px 0
     }
+
     .shangXian {
         padding: 20px 0 0;
         display: flex;
         width: 300px;
         margin-left: 40px;
         text-align: center;
+
         div {
             width: 50%;
             text-align: center;
             position: relative
         }
+
         div:first-child:after {
             position: absolute;
             top: 0;
@@ -701,6 +736,7 @@ ul li {
             background-color: rgba(0, 0, 0, 0);
             opacity: .2;
         }
+
         div:last-child:before {
             position: absolute;
             top: 0;
@@ -719,13 +755,16 @@ ul li {
 
 .frequencyPanel {
     text-align: center;
+
     .frequencyTit {
         color: #F80000;
         font-weight: bold
     }
+
     .frequencyTit2 {
         font-weight: bold;
         margin: 10px auto;
+
         span {
             color: #fff;
             background: #21c393;
@@ -738,14 +777,17 @@ ul li {
             width: 58px;
         }
     }
+
     .frequencyBox .grid-content {
-        min-height: 50px!important;
+        min-height: 50px !important;
         border-radius: 0;
         background: #f0f0f0;
         border: none;
     }
+
     .rightSplitRed {
         position: relative;
+
         i {
             position: absolute;
             position: absolute;
@@ -753,10 +795,12 @@ ul li {
             bottom: -11px;
             color: #f1673d
         }
+
         i:after {
             display: none
         }
     }
+
     .greenShadow {
         position: absolute;
         width: 118px;
@@ -771,6 +815,7 @@ ul li {
         background-image: gradient(linear, 0 0, 100% 100%, color-stop(.25, hsla(0, 0%, 100%, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, hsla(0, 0%, 100%, .2)), color-stop(.75, hsla(0, 0%, 100%, .2)), color-stop(.75, transparent), to(transparent));
         background-size: 8px 8px
     }
+
     .rightSplitRed .grid-content:after {
         position: absolute;
         bottom: -3px;
@@ -782,9 +827,11 @@ ul li {
         content: "";
         background-color: rgba(0, 0, 0, 0);
     }
+
     .frequencyBox .grid-content {
         border-right: 1px dashed #aaa
     }
+
     .frequencyBox .el-col:last-child .grid-content {
         border-right: none
     }
@@ -797,10 +844,12 @@ ul li {
 }
 
 .powerPanel {
+
     .el-table--small th,
     .el-table--small td {
         padding: 15px 0
     }
+
     .uList p {
         margin-right: 10px;
         padding: 8px 0
@@ -815,12 +864,14 @@ ul li {
 // 工单管理
 .workManage {
     .tab-section .el-button {
-        margin-left: 0!important;
+        margin-left: 0 !important;
         padding: 10px 20px;
     }
+
     .el-checkbox {
         margin-left: 20px
     }
+
     img.jianxiu {
         width: 18px;
         position: relative;
@@ -842,7 +893,7 @@ ul li {
 
 .alarmStatusDialog {
     .el-radio__input.is-checked+.el-radio__label {
-        color: #606266!important
+        color: #606266 !important
     }
 }
 
@@ -859,48 +910,58 @@ ul li {
 // 工单详情
 .handleDetailPage {
     padding: 20px 0;
+
     .basicTit {
         color: #4074e7;
         line-height: 49px;
         height: 49px;
         font-size: 16px;
+
         >span {
             display: inline-block;
             margin-right: 10px
         }
     }
+
     .handleTestBlock {
         padding: 0 20px 20px 20px;
         border-bottom: 3px solid #1890ff;
     }
+
     .jianxiuSec {
         >div {
             display: table-cell;
             vertical-align: top;
         }
+
         .left-img img {
             width: 115px;
             height: 115px;
             margin-right: 20px
         }
+
         .right-des {
             position: relative;
+
             .tit {
                 font-weight: bold;
                 margin: 10px 0
             }
+
             .bottomStatus {
                 position: absolute;
                 bottom: 0;
             }
         }
     }
+
     .desSec {
         span {
             display: inline-block;
             margin-right: 20px
         }
     }
+
     .siteBlock,
     .companyBlock {
         display: inline-block;
@@ -911,6 +972,7 @@ ul li {
         margin-left: 10px;
         text-align: center;
         position: relative;
+
         /*自己的50% */
         >div {
             width: 140px;
@@ -920,22 +982,27 @@ ul li {
             /* 定位父级的50% */
             top: 50%;
             transform: translate(-50%, -50%);
+
             p:last-child {
                 font-size: 18px;
                 margin-top: 30px
             }
         }
     }
+
     .handlerBlock {
         padding: 20px;
         border-bottom: 1px solid #E5E5E5;
         ;
+
         div {
             margin-bottom: 10px;
         }
+
         i {
             font-size: 16px;
         }
+
         .record {
             span {
                 color: cornflowerblue;
@@ -944,15 +1011,18 @@ ul li {
                 cursor: pointer
             }
         }
+
         b {
             margin: 0 5px;
             display: inline-block;
         }
+
         .imgSquare {
             border: 1px solid #ddd;
             width: 100px;
             height: 100px;
             margin-left: 40px;
+
             img {
                 width: 80%;
                 margin-left: 10%;
@@ -977,43 +1047,54 @@ ul li {
 // 运维统计
 .operStatisticsPage {
     padding: 0;
+
     .el-tabs__content {
         overflow: hidden;
         position: absolute;
         top: -10px;
         left: 614px;
     }
+
     .customBlock {
         position: relative;
+
         .customPicker {
             position: absolute;
             right: 0;
             bottom: 0
         }
     }
+
     .operStatisticsInner {
         padding: 20px;
+
         .bg-purple {
             // background: #d3dce6;
             border: 1px solid #e5e5e5;
         }
+
         .staitcDataSec {
             .staitcDataItem {
                 // text-align: center;
                 padding: 20px 10px;
                 height: 110px;
+
                 .imgBlock {
                     text-align: right;
+
                     img {
                         // max-width: 90%
                     }
                 }
+
                 .staticBlock {
                     // text-align: center
                 }
+
                 p {
                     margin-bottom: 0
                 }
+
                 .num {
                     font-size: 26px;
                     color: #49B8F6;
@@ -1022,6 +1103,7 @@ ul li {
                 }
             }
         }
+
         .panelTit {
             padding: 10px 14px;
             margin-bottom: 10px;
@@ -1029,18 +1111,23 @@ ul li {
             background: #FAFAFA;
             font-weight: bold;
         }
+
         .workPanel {
             height: 311px;
+
             .workPanelChart {
                 height: calc(100% - 60px)
             }
         }
+
         .siteWorkPanel {
             height: 311px;
+
             .siteWorkChart {
                 height: calc(100% - 60px)
             }
         }
+
         .staticPanel {
             height: 365px;
         }
@@ -1055,21 +1142,26 @@ ul li {
         justify-content: space-around;
         line-height: 36px
     }
+
     .el-radio-button {
         width: 100%
     }
+
     .el-radio-button__inner {
         width: 100%;
         // line-height: 40px;
         padding: 13px 15px
     }
+
     .el-radio-button__inner {
         border-left: 1px solid #dcdfe6;
         text-align: left;
         position: relative; // border-bottom: none;
+
         img {
             margin-right: 5px
         }
+
         i {
             position: absolute;
             right: 10px;
@@ -1078,17 +1170,21 @@ ul li {
             opacity: 0
         }
     }
+
     .el-radio-button__inner:hover {
         color: #444;
         background: #f1f7fc;
+
         // border-color: #f1f7fc;
         i {
             opacity: 1;
         }
     }
+
     .el-radio-button:last-child .el-radio-button__inner {
         // border-bottom: 1px solid #dcdfe6;
     }
+
     .el-radio-button__original-radio:checked+.el-radio-button__inner {
         background: #BDE5FF;
         border-color: #BDE5FF;
@@ -1099,6 +1195,7 @@ ul li {
 
 // 用户管理弹框
 .userManageDialog {
+
     .el-date-editor.el-input,
     .el-date-editor.el-input__inner {
         width: 240px !important;
@@ -1108,4 +1205,45 @@ ul li {
 .downloadMb {
     margin-left: 20px;
     text-decoration: underline;
+}
+
+
+
+::-webkit-scrollbar {
+    /* 滚动条整体样式 */
+    width: 5px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+    /* 滚动条里面小方块 */
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background-color: #9e9e9e;
+}
+
+::-webkit-scrollbar-track {
+    /* 滚动条里面轨道 */
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
+    border-radius: 10px;
+}
+
+body {
+    overflow: overlay;
+}
+
+/* 需要滚动的地方加上这个class */
+body::-webkit-scrollbar {
+    /* 组件内滚动条不显示 */
+    display: none;
+}
+
+body::-webkit-scrollbar:hover {
+    display: block;
+}
+
+body:hover::-webkit-scrollbar {
+    /* 悬停时滚动条才显示 */
+    display: block;
 }

src/config/default/setting.config.js

@@ -25,7 +25,7 @@ const setting = {
     //简写
     abbreviation: 'vab-pro',
     //开发环境端口号
-    devPort: '9999',
+    devPort: '13201',
     //版本号
     version: process.env.VUE_APP_VERSION,
     //pro版本copyright可随意修改

src/layout/vab-tabs/index.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="vab-tabs">
-    <div class="vab-tabs-left-panel">
+    <div
+      class="vab-tabs-left-panel"
+      :style="
+        this.$route.path === '/index/index'
+          ? 'border-bottom: 1px solid rgba(0, 0, 0, 0.04);'
+          : ''
+      "
+    >
       <!-- 缩进按钮 start -->
       <!-- <div
         style="
@@ -57,6 +64,29 @@
         ></a-tab-pane>
       </a-tabs>
     </div>
+
+    <div class="version-header" v-if="this.$route.path === '/index/index'">
+      <div style="width: 50%">
+        <el-select
+          v-model="this.$store.state.siteId"
+          class="m-2"
+          placeholder="Select"
+          size="large"
+          style="width: 280px; margin-top: 7.5px"
+        >
+          <el-option
+            v-for="item in this.$store.state.siteList"
+            :key="item.id"
+            :label="item.siteName"
+            :value="item.id"
+          />
+        </el-select>
+      </div>
+
+      <div style="width: 50%; text-align: right; user-select: none">
+        {{ time }}
+      </div>
+    </div>
     <!-- 面包屑end -->
 
     <!-- <div class="vab-tabs-right-panel">
@@ -88,7 +118,7 @@
 
 <script>
 // import { DownOutlined } from '@ant-design/icons-vue'
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions, mapGetters, useStore } from 'vuex'
 // import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
 export default {
   name: 'VabTabs',
@@ -103,6 +133,7 @@ export default {
       affixTabs: [],
       tabActive: null,
       created: false,
+      time: '',
     }
   },
   computed: {
@@ -117,6 +148,25 @@ export default {
       this.addTabs(route)
     },
   },
+  mounted() {
+    const store = useStore()
+    setInterval(() => {
+      store.commit('getTimeAll')
+      var time = store.state.Time_All
+      this.time =
+        time[0] +
+        '年' +
+        (time[1] < 9 ? '0' + (time[1] + 1) : time[1] + 1) +
+        '月' +
+        (time[2] < 10 ? '0' + time[2] : time[2]) +
+        '日 ' +
+        (time[3] < 10 ? '0' + time[3] : time[3]) +
+        ':' +
+        (time[4] < 10 ? '0' + time[4] : time[4]) +
+        ':' +
+        (time[5] < 10 ? '0' + time[5] : time[5])
+    }, 0)
+  },
   created() {
     this.initAffixTabs(this.routes)
     this.addTabs(this.$route)
@@ -240,17 +290,26 @@ export default {
 </script>
 <style lang="less">
 .vab-tabs {
-  padding: 0 @vab-margin;
+  // padding: 0 @vab-margin;
   background: #ffffff;
   overflow: hidden;
   &-left-panel {
     float: left;
-    width: calc(100% - 52px - @vab-margin - @vab-margin);
+    // width: calc(100% - 52px - @vab-margin - @vab-margin);
+    width: 100%;
+    padding: 0 @vab-margin;
   }
   &-right-panel {
-    float: left;
+    // float: left;
     width: 52px;
   }
+  .version-header {
+    display: flex;
+    height: 50px;
+    line-height: 50px;
+    padding: 0 @vab-margin;
+  }
+
   .ant-tabs {
     height: 50px;
     line-height: 50px;

src/main.js

@@ -21,6 +21,11 @@ import SvgIcon from "@/components/SvgIcon"
 
 import 'video.js/dist/video-js.css'
 
+/**
+ * 引入vue.grid-layout
+ */
+import VueGridLayout from 'vue-grid-layout'
+
 /**
  * @author chuzhixin 1204505056@qq.com
  * @description 正式环境默认使用mock，正式项目记得注释后再打包
@@ -32,12 +37,31 @@ var app = createApp(App)
 
 app.config.globalProperties.$echarts = echarts
 
+app.directive("drag", {   					//指令的名称
+    inserted: function (el, binding) {		//当被绑定的元素插入到 DOM 中时
+        binding
+        el.onmousedown = function (e) {
+            var x = e.clientX - el.offsetLeft;
+            var y = e.clientY - el.offsetTop;
+            document.onmousemove = function (eve) {
+                el.style.left = eve.clientX - x + "px";
+                el.style.top = eve.clientY - y + "px";
+            }
+            document.onmouseup = function () {
+                document.onmousemove = null;
+                document.onmouseup = null;
+            }
+        }
+    }
+})
+
 app
     .component("svg-icon", SvgIcon)
     .use(store)
     .use(router)
     .use(ElementPlus, { locale: zhCn, size: 'small' })
     .use(Antd)
+    .use(VueGridLayout)
     .mount('#app')
 
 

src/store/index.js

@@ -34,6 +34,7 @@ export default createStore({
         homeStyle: '#016ddb',
         homeLogo: '',
         homeTitle: '永天智慧电力平台',
+        
         largeScreenUrl: '',
         middleStatus: 1,
         homePageUrl: '',
@@ -103,19 +104,19 @@ export default createStore({
                             requset.data.map((val) => {
                                 // if (val.children.length > 0) {
                                 state.deviceList.push({
-                                        deviceCode: val.deviceCode,
-                                        deviceName: val.deviceName,
-                                        id: val.id,
-                                        children: val.children.length > 0 ?
-                                            val.children.map((val) => {
-                                                return {
-                                                    deviceCode: val.variableCoding,
-                                                    deviceName: val.variableName,
-                                                    id: val.id,
-                                                }
-                                            }) : val.children,
-                                    })
-                                    // }
+                                    deviceCode: val.deviceCode,
+                                    deviceName: val.deviceName,
+                                    id: val.id,
+                                    children: val.children.length > 0 ?
+                                        val.children.map((val) => {
+                                            return {
+                                                deviceCode: val.variableCoding,
+                                                deviceName: val.variableName,
+                                                id: val.id,
+                                            }
+                                        }) : val.children,
+                                })
+                                // }
                             })
                         } else {
                             ElMessage.error(requset.msg)
@@ -139,10 +140,10 @@ export default createStore({
                     if (requset.status === 'SUCCESS') {
                         state.authorities = []
                         var menuObj = requset.data;
-                        menuObj.forEach(function(item) {
-                                state.authorities.push(item.menuName)
-                            })
-                            // console.log(state.authorities)
+                        menuObj.forEach(function (item) {
+                            state.authorities.push(item.menuName)
+                        })
+                        // console.log(state.authorities)
                     } else {
                         ElMessage.error(requset.msg)
                     }
@@ -197,7 +198,7 @@ export default createStore({
                 var HH = time[i].getHours() < 10 ? '0' + time[i].getHours() : time[i].getHours()
                 var MM = time[i].getMinutes() < 10 ? '0' + time[i].getMinutes() : time[i].getMinutes()
                 var SS = time[i].getSeconds() < 10 ? '0' + time[i].getSeconds() : time[i].getSeconds()
-                    // console.log(Y + '-' + M + '-' + D + ' ' + HH + ':' + MM + ':' + SS)
+                // console.log(Y + '-' + M + '-' + D + ' ' + HH + ':' + MM + ':' + SS)
                 state.Time_Data.push(Y + '-' + M + '-' + D + ' ' + HH + ':' + MM + ':' + SS)
             }
         },
@@ -221,8 +222,8 @@ export default createStore({
                 k = k + 24 * 60 * 60 * 1000;
             }
             state.timearr = arrTime
-                // return arrTime;
-                // 时间格式处理
+            // return arrTime;
+            // 时间格式处理
             function datetimeparse(timestamp, format, prefix) {
                 if (typeof timestamp == "string") {
                     timestamp = Number(timestamp);
@@ -254,20 +255,20 @@ export default createStore({
                 let YYYY = dateobj.getFullYear();
                 let MM =
                     dateobj.getMonth() > 8 ?
-                    dateobj.getMonth() + 1 :
-                    "0" + (dateobj.getMonth() + 1);
+                        dateobj.getMonth() + 1 :
+                        "0" + (dateobj.getMonth() + 1);
                 let DD =
                     dateobj.getDate() > 9 ? dateobj.getDate() : "0" + dateobj.getDate();
                 let HH =
                     dateobj.getHours() > 9 ? dateobj.getHours() : "0" + dateobj.getHours();
                 let mm =
                     dateobj.getMinutes() > 9 ?
-                    dateobj.getMinutes() :
-                    "0" + dateobj.getMinutes();
+                        dateobj.getMinutes() :
+                        "0" + dateobj.getMinutes();
                 let ss =
                     dateobj.getSeconds() > 9 ?
-                    dateobj.getSeconds() :
-                    "0" + dateobj.getSeconds();
+                        dateobj.getSeconds() :
+                        "0" + dateobj.getSeconds();
                 let output = "";
                 let separator = "/";
                 if (format) {
@@ -395,6 +396,6 @@ export default createStore({
             }
             var currentdate = year + seperator1 + month + seperator1 + strDate;
             state.dateList = currentdate
-        }
+        },
     }
 })

src/views/index/components/VersionInformation.vue

@@ -1,135 +1,298 @@
 <template>
-  <!-- <a-alert
-    :message="
-      '欢迎体验全网首个基于 vue ' +
-      dependencies['vue'] +
-      ' + ant-design-vue ' +
-      dependencies['ant-design-vue'] +
-      ' 开发的admin框架vue-admin-beautiful-antdv，vue3.0的流畅超乎了我们的想象，感谢尤雨溪、唐金州的开源项目我带来的灵感和帮助，vue-admin-beautiful-antdv同时支持电脑、平板、手机，希望实现一套代码即可帮助中小微企业快速实现项目落地，帮助前端小白快速入门vue前端框架搭建技术，迅速在工作中占据主导地位。'
-    "
-    type="success"
-    show-icon
-  /> -->
-
-  <a-card class="version-information" style="height:calc(100vh - 140px);margin-top:0">
-    <!-- <template v-slot:title>系统信息</template>
-    <template v-slot:extra>
-      <a href="#">部署时间{{ updateTime }}</a>
-    </template>
-    <div class="version-information-table">
-      <table>
-        <tr>
-          <td>标星</td>
-          <td>
-            <a
-              target="_blank"
-              href="https://github.com/chuzhixin/vue-admin-beautiful/tree/vue3.0-antdv"
-            >
-              <img
-                style="margin-right: 10px"
-                src="https://img.shields.io/github/stars/chuzhixin/vue-admin-beautiful?style=flat-square&label=Stars&logo=github"
-              />
-            </a>
-          </td>
-          <td>下载量统计</td>
-          <td>敬请期待！</td>
-        </tr>
-        <tr>
-          <td>vue</td>
-          <td>{{ dependencies['vue'] }}</td>
-          <td>@vue/cli</td>
-          <td>{{ devDependencies['@vue/cli-service'] }}</td>
-        </tr>
-        <tr>
-          <td>vuex</td>
-          <td>{{ dependencies['vuex'] }}</td>
-          <td>vue-router</td>
-          <td>{{ dependencies['vue-router'] }}</td>
-        </tr>
-        <tr>
-          <td>eslint-plugin-vue</td>
-          <td>{{ devDependencies['eslint-plugin-vue'] }}</td>
-          <td>axios</td>
-          <td>{{ dependencies['axios'] }}</td>
-        </tr>
-        <tr>
-          <td>babel-eslint</td>
-          <td>{{ devDependencies['babel-eslint'] }}</td>
-          <td>ant-design-vue</td>
-          <td>{{ dependencies['ant-design-vue'] }}</td>
-        </tr>
-        <tr>
-          <td>Admin Pro版演示地址（付费版）</td>
-          <td colspan="3">
-            <a
-              href="http://vue-admin-beautiful.com/admin-pro?hmsr=mwsqj&hmpl=&hmcu=&hmkw=&hmci="
-            >
-              点我
-            </a>
-          </td>
-        </tr>
-        <tr>
-          <td>Admin Plus版演示地址（付费版）</td>
-          <td colspan="3">
-            <a
-              href="http://vue-admin-beautiful.com/admin-plus?hmsr=mwsqj&hmpl=&hmcu=&hmkw=&hmci="
-            >
-              点我
-            </a>
-          </td>
-        </tr>
-        <tr>
-          <td>开源地址（切换分支可查看各个vue版本）</td>
-          <td colspan="3">
-            <a href="https://github.com/chuzhixin/vue-admin-beautiful">点我</a>
-          </td>
-        </tr>
-      </table>
+  <div class="version-information" style="margin-top: 0">
+    <!-- <div class="columns">
+      <div class="layoutItem" v-for="item in mainData" :key="item.i">
+        <b>{{ item.i }}</b>
+        : [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
+      </div>
     </div> -->
-
-    数据看板待排版
-
-  </a-card>
+    <div class="vueGridLayout">
+      <div class="board" style="width: 100%">
+        <div class="home">
+          <grid-layout
+            :layout="mainData"
+            :col-num="22"
+            :row-height="80"
+            :is-draggable="updateModelBool"
+            :is-resizable="updateModelBool"
+            :is-mirrored="false"
+            :vertical-compact="true"
+            :margin="[10, 10]"
+            :use-css-transforms="true"
+          >
+            <grid-item
+              v-for="item in mainData"
+              :x="item.x"
+              :y="item.y"
+              :w="item.w"
+              :h="item.h"
+              :i="item.i"
+              :key="item.i"
+            >
+              <div
+                v-if="item.colorType === 'iconText'"
+                :style="'display: flex; height:100%;'"
+              >
+                <div
+                  :style="{
+                    padding: '0px 20px',
+                    'text-align': 'center',
+                    margin: 'auto 0',
+                  }"
+                >
+                  <img :src="item.img" alt="" />
+                </div>
+                <div
+                  :style="{
+                    margin: 'auto 0',
+                  }"
+                >
+                  <div style="color: black">{{ item.name }}</div>
+                  <div
+                    :style="{
+                      color: item.valueColor,
+                      'font-weight': 800,
+                    }"
+                  >
+                    {{ item.value }}
+                  </div>
+                </div>
+              </div>
+              <div v-if="item.colorType === 'echarts'">
+                <div
+                  :style="{
+                    padding: '0px 5px',
+                  }"
+                >
+                  <img :src="item.img" alt="" />
+                  <span
+                    :style="{
+                      color: item.valueColor,
+                      'font-weight': 800,
+                      'padding-top': '1px',
+                      'padding-left': '5px',
+                    }"
+                  >
+                    {{ item.name }}
+                  </span>
+                </div>
+              </div>
+              <div v-if="item.colorType === 'tabls'">
+                <div
+                  :style="{
+                    padding: '0px 5px',
+                  }"
+                >
+                  <img :src="item.img" alt="" />
+                  <span
+                    :style="{
+                      color: item.valueColor,
+                      'font-weight': 800,
+                      'padding-top': '1px',
+                      'padding-left': '5px',
+                    }"
+                  >
+                    {{ item.name }}
+                  </span>
+                </div>
+              </div>
+            </grid-item>
+          </grid-layout>
+        </div>
+      </div>
+      <el-button style="margin-left: 10px" type="primary" @click="updateModel">
+        {{ updateBtnName }}
+      </el-button>
+    </div>
+  </div>
 </template>
 <script>
-  import { dependencies, devDependencies } from '*/package.json'
+import { dependencies, devDependencies } from '*/package.json'
+import { GridLayout, GridItem } from 'vue-grid-layout'
 
-  export default {
-    data() {
-      return {
-        updateTime: process.env.VUE_APP_UPDATE_TIME,
-        dependencies: dependencies,
-        devDependencies: devDependencies,
+export default {
+  components: {
+    GridLayout,
+    GridItem,
+  },
+  data() {
+    return {
+      updateTime: process.env.VUE_APP_UPDATE_TIME,
+      dependencies: dependencies,
+      devDependencies: devDependencies,
+
+      ending: null,
+      dragging: null,
+      dom: null,
+
+      updateBtnName: '编辑',
+      updateModelBool: false,
+      // 布局数据
+      mainData: [
+        {
+          x: 0,
+          y: 0,
+          w: 6,
+          h: 1,
+          i: '1',
+          color: '#3883a0',
+          name: '站点名称',
+          value: '上海永天科技股份有限公司',
+          valueColor: '#333333',
+          colorType: 'iconText',
+          img: require('@/assets/board_images/site.png'),
+        },
+        {
+          x: 6,
+          y: 0,
+          w: 4,
+          h: 1,
+          i: '2',
+          color: '#4883a0',
+          name: '运行天数',
+          value: '1000天',
+          valueColor: '#333333',
+          colorType: 'iconText',
+          img: require('@/assets/board_images/days.png'),
+        },
+        {
+          x: 10,
+          y: 0,
+          w: 4,
+          h: 1,
+          i: '3',
+          color: '#5883a0',
+          name: '今日最大负荷',
+          value: '1000.00kw',
+          valueColor: '#333333',
+          colorType: 'iconText',
+          img: require('@/assets/board_images/maxLoad.png'),
+        },
+        {
+          x: 14,
+          y: 0,
+          w: 4,
+          h: 1,
+          i: '4',
+          color: '#6883a0',
+          name: '站点通讯状态',
+          value: '在线',
+          valueColor: '#65D6A8',
+          colorType: 'iconText',
+          img: require('@/assets/board_images/siteAlarm.png'),
+        },
+        {
+          x: 18,
+          y: 0,
+          w: 4,
+          h: 1,
+          i: '5',
+          color: '#7883a0',
+          name: '站点告警状态',
+          value: '离线',
+          valueColor: '#f34a59',
+          colorType: 'iconText',
+          img: require('@/assets/board_images/siteState.png'),
+        },
+        {
+          x: 0,
+          y: 1,
+          w: 11,
+          h: 2,
+          i: '6',
+          color: '#8883a0',
+          name: '电流监控',
+          value: '',
+          valueColor: '#333333',
+          colorType: 'echarts',
+          img: require('@/assets/board_images/icons.png'),
+        },
+        {
+          x: 11,
+          y: 1,
+          w: 11,
+          h: 4,
+          i: '7',
+          color: '#9883a0',
+          name: '事件告警列表',
+          value: '',
+          valueColor: '#333333',
+          colorType: 'tabls',
+          img: require('@/assets/board_images/icons.png'),
+        },
+        {
+          x: 0,
+          y: 2,
+          w: 11,
+          h: 2,
+          i: '8',
+          color: '#8883a0',
+          name: '变化趋势',
+          value: '',
+          valueColor: '#333333',
+          colorType: 'echarts',
+          img: require('@/assets/board_images/icons.png'),
+        },
+      ],
+    }
+  },
+  mounted() {},
+  methods: {
+    updateModel() {
+      this.updateModelBool = !this.updateModelBool
+      if (this.updateModelBool === false) {
+        this.updateBtnName = '编辑'
+      } else {
+        this.updateBtnName = '取消'
       }
     },
-  }
+  },
+}
 </script>
 <style lang="less" scoped>
-  .version-information {
-    margin-top: @vab-margin;
-    &-table {
-      width: 100%;
-      overflow: scroll;
-      table {
-        width: 100%;
-        color: #666;
-        border-collapse: collapse;
-        background-color: #fff;
+.version-information {
+  width: 100%;
+  height: 100%;
+  min-height: calc(100vh - 191px) !important;
+  margin-top: @vab-margin;
+}
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.item {
+  color: #fff;
+  position: relative;
+  margin: 5px;
+  padding: 5px;
+  background: #fff;
 
-        td {
-          position: relative;
-          padding: 9px 15px;
-          font-size: 14px;
-          line-height: 20px;
-          border: 1px solid #e6e6e6;
+  border-radius: 5px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 
-          &:nth-child(odd) {
-            width: 20%;
-            text-align: right;
-            background-color: #f7f7f7;
-          }
-        }
-      }
-    }
-  }
+.items {
+  cursor: default;
+  transition: all linear 0.3s;
+  width: 100%;
+  height: 100%;
+}
+
+.vue-grid-item {
+  background: #ffffff;
+  border-radius: 5px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.img_cl {
+  width: 100%;
+  height: 100px;
+}
 </style>

src/views/index/index.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script>
-  import VersionInformation from './components/VersionInformation'
-  export default {
-    name: 'Index',
-    components: { VersionInformation },
-  }
+import VersionInformation from './components/VersionInformation'
+export default {
+  name: 'Index',
+  components: { VersionInformation },
+}
 </script>

vue.config.js

@@ -50,22 +50,11 @@ module.exports = {
     outputDir,
     lintOnSave,
     transpileDependencies,
-    css: {
-        loaderOptions: {
-            sass: {
-                data: `
-        @import "@/assets/css/index.scss";
-        @import "@/assets/css/global.scss";
-        `
-            }
-        }
-    },
     devServer: {
         hot: true,
         port: devPort,
         open: true,
         noInfo: false,
-        port: 13201,
         overlay: {
             warnings: true,
             errors: true,
@@ -94,9 +83,6 @@ module.exports = {
         // public: 'localhost:9999/',  
         // after: mockServer(),
     },
-
-
-
     configureWebpack() {
 
         return {
@@ -185,9 +171,9 @@ module.exports = {
                             archive: [{
                                 source: `./${outputDir}`,
                                 destination: `./${outputDir}/${abbreviation}_${outputDir}_${date}.7z`,
-                            }, ],
+                            },],
                         },
-                    }, ])
+                    },])
                     .end()
             })
         }
@@ -198,6 +184,12 @@ module.exports = {
         requireModuleExtension: true,
         sourceMap: true,
         loaderOptions: {
+            sass: {
+                data: `
+                    @import "@/assets/css/index.scss";
+                    @import "@/assets/css/global.scss";
+                    `
+            },
             less: {
                 lessOptions: {
                     javascriptEnabled: true,