邓洁: 优化界面

2024-01-02 22:41:31 +08:00
parent c730283e78
commit 073ec5c570
10 changed files with 151 additions and 131 deletions
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/src/components/content/airInfo/AirInfo.vue
@@ -1,21 +1,19 @@
 <template>
  <div id="air-info">
-    <div class="fan-speed">
+    <div style="height: 21px" v-if="airList.length!==0"></div>
+    <div class="fan-speed" v-if="windSpeed!==0">
      <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
      <div class="fan-info" @click="handleOpenChart">
        <div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div>
      </div>
    </div>
    <item-info
-        v-for="item in airList"
-        :key="item.equipmentId"
+        v-for="(item,index) in airList"
+        :key="index"
        :wp="item"
-        :icon="item.icon"
-        :name="item.name"
-        :unit="item.unit"
        @click="handleOpenAirChart(item)"
    />
-
+    <div style="height: 1px" v-if="airList.length!==0"></div>
    <div class="digital-tunnel">
      <el-dialog :close-on-click-modal="false" v-model="isWindSpeedVisited" :title="'风速监控数据'" width="2175px"
                 :modal="false">
@@ -72,7 +70,7 @@ const props = defineProps({
  list: Array,
  airData: Array
 });
-const windSpeed = ref('')
+const windSpeed = ref(0)
 const windSpeedId = ref(0)
 const airTitle = ref('')
 const airList = ref([])
@@ -81,6 +79,7 @@ const selectTimeButton = ref(2);
 const isWindSpeedVisited = ref(false);
 const isAirVisited = ref(false);
 watch(() => props.list, (now) => {
+  console.log('props.list', now)
  airList.value?.forEach(item => {
    now.forEach(newItem => {
      if (item.equipmentId === newItem.equipmentId) {
@@ -378,26 +377,27 @@ const initAirChart = (type, values) => {

 <style lang="scss" scoped>
 #air-info {
-  position: absolute;
+  //min-height: 350px;
+  margin-top: 40px;
+  //position: absolute;
  z-index: 100;
  width: 824px;
  //height: 400px;
-  top: 1003px;
-  right: 72px;
+  //top: 1003px;
+  //right: 72px;
  background-image: url(@/assets/images/airInfo/bg.png);
-  padding: 25px 20px 0 21px;
+  //padding: 25px 20px 1px 21px;

  .fan-speed {
+    box-sizing: border-box;
    display: flex;
    //height: 40px;
    font-size: 30px;
-    font-family: MicrosoftYaHei;
    color: #ffffff;
-    line-height: 40px;
    align-items: center;
    padding: 5px 0 5px 15px;
    margin-bottom: 25px;
-
+    margin-left: 21px;
    &:hover {
      //width: 790px;
      background: #2E5589;
--- a/src/components/content/airInfo/childComps/ItemInfo.vue
+++ b/src/components/content/airInfo/childComps/ItemInfo.vue
@@ -1,45 +1,38 @@
 <template>
-  <div id="item-info">
+  <div id="item-info" v-if="params.wp!==undefined">
    <div class="label">
      <div :style="{ backgroundImage: 'url(' +getImageUrl(windIcon)+')' }" class="wind-icon"></div>
-      <span>{{ params.name }}</span>
+      <span>{{ params.wp.name }}</span>
    </div>
    <div class="container" ref="length">
      <div class="value" ref="value"></div>
      <div id="point" ref="point"></div>
    </div>
    <div class="value-num" :class="{ warning: isWaring }">
-      {{ valueAndUnit }}
+      {{ params.wp.value }} {{ params.wp.unit }}
    </div>
  </div>
 </template>

 <script setup>
 const params = defineProps({
-  wp: Object,
-  icon: String,
-  name: String,
-  unit: String,
+  wp: Object
 });
-// const info = {
-//   windPId: 0, //编号
-//   max: 120, //最大值
-//   value: 40, //测量值
-//   point: 60, //阈值
-// };
-const windIcon = reactive(params.icon);
+
+const windIcon = ref();
 const length = ref(null);
 const value = ref(null);
 const point = ref(null);
-onMounted(handleOnMounted);
-
-function handleOnMounted() {
-  setValue();
-}
-
-watch(() => params.wp.value, () => {
-  setValue();
-});
+const isWaring = ref();
+// watch(() => params.wp.value, () => {
+//   setValue();
+// });
+onMounted(() => {
+  if (params.wp !== undefined) {
+    setValue();
+    windIcon.value = params.wp.icon
+  }
+})
 const getImageUrl = (name) => {
  return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
 }
@@ -55,23 +48,25 @@ const setValue = () => {
    value.value.style.background =
        "linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
  }
+  isWaring.value = params.wp.value >= params.wp.point;
 }
-let isWaring = computed(() => {
-  return params.wp.value >= params.wp.point;
-});
+// let isWaring = computed(() => {
+//   return params.wp.value >= params.wp.point;
+// });

-const valueAndUnit = computed(() => params.wp.value + " "+ params.unit );
 </script>

 <style lang="scss" scoped>
 #item-info {
  display: flex;
  align-items: center;
-  width: 100%;
+  width: 790px;
  padding: 5px 14px;
-  margin-bottom: 30px;
+  margin-bottom: 25px;
+  margin-left: 21px;

  &:hover {
+    width: 790px;
    background: #2E5589;
    border-radius: 6px;

--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -3,7 +3,10 @@
      id="bad-gas-info"
      :style="{ backgroundImage: 'url(' + getImageUrl(bgImage) + ')' }">
    <div class="title">有害气体</div>
-    <div class="info-list">
+    <div v-if="badGasList==null||badGasList.length===0" class="showNull">
+      暂无数据~
+    </div>
+    <div v-else class="info-list">
      <gas-info-item
          v-for="item in badGasList"
          :key="item.equipmentId"
@@ -11,7 +14,6 @@
          @click="handleOpenChart"
      />
    </div>
-
    <div class="digital-tunnel">
      <el-dialog
          :close-on-click-modal="false"
@@ -355,32 +357,31 @@ const initChart = (type, values) => {

 <style lang="scss" scoped>
 #bad-gas-info {
+  margin-top:40px;
  cursor: pointer;
-  position: absolute;
+  //position: absolute;
  width: 824px;
+  min-height: 300px;
  //height: 621px;
-  top: 1441px;
-  right: 72px;
+  //top: 1441px;
+  //right: 72px;
  background-image: url(../../../assets/images/badGasInfo/bg.png);
-
+  padding: 22px 17px 25px 50px;
  .title {
-    width: 128px;
-    height: 45px;
-    font-size: 32px;
-    font-family: PingFang-SC, PingFang-SC;
+    font-size: 38px;
    font-weight: 800;
    color: #38cafb;
    line-height: 45px;
-    margin: 22px 0px 0px 62px;
+    //margin: 22px 0px 0px 62px;
  }

  .info-list {
    width: 100%;
-    height: calc(621px - 45px - 22px);
+    //height: calc(621px - 45px - 22px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
-    padding: 10px 0px 0px 10px;
+    padding: 16px 0 0 10px;
  }
 }
 </style>
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -1,7 +1,10 @@
 <template>
  <div id="fan_info">
    <div class="title">风机</div>
-    <div class="fans">
+    <div v-if="socketData==null||socketData.length===0" class="showNull">
+      暂无数据~
+    </div>
+    <div v-else class="fans">
      <div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
        <div>
          <!-- echarts -->
@@ -470,6 +473,7 @@ const initChart = (type, valueA,valueB,valueC) => {
 </script>

 <style lang="scss" scoped>
+
 :deep( .el-radio__input.is-checked + .el-radio__label) {
  color: #38CAFB;
 }
@@ -516,11 +520,12 @@ input[type="number"] {
 #fan_info {
  //height: 1465px;
  //height: 1000px;
+  min-height: 350px;
  width: 830px;
-  position: absolute;
+  //position: absolute;
  z-index: 100;
-  top: 184px;
-  left: 68px;
+  //top: 184px;
+  //left: 68px;
  padding: 10px 10px 20px 10px;
  background-image: url(../../../assets/images/fanInfo/bg.png);
  color: #2fb0df;
@@ -529,8 +534,8 @@ input[type="number"] {
  .title {
    width: 40%;
    text-align: left;
-    padding: 0 0 0 62px;
-    font-size: 32px;
+    padding: 0 0 0 50px;
+    font-size: 38px;
    font-weight: bold;
    color: #38cafb;
    line-height: 42px;
@@ -553,7 +558,7 @@ input[type="number"] {

        .echart {
          height: 270px;
-          width: 30%;
+          width: 34%;
          margin: 0px 0px 0px 10px;
          position: relative;
        }
@@ -659,7 +664,7 @@ input[type="number"] {
              display: flex;
              flex-direction: column;
              justify-content: center;
-              padding: 0 20px;
+              //padding: 0 20px;
              font-size: 28px;
              color: #38cafb;
              line-height: 37px;
--- a/src/components/content/fanInfo/FanInfoItem.vue
+++ b/src/components/content/fanInfo/FanInfoItem.vue
@@ -97,14 +97,14 @@ let isWaringC = computed(() => {
 </script>

 <style lang="scss" scoped>
-.abnormal:hover {
-  background: #9C5252 !important;
-  border-radius: 6px;
-
-  .point {
-    background: #fff !important;
-  }
-}
+//.abnormal:hover {
+//  background: #9C5252 !important;
+//  border-radius: 6px;
+//
+//  .point {
+//    background: #fff !important;
+//  }
+//}

 .wind-pressure-item {
  display: flex;
--- a/src/components/content/usedEle/UsedEle.vue
+++ b/src/components/content/usedEle/UsedEle.vue
@@ -59,7 +59,7 @@ const props = defineProps({
 let myEcharts = reactive({});
 const isVisited = ref(false);
 const eleData = ref([])
-const electricityConsumptionMonthly = ref()
+const electricityConsumptionMonthly = ref(0)
 const monthlySavings = ref(4000)
 const length = ref(null);
 const valueA = ref();
@@ -88,16 +88,18 @@ watch(() => props.list, (now) => {
  })
  setValueA()
 }, {deep: true});
-onMounted(()=>{
+onMounted(() => {
  setValueA()
  setValueB()
 })
-const setValueA=()=> {
+const setValueA = () => {
+  if (electricityConsumptionMonthly.value === 0 || length.value === null) return
  let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 10000;
  valueA.value.style.height = `${width}px`;
 }
-const setValueB=()=> {
-  let width = (4000 * length.value.offsetHeight) / 10000;
+const setValueB = () => {
+  if (monthlySavings.value === 0 || length.value === null) return
+  let width = (monthlySavings.value * length.value.offsetHeight) / 10000;
  valueB.value.style.height = `${width}px`;
 }
 const getBasicData = (data) => {
@@ -234,15 +236,15 @@ const getImageUrl = (name) => {
 }

 #used-ele {
-  //flex:1;
+  margin-top: 40px;
  cursor: pointer;
  width: 830px;
  //height: 373px;
  color: aliceblue;
-  position: absolute;
-  top: 1220px;
+  //position: absolute;
+  //top: 1220px;
  //top: 1680px;
-  left: 68px;
+  //left: 68px;
  background-image: url(../../../assets/images/usedEle/bg.png);
  padding: 21px 62px 35px 62px;

@@ -270,6 +272,7 @@ const getImageUrl = (name) => {
      display: flex;
      flex-direction: column;
      align-items: center;
+
      .container {
        width: 60px;
        height: 210px;
@@ -288,6 +291,7 @@ const getImageUrl = (name) => {
          transition: width 0.5s linear 0s;
        }
      }
+
      > div:nth-child(2) {
        display: flex;

--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/src/components/content/windPressure/WindPressureList.vue
@@ -1,7 +1,10 @@
 <template>
  <div id="wind-pressure">
    <div class="name">风压</div>
-    <div class="list">
+    <div v-if="wpList==null||wpList.length===0" class="showNull">
+      暂无数据~
+    </div>
+    <div v-else class="list">
      <wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item"
                          @click="handleOpenChart(item)"/>
    </div>
@@ -206,21 +209,20 @@ const initChart = (type, values) => {
 #wind-pressure {
  width: 830px;
  //height: 779px;
-  position: absolute;
-  top: 185px;
-  right: 68px;
+  //position: absolute;
+  min-height: 350px;
+  //top: 185px;
+  //right: 68px;
  background-image: url(../../../assets/images/windPressure/bg.png);
-  padding: 22px 17px 0 23px;
+  padding: 22px 17px 1px 23px;

  .name {
-    width: 64px;
-    height: 42px;
-    font-size: 32px;
+    font-size: 38px;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    color: #38cafb;
    line-height: 42px;
-    margin-left: 62px;
+    margin-left: 50px;
    margin-bottom: 38px;
  }
 }