邓洁 : 首屏修改

src/components/content/badGasInfo/BadGasInfo.vue

@@ -4,16 +4,20 @@
     <div class="info-list">
       <gas-info-item v-for="item in badGasList" :key="item.equipmentId" :gasInfo="item" @click="handleOpenChart"/>
     </div>
-    <el-dialog v-model="isVisited" title="1号有害气体监控数据" width="958px" :modal="false">
+    <el-dialog v-model="isVisited" title="有害气体监控数据" width="1996px" :modal="false">
       <div class="left-icon"></div>
       <div class="right-icon"></div>
+      <div id="container" ref="chart" @click.stop></div>
+      <div class="time-select">
 
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
 import GasInfoItem from "./childComps/GasInfoItem.vue";
+import * as echarts from 'echarts';
 
 const props = defineProps({
   list: Array,
@@ -21,21 +25,27 @@ const props = defineProps({
 });
 const isVisited = ref(false);
 const badGasList = ref([])
+const chart = ref(null);
+let myEcharts = reactive({});
 const option = reactive({
   //图例
   legend: {
-    data: [],
-    selected: {},
-    selectedMode: false
+    left: 0,
+    textStyle:{
+      color:'#FFFFFF',
+      fontSize:28
+    },
+    // itemWidth: 20,
+    // itemHeight: 20
   },
   //离容器四侧的距离
-  // grid: {
-  //   left: 40, // 左边距
-  //   right: 60, // 右边距
-  //   top: 40, // 顶边距
-  //   bottom: 20, // 底边距
-  //   // containLabel: true,
-  // },
+  grid: {
+    left: 45, // 左边距
+    // right: 60, // 右边距
+    top: 60, // 顶边距
+    bottom: 40, // 底边距
+    // containLabel: true,
+  },
   //提示框组件
   tooltip: {
     show: true,
@@ -43,27 +53,79 @@ const option = reactive({
   },
   //X轴
   xAxis: {
-    name: '',
     type: 'category',
-    data: [],
-    axisLine: {
-      show: true
-    }
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    axisLabel: {
+      textStyle: {
+        fontSize: 24,
+        color:'#D6F1FA'
+      },
+    },
   },
   //Y轴
   yAxis: {
-    name: '',
     type: 'value',
-    data: [],
-    axisLine: {
-      show: true
-    }
-  },
-  radar: {
-    // shape: 'circle',
+
+    axisLabel: {
+      textStyle: {
+        fontSize: 24,
+        color:'#D6F1FA'
+      },
+    },
   },
   //配置项
-  series: []
+  series: [
+    {
+      name: '二氧化碳',
+      data: [5, 9, 10, 7, 8, 15, 12],
+      type: 'line',
+      smooth: true,
+      symbolSize:24,
+      lineStyle:{
+        width:5
+      }
+    },
+    {
+      name: '一氧化碳',
+      data: [8, 15, 5, 9, 10, 7, 12],
+      type: 'line',
+      smooth: true,
+      symbolSize:24,
+      lineStyle:{
+        width:5
+      }
+    },
+    {
+      name: '二氧化氮',
+      data: [5, 15, 1, 9, 10, 7, 8],
+      type: 'line',
+      smooth: true,
+      symbolSize:24,
+      lineStyle:{
+        width:5
+      }
+    },
+    {
+      name: '二氧化硫',
+      data: [8, 15, 12, 5, 9, 2, 7],
+      type: 'line',
+      smooth: true,
+      symbolSize:24,
+      lineStyle:{
+        width:5
+      }
+    },
+    {
+      name: '硫化氢',
+      data: [2, 9, 10, 15, 12, 7, 8,],
+      type: 'line',
+      smooth: true,
+      symbolSize:24,
+      lineStyle:{
+        width:5
+      }
+    },
+  ]
 })
 
 watch(() => props.list, (now) => {
@@ -79,6 +141,13 @@ watch(() => props.list, (now) => {
 watch(() => props.badGasData, (now) => {
   getBadGasInfo(now.sensorList)
 }, {deep: true});
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+  })
+})
+
 const getBadGasInfo = (now) => {
   let windPressureObj = {}
   let windPressureArr = []
@@ -103,15 +172,37 @@ const changeData = (item) => {
 const handleOpenChart = () => {
   console.log('有害气体弹窗')
   isVisited.value = true
+  initChart()
 }
+/**
+ * 初始化echarts实例方法
+ */
+const initChart = () => {
+  //3.初始化container容器
+  myEcharts = echarts.init(chart.value);
+  //5.传入数据
+  myEcharts.setOption(option, true);
+  //图表大小自适应窗口大小变化
+  window.onresize = () => {
+    myEcharts.resize();
+  }
+}
+
 </script>
 
 <style lang="scss" scoped>
+#container {
+  box-sizing: border-box;
+  height: 754px;
+  width: 1996px;
+  margin: 0 auto;
+}
+
 :deep(.el-dialog) {
   border: 2px solid #0F82AF;
   background: rgba(6, 34, 71, 0.78);
   border-radius: 20px;
-  padding: 47px 20px;
+  padding: 47px 30px;
   box-sizing: border-box;
   margin: 588px auto 0 auto;
 
@@ -158,7 +249,16 @@ const handleOpenChart = () => {
     background-image: url(@/assets/images/badGasInfo/sp_jz.png);
     transform: rotate(90deg);
   }
-
+.time-select{
+  position: absolute;
+  top: 47px;
+  right: 119px;
+  //display: flex;
+  width: 204px;
+  height: 68px;
+  border-radius: 10px;
+  border: 2px solid #0F82AF;
+}
   .title {
     width: 128px;
     height: 45px;

src/components/content/badGasInfo/childComps/GasInfoItem.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { defineProps, ref, reactive, watch, onMounted } from "vue";
+import { defineProps, ref, watch, onMounted } from "vue";
 import * as Echarts from "echarts";
 let e_info;
 let params = defineProps({