邓洁 : 首屏修改

src/components/content/badGasInfo/BadGasInfo.vue

@@ -4,16 +4,20 @@
     <div class="info-list">
       <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" @click="handleOpenChart"/>
     </div>
-    <el-dialog v-model="isVisited" title="1号有害气体监控数据" width="958px" :modal="false">
+    <el-dialog v-model="isVisited" title="有害气体监控数据" width="1996px" :modal="false">
       <div class="left-icon"></div>
       <div class="right-icon"></div>
+      <div id="container" ref="chart" @click.stop></div>
+      <div class="time-select">
 
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
 import GasInfoItem from "./childComps/GasInfoItem.vue";
+import * as echarts from 'echarts';
 
 const props = defineProps({
   list: Array,
@@ -21,21 +25,27 @@ const props = defineProps({
 });
 const isVisited = ref(false);
 const badGasList = ref([])
+const chart = ref(null);
+let myEcharts = reactive({});
 const option = reactive({
   //图例
   legend: {
-    data: [],
+    left: 0,
-    selected: {},
+    textStyle:{
-    selectedMode: false
+      color:'#FFFFFF',
+      fontSize:28
+    },
+    // itemWidth: 20,
+    // itemHeight: 20
   },
   //离容器四侧的距离
-  // grid: {
+  grid: {
-  //   left: 40, // 左边距
+    left: 45, // 左边距
-  //   right: 60, // 右边距
+    // right: 60, // 右边距
-  //   top: 40, // 顶边距
+    top: 60, // 顶边距
-  //   bottom: 20, // 底边距
+    bottom: 40, // 底边距
-  //   // containLabel: true,
+    // containLabel: true,
-  // },
+  },
   //提示框组件
   tooltip: {
     show: true,
@@ -43,27 +53,79 @@ const option = reactive({
   },
   //X轴
   xAxis: {
-    name: '',
     type: 'category',
-    data: [],
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    axisLine: {
+    axisLabel: {
-      show: true
+      textStyle: {
-    }
+        fontSize: 24,
+        color:'#D6F1FA'
+      },
+    },
   },
   //Y轴
   yAxis: {
-    name: '',
     type: 'value',
-    data: [],
+
-    axisLine: {
+    axisLabel: {
-      show: true
+      textStyle: {
-    }
+        fontSize: 24,
-  },
+        color:'#D6F1FA'
-  radar: {
+      },
-    // shape: 'circle',
+    },
   },
   //配置项
-  series: []
+  series: [
+    {
+      name: '二氧化碳',
+      data: [5, 9, 10, 7, 8, 15, 12],
+      type: 'line',
+      smooth: true,
+      symbolSize:24,
+      lineStyle:{
+        width:5
+      }
+    },
+    {
+      name: '一氧化碳',
+      data: [8, 15, 5, 9, 10, 7, 12],
+      type: 'line',
+      smooth: true,
+      symbolSize:24,
+      lineStyle:{
+        width:5
+      }
+    },
+    {
+      name: '二氧化氮',
+      data: [5, 15, 1, 9, 10, 7, 8],
+      type: 'line',
+      smooth: true,
+      symbolSize:24,
+      lineStyle:{
+        width:5
+      }
+    },
+    {
+      name: '二氧化硫',
+      data: [8, 15, 12, 5, 9, 2, 7],
+      type: 'line',
+      smooth: true,
+      symbolSize:24,
+      lineStyle:{
+        width:5
+      }
+    },
+    {
+      name: '硫化氢',
+      data: [2, 9, 10, 15, 12, 7, 8,],
+      type: 'line',
+      smooth: true,
+      symbolSize:24,
+      lineStyle:{
+        width:5
+      }
+    },
+  ]
 })
 
 watch(() => props.list, (now) => {
@@ -79,6 +141,13 @@ watch(() => props.list, (now) => {
 watch(() => props.badGasData, (now) => {
   getBadGasInfo(now.sensorList)
 }, {deep: true});
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+  })
+})
+
 const getBadGasInfo = (now) => {
   let windPressureObj = {}
   let windPressureArr = []
@@ -103,15 +172,37 @@ const changeData = (item) => {
 const handleOpenChart = () => {
   console.log('有害气体弹窗')
   isVisited.value = true
+  initChart()
 }
+/**
+ * 初始化echarts实例方法
+ */
+const initChart = () => {
+  //3.初始化container容器
+  myEcharts = echarts.init(chart.value);
+  //5.传入数据
+  myEcharts.setOption(option, true);
+  //图表大小自适应窗口大小变化
+  window.onresize = () => {
+    myEcharts.resize();
+  }
+}
+
 </script>
 
 <style lang="scss" scoped>
+#container {
+  box-sizing: border-box;
+  height: 754px;
+  width: 1996px;
+  margin: 0 auto;
+}
+
 :deep(.el-dialog) {
   border: 2px solid #0F82AF;
   background: rgba(6, 34, 71, 0.78);
   border-radius: 20px;
-  padding: 47px 20px;
+  padding: 47px 30px;
   box-sizing: border-box;
   margin: 588px auto 0 auto;
 
@@ -158,7 +249,16 @@ const handleOpenChart = () => {
     background-image: url(@/assets/images/badGasInfo/sp_jz.png);
     transform: rotate(90deg);
   }
-
+.time-select{
+  position: absolute;
+  top: 47px;
+  right: 119px;
+  //display: flex;
+  width: 204px;
+  height: 68px;
+  border-radius: 10px;
+  border: 2px solid #0F82AF;
+}
   .title {
     width: 128px;
     height: 45px;

src/components/content/badGasInfo/childComps/GasInfoItem.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { defineProps, ref, reactive, watch, onMounted } from "vue";
+import { defineProps, ref, watch, onMounted } from "vue";
 import * as Echarts from "echarts";
 let e_info;
 let params = defineProps({

src/components/content/fanInfo/FanInfo.vue

@@ -98,6 +98,53 @@
           </div>
         </div>
       </div>
+      <div class="fan-item">
+        <!-- echarts -->
+        <div class="echart" ref="info3"></div>
+        <!-- 风机名称 -->
+        <div class="fan-name">三号风机</div>
+        <!-- 功能 -->
+        <div class="option-nav">
+          <div class="state" :class="{ 'blue-state': isStartTwo }">
+            <div :class="{ stopColor: !stateTwo }">
+              <div :style="{ backgroundImage: 'url(' +getImageUrl(stateIconTwo)+')' }" class="state-icon"></div>
+              状态：{{ stateTwo ? '运行' : '故障' }}
+            </div>
+            <div class="switch">
+              <div
+                  :class="{ active: isStartTwo }"
+                  @click="isStartTwo = true"
+              >
+                启动
+              </div>
+              <div
+                  :class="{ active: !isStartTwo }"
+                  @click="isStartTwo = false"
+              >
+                停止
+              </div>
+            </div>
+          </div>
+          <div class="power">
+            <div class="check-box">
+              <el-radio-group v-model="isSAuto2" class="radio-group">
+                <el-radio label="true">自动</el-radio>
+                <el-radio label="false">手动</el-radio>
+              </el-radio-group>
+            </div>
+            <div class="edit-power">
+              <span style="color: white">当前功率</span>
+              <span class="units"
+              ><input
+                  type="number"
+                  min="0"
+                  v-model="powerThree"
+                  :disabled="isSAuto2 === 'true'"
+              /></span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -112,6 +159,7 @@ const props = defineProps({
 //当前功率
 const powerOne = ref()
 const powerTwo = ref()
+const powerThree = ref(555)
 //状态
 const stateOne = ref()
 const stateTwo = ref()
@@ -128,8 +176,11 @@ let Echarts_info1 = null;
 // 二号风机实例
 const info2 = ref(null);
 let Echarts_info2 = null;
+const info3 = ref(null);
+let Echarts_info3 = null;
 let fan01_option = reactive();
 let fan02_option = reactive();
+let fan03_option = reactive();
 
 watch(() => props.fanData, (now) => {
   getBasicData(now.frequencyChangerList)
@@ -410,6 +461,119 @@ const handleOnMounted = () => {
     ],
   }
   Echarts_info2.setOption(fan02_option);
+  //三号风机
+  Echarts_info3 = echarts.init(info3.value);
+  fan03_option = {
+    series: [
+      {
+        type: "gauge",
+        startAngle: -120,
+        endAngle: -420,
+        pointer: {
+          show: false,
+        },
+        progress: {
+          show: true,
+          overlap: false,
+          roundCap: true,
+          clip: false,
+          itemStyle: {
+            borderWidth: 10,
+            borderColor: {
+              type: "linear",
+              x: 0,
+              y: 1,
+              x2: 0,
+              y2: 0,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "#4BB10E", // 0% 处的颜色
+                },
+                {
+                  offset: 0.25,
+                  color: "#B1AD0E", // 100% 处的颜色
+                },
+                {
+                  offset: 0.75,
+                  color: "#B1880E", // 100% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "#D77E01", // 100% 处的颜色
+                },
+              ],
+              global: false, // 缺省为 false
+            },
+            color: {
+              type: "linear",
+              x: 0,
+              y: 1,
+              x2: 0,
+              y2: 0,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "#4BB10E", // 0% 处的颜色
+                },
+                {
+                  offset: 0.25,
+                  color: "#B1AD0E", // 100% 处的颜色
+                },
+                {
+                  offset: 0.75,
+                  color: "#B1880E", // 100% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: "#D77E01", // 100% 处的颜色
+                },
+              ],
+              global: false, // 缺省为 false
+            }
+          },
+        },
+        max: 1000,
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: true,
+          splitNumber: 1,
+          length: 10,
+        },
+        axisLabel: {
+          show: false,
+        },
+        data: [
+          {
+            value: powerThree.value,
+            fontSize: 2100,
+            detail: {
+              valueAnimation: true,
+              offsetCenter: ["0%", "0%"],
+              fontSize: 40,
+              color: "white",
+            },
+          },
+        ],
+        axisLine: {
+          lineStyle: {
+            width: 3,
+            color: [[1, "#155F7C"]],
+          },
+        },
+        detail: {
+          width: 100,
+          height: 14,
+          fontSize: 26,
+          color: "inherit",
+          formatter: "{value}",
+        },
+      },
+    ],
+  }
+  Echarts_info3.setOption(fan03_option);
 }
 
 const getImageUrl = (name) => {
@@ -463,18 +627,17 @@ input[type="number"] {
 }
 
 #fan_info {
-  height: 521px;
+  height: 795px;
   width: 830px;
   position: absolute;
   z-index: 100;
   top: 184px;
   left: 68px;
   padding: 10px;
-
   background-image: url(../../../assets/images/fanInfo/bg.png);
   //clip-path: polygon(0% 0%, 40% 0%, 48% 15%, 100% 15%, 100% 100%, 0% 100%);
   color: #2fb0df;
-
+box-sizing: border-box;
   .title {
     width: 40%;
     text-align: left;
@@ -491,7 +654,7 @@ input[type="number"] {
     height: calc(100% - 30px);
 
     .fan-item {
-      height: 50%;
+      height: 33.3%;
       display: flex;
       font-size: 14px;
 

src/components/content/transducerList/TransducerList.vue

@@ -52,7 +52,7 @@
           <div class="other-item frequency">
             <div>
               <img
-                  src="@/assets/images/transducer/icon2.png"
+                  src="@/assets/images/transducer/icon1.png"
                   alt=""
               /><span>给定频率:{{ item.frequencySetting }}HZ</span>
             </div>
@@ -120,6 +120,20 @@ const getBasicData = (data) => {
     stateC.value=item.phaseCurrentC>item.phaseCurrentCThreshold
     tranArr.push(tranObj)
   })
+  //mock数据
+ let newObj = {
+    equipmentId: 0,
+    equipmentName:'3号变频器',
+    phaseCurrentA: 210,
+    phaseCurrentAThreshold: 200,
+    phaseCurrentB: 231,
+    phaseCurrentBThreshold: 300,
+    phaseCurrentC: 154,
+    phaseCurrentCThreshold:200,
+    frequencySetting: 23,
+    frequencyFeedback: 34,
+  }
+  tranArr.push(newObj)
   transducerData.value = tranArr
 }
 </script>
@@ -128,7 +142,7 @@ const getBasicData = (data) => {
 #transducer-list {
   color: rgb(226, 26, 26);
   position: absolute;
-  top: 744px;
+  top: 1015px;
   left: 70px;
   width: 826px;
   height: 928px;

src/components/content/usedEle/UsedEle.vue

@@ -1,23 +1,13 @@
 <template>
   <div id="used-ele">
-    <div class="title">用电量</div>
     <div class="content">
-      <div class="item" v-for="item in eleData" :key="item.equipmentId">
+      <div class="item">
-        <div class="name">{{ item.equipmentName }}</div>
+        <div></div>
-        <ul>
+        <span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
-          <li>
+      </div>
-            <div></div>
+      <div class="item">
-            <span>总用电量：{{ item.electricityConsumptionTotal }}v</span>
+        <div></div>
-          </li>
+        <span>当月节省量：{{ monthlySavings }}v</span>
-          <li>
-            <div></div>
-            <span>月用电量：{{ item.electricityConsumptionMonthly }}v</span>
-          </li>
-          <li>
-            <div></div>
-            <span>日用电量：{{ item.electricityConsumptionDay }}v</span>
-          </li>
-        </ul>
       </div>
     </div>
   </div>
@@ -29,6 +19,8 @@ const props = defineProps({
   eleData: Array
 });
 const eleData = ref([])
+const electricityConsumptionMonthly=ref()
+const monthlySavings=ref(55555)
 watch(() => props.eleData, (now) => {
   getBasicData(now.frequencyChangerList)
 }, {deep: true});
@@ -37,9 +29,10 @@ watch(() => props.list, (now) => {
     now.forEach(newItem => {
       if (item.equipmentId === newItem.equipmentId) {
         if (newItem.electricityConsumptionDay) {
-          item.electricityConsumptionDay = newItem.electricityConsumptionDay
+          electricityConsumptionMonthly.value=newItem.electricityConsumptionMonthly
-          item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
+          // item.electricityConsumptionDay = newItem.electricityConsumptionDay
-          item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
+          // item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
+          // item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
         }
       }
     })
@@ -49,12 +42,13 @@ const getBasicData = (data) => {
   let tranObj = {}
   let tranArr = []
   data.map(item => {
+    electricityConsumptionMonthly.value=item.electricityConsumptionMonthly,
     tranObj = {
       equipmentId: item.equipmentId,
-      equipmentName: item.equipmentName,
+      // equipmentName: item.equipmentName,
-      electricityConsumptionDay: item.electricityConsumptionDay,
+      // electricityConsumptionDay: item.electricityConsumptionDay,
-      electricityConsumptionMonthly: item.electricityConsumptionMonthly,
+      // electricityConsumptionMonthly: item.electricityConsumptionMonthly,
-      electricityConsumptionTotal: item.electricityConsumptionTotal,
+      // electricityConsumptionTotal: item.electricityConsumptionTotal,
     }
     tranArr.push(tranObj)
   })
@@ -65,10 +59,10 @@ const getBasicData = (data) => {
 <style lang="scss" scoped>
 #used-ele {
   width: 830px;
-  height: 351px;
+  height: 90px;
   color: aliceblue;
   position: absolute;
-  top: 1711px;
+  top: 1980px;
   left: 68px;
   background-image: url(../../../assets/images/usedEle/bg.png);
   padding: 21px 62px 35px 62px;
@@ -84,99 +78,99 @@ const getBasicData = (data) => {
   }
 
   .content {
-    //border: white solid 1px;
-    height: calc(100% - 30px);
     margin-top: 4px;
     display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     .item {
-      flex: 1;
+      height: 37px;
-      font-size: 12px;
+      font-size: 28px;
+      font-family: MicrosoftYaHei;
+      color: #38CAFB;
+      line-height: 37px;
+      display: flex;
+      align-items: center;
 
-      .name {
+      > div {
-        width: 150px;
+        margin-right: 10px;
-        height: 40px;
+        width: 29px;
-        font-size: 30px;
+        height: 33px;
-        font-family: MicrosoftYaHei, MicrosoftYaHei;
+        background-image: url(../../../assets/images/usedEle/white-ele.png);
-        font-weight: bold;
-        color: #ffffff;
-        line-height: 40px;
-        margin: 24px 0px 28px 0px;
       }
 
-      ul {
+      //ul {
-        font-size: 14px;
+      //  font-size: 14px;
-
+      //
-        li {
+      //  li {
-          display: flex;
+      //    display: flex;
-          align-items: center;
+      //    align-items: center;
-          //width: 270px;
+      //    //width: 270px;
-          height: 37px;
+      //    height: 37px;
-          font-size: 28px;
+      //    font-size: 28px;
-          font-family: MicrosoftYaHei;
+      //    color: #38CAFB;
-          color: #cb7c4b;
+      //    line-height: 37px;
-          line-height: 37px;
+      //    margin-bottom: 25px;
-          margin-bottom: 25px;
+      //    padding-left: 5px;
-          padding-left: 5px;
+      //
-
+      //    &:hover {
-          &:hover {
+      //      cursor: pointer;
-            cursor: pointer;
+      //      width: 280px;
-            width: 280px;
+      //      //height: 46px;
-            //height: 46px;
+      //      background: #2E5589;
-            background: #2E5589;
+      //      border-radius: 7px;
-            border-radius: 7px;
+      //      color: #FBF7F4;
-            color: #FBF7F4;
+      //
-
+      //      > div {
-            > div {
+      //        background-image: url(../../../assets/images/usedEle/white-ele.png);
-              background-image: url(../../../assets/images/usedEle/white-ele.png);
+      //      }
-            }
+      //    }
-          }
+      //
-
+      //    > div {
-          > div {
+      //      width: 29px;
-            width: 29px;
+      //      height: 33px;
-            height: 33px;
+      //      background-image: url(../../../assets/images/usedEle/white-ele.png);
-            background-image: url(../../../assets/images/usedEle/icon-all.png);
+      //      margin-right: 14px;
-            margin-right: 14px;
+      //    }
-          }
+      //
-
+      //    &:nth-child(2) {
-          &:nth-child(2) {
+      //      > div {
-            > div {
+      //        background-image: url(../../../assets/images/usedEle/icon-month.png);
-              background-image: url(../../../assets/images/usedEle/icon-month.png);
+      //      }
-            }
+      //
-
+      //      &:hover {
-            &:hover {
+      //        > div {
-              > div {
+      //          background-image: url(../../../assets/images/usedEle/white-ele.png);
-                background-image: url(../../../assets/images/usedEle/white-ele.png);
+      //        }
-              }
+      //      }
-            }
+      //    }
-          }
+      //
-
+      //    &:nth-child(3) {
-          &:nth-child(3) {
+      //      > div {
-            > div {
+      //        background-image: url(../../../assets/images/usedEle/icon-day.png);
-              background-image: url(../../../assets/images/usedEle/icon-day.png);
+      //      }
-            }
+      //
-
+      //      &:hover {
-            &:hover {
+      //        > div {
-              > div {
+      //          background-image: url(../../../assets/images/usedEle/white-ele.png);
-                background-image: url(../../../assets/images/usedEle/white-ele.png);
+      //        }
-              }
+      //      }
-            }
+      //    }
-          }
+      //  }
-        }
+      //
-
+      //  & > :nth-child(2) {
-        & > :nth-child(2) {
+      //    color: #4bcb6b;
-          color: #4bcb6b;
+      //  }
-        }
+      //
-
+      //  & > :nth-child(3) {
-        & > :nth-child(3) {
+      //    color: #4bcbbc;
-          color: #4bcbbc;
+      //  }
-        }
+      //}
-      }
     }
 
-    & > :nth-child(2) {
+    //& > :nth-child(2) {
-      transform: translateX(25px);
+    //  transform: translateX(25px);
-    }
+    //}
   }
 }
 </style>