大屏改版

src/api/index.js

@@ -113,3 +113,11 @@ export async function getDustList(type) {
     })
 }
 
+
+export async function getProjectListByType(type) {
+    return await request({
+        url: `/wisdom/screen/noise/${type}`,
+        method: 'get'
+    })
+}
+

src/components/common/STable.vue

@@ -51,7 +51,14 @@
         </div>
       </div>
       <div v-if="!tableData || tableData.length == 0" class="no-data">
-        <span>暂无数据</span>
+        <div class="no-data">
+          <img
+            style="width: 120px"
+            src="@/assets/images/common/no-data.png"
+            alt=""
+          />
+          <div>暂无数据</div>
+        </div>
       </div>
     </div>
   </div>
@@ -155,11 +162,8 @@ export default {
   height: 100%;
   font-size: 20px;
   position: relative;
-  span {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-  }
+}
+.no-data {
+  padding: 12px 0;
 }
 </style>
\ No newline at end of file

src/views/DataStatis/Index.vue

@@ -2,7 +2,7 @@
   <div id="data-statis">
     <div id="map-container"></div>
     <div class="left-area">
-      <Section class="sections" title="今日区域内扬尘噪音实时监测">
+      <!-- <Section class="sections" title="今日区域内扬尘噪音实时监测">
         <div class="statis">
           <div class="stat-container">
             <div>
@@ -59,11 +59,62 @@
             </div>
           </div>
         </div>
+      </Section> -->
+
+      <Section
+        class="sections"
+        style="height: 15% !important"
+        title="气象站数据与当前工程平均值对比"
+      >
+        <div class="weather">
+          <div style="width: 100%">
+            <div class="weather-bg">
+              <div class="weather-value">
+                <div class="icon-span">
+                  <img src="@/assets/images/index/weather.png" alt="" />
+                  <div class="right-bg">气象站</div>
+                </div>
+                <div class="values">
+                  <div class="value-bg">
+                    <div class="label">PM2.5</div>
+                    <div>{{ parseInt(todayDataInfo.pm25 || 0) }}</div>
+                  </div>
+                  <div class="value-bg">
+                    <div class="label">PM10</div>
+                    <div>{{ parseInt(todayDataInfo.pm10 || 0) }}</div>
+                  </div>
+                  <!-- <div>{{ todayDataInfo.noise }}</div> -->
+                </div>
+              </div>
+              <div class="project-value">
+                <div class="icon-span">
+                  <img src="@/assets/images/index/project.png" alt="" />
+                  <div class="right-bg">工&nbsp;&nbsp;程</div>
+                </div>
+                <div class="values">
+                  <div class="value-bg">
+                    <div class="label">PM2.5</div>
+                    <div>{{ parseInt(projectDataInfo.pm25 || 0) }}</div>
+                  </div>
+                  <div class="value-bg">
+                    <div class="label">PM10</div>
+                    <div>{{ parseInt(projectDataInfo.pm10 || 0) }}</div>
+                  </div>
+                  <!-- <div>{{ projectDataInfo.noise }}</div> -->
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </Section>
-      <Section class="sections" title="本年地区与工程PM10对比分析">
+      <Section
+        class="sections"
+        style="height: 25% !important"
+        title="本年地区与工程PM10对比分析"
+      >
         <div id="line-bar-chart" ref="pm10chart"></div>
       </Section>
-      <Section class="sections long">
+      <!-- <Section class="sections long">
         <div class="switch-btns">
           <div
             :class="['bg-2-1', pm10rate == 'today' ? 'active' : '']"
@@ -94,7 +145,70 @@
             </template>
           </template>
         </STable>
+      </Section> -->
+
+      <Section
+        class="sections"
+        style="height: 30% !important"
+        title="当前超标工程"
+      >
+        <STable
+          :headers="header1"
+          :table-data="leftBtmProjectList"
+          @row-click="openProjectWindow"
+        >
+          <template slot-scope="scope">
+            <template v-if="scope.header.slot == 'over_name'">
+              <span :class="['span-status']" :style="{ color: '#5BDEA5' }"
+                >{{ scope.row.over_name }}/{{ scope.row.over_value }}</span
+              >
+            </template>
+          </template>
+        </STable>
+      </Section>
+
+      <Section
+        style="height: 30% !important"
+        class="sections"
+        title="当前离线工程"
+      >
+        <STable
+          :headers="header1_2"
+          :table-data="leftBtmProjectList2"
+          @row-click="openProjectWindow"
+        >
+        </STable>
       </Section>
+      <!-- <Section class="sections long">
+        <div class="switch-btns">
+          <div
+            :class="['bg-2-1', projectType == 'overproject' ? 'active' : '']"
+            @click="switchProject('overproject')"
+          >
+            当前超标工程
+          </div>
+          <div
+            :class="['bg-2-1', projectType == 'offproject' ? 'active' : '']"
+            @click="switchProject('offproject')"
+          >
+            当前离线工程
+          </div>
+        </div>
+        <STable
+          style="height: calc(100% - 0.44rem)"
+          :headers="projectType == 'overproject' ? header1 : header1_2"
+          :table-data="leftBtmProjectList"
+          @row-click="openProjectWindow"
+        >
+          <template slot-scope="scope">
+            <template v-if="scope.header.slot == 'over_name'">
+              <span :class="['span-status']" :style="{ color: '#5BDEA5' }"
+                >{{ scope.row.over_name }}/{{ scope.row.over_value }}</span
+              >
+            </template>
+          </template>
+        </STable>
+      </Section> -->
 
       <ProjectDialog
         :visible="projectDialogVisible"
@@ -290,6 +404,7 @@ import {
   getVideoImportList,
   getStatistics,
   getDustList,
+  getProjectListByType,
 } from "@/api/index";
 export default {
   name: "DataStatis",
@@ -308,16 +423,31 @@ export default {
         {
           name: "工程名称",
           props: "project_name",
-          width: "60%",
+          width: "50%",
           style: {
             textAlign: "left",
           },
         },
         {
-          name: "PM10",
-          props: "pm10",
-          slot: "pm10",
-          width: "15%",
+          name: "超标内容",
+          props: "over_name",
+          slot: "over_name",
+          width: "25%",
+        },
+      ],
+      header1_2: [
+        {
+          name: "所属区域",
+          props: "project_region_name",
+          width: "25%",
+        },
+        {
+          name: "工程名称",
+          props: "project_name",
+          width: "75%",
+          style: {
+            textAlign: "left",
+          },
         },
       ],
       data1: [
@@ -444,6 +574,9 @@ export default {
       currentAreaId: "",
       dustType: "offline",
       dustList: [],
+      projectType: "overproject",
+      leftBtmProjectList: [],
+      leftBtmProjectList2: [],
     };
   },
   methods: {
@@ -459,7 +592,8 @@ export default {
       getPM10Analysis().then((res) => {
         this.renderPM10Chart(res.data.pm10);
       });
-      this.switchPm10Rate(this.pm10rate);
+      // this.switchPm10Rate(this.pm10rate);
+      this.switchProject();
       this.switchDustList(this.dustType);
       getVideoImportList().then((res) => {
         this.videoData = res.data;
@@ -781,6 +915,7 @@ export default {
             itemStyle: {
               color: "rgba(135, 206, 250, 0.6)", // 柱状图颜色，半透明蓝色
             },
+            barWidth: 15,
           },
           {
             name: "平均工程PM10",
@@ -810,6 +945,15 @@ export default {
         this.pm10rankList = res.data;
       });
     },
+    switchProject() {
+      getProjectListByType("overproject").then((res) => {
+        this.leftBtmProjectList = res.data;
+      });
+      getProjectListByType("offproject").then((res) => {
+        this.leftBtmProjectList2 = res.data;
+      });
+    },
+
     switchDustList(type) {
       this.dustType = type;
       getDustList(type).then((res) => {
@@ -1145,4 +1289,109 @@ export default {
     }
   }
 }
+.weather {
+  padding: 12px 0;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  .top-label {
+    margin-left: 124px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: #afcfed;
+    width: calc(100% - 124px);
+    div {
+      width: calc(100% / 3 - calc(56px / 3));
+      text-align: center;
+    }
+  }
+}
+.weather-value,
+.project-value {
+  width: 100%;
+  .icon-span {
+    width: 110px;
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    img {
+      width: 40px;
+      vertical-align: top;
+    }
+    .right-bg {
+      width: 70px;
+      line-height: 40px;
+      text-align: center;
+      color: #fff;
+      background: url("@/assets/images/index/right-bg.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+.weather-value {
+  margin-bottom: 4px;
+  display: flex;
+  justify-content: space-between;
+  .values {
+    display: flex;
+    justify-content: space-between;
+    width: calc(100% - 124px);
+    margin-left: 14px;
+    .label {
+      font-size: 14px;
+      color: #afcfed;
+      margin: 0 10px;
+      width: 40px;
+    }
+    .value-bg {
+      display: flex;
+
+      background: url("@/assets/images/index/top-value.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      width: calc(100% / 2 - 13px);
+
+      text-align: center;
+      line-height: 40px;
+      font-size: 18px;
+      color: #5bdea5;
+    }
+  }
+}
+
+.project-value {
+  display: flex;
+  justify-content: space-between;
+  .values {
+    display: flex;
+    justify-content: space-between;
+    width: calc(100% - 124px);
+    margin-left: 14px;
+    .label {
+      font-size: 14px;
+      color: #afcfed;
+      margin: 0 10px;
+      width: 40px;
+    }
+    .value-bg {
+      background: url("@/assets/images/index/btm-value.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      width: calc(100% / 2 - 13px);
+      text-align: center;
+      line-height: 40px;
+      font-size: 18px;
+      color: #5bdea5;
+      display: flex;
+    }
+  }
+}
+.weather-bg {
+  width: 100%;
+  background: url("@/assets/images/index/weather-bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
 </style>
\ No newline at end of file

vue.config.js

@@ -23,7 +23,7 @@ module.exports = defineConfig({
     port: 3000,
     proxy: {
       '/wisdom': {
-        target: 'http://cx.zhjd.io/',
+        target: 'https://cxzjz.vnet1000.net/',
         changeOrigin: true,
 
       },