第二屏完成

minggao/src/page/home/newHome/deviceHome.vue

@@ -3,7 +3,7 @@
  * @Autor: lin
  * @Date: 2024-04-09 14:26:43
  * @LastEditors: lin
- * @LastEditTime: 2024-04-18 16:55:05
+ * @LastEditTime: 2024-04-19 16:35:19
 -->
 <template>
   <div class="bigBg">
@@ -131,13 +131,14 @@
           <div class="card">
             <div class="titleBox">
               <Title text="虫害折线图"></Title>
-              <div class="rightBox">
-                <el-select size="mini">
+              <div class="rightBox" v-if="pestLineDate.length > 0">
+                <el-select size="mini"  v-model="pestLineCheck[index].value" @change="e => changePestSelect(e, pestLineCheck[index], pestLineDate[index], `pestDateChar${item.id}`)">
+                  <el-option v-for="(pest, pestIndex) in (pestLineDate[index])[((pestLineCheck[index]).type)].pestName" :key="`${index}${pest}${pestIndex}`" :value="pest" :label="pest"></el-option>
                 </el-select>
                 <div class="rightType">
-                  <div class="active" @click="changePestType(index, 'date', `pestDateChar${item.id}`)">日</div>
-                  <div @click="changePestType(index, 'month', `pestDateChar${item.id}`)">月</div>
-                  <div @click="changePestType(index, 'year', `pestDateChar${item.id}`)">年</div>
+                  <div :class="`${(pestLineCheck[index]).type == 'day' ? 'active' : ''}`" @click="changePestType(`pestDateChar${item.id}`, 'day', pestLineCheck[index], pestLineDate[index])">日</div>
+                  <div :class="`${(pestLineCheck[index]).type == 'months' ? 'active' : ''}`" @click="changePestType(`pestDateChar${item.id}`, 'months', pestLineCheck[index], pestLineDate[index])">月</div>
+                  <div :class="`${(pestLineCheck[index]).type == 'year' ? 'active' : ''}`" @click="changePestType(`pestDateChar${item.id}`, 'year', pestLineCheck[index], pestLineDate[index])">年</div>
                 </div>
               </div>
             </div>
@@ -166,6 +167,7 @@ export default {
       pestNowList: [], // 实时数据
       pestImgList: [], //设备图片
       videoList: [], //监控列表 跳出页面要停止
+      pestLineCheck:[]
     };
   },
   computed: {
@@ -183,6 +185,47 @@ export default {
     })
   },
   methods: {
+    /**
+     * @description: 虫害折线图 切换年月日 由于虫子不一样 所以会默认展示第一种
+     * @param {*} char 需要渲染的echars dom id
+     * @param {*} type 当前统计类型 日、月、年
+     * @param {*} typeObj 记录统计类型及统计害虫名称的对象
+     * @param {*} data 当前统计数据对象
+     * @return {*}
+     */
+    changePestType(charID, type, typeObj, data) {
+      typeObj.type = type;
+      typeObj.value = data[type].pestName[0];
+      let xData = [];
+      let yData = [];
+      data[type].countInfo.forEach(pest => {
+        xData.push(pest.date);
+        yData.push(pest.data[0])
+      })
+      let char = echarts.init(document.getElementById(charID));
+      this.setLineOption(char, [typeObj.value], xData, [yData], [['#0066ff59', '#0066ff00']], ['#1588F2'], true)
+    },
+    /**
+     * @description: 虫害折线图 切换虫害下拉框
+     * @param {*} pest 当前选中害虫名称
+     * @param {*} typeObj 记录统计类型及统计害虫名称的对象
+     * @param {*} data 当前统计数据对象
+     * @param {*} charId 需要渲染的echars dom id
+     * @return {*}
+     */
+    changePestSelect(pest, typeObj, data, charId) {
+      console.log(pest, typeObj, data, charId);
+      typeObj.value = pest;
+      let pestIndex = data[typeObj.type].pestName.indexOf(pest);
+      let xData = [];
+      let yData = [];
+      data[typeObj.type].countInfo.forEach(pest => {
+        xData.push(pest.date);
+        yData.push(pest.data[pestIndex])
+      })
+      let char = echarts.init(document.getElementById(charId));
+      this.setLineOption(char, [pest], xData, [yData], [['#0066ff59', '#0066ff00']], ['#1588F2'], true);
+    },
     // 获取有测报灯列表
     getDeviceList(date) {
       this.$axios({
@@ -227,7 +270,7 @@ export default {
       })
     },
     // 折线图带渐变配置
-    setLineOption(char, name, xData, yData, color, lineColor) {
+    setLineOption(char, name, xData, yData, color, lineColor, showAxisLabel=false) {
       let series = [];
       yData.forEach((item, index) => {
         let pre = {
@@ -265,7 +308,7 @@ export default {
         },
         grid: {
           top: '5%',
-          left: '0',
+          left: '5%',
           bottom: '5%',
           right: '0%',
           containLabel: true
@@ -282,7 +325,7 @@ export default {
             }
           },
           axisLabel: {
-            show: false
+            show: showAxisLabel
           },
           splitLine: {
             show: false  // 不显示 x 轴分隔线
@@ -445,7 +488,20 @@ export default {
           this.$message.error('网络连接出错或服务报错，请刷新页面重试');
           return
         }
-        this.pestLineDate.push(res.data.data)
+        this.pestLineDate.push(res.data.data);
+        this.pestLineCheck.push({
+          type: 'day',
+          value:res.data.data.day.pestName[0]
+        });
+        let xData = [];
+        let yData = [];
+        res.data.data.day.countInfo.forEach(pest => {
+          xData.push(pest.date);
+          yData.push(pest.data[0])
+        })
+        let char = echarts.init(document.getElementById(`pestDateChar${id}`));
+        this.setLineOption(char, [res.data.data.day.pestName[0]], xData, [yData], [['#0066ff59', '#0066ff00']], ['#1588F2'], true)
+        console.log(this.pestLineDate)
       })
     },
   },

minggao/src/page/home/newHome/index.vue

@@ -3,7 +3,7 @@
  * @Autor: lin
  * @Date: 2024-04-09 14:29:42
  * @LastEditors: lin
- * @LastEditTime: 2024-04-17 08:48:38
+ * @LastEditTime: 2024-04-19 14:11:47
 -->
 <template>
   <div class="bigBox">
@@ -11,14 +11,18 @@
     <!-- 左边按钮组 -->
     <div class="topLeftBtn">
       <router-link to="/newHome/home">
-        <div :class="`newHomeBtn ${$route.path == '/newHome/home' ? 'newHomeBtnClick' : '' }`">首页</div>
+        <div :class="`newHomeBtn ${$route.path == '/newHome/home' ? 'newHomeBtnClick' : ''}`">首页</div>
       </router-link>
       <router-link to="/newHome/device">
-        <div :class="`newHomeBtn newHomeBigBtn ${$route.path == '/newHome/device' ? 'newHomeBigBtnClick' : '' }`">智能测报系统</div>
+        <div :class="`newHomeBtn newHomeBigBtn ${$route.path == '/newHome/device' ? 'newHomeBigBtnClick' : ''}`">智能测报系统
+        </div>
       </router-link>
     </div>
     <div class="left"></div>
     <div class="right"></div>
+    <div class="bottom">
+      {{ currentTime }}
+    </div>
     <div class="content">
       <router-view></router-view>
     </div>
@@ -28,7 +32,7 @@
 <script>
 // 设置rem
 const setBaseFontSize = () => {
-  const baseFontSize = (window.innerWidth / 1920) * 10; // 根据屏幕宽度计算基准字体大小
+  const baseFontSize = (window.innerWidth / 1920) * 9; // 根据屏幕宽度计算基准字体大小
   document.documentElement.style.fontSize = `${baseFontSize}px`; // 设置根元素字体大小
 };
 export default {
@@ -37,7 +41,8 @@ export default {
   },
   data() {
     return {
-
+      currentTime: '',
+      timmer: null
     };
   },
   computed: {
@@ -47,11 +52,13 @@ export default {
 
   },
   mounted() {
+    this.timmer = setInterval(this.updateTime, 1000);
     setBaseFontSize(); // 初始化基准字体大小
     window.addEventListener("resize", setBaseFontSize); // 监听窗口大小变化，重新设置基准字体大小
     console.log(this.$route)
   },
   beforeDestroy() {
+    clearInterval(this.timmer);
     document.documentElement.removeAttribute("style");
     window.removeEventListener("resize", setBaseFontSize);
   },
@@ -59,7 +66,29 @@ export default {
 
   },
   methods: {
-
+    updateTime() {
+      var now = new Date();
+
+      var year = now.getFullYear();
+      var month = now.getMonth() + 1;
+      var date = now.getDate();
+      var day = now.getDay();
+      var hours = now.getHours();
+      var minutes = now.getMinutes();
+      var seconds = now.getSeconds();
+
+      // 将星期几转换为中文格式
+      var daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+      var dayOfWeekText = daysOfWeek[day];
+
+      // 格式化小时、分钟、秒为两位数
+      hours = ('0' + hours).slice(-2);
+      minutes = ('0' + minutes).slice(-2);
+      seconds = ('0' + seconds).slice(-2);
+
+      // 更新时间
+      this.currentTime = year + '年' + month + '月' + date + '日 ' + dayOfWeekText + ' ' + hours + ':' + minutes + ':' + seconds;
+    }
   },
   components: {
 
@@ -175,5 +204,24 @@ export default {
     pointer-events: none;
     background-size: 100% 100%;
   }
+
+  .bottom {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 11.76vh;
+    line-height: 17.76vh;
+    text-align: center;
+    color: #ffffff;
+    text-shadow: 0 0 4px #FFF;
+    font-size: 1.6rem;
+    letter-spacing: 1.6px;
+    font-weight: 600;
+    z-index: 3;
+    background: url('../../../assets/images/newHome/bottom.png') center center no-repeat;
+    pointer-events: none;
+    background-size: 100% 100%;
+  }
 }
 </style>