多站点水质分析

package-lock.json

@@ -4344,7 +4344,7 @@
         },
         "ansi-styles": {
           "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "optional": true,
@@ -4368,7 +4368,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
           "optional": true,
@@ -4378,14 +4378,14 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true,
           "optional": true
         },
         "cosmiconfig": {
           "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
           "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
           "dev": true,
           "optional": true,
@@ -4399,7 +4399,7 @@
         },
         "deepmerge": {
           "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+          "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.2.2.tgz",
           "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
           "dev": true,
           "optional": true
@@ -4427,7 +4427,7 @@
         },
         "fork-ts-checker-webpack-plugin-v5": {
           "version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
-          "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
+          "resolved": "https://registry.npmmirror.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
           "integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
           "dev": true,
           "optional": true,
@@ -4447,7 +4447,7 @@
           "dependencies": {
             "chalk": {
               "version": "4.1.2",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+              "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
               "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
               "dev": true,
               "optional": true,
@@ -4458,7 +4458,7 @@
             },
             "lru-cache": {
               "version": "6.0.0",
-              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+              "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
               "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
               "dev": true,
               "optional": true,
@@ -4468,7 +4468,7 @@
             },
             "semver": {
               "version": "7.3.7",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+              "resolved": "https://registry.npmmirror.com/semver/-/semver-7.3.7.tgz",
               "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
               "dev": true,
               "optional": true,
@@ -4480,7 +4480,7 @@
         },
         "fs-extra": {
           "version": "9.1.0",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+          "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-9.1.0.tgz",
           "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
           "dev": true,
           "optional": true,
@@ -4493,14 +4493,14 @@
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true,
           "optional": true
         },
         "import-fresh": {
           "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
           "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
           "dev": true,
           "optional": true,
@@ -4511,7 +4511,7 @@
         },
         "jsonfile": {
           "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-6.1.0.tgz",
           "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
           "dev": true,
           "optional": true,
@@ -4582,7 +4582,7 @@
         },
         "path-type": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/path-type/-/path-type-4.0.0.tgz",
           "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
           "dev": true,
           "optional": true
@@ -4610,7 +4610,7 @@
         },
         "resolve-from": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz",
           "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
           "dev": true,
           "optional": true
@@ -4632,7 +4632,7 @@
         },
         "supports-color": {
           "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "optional": true,
@@ -4642,14 +4642,14 @@
         },
         "universalify": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/universalify/-/universalify-2.0.0.tgz",
           "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
           "dev": true,
           "optional": true
         },
         "yallist": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
           "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
           "dev": true,
           "optional": true
@@ -5301,7 +5301,7 @@
     },
     "animate.css": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/animate.css/-/animate.css-4.1.1.tgz",
       "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
     },
     "ansi-colors": {
@@ -9464,25 +9464,25 @@
       "integrity": "sha512-p+AH0O9/BtwXMQQyhjJbMZo+GwRAgWG/DCyK5r27PQzpS0UWrgXu57MyEFc0A8Ub3sRuqEu08BuxwHICBkSWSQ=="
     },
     "echarts5.1.0": {
-      "version": "npm:echarts@5.1.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.1.0.tgz",
-      "integrity": "sha512-/X2nnN5BXW2tuA/Hv9YY279rDfwcXaBAjK9Azi//llshbKyUXXxBknsug21GJRpwTmLZbE8rjjbhchdm01bZtw==",
+      "version": "npm:echarts@5.3.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
       "requires": {
-        "tslib": "2.0.3",
-        "zrender": "5.1.0"
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
       },
       "dependencies": {
         "tslib": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
-          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
         },
         "zrender": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.1.0.tgz",
-          "integrity": "sha512-c+8VRx52ycbmqwHeHLlo/BAfIHBl/JZNLM6cfDQFgzIH05yb+f5J9F/fbRsP+zGc8dW9XHuhdt8/iqukgMZSeg==",
+          "version": "5.3.2",
+          "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
+          "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
           "requires": {
-            "tslib": "2.0.3"
+            "tslib": "2.3.0"
           }
         }
       }

package.json

@@ -20,7 +20,7 @@
     "echarts": "^4.9.0",
     "echarts-gl": "^1.1.2",
     "echarts-liquidfill": "^2.0.6",
-    "echarts5.1.0": "npm:echarts@^5.1.0",
+    "echarts5.1.0": "npm:echarts@^5.3.3",
     "element-ui": "^2.15.7",
     "hls.js": "^1.1.5",
     "html2canvas": "^1.0.0-rc.7",

src/views/spectrum/dynamicMonitor/realTimeMonitor/widget.vue

@@ -30,7 +30,7 @@
     <!-- 表格 -->
     <div class="content-body">
       <el-table :data="tableData" stripe height="100%"
-                :header-cell-style="{background:'#e0eafb',color:'rgb(50,59,65)',height:'39px',textAlign:'center',fontWeight:'600'}">
+                :header-cell-style="{background:'#eaf1fd',color:'rgb(50,59,65)',height:'39px',textAlign:'center'}">
         <template slot="empty">
           <img src="@/assets/icon/null.png" alt="" />
           <p style="margin-top: -7px">暂无数据</p>
@@ -50,10 +50,10 @@
         <el-table-column prop="siteState" label="站点状态" show-overflow-tooltip width="150" align="center">
           <template slot-scope="{row}">{{['正常','报警','离线','维护中'][row.siteState-1]}}</template>
         </el-table-column>
-        <el-table-column label="距离当前时间间隔(分钟)" show-overflow-tooltip width="150" align="center">
+        <el-table-column label="距离当前时间间隔(分钟)" show-overflow-tooltip width="180" align="center">
           <template slot-scope="{row}">{{getIntervalMinutes(row.collectionDate)}}</template>
         </el-table-column>
-        <el-table-column prop="collectionDate" label="最近一次数据采集时间" show-overflow-tooltip width="150" align="center"></el-table-column>
+        <el-table-column prop="collectionDate" label="最近一次数据采集时间" show-overflow-tooltip width="180" align="center"></el-table-column>
         <el-table-column prop="temperature" label="温度(℃)" show-overflow-tooltip width="150" align="center">
           <template slot-scope="{row}">{{row.temperature?row.temperature:"/"}}</template>
         </el-table-column>
@@ -173,7 +173,8 @@ export default {
   height: 100%;
   .content-top {
     width: 100%;
-    height: 40px;
+    height: 60px;
+    padding: 10px 0;
     .el-form {
       >>> .el-form-item {
         margin-bottom: 0 !important;
@@ -183,9 +184,8 @@ export default {
   }
   .content-body {
     width: 100%;
-    height: calc(100% - 70px);
+    height: calc(100% - 100px);
     box-sizing: border-box;
-    padding-top: 10px;
     padding-bottom: 5px;
     .el-table {
       >>> th > .cell {

src/views/spectrum/dynamicMonitor/waterQualityLedger/widget.vue

@@ -30,7 +30,7 @@
     <!-- 表格 -->
     <div class="content-body">
       <el-table :data="tableData" stripe height="100%" ref="dTable" @row-dbclick="rowDbclick"
-                :header-cell-style="{background:'#e0eafb',color:'rgb(50,59,65)',height:'39px',textAlign:'center',fontWeight:'600'}">
+                :header-cell-style="{background:'#eaf1fd',color:'rgb(50,59,65)',height:'39px',textAlign:'center'}">
         <template slot="empty">
           <img src="@/assets/icon/null.png" alt="" />
           <p style="margin-top: -7px">暂无数据</p>
@@ -83,7 +83,6 @@
     </div>
     <!-- 分页 -->
     <div class="content-footer">
-      <!-- <span style="margin-left:10px;color: #323b41;font-size: 14px;">共 {{tableData.length}} 条</span> -->
       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
                      :page-sizes="[10, 25, 50, 100]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper"
                      :total="pagination.total">
@@ -255,7 +254,8 @@ export default {
   height: 100%;
   .content-top {
     width: 100%;
-    height: 40px;
+    height: 60px;
+    padding: 10px 0;
     .el-form {
       >>> .el-form-item {
         margin-bottom: 0 !important;
@@ -265,9 +265,8 @@ export default {
   }
   .content-body {
     width: 100%;
-    height: calc(100% - 75px);
+    height: calc(100% - 100px);
     box-sizing: border-box;
-    padding-top: 10px;
     padding-bottom: 5px;
     .el-table {
       >>> th > .cell {
@@ -284,7 +283,6 @@ export default {
     width: 100%;
     height: 35px;
     line-height: 35px;
-    // background-color: #0bbdd4;
   }
 }
 </style>

src/views/spectrum/statisticalAnalysis/wqMultipleSites/css.scss

@@ -0,0 +1,55 @@
+.head-title {
+  font-size: 15px;
+  font-family: '宋体';
+  color: #333333;
+  line-height: 18px;
+  margin: 10px 0;
+  font-weight: 600;
+
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 3px;
+    height: 16px;
+    background: #2a77f7;
+    vertical-align: text-bottom;
+    margin-right: 5px;
+  }
+}
+
+.params-seting {
+  .data-container {
+    width: 100%;
+    min-height: 60px;
+    overflow-y: auto;
+    border: 1px #ced4da solid;
+    background-color: #f7f7f7;
+    border-radius: 2px;
+    display: block;
+    ul{
+        list-style: none;
+        li{
+            padding: 5px;
+            >>>.el-checkbox{
+                width: 100%;
+                .el-checkbox__label{
+                    width: calc(100% - 20px);
+                    span{
+                        &:nth-child(2){
+                            float: right;
+                        }
+                    }
+                }
+            }
+        }
+    }
+  }
+  .el-form {
+    >>> .el-form-item.block-item {
+      .el-form-item__content {
+        margin-left: 0 !important;
+        display: block;
+      }
+    }
+  }
+}

src/views/spectrum/statisticalAnalysis/wqMultipleSites/widget.vue

@@ -1,15 +1,101 @@
 <template>
   <div>
-      多站点水质分析
+    <!-- 参数设置 -->
+    <div class="params-seting">
+      <el-form :model="form" size="small" label-width="auto">
+        <div class="head-title">参数设置</div>
+        <el-form-item label="检测指标：">
+          <el-select placeholder="选择指标" style="width:100%">
+            <el-option
+              v-for="(item,index) in []"
+              :key="index"
+              :label="item.siteName"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间：">
+          <el-date-picker
+            v-model="form.date"
+            type="daterange"
+            align="right"
+            unlink-panels
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+            value-format="yyyy/MM/dd"
+            format="yyyy/MM/dd"
+            :clearable="false"
+            style="width:100%"
+          ></el-date-picker>
+        </el-form-item>
+        <div class="head-title">监测站点设置</div>
+        <el-form-item label="检测站点：">
+          <el-select placeholder="选择检测站点" style="width:100%">
+            <el-option
+              v-for="(item,index) in []"
+              :key="index"
+              :label="item.siteName"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="上游站点：" class="block-item">
+          <div class="data-container">
+            <ul>
+              <li v-for="(item,index) in []" :key="index">
+                <el-checkbox v-model="item.checked">
+                  <span>中国邮政院内</span>
+                  <span>距离：3.97KM</span>
+                </el-checkbox>
+                <div></div>
+              </li>
+            </ul>
+          </div>
+        </el-form-item>
+        <el-form-item label="下游站点：" class="block-item">
+          <div class="data-container"></div>
+        </el-form-item>
+        <el-form-item label="其他站点：" class="block-item">
+          <div class="data-container" style="height:100px"></div>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%"
+        :header-cell-style="{height:'39px',textAlign:'center',fontWeight:600}"
+      >
+        <el-table-column prop="date" label="统计顺序"></el-table-column>
+        <el-table-column prop="name" label="检测站点名称" width="180"></el-table-column>
+        <el-table-column prop="address" label="设备类型"></el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="{row}">
+            <el-button type="text">上移</el-button>
+            <el-button type="text">下移</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div></div>
   </div>
 </template>
 
 <script>
 export default {
-
+  data() {
+    return {
+      form: {}
+    }
+  },
+  mounted() {},
+  destroyed() {},
+  methods: {}
 }
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+@import './css.scss';
 </style>

src/views/spectrum/statisticalAnalysis/wqSingleSite/css.scss

@@ -1,77 +1,107 @@
 .head-title {
-    font-size: 15px;
-    font-family: '宋体';
-    color: #333333;
-    line-height: 18px;
-    margin: 10px 0;
-    font-weight: 600;
-  
-    &::before {
-      content: '';
-      display: inline-block;
-      width: 3px;
-      height: 16px;
-      background: #2a77f7;
-      vertical-align: text-bottom;
-      margin-right: 5px;
+  font-size: 15px;
+  font-family: '宋体';
+  color: #333333;
+  line-height: 18px;
+  margin: 10px 0;
+  font-weight: 600;
+
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 3px;
+    height: 16px;
+    background: #2a77f7;
+    vertical-align: text-bottom;
+    margin-right: 5px;
+  }
+}
+
+.params-panel {
+  height: 320px;
+
+  .el-radio-group {
+    >>>.el-radio {
+      margin: 5px 0;
     }
   }
-  .params-panel {
-    height: 320px;
-    .el-radio-group {
-      >>> .el-radio {
-        margin: 5px 0;
+
+  .timeset-btns {
+    .el-button {
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      color: #fff;
+      border-radius: 0;
+      margin-left: 2px;
+
+      &:first-child {
+        background-color: #3f85d2;
       }
-    }
-    .timeset-btns {
-      .el-button {
-        width: 20px;
-        height: 20px;
-        padding: 0;
-        color: #fff;
-        border-radius: 0;
-        margin-left: 2px;
-        &:first-child {
-          background-color: #3f85d2;
-        }
-        &:nth-child(2) {
-          background-color: #d81e06;
-        }
+
+      &:nth-child(2) {
+        background-color: #d81e06;
       }
     }
-    .time-container {
-      width: 100%;
-      height: 80px;
-      overflow-y: auto;
-      border: 1px #ced4da solid;
-      background-color: #f7f7f7;
-      height: 60px;
-      ul {
-        list-style: none;
-        li {
-          width: 100%;
-          height: 30px;
-          line-height: 30px;
-          box-sizing: border-box;
-          padding: 0 5px;
-          .el-checkbox {
-            >>> .el-checkbox__label {
-              font-size: 12px;
-            }
+  }
+
+  .time-container {
+    width: 100%;
+    // height: 80px;
+    overflow-y: auto;
+    border: 1px #ced4da solid;
+    background-color: #f7f7f7;
+    height: 60px;
+
+    ul {
+      list-style: none;
+
+      li {
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+        box-sizing: border-box;
+        padding: 0 5px;
+
+        .el-checkbox {
+          >>>.el-checkbox__label {
+            font-size: 12px;
           }
         }
       }
     }
   }
-  .result-panel {
-    height: calc(100% - 330px);
-    .result-box {
-      height: calc(100% - 52px);
-      overflow-y: auto;
-      .chart-box {
-        width: 100%;
-        height: 180px;
-        margin-bottom: 10px;
+}
+
+.result-panel {
+  height: calc(100% - 330px);
+
+  .result-box {
+    height: calc(100% - 52px);
+    overflow-y: auto;
+
+    .chart-box {
+      width: 100%;
+      height: 180px;
+      margin-bottom: 10px;
+    }
+
+    .empty {
+      width: 100%;
+      height: 100%;
+      background: url('../../../../assets/icon/null.png') no-repeat;
+      background-position-x: 50%;
+      background-position-y: 30%;
+      position: relative;
+      &::before{
+        content: '暂无数据';
+        position: absolute;
+        left: 50%;
+        top: 55%;
+        transform: translateX(-50%);
+        font-size: 14px;
+        color: #ABABAB;
       }
     }
-  }
+  }
+}

src/views/spectrum/statisticalAnalysis/wqSingleSite/widget.vue

@@ -60,6 +60,7 @@
       </div>
       <!-- 结果 -->
       <div class="result-box">
+        <div class="empty" v-if="targetVos.length==0"></div>
         <div v-for="(item,index) in targetVos" :key="index" :id="'chart'+index" class="chart-box"></div>
       </div>
     </div>