feat : 新增echarts中指定日期展示及细节优化

src/components/content/badGasInfo/BadGasInfo.vue

@@ -34,6 +34,8 @@
           <div style="width: 1px"></div>
         </div>
         <div class="time-select">
+          <choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
+          <choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
           <time-range-btn
               :buttonList="timeList"
               v-model="selectTimeButton"
@@ -52,7 +54,10 @@ import GasInfoItem from "./childComps/GasInfoItem.vue";
 import * as echarts from "echarts";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
 import {getBadGasEchartsInfo} from "@/api/largeScreen";
-
+import ChooseTime from "@/components/ChooseTime/index.vue"
+import ChooseMonth from "@/components/ChooseMonth/index.vue"
+const dayValue = ref('');
+const monthValue = ref('');
 const props = defineProps({
   list: Array,
   badGasData: Array,
@@ -99,14 +104,28 @@ watch(
     },
     {deep: true}
 );
-const timeSelect = (index) => {
-  if (index === 0) {
-    getBadGasChartInfo('years')
-  } else if (index === 1) {
-    getBadGasChartInfo('month')
-  } else if (index === 2) {
-    getBadGasChartInfo('day')
+const daySelect = (val) => {
+  dayValue.value = val
+  getBadGasChartInfo('day', val)
+}
+const monthSelect = (val) => {
+  monthValue.value = val
+  getBadGasChartInfo('month', val)
+}
+const changeDate = (index) => {
+  switch (index) {
+    case 0:
+      return 'years'
+    case 1:
+      return 'month'
+    case 2:
+      return 'day'
   }
+}
+const timeSelect = (index) => {
+  dayValue.value = ''
+  monthValue.value = ''
+  getBadGasChartInfo(changeDate(index))
 };
 const getBadGasInfo = (now) => {
   if (now === null) return;
@@ -114,6 +133,7 @@ const getBadGasInfo = (now) => {
   let windPressureArr = [];
   now?.map((item) => {
     if (
+        item.equipmentType === "dust" ||
         item.equipmentType === "carbonDioxide" ||
         item.equipmentType === "carbonMonoxide" ||
         item.equipmentType === "hydrogenSulfide" ||
@@ -137,11 +157,11 @@ const changeData = (item) => {
     unit: item.unit,
   };
 };
-const getBadGasChartInfo = (type) => {
+const getBadGasChartInfo = (type, time = '') => {
   isBadGasVisited.value = true
   showLoading.value = true
   let id = props.tunnelId
-  getBadGasEchartsInfo(id, type).then(res => {
+  getBadGasEchartsInfo(id, time, type).then(res => {
     if (res?.code === 1000) {
       showLoading.value = false
       nextTick(() => {
@@ -232,33 +252,6 @@ const initChart = (type, values) => {
     //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: type,
       axisLabel: {
         textStyle: {
@@ -280,6 +273,19 @@ const initChart = (type, values) => {
     //配置项
     series: [
       {
+        name: "粉尘",
+        // data: [
+        //   56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
+        //   69, 25, 31, 49, 81, 63,
+        // ],
+        data: values.dustValues,
+        type: "line",
+        smooth: true,
+        symbolSize: 24,
+        lineStyle: {
+          width: 5,
+        },
+      },{
         name: "二氧化碳",
         // data: [
         //   56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76,
@@ -399,7 +405,7 @@ const initChart = (type, values) => {
     //height: calc(621px - 45px - 22px);
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-around;
+    justify-content: flex-start;
     padding: 16px 0 0 10px;
   }
 }