1、新增两侧看板布局

assets/fonts/fonts.less

@@ -0,0 +1,19 @@
+@font-face {
+  font-family: AlimamaShuHeiTi-Bold;
+  src: url("./Alimama_ShuHeiTi_Bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: YouSheBiaoTiHei;
+  src: url("./优设标题黑.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: MicrosoftYaHei;
+  src: url("./Microsoft-YaHei-Bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: MicrosoftYaHei-Bold;
+  src: url("./Microsoft-YaHei-Bold.ttf") format("truetype");
+}

assets/styles/mixin.less

@@ -1,3 +1,4 @@
+@import "@/assets/fonts/fonts.less";
 //表单元素垂直居中对齐（也可设置顶对齐，底对齐）
 .form-element-v-align(@alignment: middle){
   display: inline-block;
@@ -82,3 +83,13 @@
   flex-flow: row;
   align-items: center;
 }
+
+.flex-column{
+  display: flex;
+  flex-flow: column;
+}
+.text-ellipsis{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

components/AirQuality.vue

@@ -2,6 +2,16 @@
 <template>
   <div class="air-quality-content">
     <secondary-title :title="title"/>
+    <div class="air-data">
+      <div class="excellent-rate">
+        <div class="_title">空气质量</div>
+        <div class="_title">优良率</div>
+        <div class="num-bg">
+          90%
+        </div>
+      </div>
+      <div class="air-quality-trend"></div>
+    </div>
   </div>
 </template>
 
@@ -22,9 +32,50 @@ export default {
 .air-quality-content {
   width: 100%;
   height: 601px;
-  background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%);
+  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
-  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+/*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
-  border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); /* 使用线性渐变作为边框图片 */
+  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
-  border-image-slice: 1; /* 指定切分边框图像的位置 */
+  border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
+  .flex-column;
+
+  .air-data {
+    flex: 1;
+    .flex-row;
+
+    .excellent-rate {
+      width: 346px;
+      height: 100%;
+      .flex-column;
+      justify-content: center;
+      align-items: center;
+
+      ._title {
+        font-family: MicrosoftYaHei;
+        font-size: 34.25px;
+        color: #6AC4FF;
+        letter-spacing: 2.25px;
+        text-align: center;
+        font-weight: 400;
+      }
+
+      .num-bg {
+        width: 239px;
+        height: 270px;
+        background: url("assets/peakCoalImages/left/air-excellent-rate-bg.png") no-repeat;
+        background-size: 100% 100%;
+        font-family: YouSheBiaoTiHei;
+        font-size: 85.62px;
+        color: #FFFFFF;
+        letter-spacing: 5.63px;
+        font-weight: 700;
+        line-height: 200px;
+        text-align: center;
+      }
+    }
+
+    .air-quality-trend {
+      flex: 1;
+    }
+  }
 }
 </style>

components/CheckData.vue

@@ -8,6 +8,72 @@
         </div>
       </template>
     </secondary-title>
+    <div class="check-data-info">
+      <div class="table-info">
+        <div class="table-header">
+          <div class="table-header-item" v-for="(item,index) of tableHeaderData"
+               :style="`width:${tableItemWidthList[index]}%`">
+            {{ item }}
+          </div>
+        </div>
+        <div class="table-body">
+          <div class="table-item-body" v-for="item of dataSource">
+            <div class="point-name" :style="`width:${tableItemWidthList[0]}%`" :title="item.pointName">{{
+                item.pointName
+              }}
+            </div>
+            <div class="data-value" :style="`width:${tableItemWidthList[1]}%`">
+              <div class="_value">
+                {{ `${item.COValue}${item.COUnit}` }}
+              </div>
+              <div :class="getOddsRatioIcon(item.COValue,'COStandardValue')">
+
+              </div>
+            </div>
+            <div class="data-value" :style="`width:${tableItemWidthList[2]}%`">
+              <div class="_value">
+                {{ `${item.SO2Value}${item.SO2Unit}` }}
+              </div>
+              <div :class="getOddsRatioIcon(item.SO2Value,'SO2StandardValue')">
+
+              </div>
+            </div>
+            <div class="data-value" :style="`width:${tableItemWidthList[3]}%`">
+              <div class="_value">
+                {{ `${item.NOValue}${item.NOUnit}` }}
+              </div>
+              <div :class="getOddsRatioIcon(item.NOValue,'NOStandardValue')">
+
+              </div>
+            </div>
+            <div class="data-value" :style="`width:${tableItemWidthList[4]}%`">
+              <div class="_value">
+                {{ `${item.O3Value}${item.O3Unit}` }}
+              </div>
+              <div :class="getOddsRatioIcon(item.O3Value,'O3StandardValue')">
+
+              </div>
+            </div>
+            <div class="data-value" :style="`width:${tableItemWidthList[5]}%`">
+              <div class="_value">
+                {{ `${item.PM10Value}${item.PM10Unit}` }}
+              </div>
+              <div :class="getOddsRatioIcon(item.PM10Value,'PM10StandardValue')">
+
+              </div>
+            </div>
+            <div class="data-value" :style="`width:${tableItemWidthList[6]}%`">
+              <div class="_value">
+                {{ `${item.PM25Value}${item.PM25Unit}` }}
+              </div>
+              <div :class="getOddsRatioIcon(item.PM25Value,'PM25StandardValue')">
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -16,7 +82,194 @@ export default {
   name: "CheckData",
   data() {
     return {
-      title: '实时检查数据'
+      title: '实时检查数据',
+      tableItemWidthList: [12, 16, 16, 16, 13, 14, 13],
+      standardValue: {
+        COStandardValue: 0.5,
+        SO2StandardValue: 30,
+        NOStandardValue: 10,
+        O3StandardValue: 80,
+        PM10StandardValue: 50,
+        PM25StandardValue: 40
+      },
+      tableHeaderData: ['监测设备', '一氧化碳[0.5%VOL]', '二氧化硫[30mg/m³]', '氮氧化物[10mg/L]', '臭氧[80⏜ppm]', 'PM10[50μg/m³]', 'PM2.5[40μg/m³]'],
+      dataSource: [
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        },
+        {
+          pointName: '监测设备名称',
+          COValue: 2,
+          COUnit: '%VOL',
+          SO2Value: 30,
+          SO2Unit: 'mg/m³',
+          NOValue: 20,
+          NOUnit: 'mg/L',
+          O3Value: 10,
+          O3Unit: 'ppm',
+          PM10Value: 10,
+          PM10Unit: 'μg/m³',
+          PM25Value: 30,
+          PM25Unit: 'μg/m³'
+        }
+      ]
+    }
+  },
+  methods: {
+    //判断数值是上升还是下降
+    getOddsRatioIcon(val, valType) {
+      if (val > this.standardValue[valType]) {
+        return 'odds-ratio-up-icon'
+      } else if (val < this.standardValue[valType]) {
+        return 'odds-ratio-reduction-icon'
+      }
     }
   }
 }
@@ -27,12 +280,14 @@ export default {
 
 .check-data {
   margin-top: 43px;
-  height: 984px;
+  height: 1100px;
   width: 100%;
   background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
-  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  /*  border: 1px inset transparent; !* 先将边框颜色设置为透明 *!
-  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
+    border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
-  border-image-slice: 1; /* 指定切分边框图像的位置 */
+    border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
+  .flex-column;
+  overflow: hidden;
 
   .right-tip {
     height: 100%;
@@ -45,5 +300,100 @@ export default {
     padding-right: 10px;
     .flex-row;
   }
+
+  .check-data-info {
+    flex: 1;
+    padding: 30px 20px 0 20px;
+    height: 0;
+    .table-info {
+      width: 100%;
+      height: 100%;
+      .flex-column;
+
+      .table-header {
+        height: 77px;
+        background-color: rgba(35, 140, 255, 0.2);
+        padding: 0 20px;
+        .flex-row;
+
+        .table-header-item {
+          font-family: MicrosoftYaHei-Bold;
+          font-size: 29.97px;
+          color: #37EAFF;
+          letter-spacing: 0;
+          text-align: left;
+          line-height: 34.25px;
+          font-weight: 700;
+        }
+      }
+
+      .table-body {
+        height: calc(100% - 77px);
+        overflow-y: auto;
+
+        .table-item-body {
+          height: 77px;
+          background: rgba(21, 77, 160, 0.20);
+          margin-top: 20px;
+          .flex-row;
+
+          .point-name {
+            font-family: MicrosoftYaHei-Bold;
+            font-size: 29.97px;
+            color: #FFFFFF;
+            letter-spacing: 0;
+            line-height: 34.25px;
+            font-weight: 700;
+            text-align: left;
+            .text-ellipsis;
+          }
+
+          .data-value {
+            .flex-row;
+            justify-content: center;
+
+            ._value {
+              font-family: MicrosoftYaHei-Bold;
+              font-size: 29.97px;
+              color: #FFFFFF;
+              letter-spacing: 0;
+              text-align: center;
+              font-weight: 700;
+            }
+
+            .odds-ratio-up-icon {
+              width: 23px;
+              height: 25px;
+              background: url("assets/peakCoalImages/left/odds-ratio-up-icon.png") no-repeat;
+              padding-left: 20px;
+            }
+
+            .odds-ratio-reduction-icon {
+              width: 22px;
+              height: 26px;
+              background: url("assets/peakCoalImages/left/odds-ratio-reduction-icon.png") no-repeat;
+              padding-left: 20px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  background-color: rgba(21, 77, 160, 0.20);;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  border-radius: 5px;
+  background-color: #d3dce6;
 }
 </style>

components/DeviceRun.vue

@@ -2,6 +2,67 @@
 <template>
   <div class="device-run">
     <secondary-title :title="title" longBg></secondary-title>
+    <div class="device-run-info">
+      <div class="device-run-item-info">
+        <div class="monitor-point-icon"></div>
+        <div class="data-value-info">
+          <div class="monitor-point-total">
+            <div class="_title">监控点</div>
+            <div class="value-content">
+              <div class="text-bg"></div>
+              <div class="_value">287</div>
+            </div>
+          </div>
+          <div class="monitor-point-total">
+            <div class="_title">在线率</div>
+            <div class="value-content">
+              <div class="text-bg"></div>
+              <div class="_value">98%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="device-run-item-info">
+        <div class="microsite-icon"></div>
+        <div class="data-value-info">
+          <div class="monitor-point-total">
+            <div class="_title">微站</div>
+            <div class="value-content">
+              <div class="text-bg"></div>
+              <div class="_value">287</div>
+            </div>
+          </div>
+          <div class="monitor-point-total">
+            <div class="_title">在线率</div>
+            <div class="value-content">
+              <div class="text-bg"></div>
+              <div class="_value">98%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="device-run-item-info">
+        <div class="tester-icon"></div>
+        <div class="data-value-info">
+          <div class="monitor-point-total">
+            <div class="_title">深度检测仪</div>
+            <div class="value-content">
+              <div class="text-bg"></div>
+              <div class="_value">287</div>
+            </div>
+          </div>
+          <div class="monitor-point-total">
+            <div class="_title">在线率</div>
+            <div class="value-content">
+              <div class="text-bg"></div>
+              <div class="_value">98%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -24,8 +85,81 @@ export default {
   height: 416px;
   width: 100%;
   background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
-  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
-  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
+    border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
-  border-image-slice: 1; /* 指定切分边框图像的位置 */
+    border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
+  .flex-column;
+
+  .device-run-info {
+    flex: 1;
+    height: 0;
+    padding: 0 50px;
+    .flex-row;
+    justify-content: space-between;
+
+    .device-run-item-info {
+      .flex-row;
+
+      .monitor-point-icon {
+        width: 173px;
+        height: 172px;
+        background: url("assets/peakCoalImages/right/monitor-point-icon.png") no-repeat;
+      }
+
+      .microsite-icon {
+        width: 172px;
+        height: 173px;
+        background: url("assets/peakCoalImages/right/microsite-icon.png") no-repeat;
+      }
+
+      .tester-icon {
+        width: 173px;
+        height: 173px;
+        background: url("assets/peakCoalImages/right/tester-icon.png") no-repeat;
+      }
+
+      .data-value-info {
+        padding-left: 20px;
+
+        .monitor-point-total {
+          .flex-row;
+          height: 112px;
+
+          ._title {
+            width: 200px;
+            font-family: MicrosoftYaHei;
+            font-size: 34.3px;
+            color: #6AC4FF;
+            letter-spacing: 2.26px;
+            font-weight: 400;
+          }
+
+          .value-content {
+            position: relative;
+            height: 112px;
+            width: 250px;
+            .text-bg {
+              width: 250px;
+              height: 47px;
+              position: absolute;
+              bottom: 30px;
+              background-image: linear-gradient(270deg, rgba(0, 122, 255, 0.00) 0%, rgba(0, 205, 255, 0.47) 100%);
+            }
+
+            ._value {
+              padding-left: 20px;
+              position: absolute;
+              font-family: YouSheBiaoTiHei;
+              font-size: 85.76px;
+              color: #FFFFFF;
+              letter-spacing: 5.64px;
+              font-weight: 400;
+              line-height: 60px;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>

components/EnergyUse.vue

@@ -7,6 +7,24 @@
         </div>
       </template>
     </secondary-title>
+    <div class="energy-use-info">
+      <div class="electricity-water-usage">
+        <div class="electricity-usage">
+          <div class="electricity-icon"></div>
+          <div class="electricity-info">
+            <div class="_title">今日用电[kwh]</div>
+            <div class="_value">1244</div>
+          </div>
+        </div>
+        <div class="water-usage">
+          <div class="water-icon"></div>
+          <div class="water-info">
+            <div class="_title">今日用水[m³]</div>
+            <div class="_value">185</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -22,12 +40,69 @@ export default {
 </script>
 
 <style scoped lang="less">
+@import "assets/styles/mixin";
+
 .energy-use {
   height: 777px;
   width: 100%;
   background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
-  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
-  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
+    border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
-  border-image-slice: 1; /* 指定切分边框图像的位置 */
+    border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
+  .flex-column;
+
+  .energy-use-info {
+    flex: 1;
+    height: 0;
+    padding: 0 50px;
+
+    .electricity-water-usage {
+      height: 247px;
+      .flex-row;
+      justify-content: space-between;
+
+      .electricity-usage {
+        .flex-row;
+
+        .electricity-icon {
+          width: 132px;
+          height: 159px;
+          background: url("assets/peakCoalImages/right/electricity-icon.png") no-repeat;
+        }
+        .electricity-info{
+          padding-left: 20px;
+        }
+      }
+
+      .water-usage{
+        .flex-row;
+
+        .water-icon {
+          width: 132px;
+          height: 159px;
+          background: url("assets/peakCoalImages/right/water-icon.png") no-repeat;
+        }
+        .water-info{
+          padding-left: 20px;
+        }
+      }
+
+      ._title {
+        font-family: MicrosoftYaHei;
+        font-size: 34.3px;
+        color: #6AC4FF;
+        letter-spacing: 2.26px;
+        font-weight: 400;
+      }
+
+      ._value {
+        font-family: YouSheBiaoTiHei;
+        font-size: 85.76px;
+        color: #FFFFFF;
+        letter-spacing: 5.64px;
+        font-weight: 400;
+      }
+    }
+  }
 }
 </style>

components/EnterpriseOperations.vue

@@ -7,6 +7,25 @@
         </div>
       </template>
     </secondary-title>
+    <div class="enterprise-operations-info">
+      <div class="operational-value-info">
+        <div class="operational-value-item-info">
+          <div class="_title">氮气外供[m³]</div>
+          <div class="_value">124</div>
+          <div class="_icon"></div>
+        </div>
+        <div class="operational-value-item-info">
+          <div class="_title">液化石油气[t]</div>
+          <div class="_value">1123</div>
+          <div class="_icon"></div>
+        </div>
+        <div class="operational-value-item-info">
+          <div class="_title">氧气外供[m³]</div>
+          <div class="_value">185</div>
+          <div class="_icon"></div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -22,12 +41,57 @@ export default {
 </script>
 
 <style scoped lang="less">
+@import "assets/styles/mixin";
+
 .enterprise-operations {
   height: 777px;
   width: 100%;
   background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
-  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
-  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
+    border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
-  border-image-slice: 1; /* 指定切分边框图像的位置 */
+    border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
+  .flex-column;
+
+  .enterprise-operations-info {
+    flex: 1;
+    height: 0;
+    padding: 0 50px;
+
+    .operational-value-info {
+      height: 247px;
+      .flex-row;
+      justify-content: space-between;
+
+      .operational-value-item-info {
+        position: relative;
+
+        ._title {
+          font-family: MicrosoftYaHei;
+          font-size: 34.3px;
+          color: #6AC4FF;
+          letter-spacing: 2.26px;
+          font-weight: 400;
+          text-align: center;
+        }
+
+        ._value {
+          font-family: YouSheBiaoTiHei;
+          font-size: 85.76px;
+          color: #FFFFFF;
+          letter-spacing: 5.64px;
+          font-weight: 400;
+          text-align: center;
+        }
+
+        ._icon {
+          position: absolute;
+          bottom: -20px;
+          width: 252px;
+          height: 67px;
+          background: url("assets/peakCoalImages/right/operational-icon.png") no-repeat;
+        }
+      }
+    }
+  }
 }
 </style>

components/LatestWarning.vue

@@ -2,18 +2,83 @@
 <template>
   <div class="latest-warning">
     <secondary-title :title="title"/>
-
+    <div class="latest-warning-info">
+      <div class="warning-data-list">
+        <vue-seamless-scroll
+          v-if="warningDataList.length"
+          ref="vueSeamless"
+          :data="warningDataList"
+          class="seamless-scroll"
+          :class-option="defaultOption"
+        >
+          <div v-for="item of warningDataList" :key="item.indexCode" class="event-item">
+            <warning-info-item :data-item="item"/>
+          </div>
+        </vue-seamless-scroll>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
+
 export default {
   name: "LatestWarning",
+  components: {vueSeamlessScroll},
   data() {
     return {
-      title: '最新预警'
+      title: '最新预警',
+      warningDataList: [
+        {
+          indexCode: '001',
+          snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
+          warningName: '区域入侵',
+          site: 'xxx地区西门',
+          warningTime: '2023-12-12 12:32:45',
+          state: 1
+        },
+        {
+          indexCode: '002',
+          snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
+          warningName: '区域入侵',
+          site: 'xxx地区西门',
+          warningTime: '2023-12-12 12:32:45',
+          state: 0
+        },
+        {
+          indexCode: '003',
+          snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
+          warningName: '区域入侵',
+          site: 'xxx地区西门',
+          warningTime: '2023-12-12 12:32:45',
+          state: 1
+        },
+        {
+          indexCode: '004',
+          snapImgUrl: 'https://img1.baidu.com/it/u=1579566612,4009913306&fm=253&fmt=auto&app=138&f=JPEG?w=693&h=417',
+          warningName: '区域入侵',
+          site: 'xxx地区西门',
+          warningTime: '2023-12-12 12:32:45',
+          state: 1
         }
+      ]
     }
+  },
+  computed: {
+    defaultOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+  },
 }
 </script>
 
@@ -25,8 +90,28 @@ export default {
   height: 984px;
   width: 100%;
   background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
-  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
-  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
+    border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
-  border-image-slice: 1; /* 指定切分边框图像的位置 */
+    border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
+  .flex-column;
+
+  .latest-warning-info {
+    flex: 1;
+    height: 0;
+    padding: 0 50px;
+
+    .warning-data-list {
+      height: 100%;
+      padding-top: 20px;
+      .seamless-scroll {
+        height: 100%;
+        overflow: hidden;
+
+        .event-item {
+          margin-top: 20px;
+        }
+      }
+    }
+  }
 }
 </style>

components/OverviewPollutants.vue

@@ -2,6 +2,21 @@
 <template>
   <div class="overview-pollutants">
     <secondary-title :title="title" longBg/>
+    <div class="pollutants-data">
+      <div class="pollutant-values-list">
+        <div class="pollutant-values" v-for="(item,index) of pollutantValuesDataList">
+          <div class="pollutant-statue" :class="getPollutantStatueIcon(item.standardValue,item.actualValue)"></div>
+          <div class="pollutant-other-info">
+            <div class="_name">{{ item.pollutantName }}</div>
+            <div class="standard-value">标准：{{ item.standardValue }}</div>
+          </div>
+          <div class="pollutant-value-info">
+            <div class="_value">{{ item.actualValue }}</div>
+            <div class="_unit">{{ item.unit }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,20 +25,160 @@ export default {
   name: "OverviewPollutants",
   data() {
     return {
-      title: '污染物信息总览'
+      title: '污染物信息总览',
+      pollutantValuesDataList: [
+        {
+          pollutantName: '一氧化碳',
+          standardValue: 60,
+          actualValue: '9.0',
+          unit: 'ug/m³'
+        },
+        {
+          pollutantName: 'NO2',
+          standardValue: 60,
+          actualValue: '60',
+          unit: 'ug/m³'
+        },
+        {
+          pollutantName: 'PM10',
+          standardValue: 60,
+          actualValue: '60',
+          unit: 'ug/m³'
+        },
+        {
+          pollutantName: 'CO',
+          standardValue: 60,
+          actualValue: '70',
+          unit: 'ug/m³'
+        },
+        {
+          pollutantName: 'O3',
+          standardValue: 60,
+          actualValue: '60',
+          unit: 'ug/m³'
+        },
+        {
+          pollutantName: 'PM2.5',
+          standardValue: 60,
+          actualValue: '9.0',
+          unit: 'ug/m³'
+        }
+      ]
+    }
+  },
+  methods: {
+    getPollutantStatueIcon(standardValue, actualValue) {
+      let value = parseFloat(actualValue)
+      if (value === standardValue) {
+        return 'pollutant-level-icon'
+      } else if (value < standardValue) {
+        return 'pollutant-reduction-icon'
+      } else if (value > standardValue) {
+        return 'pollutant-up-icon'
+      }
     }
   }
 }
 </script>
 
 <style scoped lang="less">
+@import "assets/styles/mixin";
+
 .overview-pollutants {
   margin-top: 43px;
   height: 601px;
   width: 100%;
-  background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%);
+  background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
-  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+/*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
-  border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); /* 使用线性渐变作为边框图片 */
+  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
-  border-image-slice: 1; /* 指定切分边框图像的位置 */
+  border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
+  .flex-column;
+
+  .pollutants-data {
+    flex: 1;
+    .flex-row;
+
+    .pollutant-values-list {
+      height: 100%;
+      width: 50%;
+      display: flex;
+      flex-flow: row;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      padding-top: 30px;
+      padding-left: 20px;
+
+      .pollutant-values {
+        width: 463px;
+        height: 133px;
+        background: url("assets/peakCoalImages/left/pollutant-values-bg.png") no-repeat;
+        .flex-row;
+        padding: 0 27px;
+
+        .pollutant-statue {
+          width: 86px;
+          height: 87px;
+        }
+
+        .pollutant-level-icon {
+          background: url("assets/peakCoalImages/left/pollutant-level-icon.png") no-repeat;
+        }
+
+        .pollutant-reduction-icon {
+          background: url("assets/peakCoalImages/left/pollutant-reduction-icon.png") no-repeat;
+        }
+
+        .pollutant-up-icon {
+          background: url("assets/peakCoalImages/left/pollutant-up-icon.png") no-repeat;
+        }
+
+        .pollutant-other-info {
+          padding-left: 20px;
+
+          ._name {
+            font-family: MicrosoftYaHei-Bold;
+            font-size: 29.97px;
+            color: #37EAFF;
+            letter-spacing: 0;
+            line-height: 34.25px;
+            font-weight: 700;
+          }
+
+          .standard-value {
+            padding-top: 10px;
+            font-family: MicrosoftYaHei;
+            font-size: 29.97px;
+            color: #6AC4FF;
+            letter-spacing: 1.97px;
+            text-align: left;
+            font-weight: 400;
+          }
+        }
+
+        .pollutant-value-info {
+          flex: 1;
+          .flex-column;
+          align-items: flex-end;
+          justify-content: center;
+
+          ._value {
+            font-family: YouSheBiaoTiHei;
+            font-size: 41px;
+            color: #FFFFFF;
+            letter-spacing: 0;
+            font-weight: 400;
+          }
+
+          ._unit {
+            font-family: MicrosoftYaHei-Bold;
+            font-size: 25.69px;
+            color: #FFFFFF;
+            letter-spacing: 0;
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

components/PollutantTrends.vue

@@ -21,8 +21,8 @@ export default {
   width: 100%;
   height: 601px;
   background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%);
-  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+/*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
-  border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); /* 使用线性渐变作为边框图片 */
+  border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); !* 使用线性渐变作为边框图片 *!
-  border-image-slice: 1; /* 指定切分边框图像的位置 */
+  border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
 }
 </style>

components/SecondaryTitle.vue

@@ -42,6 +42,8 @@ export default {
   }
 
   ._title {
+    height: 100%;
+    line-height: 84px;
     padding-left: 100px;
     float: left;
     font-family: AlimamaShuHeiTi-Bold;

components/WarningInfoItem.vue

@@ -0,0 +1,152 @@
+<!--预警数据卡片-->
+<template>
+  <div class="warning-data-card">
+    <div class="warning-state" :class="warningStateBg">
+      {{ warningStateValue }}
+    </div>
+    <div class="snap-img">
+      <img :src="dataItem.snapImgUrl" v-if="dataItem.snapImgUrl">
+      <img :src="noData" v-else>
+    </div>
+    <div class="warning-data-info">
+      <div class="warning-name" :title="dataItem.warningName">{{ dataItem.warningName }}</div>
+      <div class="warning-site-time">
+        <div class="site-icon"></div>
+        <div class="_value" :title="dataItem.site">{{ dataItem.site }}</div>
+      </div>
+      <div class="warning-site-time">
+        <div class="warning-time-icon"></div>
+        <div class="_value" :title="dataItem.warningTime">{{ dataItem.warningTime }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import noData from 'assets/peakCoalImages/coommon/no-data.png'
+
+export default {
+  name: "WarningInfoItem",
+  props: {
+    dataItem: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  data() {
+    return {
+      noData
+    }
+  },
+  computed: {
+    warningStateBg() {
+      if (this.dataItem.state === 1) {
+        return 'discuss-decide-bg'
+      } else if (this.dataItem.state === 0) {
+        return 'pending-approval-bg'
+      }
+    },
+    warningStateValue() {
+      if (this.dataItem.state === 1) {
+        return '代研判'
+      } else if (this.dataItem.state === 0) {
+        return '待审批'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+
+.warning-data-card {
+  height: 202px;
+  width: 891px;
+  background: url("assets/peakCoalImages/right/warning-card-bg.png") no-repeat;
+  padding-left: 28px;
+  position: relative;
+  .flex-row;
+
+  .snap-img {
+    width: 244px;
+    height: 165px;
+
+    img {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  .warning-data-info {
+    height: 165px;
+    width: 0;
+    flex: 1;
+    padding-left: 20px;
+    .flex-column;
+    justify-content: space-between;
+
+    .warning-name {
+      width: 100%;
+      font-family: MicrosoftYaHei-Bold;
+      font-size: 32.4px;
+      color: #F6B545;
+      letter-spacing: 0;
+      font-weight: 700;
+      .text-ellipsis;
+    }
+
+    .warning-site-time {
+      width: 100%;
+      .flex-row;
+
+      .site-icon {
+        width: 26px;
+        height: 34px;
+        background: url("assets/peakCoalImages/right/warning-site-icon.png") no-repeat;
+      }
+
+      .warning-time-icon {
+        width: 33px;
+        height: 33px;
+        background: url("assets/peakCoalImages/right/warning-time-icon.png") no-repeat;
+
+      }
+
+      ._value {
+        width: calc(100% - 26px);
+        padding-left: 20px;
+        font-family: MicrosoftYaHei;
+        font-size: 32.4px;
+        color: rgba(202, 244, 255, 0.9);
+        font-weight: 400;
+        .text-ellipsis;
+      }
+    }
+  }
+
+  .warning-state {
+    width: 214px;
+    height: 46px;
+    position: absolute;
+    right: 0px;
+    top: 20px;
+    font-family: PingFangSC-Semibold;
+    font-size: 32.4px;
+    color: #FFFFFF;
+    letter-spacing: 0;
+    text-align: center;
+    line-height: 46px;
+    font-weight: 600;
+  }
+
+  .discuss-decide-bg {
+    background: url("assets/peakCoalImages/right/discuss-decide-bg.png") no-repeat;
+  }
+
+  .pending-approval-bg {
+    background: url("assets/peakCoalImages/right/pending-approval-bg.png") no-repeat;
+  }
+}
+</style>

components/WarningStatistics.vue

@@ -2,7 +2,15 @@
 <template>
   <div class="warning-statistics">
     <secondary-title :title="title"/>
-
+    <div class="warning-statistics-info">
+      <div class="warning-total-info">
+        <div class="warning-data">
+          <div class="warning-icon"></div>
+          <div class="_title">报警总数</div>
+          <div class="_value">234</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -25,8 +33,49 @@ export default {
   height: 984px;
   width: 100%;
   background-image: linear-gradient(62deg, rgba(8, 31, 55, 0.10) 0%, rgba(18, 50, 81, 0.10) 100%);
-  border: 1px solid transparent; /* 先将边框颜色设置为透明 */
+  /*  border: 1px solid transparent; !* 先将边框颜色设置为透明 *!
-  border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); /* 使用线性渐变作为边框图片 */
+    border-image: linear-gradient(rgba(79, 182, 238, 0), rgba(39, 127, 216, 1)); !* 使用线性渐变作为边框图片 *!
-  border-image-slice: 1; /* 指定切分边框图像的位置 */
+    border-image-slice: 1; !* 指定切分边框图像的位置 *!*/
+  .flex-column;
+
+  .warning-statistics-info {
+    flex: 1;
+    height: 0;
+    padding: 0 50px;
+
+    .warning-total-info {
+      height: 238px;
+      .flex-row;
+
+      .warning-data {
+        width: 100%;
+        height: 152px;
+        background: rgba(1, 120, 198, 0.30);
+        .flex-row;
+        justify-content: space-around;
+        .warning-icon {
+          width: 194px;
+          height: 114px;
+          background: url("assets/peakCoalImages/right/warning-icon.png") no-repeat;
+        }
+
+        ._title {
+          font-family: MicrosoftYaHei;
+          font-size: 34.3px;
+          color: #6AC4FF;
+          letter-spacing: 2.26px;
+          font-weight: 400;
+        }
+
+        ._value {
+          font-family: YouSheBiaoTiHei;
+          font-size: 85.76px;
+          color: #FFFFFF;
+          letter-spacing: 5.64px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
 }
 </style>

nuxt.config.js

@@ -26,7 +26,8 @@ export default {
   css: [
     'ant-design-vue/dist/antd.css',
 
-    '@/assets/styles/mixin.less'
+    '@/assets/styles/mixin.less',
+
   ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins

pages/visual/PeakCoalView.vue

@@ -167,11 +167,10 @@ body, html, #__nuxt, #__layout {
       background: url("assets/peakCoalImages/left/left-content-bg.png") no-repeat center 60px;
       padding: 300px 476px 100px 412px;
       perspective: 500px;
-
       .left-data-panel {
         height: 100%;
         width: 100%;
-        transform: rotateY(2deg);
+        transform: rotateY(2deg)  ;
         transform-origin: left center;
       }
     }