Merge pull request 'dengjie' (#130) from dengjie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/130
2023-12-15 03:11:35 +00:00
parent 549b0f30c8 f238a475e9
commit 0ba608bf29
4 changed files with 78 additions and 190 deletions
--- a/src/assets/images/topAndDown/sp_tb.png
+++ b/src/assets/images/topAndDown/sp_tb.png
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -18,13 +18,13 @@ html, body, #app, .el-container, .el-aside, .el-main {
 }

 .tunnel-title {
-  width: 2330px;
-  height: 156px;
+  width: 1718px;
+  height: 146px;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 50%;
-  margin-left: -1165px;
+  margin-left: -859px;
  background-image: url('../images/topAndDown/sp_tb.png');
 }

@@ -247,29 +247,36 @@ html, body, #app, .el-container, .el-aside, .el-main {

 //弹窗样式
 .digital-tunnel {
-  #container {
-    height: 650px;
-    width: 1300px;
-  }

-  #containerEle {
-    height: 564px;
-    width: 1300px;
+.chat-dialog{
+  display: flex;
+  #container {
+    flex: 1;
+    height: 650px;
+    //width: 1300px;
  }
+  #containerEle {
+    flex: 1;
+    height: 1060px;
+    //width: 2180px;
+  }
+}
+

  .el-dialog {
+    position: relative;
    display: flex;
    flex-direction: column;
-    height: 785px;
+    height: 60%;
    border: 2px solid #0F82AF;
    background: rgba(6, 34, 71, 0.78);
    border-radius: 20px;
    padding: 47px 30px;
    box-sizing: border-box;
-    margin: 588px auto 0 auto;
+    margin: 548px auto 0 auto;

    .el-dialog__header {
-      padding:0 0 25px 0;
+      padding: 0 0 25px 0;
      //display: none;
      .el-dialog__title {
        font-size: 32px;
@@ -339,8 +346,8 @@ html, body, #app, .el-container, .el-aside, .el-main {
    justify-content: center;

    .allUsedEle {
-      width: 240px;
-      height: 149px;
+      width: 300px;
+      height: 200px;
      border-radius: 10px;
      border: 2px solid #0F82AF;
      display: flex;
@@ -355,16 +362,16 @@ html, body, #app, .el-container, .el-aside, .el-main {
        display: flex;
        justify-content: center;
        align-items: center;
-        width: 240px;
-        height: 50px;
+        width: 300px;
+        height: 100px;
        background: #264A78;
-        font-size: 26px;
+        font-size: 45px;
        color: #FFFFFF;
      }

      .value {
-        margin-top: 20px;
-        font-size: 40px;
+        margin-top: 15px;
+        font-size: 50px;
        font-family: MicrosoftYaHei;
        color: #FFFFFF;
      }
--- 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">{{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(stateIconOne)+')' }" class="state-icon"></div>
-              状态：{{ item.breakdown ? '运行' : '故障' }}
+          <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 ? '故障':'运行' }}
            </div>
            <div class="switch">
              <div
@@ -34,8 +34,8 @@
          <div class="power">
            <div class="check-box">
              <el-radio-group v-model="item.autoMode" class="radio-group">
-                <el-radio label="true">自动</el-radio>{{item.autoMode}}
-                <el-radio label="false">手动</el-radio>
+                <el-radio :label="true">自动</el-radio>
+                <el-radio :label="false">手动</el-radio>
              </el-radio-group>
            </div>
            <div class="edit-power">
@@ -45,7 +45,7 @@
                  type="number"
                  min="0"
                  v-model="item.frequencyFeedback"
-                  :disabled="isSAuto1 === 'true'"
+                  :disabled="item.autoMode"
              /></span>
            </div>
          </div>
@@ -62,58 +62,26 @@ const props = defineProps({
  list: Array,
  fanData: Array
 });
-//当前功率
-const powerOne = ref()
-const powerTwo = ref()
-const powerThree = ref(555)
-//状态
-const stateOne = ref()
-const stateTwo = ref()
-// 一号风机启动停止按钮
-const isStartOne = ref(true);
-const isStartTwo = ref(true);
-// 功率是否自动
-let isSAuto1 = ref("false");
-let isSAuto2 = ref("false");
 const socketData = ref()
-// 一号风机echarts实例
-const info1 = ref(null);
 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)
 }, {deep: true});
 watch(() => props.list, (now) => {
-  console.log('socketDatawatch------------', now)
  socketData.value.forEach(item => {
    now.forEach(newItem => {
      if (item.equipmentId === newItem.equipmentId) {
-        console.log('newItem',item,newItem)
-        if(newItem.frequencyFeedback&&item.frequencyFeedback){
-          // item.frequencyFeedback= newItem.frequencyFeedback
+        if(newItem.frequencyFeedback){
+          item.frequencyFeedback= newItem.frequencyFeedback
        }
      }
    })
  })
+  handleOnMounted()
 }, {deep: true});
-const stateIconOne = computed(() =>
-    stateOne.value
-        ? "blue-state-icon.png"
-        : "red-state-icon.png"
-);
-const stateIconTwo = computed(() =>
-    stateTwo.value
-        ? "blue-state-icon.png"
-        : "red-state-icon.png"
-);
+
 onMounted(async () => {
  setTimeout(() => {
    nextTick(()=>{
@@ -121,6 +89,24 @@ onMounted(async () => {
    })
  }, 100);
 });
+const getImage = (type) => {
+  switch (type) {
+    case false:
+      return "blue-state-icon.png";
+    case true:
+      return "red-state-icon.png";
+  }
+}
+const changeNum=(index)=>{
+  switch (index) {
+    case 1:
+      return '一';
+    case 2:
+      return '二';
+    case 3:
+      return '三';
+  }
+}
 const getBasicData = (data) => {
  let tranObj = {}
  let tranArr = []
@@ -139,7 +125,6 @@ const getBasicData = (data) => {

 const handleOnMounted = () => {
  const chart = document.getElementsByClassName('echart');
-  console.log('chart',chart)
  for(let i = 0; i < chart.length; i++ ){
    Echarts_info1 = echarts.init(chart[i]);
    fan01_option = {
@@ -254,125 +239,11 @@ const handleOnMounted = () => {
    }
    fan01_option &&  Echarts_info1.setOption(fan01_option);
  }
-
-
-  //  挂载二号风机实例
-  Echarts_info2 = echarts.init(info2.value);
-  fan02_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: powerTwo.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_info2.setOption(fan02_option);
 }

 const getImageUrl = (name) => {
-  return new URL(`../../../assets/images/fanInfo/${name}`, import.meta.url).href
+  let icon=getImage(name)
+  return new URL(`../../../assets/images/fanInfo/${icon}`, import.meta.url).href
 }
 </script>

--- a/src/components/content/usedEle/UsedEle.vue
+++ b/src/components/content/usedEle/UsedEle.vue
@@ -11,7 +11,7 @@
      </div>
    </div>
    <div class="digital-tunnel">
-      <el-dialog v-model="isVisited" width="1365px" :modal="false">
+      <el-dialog v-model="isVisited" width="55%" :modal="false">
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
        <div class="top-tag">
@@ -28,7 +28,10 @@
            <div class="value">345v</div>
          </div>
        </div>
-        <div id="containerEle"></div>
+       <div class="chat-dialog">
+         <div id="containerEle"></div>
+         <div style="width: 1px;"></div>
+       </div>
        <div class="left-bottom-icon"></div>
        <div class="right-bottom-icon"></div>
      </el-dialog>
@@ -106,16 +109,14 @@ const initChart = () => {
      left: 0,
      textStyle: {
        color: '#FFFFFF',
-        fontSize: 28
-      },
-      // itemWidth: 20,
-      // itemHeight: 20
+        fontSize: 45
+      }
    },
    //离容器四侧的距离
    grid: {
      left: 0, // 左边距
      right: 20, // 右边距
-      // top: 80, // 顶边距
+      top: 80, // 顶边距
      bottom: 20, // 底边距
      containLabel: true,
    },
@@ -130,7 +131,7 @@ const initChart = () => {
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
      axisLabel: {
        textStyle: {
-          fontSize: 24,
+          fontSize: 45,
          color: '#D6F1FA'
        },
      },
@@ -140,7 +141,7 @@ const initChart = () => {
      type: 'value',
      axisLabel: {
        textStyle: {
-          fontSize: 24,
+          fontSize: 45,
          color: '#D6F1FA'
        },
      },
@@ -148,9 +149,15 @@ const initChart = () => {
    //配置项
    series: [
      {
+        name:'日用电量',
        data: [120, 200, 150, 80, 70, 110, 130, 100, 140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50],
        type: 'bar'
      },
+      {
+        name:'日节省量',
+        data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50,120, 200, 150, 80, 70, 110, 130, 100, ],
+        type: 'bar'
+      },
    ]
  }
  myEcharts.setOption(option);
@@ -165,6 +172,9 @@ const getImageUrl = (name) => {
 </script>

 <style lang="scss" scoped>
+:deep(.el-dialog__header) {
+  padding: 0!important;
+}
 #used-ele {
  width: 830px;
  height: 90px;