中建四局大屏(指挥中心):页面更改

package-lock.json

@@ -33,6 +33,7 @@
         "style-resources-loader": "^1.3.3",
         "stylus-loader": "^3.0.2",
         "vue": "^2.6.11",
+        "vue-awesome-swiper": "4.0",
         "vue-color": "^2.8.1",
         "vue-count-to": "^1.0.13",
         "vue-cropper": "^0.5.5",
@@ -6663,6 +6664,15 @@
       "resolved": "https://registry.npmmirror.com/dom-to-image/-/dom-to-image-2.6.0.tgz",
       "integrity": "sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA=="
     },
+    "node_modules/dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "peer": true,
+      "dependencies": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "node_modules/domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -15267,6 +15277,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==",
+      "peer": true
+    },
     "node_modules/ssri": {
       "version": "6.0.1",
       "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
@@ -15727,6 +15743,20 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/tapable/-/tapable-1.1.3.tgz",
@@ -16854,6 +16884,18 @@
       "version": "2.6.11",
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
+    "node_modules/vue-awesome-swiper": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-4.0.4.tgz",
+      "integrity": "sha512-yzp93S1DBucR16ouzKn7QBQojqGX6yHPEuVIioYp4U4Eyk0rxe0RRVQcUnZXi05bM5MwCvCKXtgaY31N5tTi7g==",
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "swiper": "^5.2.0",
+        "vue": "^2.6.10"
+      }
+    },
     "node_modules/vue-cli-plugin-element": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/vue-cli-plugin-element/-/vue-cli-plugin-element-1.0.1.tgz",
@@ -25449,6 +25491,15 @@
       "resolved": "https://registry.npmmirror.com/dom-to-image/-/dom-to-image-2.6.0.tgz",
       "integrity": "sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA=="
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "peer": true,
+      "requires": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -32399,6 +32450,12 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==",
+      "peer": true
+    },
     "ssri": {
       "version": "6.0.1",
       "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
@@ -32772,6 +32829,16 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "peer": true,
+      "requires": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/tapable/-/tapable-1.1.3.tgz",
@@ -33630,6 +33697,12 @@
       "version": "2.6.11",
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
+    "vue-awesome-swiper": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-4.0.4.tgz",
+      "integrity": "sha512-yzp93S1DBucR16ouzKn7QBQojqGX6yHPEuVIioYp4U4Eyk0rxe0RRVQcUnZXi05bM5MwCvCKXtgaY31N5tTi7g==",
+      "requires": {}
+    },
     "vue-cli-plugin-element": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/vue-cli-plugin-element/-/vue-cli-plugin-element-1.0.1.tgz",

package.json

@@ -33,6 +33,7 @@
     "style-resources-loader": "^1.3.3",
     "stylus-loader": "^3.0.2",
     "vue": "^2.6.11",
+    "vue-awesome-swiper": "4.0",
     "vue-color": "^2.8.1",
     "vue-count-to": "^1.0.13",
     "vue-cropper": "^0.5.5",

src/pages/index/index.js

@@ -24,7 +24,9 @@ import { autoLogin } from '@/assets/js/api/autoLogin-xingXuan'
 import { decode, encode } from 'js-base64'
 import { loginApi, companyLoginApi, projectLoginApi } from '@/assets/js/api/loginSign'
 import SlideVerify from 'vue-monoplasty-slide-verify'; //滑动验证
+import VueAwesomeSwiper from 'vue-awesome-swiper';
 Vue.use(SlideVerify);
+Vue.use(VueAwesomeSwiper);
 
 // 全局组件挂载
 Vue.component('Pagination', Pagination)

src/views/projectAdmin/fourEngin/command/center.vue

@@ -20,13 +20,16 @@
         </div>
       </div>
     </div>
+    <LeftThree />
   </div>
 </template>
 
 <script>
 import { listProjectInfo } from '@/assets/js/api/zhongjianFourth'
+import LeftThree from './leftThree/index.vue'
 
 export default {
+  components: { LeftThree },
   data() {
     return {
       // 信息窗体开关

src/views/projectAdmin/fourEngin/command/index.vue

@@ -39,7 +39,7 @@
 <script>
 import LeftOne from './leftOne'
 import LeftTwo from './leftTwo'
-import LeftThree from './leftThree'
+import LeftThree from './leftThree.vue'
 import LeftFour from './leftFour'
 import Center from './center'
 import CenterBOne from './centerBOne'
@@ -91,17 +91,17 @@ export default {
     }
   }
   .centerBox {
-    width: 50%;
+    width: 53%;
     .center {
       height: 100%;
     }
   }
 
   .rightBox {
-    width: 25%;
+    width: 22%;
     height: 100%;
     .rightOne {
-      height: 26%;
+      height: 25%;
     }
 
     .rightTwo {
@@ -109,11 +109,11 @@ export default {
     }
 
     .rightThree {
-      height: 25%;
+      height: 20%;
     }
 
     .rightFour {
-      height: 19%;
+      height: 25%;
     }
   }
 }

src/views/projectAdmin/fourEngin/command/leftThree.vue

@@ -0,0 +1,180 @@
+<template>
+  <Card title="环境监测">
+    <div class="container">
+      <div class="left list">
+        <div class="list-item" v-for="(item, key) in leftList" :key="key">
+          <div class="image">
+            <img :src="item.image" />
+          </div>
+          <div class="value">
+            <div class="number">{{ item.value }}</div>
+            <span class="unit">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="right list">
+        <el-row class="list-item" type="flex" justify="space-between" align="middle" v-for="(item, key) in rightList" :key="key">
+          <el-col :span="6">
+            <img style="width: 18px;" :src="item.image" />
+          </el-col>
+          <el-col :span="8">
+            <div class="label">{{ item.label }}</div>
+          </el-col>
+          <el-col :span="10">
+            <el-row
+              class="value"
+              type="flex"
+              justify="center"
+              align="middle"
+              :style="{ color: item.color, backgroundImage: `url('${item.valueBackgroundImage}')` }"
+            >
+              <span class="number">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<script>
+import Card from '../components/Card'
+export default {
+  components: { Card },
+  data() {
+    return {
+      // 左边的列表
+      leftList: {
+        'PM2.5': { label: 'PM2.5', value: 68, unit: 'μg/m³', image: require('../assets/images/command-center/icon-pm25.png') },
+        'PM10': { label: 'PM10', value: 36, unit: 'μg/m³', image: require('../assets/images/command-center/icon-pm10.png') },
+        '噪音': { label: '噪音', value: 13, unit: '%dB', image: require('../assets/images/command-center/icon-noise.png') }
+      },
+      // 右边的列表
+      rightList: {
+        temperature: { label: '温度', value: 22, unit: '℃', image: require('../assets/images/command-center/icon-temperature.png') },
+        humidity: { label: '湿度', value: 16, unit: 'RH', image: require('../assets/images/command-center/icon-humidity.png') },
+        windSpeed: {
+          label: '风速',
+          value: 60,
+          unit: 'km/h',
+          image: require('../assets/images/command-center/icon-windSpeed.png'),
+          color: '#f66629',
+          valueBackgroundImage: require('../assets/images/command-center/block3.png')
+        },
+        windDirection: {
+          label: '风向',
+          value: '东南',
+          unit: '风',
+          image: require('../assets/images/command-center/icon-windDirection.png')
+        },
+        barometricPressure: {
+          label: '大气压',
+          value: 101,
+          unit: 'KPa',
+          image: require('../assets/images/command-center/icon-barometricPressure.png')
+        }
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {},
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  box-sizing: border-box;
+
+  display: flex;
+
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+
+  .left,
+  .right {
+    width: 50%;
+    height: 100%;
+  }
+
+  .left.list {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+
+      height: calc(100% / 3.5);
+
+      .image {
+        width: 18px;
+        margin-right: 20px;
+      }
+
+      .label {
+        box-sizing: border-box;
+
+        display: grid;
+        place-items: center;
+        padding: 0 5px;
+        width: 55px;
+        height: 20px;
+        box-sizing: border-box;
+        letter-spacing: 1px;
+      }
+
+      .value {
+        box-sizing: border-box;
+        padding-right: 20px;
+
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .number {
+          display: grid;
+          place-items: center;
+
+          width: 77px;
+          height: 44px;
+          font-size: 30px;
+          background-image: url('../assets/images/command-center/block2.png');
+        }
+
+        .unit {
+          font-size: 18px;
+          color: #b2b4be;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+
+  .right.list {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .el-row.value {
+      width: 65px;
+      height: 21px;
+      .number {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+::v-deep .el-col {
+  display: grid;
+  place-items: center;
+}
+</style>

src/views/projectAdmin/fourEngin/command/leftThree/Process.vue

@@ -36,7 +36,7 @@ export default {
     flex-shrink: 0;
     flex-direction: column;
     align-items: center;
-    width: 190px;
+    width: 185px;
     color: #fff;
 
     .progress-item-dot {
@@ -51,7 +51,7 @@ export default {
         top: 4px;
         transform: translateX(-99%);
         display: block;
-        width: 190px;
+        width: 185px;
         height: 2px;
         background: #fff;
       }

src/views/projectAdmin/fourEngin/command/leftThree/index.vue

@@ -1,26 +1,23 @@
 <template>
-  <Card title="进度管理">
     <div class="container" ref="Process">
       <Process style="transform: translateX(0)" :list="list" />
     </div>
-  </Card>
 </template>
 
 <script>
 import Process from './Process'
-import Card from '../../components/Card'
 import { listProgressOfTheTask } from '@/assets/js/api/zhongjianFourth'
 
 export default {
-  components: { Card, Process },
+  components: { Process },
   data() {
     return {
       list: [
         { endTime: '2022-01-01', subitemProjectName: '基础工程', state: true ,},
-        // { endTime: '2022-02-14', subitemProjectName: '主题结构施工', state: true, },
+        { endTime: '2022-02-14', subitemProjectName: '主题结构施工', state: true, },
-        // { endTime: '2022-03-25', subitemProjectName: '屋面工程', state: true, },
+        { endTime: '2022-03-25', subitemProjectName: '屋面工程', state: true, },
-        // { endTime: '2022-07-31', subitemProjectName: '机械设备安拆工程', state: true, },
+        { endTime: '2022-07-31', subitemProjectName: '机械设备安拆工程', state: true, },
-        // { endTime: '2022-21-31', subitemProjectName: '室内装饰装修工程' }
+        { endTime: '2022-21-31', subitemProjectName: '室内装饰装修工程' }
       ],
       index: 0
     }
@@ -39,7 +36,7 @@ export default {
             item.state = true
           }
         })
-        this.list = res.result
+        // this.list = res.result
       })
     }
   }

src/views/projectAdmin/fourEngin/command/leftTwo.vue

@@ -1,105 +1,106 @@
 <template>
   <Card title="人员概况">
-    <div class="container" ref="chart"></div>
+    <div class="contentBox">
+      <div class="contentTop">
+        <div class="img">
+          <img src="../assets/images/common/num_skyblue.png" />
+        </div>
+        <div class="contentBtn">
+          <p class="num1">6250</p>
+          <p class="text">在场总人数</p>
+        </div>
+        <div class="img">
+          <img style=" margin-left: 25px;" src="../assets/images/common/icon_hs.png" />
+        </div>
+        <div class="contentBtn">
+          <p class="num2">5649</p>
+          <p class="text">实名制人数</p>
+        </div>
+      </div>
+      <div class="contentbut">
+        <div class="lw">
+          <p>劳务人数</p>
+          <p class="number">366</p>
+        </div>
+        <div class="cq">
+          <p>出勤人数</p>
+          <p class="number">236</p>
+        </div>
+        <div class="tc">
+          <p>退场人数</p>
+          <p class="number">128</p>
+        </div>
+      </div>
+    </div>
   </Card>
 </template>
 
 <script>
-import echarts from 'echarts4'
+import Card from "../components/Card.vue";
-import { getPersonnelNumApi } from '@/assets/js/api/zhongjianFourth'
-import Card from '../components/Card'
-
 export default {
-  components: { Card },
+  components: { Card }
-  data() {
+};
-    return {
-      projectSn: "",
-      xdata:{
-        sumNumber:"",
-        realNameNumber:'',
-        lwNumber:'',
-        attendanceNumber:"",
-        exitNumber:""
-      }
-    }
-  },
-  mounted() {
-    this.getData()
-  },
-  methods: {
-    getData(){
-      getPersonnelNumApi({ projectSn: this.$store.state.projectSn }).then((res)=>{
-        this.xdata = res.result
-        this.initChart()
-      })
-    },
-    initChart() {
-      const myChart = echarts.init(this.$refs.chart)
-      const option = {
-        grid: {
-          top: '20px',
-          left: '30px',
-          right: '20px',
-          bottom: '40px'
-        },
-        xAxis: {
-          boundaryGap: true,
-          type: 'category',
-          data: ['总人数', '实名制人数', '劳务人数', '出勤人数', '退场人数'],
-          axisLabel: {
-            textStyle: {
-              show: true,
-              color: '#fff'
-            }
-          }
-        },
-        yAxis: {
-          type: 'value',
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: 'dashed',
-              color: '#4a6290'
-            }
-          },
-          axisLabel: {
-            textStyle: {
-              show: true,
-              color: '#fff'
-            }
-          }
-        },
-        series: [
-          {
-            name: '报警',
-            data: Object.values(this.xdata),
-            type: 'bar',
-            barWidth: '25%',
-            itemStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: '#fb6e34'
-                },
-                
-                {
-                  offset: 1,
-                  color: '#252d3f'
-                }
-              ])
-            }
-          }
-        ]
-      }
-      myChart.setOption(option)
-    }
-  }
-}
 </script>
 
 <style lang="less" scoped>
-.container {
+.contentBox {
-  width: 100%;
+  box-sizing: border-box;
-  height: 100%;
+  padding-top: 20px;
+  .contentTop {
+    box-sizing: border-box;
+    padding-left: 45px;
+    display: flex;
+    // justify-content: space-between;
+    align-items: center;
+    img {
+        height: 56px;
+        width: 56px;
+      }
+    .contentBtn {
+      margin-left: 20px;
+      margin-right: 34px;
+      font-size: 22px;
+      .num1 {
+        color: #66D4D9;
+      }
+      .num2 {
+        color: #f56c35;
+      }
+    }
+
+    .text {
+      margin-top: 5px;
+      color: rgb(255, 255, 255);
+      font-size: 16px;
+    }
+  }
+  .contentbut {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: rgb(255, 255, 255);
+    .lw,
+    .cq,
+    .tc {
+      width: 102px;
+      text-align: center;
+      margin-right: 50px;
+      font-size: 14px;
+      margin-top: 21px;
+      .number {
+        height: 43px;
+        width: 102px;
+        line-height: 43px;
+        font-size: 19px;
+        background-image: url(../assets/images/common/num_bg.png);
+        background-repeat: no-repeat;
+        background-size: 100%;
+        color: #66D4D9;
+      }
+    }
+    .lw{
+      margin-left: 40px;
+    }
+  }
 }
 </style>

src/views/projectAdmin/fourEngin/command/rightFour.vue

@@ -9,20 +9,23 @@
           @click="handelItemClick(index)"
         >{{ item }}</div>
       </div>
-      <vue-scroll style="height: calc(100% - 27px);">
+      <div class="swiper">
-        <div class="bottom list">
+        <swiper class="swiper1" :options="swiperOption" ref="mySwiper">
-          <div class="list-item" v-for="(item, index) in list" :key="index">
+          <swiper-slide><p>中国建筑钢筋样板工程</p><img src='../assets/images/command-center/auto3.png' alt="" /></swiper-slide>
-            <span class="label">{{ item.name }}</span>
+          <swiper-slide><p>中国建筑深基坑挖掘沉降观测工程</p><img src="../assets/images/command-center/auto2.png" alt="" /></swiper-slide>
-            <span class="value">{{ item.content }}</span>
+          <swiper-slide><p>中国建筑混凝土强度检测工程</p><img src="../assets/images/command-center/auto1.png" alt="" /></swiper-slide>
+          <div class="swiper-pagination"  slot="pagination"></div>
+          <div class="swiper-button-next" slot="button-next" @click="next"></div>
+          <div class="swiper-button-prev" slot="button-prev" @click="prev"></div>
+        </swiper>
       </div>
     </div>
-      </vue-scroll>
-    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card'
+import 'swiper/css/swiper.css'
 export default {
   components: { Card },
   data() {
@@ -31,23 +34,35 @@ export default {
       headerList: ['质量', '安全', '技术'],
       // 激活的item
       activeIndex: 0,
-      // 列表
+      swiperOption:{
-      list: [
+        loop: true, // 设置图片循环
-        { name: '中国建筑第四工程局有限公司', content: '' },
+        observer: true,
-        { name: '中国建筑第四工程局有限公司', content: '' },
+        observeParents: true,
-        { name: '中国建筑第四工程局有限公司', content: '' },
+        autoplay: true, //设置可自动播放
-        { name: '中国建筑第四工程局有限公司', content: '' },
+        speed: 1000, //自动播放的速度，每隔1秒滑动一次
-        { name: '中国建筑第四工程局有限公司', content: '' },
+        pagination: {
-        { name: '中国建筑第四工程局有限公司', content: '' },
+         el: ".swiper-pagination",//分页器的类名
-        { name: '中国建筑第四工程局有限公司', content: '' },
+         clickable: true, //设置分页小圆点可手动点击,
-      ]
+        },
+        navigation: {
+          nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
+          prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
+          hideOnClick: true, //点击slide时显示/隐藏按钮
+        },
+      }
    }
   },
   methods: {
     /** item单击事件 */
     handelItemClick(index) {
       this.activeIndex = index
-    }
+    },
+    prev () {
+       this.$refs.mySwiper.$swiper.slidePrev()
+    },
+    next () {
+       this.$refs.mySwiper.$swiper.slideNext()
+    },
   }
 }
 </script>
@@ -57,22 +72,19 @@ export default {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-
   padding-top: 10px;
   width: 100%;
   height: 100%;
 
   .top {
     display: flex;
-
+    margin: 5px 0px 20px 15px;
-    margin-bottom: 10px;
     width: 100%;
     height: 27px;
 
     .top-item {
       display: grid;
       place-items: center;
-
       width: 64px;
       height: 100%;
       margin-right: 5px;
@@ -83,70 +95,30 @@ export default {
       }
     }
   }
-
+  .swiper{
-  .bottom.list {
+    .swiper1{
-    width: 100%;
+      height: 80%;
-    height: calc(100% - 27px);
+      width: 96%;
-   
-    display: flex;
-    flex-direction: column;
-    color: #fff;
-
-    .list-item {
       position: relative;
-      display: flex;
-      box-sizing: border-box;
-      border-left: 4px solid #66d3d8;
-      margin-bottom: 5px;
-      padding: 7px 0;
-      width: 100%;
-      background-image: linear-gradient(to right, #3b7589, #182337);
-      font-size: 14px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.3s;
-      white-space: nowrap;
       
-      &:hover {
+      p{
-        padding: 20px 0;
+        width: 100%;
-        &::before {
+        height: 25px;
-          content: '';
+        line-height: 25px;
         position: absolute;
-          top: 50%;
+        background-color: rgba(0,0,0,0.55);
-          left: 8px;
-          display: inline-block;
-          transform: translate(0, -50%);
-          width: 6.6px;
-          height: 11.6px;
-          background-image: url('../assets/images/command-center/triangle.png');
-          background-size: 100% 100%;
-          transition: all .3s;
       }
+      ::v-deep .swiper-pagination-bullet-active{
+        background: #fff;
       }
+      ::v-deep .swiper-button-prev:after{
+        color:#fff;
+        font-size: 5px;
         
-      &:hover .value {
-        color: #c2805f;
       }
-
+      ::v-deep .swiper-button-next:after{
-      &:last-child {
+        color:#fff;
-        margin-bottom: 0;
+        font-size: 5px;
-      }
-
-      .label,
-      .value {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .label {
-        box-sizing: border-box;
-        width: 100%;
-        padding-left: 20px;
-      }
-
-      .value {
-        width: 60%;
       }
     }
   }

src/views/projectAdmin/fourEngin/command/rightThree.vue

@@ -1,38 +1,11 @@
 <template>
-  <Card title="环境监测">
+  <Card title="疫情播报">
     <div class="container">
-      <div class="left list">
+      <div class="content" v-for="(item,index) in list" :key="index">
-        <div class="list-item" v-for="(item, key) in leftList" :key="key">
+        <p class="time">{{item.time}}</p>
-          <div class="image">
+        <p class="value">
-            <img :src="item.image" />
+          <a :href= item.href target="_blank">{{item.value}}</a>
-          </div>
+        </p>
-          <div class="value">
-            <div class="number">{{ item.value }}</div>
-            <span class="unit">{{ item.unit }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="right list">
-        <el-row class="list-item" type="flex" justify="space-between" align="middle" v-for="(item, key) in rightList" :key="key">
-          <el-col :span="6">
-            <img style="width: 18px;" :src="item.image" />
-          </el-col>
-          <el-col :span="8">
-            <div class="label">{{ item.label }}</div>
-          </el-col>
-          <el-col :span="10">
-            <el-row
-              class="value"
-              type="flex"
-              justify="center"
-              align="middle"
-              :style="{ color: item.color, backgroundImage: `url('${item.valueBackgroundImage}')` }"
-            >
-              <span class="number">{{ item.value }}</span>
-              <span class="unit">{{ item.unit }}</span>
-            </el-row>
-          </el-col>
-        </el-row>
       </div>
     </div>
   </Card>
@@ -44,44 +17,23 @@ export default {
   components: { Card },
   data() {
     return {
-      // 左边的列表
+      list:[
-      leftList: {
+        {time:'10月14日 11:29',value:'2022年10月13日广州市新冠肺炎疫情情况-广州本地宝',
-        'PM2.5': { label: 'PM2.5', value: 68, unit: 'μg/m³', image: require('../assets/images/command-center/icon-pm25.png') },
+          href:'http://gz.bendibao.com/news/20221014/content326288.shtml'
-        'PM10': { label: 'PM10', value: 36, unit: 'μg/m³', image: require('../assets/images/command-center/icon-pm10.png') },
-        '噪音': { label: '噪音', value: 13, unit: '%dB', image: require('../assets/images/command-center/icon-noise.png') }
         },
-      // 右边的列表
+        {time:'10月14日 09:14',value:'10月13日广州新增本土确诊25例和无症状3例(含12例无症状确诊)',
-      rightList: {
+          href:'http://gz.bendibao.com/news/20221014/content326265.shtml'
-        temperature: { label: '温度', value: 22, unit: '℃', image: require('../assets/images/command-center/icon-temperature.png') },
-        humidity: { label: '湿度', value: 16, unit: 'RH', image: require('../assets/images/command-center/icon-humidity.png') },
-        windSpeed: {
-          label: '风速',
-          value: 60,
-          unit: 'km/h',
-          image: require('../assets/images/command-center/icon-windSpeed.png'),
-          color: '#f66629',
-          valueBackgroundImage: require('../assets/images/command-center/block3.png')
         },
-        windDirection: {
+        // {time:'10月13日 11:32',value:'2022年10月12日广州市新冠肺炎疫情情况-广州本地宝',
-          label: '风向',
+        //   href:'http://gz.bendibao.com/news/20221013/content326216.shtml'
-          value: '东南',
+        // },
-          unit: '风',
+      ]
-          image: require('../assets/images/command-center/icon-windDirection.png')
-        },
-        barometricPressure: {
-          label: '大气压',
-          value: 101,
-          unit: 'KPa',
-          image: require('../assets/images/command-center/icon-barometricPressure.png')
-        }
-      }
     }
   },
   created() {
-    this.getList()
+   
   },
   methods: {
-    getList() {},
   }
 }
 </script>
@@ -89,92 +41,59 @@ export default {
 <style lang="less" scoped>
 .container {
   box-sizing: border-box;
-
+  // padding: 16px 0px;
-  display: flex;
-
-  padding: 16px;
   width: 100%;
   height: 100%;
-
+  overflow: auto;
-  .left,
+  .content{
-  .right {
+    margin-top: 10px;
-    width: 50%;
+    width: 100%;
-    height: 100%;
+    height: 65px;
+    .time{
+      padding:0px 0px 5px 5px;
+      color:rgba(255, 255, 255, 0.65)
     }
-
+    a{
-  .left.list {
+      text-decoration: none;
-    display: flex;
+      color:rgb(255,255,255);
-    flex-direction: column;
-    justify-content: space-between;
-
-    .list-item {
-      display: flex;
-      justify-content: space-between;
-
-      height: calc(100% / 3.5);
-
-      .image {
-        width: 18px;
-        margin-right: 20px;
     }
-
-      .label {
-        box-sizing: border-box;
-
-        display: grid;
-        place-items: center;
-        padding: 0 5px;
-        width: 55px;
-        height: 20px;
-        box-sizing: border-box;
-        letter-spacing: 1px;
-      }
-
     .value {
+      position: relative;
       box-sizing: border-box;
-        padding-right: 20px;
+      border-left: 4px solid #66d3d8;
+      margin-bottom: 3px;
+      padding: 10px 5px;
+      width: 100%;
+      background-image: linear-gradient(to right, #3b7589, #182337);
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      color:rgb(255, 255, 255);
+      transition: all 0.3s;
+      white-space: nowrap;
 
-        flex: 1;
+      &:hover {
-        display: flex;
+        margin-top: 2px;
-        justify-content: space-between;
+        margin-bottom: 5px;
-        align-items: center;
+        padding: 15px 0;
-
+        padding-left: 20px;
-        .number {
+        &::before {
-          display: grid;
+          content: '';
-          place-items: center;
+          position: absolute;
-
+          top: 50%;
-          width: 77px;
+          left: 6px;
-          height: 44px;
+          display: inline-block;
-          font-size: 30px;
+          transform: translate(0, -50%);
-          background-image: url('../assets/images/command-center/block2.png');
+          width: 8px;
-        }
+          height: 14px;
-
+          background-image: url('../assets/images/command-center/triangle.png');
-        .unit {
+          background-size: 100% 100%;
-          font-size: 18px;
+          transition: all .3s;
-          color: #b2b4be;
-          font-weight: bold;
-        }
         }
       }
     }
 
-  .right.list {
+  }
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
   
-    .el-row.value {
-      width: 65px;
-      height: 21px;
-      .number {
-        margin-right: 5px;
-      }
-    }
-  }
-}
-
-::v-deep .el-col {
-  display: grid;
-  place-items: center;
 }
 </style>

src/views/projectAdmin/fourEngin/command/rightTwo.vue

@@ -48,7 +48,14 @@ export default {
         noRectificationNum: undefined, // 未整改数量
         totalNum: undefined, // 总数量
       },
-      list: []
+      list: [
+        {dangerName:'防水'},
+        {dangerName:'门窗'},
+        {dangerName:'钢结构工程'},
+        {dangerName:'建筑装饰装修'},
+        {dangerName:'主体结构'},
+        {dangerName:'建筑电气'},
+      ]
     }
   },
   created() {
@@ -84,7 +91,7 @@ export default {
     getList() {
       listQualityManagement({ projectSn: this.projectSn }).then(res => {
         console.log('质量问题库: ', res);
-        this.list = res.result;
+        // this.list = res.result;
       })
     },
     /** 初始化chart */
@@ -92,26 +99,26 @@ export default {
       const myChart = echarts.init(this.$refs.chart)
 
       const option = {
-        backgroundColor: '#182337',
+        backgroundColor: '#182337', //整个背景图色
         tooltip: {
           trigger: 'item'
         },
         title: {
           text: '质量问题数',
-          left: '48%',
+          left: '40%',
           top: '55%',
           textAlign: 'center',
           textStyle: {
             fontSize: '14',
             color: '#8f929b',
-            fontWeight: '400'
+            fontWeight: '400',
           }
         },
         series: [
           {
             type: 'pie',
-            radius: ['60%', '53%'],
+            radius: ['70%', '63%'],
-            center: ['50%', '50%'],
+            center: ['40%', '50%'],
             hoverAnimation: false,
             label: {
               normal: {
@@ -163,8 +170,8 @@ export default {
             type: 'pie',
             hoverAnimation: false,
             legendHoverLink: false,
-            radius: ['47%', '45%'],
+            radius: ['57%', '55%'],
-            center: ['50%', '50%'],
+            center: ['40%', '50%'],
             color: ['#182337', '#60d3d0'],
             label: {
               normal: {
@@ -210,7 +217,7 @@ export default {
   height: 100%;
 
   > .left {
-    width: 50%;
+    width: 40%;
     height: 100%;
   }
 

yarn.lock

@@ -4192,6 +4192,13 @@
   "resolved" "https://registry.npmmirror.com/dom-to-image/-/dom-to-image-2.6.0.tgz"
   "version" "2.6.0"
 
+"dom7@^2.1.5":
+  "integrity" "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA=="
+  "resolved" "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz"
+  "version" "2.1.5"
+  dependencies:
+    "ssr-window" "^2.0.0"
+
 "domain-browser@^1.1.1":
   "integrity" "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
   "resolved" "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz"
@@ -10000,6 +10007,11 @@
     "safer-buffer" "^2.0.2"
     "tweetnacl" "~0.14.0"
 
+"ssr-window@^2.0.0":
+  "integrity" "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+  "resolved" "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz"
+  "version" "2.0.0"
+
 "ssri@^6.0.1":
   "integrity" "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA=="
   "version" "6.0.1"
@@ -10394,6 +10406,14 @@
     "unquote" "~1.1.1"
     "util.promisify" "~1.0.0"
 
+"swiper@^5.2.0":
+  "integrity" "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA=="
+  "resolved" "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz"
+  "version" "5.4.5"
+  dependencies:
+    "dom7" "^2.1.5"
+    "ssr-window" "^2.0.0"
+
 "tapable@^0.2.7":
   "integrity" "sha512-2wsvQ+4GwBvLPLWsNfLCDYGsW6xb7aeC6utq2Qh0PFwgEy7K7dsma9Jsmb2zSQj7GvYAyUGSntLtsv++GmgL1A=="
   "resolved" "https://registry.npmmirror.com/tapable/-/tapable-0.2.9.tgz"
@@ -10965,6 +10985,11 @@
   "resolved" "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz"
   "version" "1.1.2"
 
+"vue-awesome-swiper@4.0":
+  "integrity" "sha512-yzp93S1DBucR16ouzKn7QBQojqGX6yHPEuVIioYp4U4Eyk0rxe0RRVQcUnZXi05bM5MwCvCKXtgaY31N5tTi7g=="
+  "resolved" "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-4.0.4.tgz"
+  "version" "4.0.4"
+
 "vue-cli-plugin-element@~1.0.1":
   "integrity" "sha512-OJSOnJtn7f1v/8xX+MJae+RrE8WguhiiG9QTBx/MNOPXYsxqut6Ommo+ZD3raNc7eryhqdM2T/DlMfdvIKpCtw=="
   "resolved" "https://registry.npmmirror.com/vue-cli-plugin-element/-/vue-cli-plugin-element-1.0.1.tgz"