邓洁 : 修改首屏弹窗样式

2023-12-15 12:58:24 +08:00
parent 15bb5c40e1
commit 32e425a926
5 changed files with 42 additions and 35 deletions
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -5,10 +5,13 @@
      <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" @click="handleOpenChart"/>
    </div>
    <div class="digital-tunnel">
-      <el-dialog v-model="isVisited" title="有害气体监控数据" width="1365px" :modal="false">
+      <el-dialog v-model="isVisited" title="有害气体监控数据" width="2400px" :modal="false">
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
-        <div id="container"></div>
+        <div class="chat-dialog">
+          <div id="container"></div>
+          <div style="width: 1px;"></div>
+        </div>
        <div class="time-select">
          <time-range-btn
              :buttonList="timeList"
@@ -57,11 +60,11 @@ watch(() => props.badGasData, (now) => {
 }, {deep: true});
 const timeSelect = (index) => {
  console.log('选择时间', index)
-  if(index===0){
+  if (index === 0) {
    console.log('--年')
-  }else if(index===1){
+  } else if (index === 1) {
    console.log('--月')
-  }else if(index===2){
+  } else if (index === 2) {
    console.log('--日')
  }
 };
@@ -109,7 +112,7 @@ const initChart = () => {
      left: 0,
      textStyle: {
        color: '#FFFFFF',
-        fontSize: 28
+        fontSize: 40
      },
      // itemWidth: 20,
      // itemHeight: 20
@@ -130,10 +133,10 @@ const initChart = () => {
    //X轴
    xAxis: {
      type: 'category',
-      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00','24:00'],
+      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
      axisLabel: {
        textStyle: {
-          fontSize: 24,
+          fontSize: 45,
          color: '#D6F1FA'
        },
      },
@@ -143,7 +146,7 @@ const initChart = () => {
      type: 'value',
      axisLabel: {
        textStyle: {
-          fontSize: 24,
+          fontSize: 45,
          color: '#D6F1FA'
        },
      },
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -6,13 +6,13 @@
        <!-- echarts -->
        <div class="echart"></div>
        <!-- 风机名 -->
-        <div class="fan-name">{{changeNum(index+1)}}号风机</div>
+        <div class="fan-name">{{ changeNum(index + 1) }}号风机</div>
        <!-- 功能 -->
        <div class="option-nav">
          <div class="state " :class="{ 'blue-state': !item.breakdown }">
            <div :class="{ stopColor: item.breakdown }">
              <div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
-              状态：{{ item.breakdown ? '故障':'运行' }}
+              状态：{{ item.breakdown ? '故障' : '运行' }}
            </div>
            <div class="switch">
              <div
@@ -73,8 +73,8 @@ watch(() => props.list, (now) => {
  socketData.value.forEach(item => {
    now.forEach(newItem => {
      if (item.equipmentId === newItem.equipmentId) {
-        if(newItem.frequencyFeedback){
-          item.frequencyFeedback= newItem.frequencyFeedback
+        if (newItem.frequencyFeedback) {
+          item.frequencyFeedback = newItem.frequencyFeedback
        }
      }
    })
@@ -82,9 +82,9 @@ watch(() => props.list, (now) => {
  handleOnMounted()
 }, {deep: true});

-onMounted(async () => {
+onMounted(() => {
  setTimeout(() => {
-    nextTick(()=>{
+    nextTick(() => {
      handleOnMounted()
    })
  }, 100);
@@ -97,7 +97,7 @@ const getImage = (type) => {
      return "red-state-icon.png";
  }
 }
-const changeNum=(index)=>{
+const changeNum = (index) => {
  switch (index) {
    case 1:
      return '一';
@@ -125,7 +125,7 @@ const getBasicData = (data) => {

 const handleOnMounted = () => {
  const chart = document.getElementsByClassName('echart');
-  for(let i = 0; i < chart.length; i++ ){
+  for (let i = 0; i < chart.length; i++) {
    Echarts_info1 = echarts.init(chart[i]);
    fan01_option = {
      series: [
@@ -237,12 +237,12 @@ const handleOnMounted = () => {
        },
      ],
    }
-    fan01_option &&  Echarts_info1.setOption(fan01_option);
+    fan01_option && Echarts_info1.setOption(fan01_option);
  }
 }

 const getImageUrl = (name) => {
-  let icon=getImage(name)
+  let icon = getImage(name)
  return new URL(`../../../assets/images/fanInfo/${icon}`, import.meta.url).href
 }
 </script>
@@ -303,7 +303,8 @@ input[type="number"] {
  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;
+  box-sizing: border-box;
+
  .title {
    width: 40%;
    text-align: left;
--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/src/components/content/windPressure/WindPressureList.vue
@@ -5,10 +5,13 @@
      <wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item" :index="index+1" @click="handleOpenChart(index+1)"/>
    </div>
    <div class="digital-tunnel">
-      <el-dialog v-model="isVisited" :title="windSort+'号风压监控数据'" width="1365px" :modal="false">
+      <el-dialog v-model="isVisited" :title="windSort+'号风压监控数据'" width="2400px" :modal="false">
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
-        <div id="container"></div>
+        <div class="chat-dialog">
+          <div id="container"></div>
+          <div style="width: 1px;"></div>
+        </div>
        <div class="time-select">
          <time-range-btn
              :buttonList="timeList"
@@ -96,7 +99,7 @@ const initChart = () => {
      left: 0,
      textStyle: {
        color: '#FFFFFF',
-        fontSize: 28
+        fontSize: 40
      },
      // itemWidth: 20,
      // itemHeight: 20
@@ -120,7 +123,7 @@ const initChart = () => {
      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00','24:00'],
      axisLabel: {
        textStyle: {
-          fontSize: 24,
+          fontSize: 45,
          color: '#D6F1FA'
        },
      },
@@ -130,7 +133,7 @@ const initChart = () => {
      type: 'value',
      axisLabel: {
        textStyle: {
-          fontSize: 24,
+          fontSize: 45,
          color: '#D6F1FA'
        },
      },
--- a/src/components/timeRangeBtn/index.vue
+++ b/src/components/timeRangeBtn/index.vue
@@ -47,16 +47,16 @@ watchEffect(() => {

 <style scoped lang="scss">
 .time-range-group {
-  width: 204px;
-  height: 68px;
+  //width: 254px;
+  //height: 78px;
  border: 2px solid #0F82AF;
  border-radius: 10px;
  background: #062247;
  display: flex;
-  font-size: 28px;
+  font-size: 40px;
  .time-range-button {
    cursor: pointer;
-    padding: 15px 20px;
+    padding: 18px 24px;
    box-sizing: border-box;
    color: #FFFFFF;
    &.time-range-button-active {