| 
		 After Width: | Height: | Size: 974 B  | 
| 
		 After Width: | Height: | Size: 974 B  | 
| 
		 After Width: | Height: | Size: 7.8 KiB  | 
| 
		 After Width: | Height: | Size: 181 KiB  | 
| 
		 After Width: | Height: | Size: 13 KiB  | 
| 
		 After Width: | Height: | Size: 392 KiB  | 
| 
		 After Width: | Height: | Size: 10 KiB  | 
| 
		 After Width: | Height: | Size: 46 KiB  | 
| 
		 After Width: | Height: | Size: 366 KiB  | 
| 
		 After Width: | Height: | Size: 417 KiB  | 
| 
		 After Width: | Height: | Size: 531 KiB  | 
| 
		 After Width: | Height: | Size: 4.5 KiB  | 
| 
		 After Width: | Height: | Size: 6.6 KiB  | 
| 
		 After Width: | Height: | Size: 4.4 KiB  | 
| 
		 After Width: | Height: | Size: 4.5 KiB  | 
| 
		 After Width: | Height: | Size: 6.6 KiB  | 
@ -0,0 +1,415 @@ | 
				
			|||||||
 | 
					<template> | 
				
			||||||
 | 
					  <div> | 
				
			||||||
 | 
					    <div class="historyCharts" ref="chart_ref"></div> | 
				
			||||||
 | 
					  </div> | 
				
			||||||
 | 
					</template> | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script> | 
				
			||||||
 | 
					import * as echarts from "echarts"; | 
				
			||||||
 | 
					export default { | 
				
			||||||
 | 
					  props: { | 
				
			||||||
 | 
					    temArray: { | 
				
			||||||
 | 
					      type: Array, | 
				
			||||||
 | 
					      default: () => [], | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  data() { | 
				
			||||||
 | 
					    return { | 
				
			||||||
 | 
					      chartInstance: null, | 
				
			||||||
 | 
					      option: {}, | 
				
			||||||
 | 
					      chartData1: [], | 
				
			||||||
 | 
					      chartData2: [], | 
				
			||||||
 | 
					      chartData3: [], | 
				
			||||||
 | 
					      chartData4: [], | 
				
			||||||
 | 
					      bottomData: [], | 
				
			||||||
 | 
					    }; | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  watch: { | 
				
			||||||
 | 
					    temArray: { | 
				
			||||||
 | 
					      immediate: true, // 页面加载时立即触发一次监听 | 
				
			||||||
 | 
					      handler(newVal, oldVal) { | 
				
			||||||
 | 
					        if (newVal) { | 
				
			||||||
 | 
					          this.chartData1 = []; // 清空 chartData1 | 
				
			||||||
 | 
					          this.chartData2 = []; // 清空 chartData2 | 
				
			||||||
 | 
					          this.bottomData = []; // 清空 bottomData | 
				
			||||||
 | 
					          console.log("charts传值", newVal); | 
				
			||||||
 | 
					          let data = newVal; | 
				
			||||||
 | 
					          if (data.length > 0) { | 
				
			||||||
 | 
					            // 获取 title 和 titleStr 数组 | 
				
			||||||
 | 
					            const title = data.data[0].title; | 
				
			||||||
 | 
					            const titleStr = data.data[1].titleStr; | 
				
			||||||
 | 
					            // 获取 dataList 数组 | 
				
			||||||
 | 
					            const dataList = data.data[3].dataList; | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            // 遍历 dataList 数组 | 
				
			||||||
 | 
					            dataList.forEach((item) => { | 
				
			||||||
 | 
					              // 查找 name 在 title 数组中的索引 | 
				
			||||||
 | 
					              const index = title.indexOf(item.name); | 
				
			||||||
 | 
					              if (index !== -1) { | 
				
			||||||
 | 
					                // 若找到匹配项,则将 name 替换为 titleStr 中对应位置的值 | 
				
			||||||
 | 
					                item.name = titleStr[index]; | 
				
			||||||
 | 
					              } | 
				
			||||||
 | 
					            }); | 
				
			||||||
 | 
					            console.log("处理后的data", data); | 
				
			||||||
 | 
					            data.forEach((item) => { | 
				
			||||||
 | 
					              if (item.timeStr) { | 
				
			||||||
 | 
					                this.bottomData = item.timeStr; | 
				
			||||||
 | 
					              } | 
				
			||||||
 | 
					              if (item.dataList) { | 
				
			||||||
 | 
					                let name1 = ""; | 
				
			||||||
 | 
					                let name2 = ""; | 
				
			||||||
 | 
					                let name3 = ""; | 
				
			||||||
 | 
					                let name4 = ""; | 
				
			||||||
 | 
					                item.dataList.forEach((val, index) => { | 
				
			||||||
 | 
					                  if (val.name) { | 
				
			||||||
 | 
					                    switch (index) { | 
				
			||||||
 | 
					                      case 0: | 
				
			||||||
 | 
					                        this.chartData1 = val.value; | 
				
			||||||
 | 
					                        name1 = val.name; | 
				
			||||||
 | 
					                        break; | 
				
			||||||
 | 
					                      case 1: | 
				
			||||||
 | 
					                        this.chartData2 = val.value; | 
				
			||||||
 | 
					                        name2 = val.name; | 
				
			||||||
 | 
					                        break; | 
				
			||||||
 | 
					                      case 2: | 
				
			||||||
 | 
					                        this.chartData3 = val.value; | 
				
			||||||
 | 
					                        name3 = val.name; | 
				
			||||||
 | 
					                        break; | 
				
			||||||
 | 
					                      case 3: | 
				
			||||||
 | 
					                        this.chartData4 = val.value; | 
				
			||||||
 | 
					                        name4 = val.name; | 
				
			||||||
 | 
					                        break; | 
				
			||||||
 | 
					                      default: | 
				
			||||||
 | 
					                        break; | 
				
			||||||
 | 
					                    } | 
				
			||||||
 | 
					                  } | 
				
			||||||
 | 
					                }); | 
				
			||||||
 | 
					              } | 
				
			||||||
 | 
					            }); | 
				
			||||||
 | 
					            this.$nextTick(() => { | 
				
			||||||
 | 
					              const adapterOption = { | 
				
			||||||
 | 
					                xAxis: { | 
				
			||||||
 | 
					                  data: this.bottomData, | 
				
			||||||
 | 
					                }, | 
				
			||||||
 | 
					                series: [ | 
				
			||||||
 | 
					                  { | 
				
			||||||
 | 
					                    yAxisIndex: 0, | 
				
			||||||
 | 
					                    name:name1, | 
				
			||||||
 | 
					                    data: this.chartData1, | 
				
			||||||
 | 
					                  }, | 
				
			||||||
 | 
					                  { | 
				
			||||||
 | 
					                    yAxisIndex: 0, | 
				
			||||||
 | 
					                    name:name2, | 
				
			||||||
 | 
					                    data: this.chartData2, | 
				
			||||||
 | 
					                  }, | 
				
			||||||
 | 
					                  { | 
				
			||||||
 | 
					                    yAxisIndex: 0, | 
				
			||||||
 | 
					                    name:name3, | 
				
			||||||
 | 
					                    data: this.chartData3, | 
				
			||||||
 | 
					                  }, | 
				
			||||||
 | 
					                  { | 
				
			||||||
 | 
					                    yAxisIndex: 0, | 
				
			||||||
 | 
					                    name:name4, | 
				
			||||||
 | 
					                    data: this.chartData4, | 
				
			||||||
 | 
					                  }, | 
				
			||||||
 | 
					                ], | 
				
			||||||
 | 
					              }; | 
				
			||||||
 | 
					              this.chartInstance.setOption(adapterOption); | 
				
			||||||
 | 
					              //手动的调用图标对象的resize才能产生效果 | 
				
			||||||
 | 
					              this.chartInstance.resize(); | 
				
			||||||
 | 
					            }); | 
				
			||||||
 | 
					          } else { | 
				
			||||||
 | 
					            this.$nextTick(() => { | 
				
			||||||
 | 
					              const adapterOption = { | 
				
			||||||
 | 
					                xAxis: { | 
				
			||||||
 | 
					                  data: [], | 
				
			||||||
 | 
					                }, | 
				
			||||||
 | 
					                series: [ | 
				
			||||||
 | 
					                  { | 
				
			||||||
 | 
					                    yAxisIndex: 0, | 
				
			||||||
 | 
					                    data: [], | 
				
			||||||
 | 
					                  }, | 
				
			||||||
 | 
					                  { | 
				
			||||||
 | 
					                    yAxisIndex: 0, | 
				
			||||||
 | 
					                    data: [], | 
				
			||||||
 | 
					                  }, | 
				
			||||||
 | 
					                  { | 
				
			||||||
 | 
					                    yAxisIndex: 0, | 
				
			||||||
 | 
					                    data: [], | 
				
			||||||
 | 
					                  }, | 
				
			||||||
 | 
					                  { | 
				
			||||||
 | 
					                    yAxisIndex: 0, | 
				
			||||||
 | 
					                    data: [], | 
				
			||||||
 | 
					                  }, | 
				
			||||||
 | 
					                ], | 
				
			||||||
 | 
					              }; | 
				
			||||||
 | 
					              this.chartInstance.setOption(adapterOption); | 
				
			||||||
 | 
					              //手动的调用图标对象的resize才能产生效果 | 
				
			||||||
 | 
					              this.chartInstance.resize(); | 
				
			||||||
 | 
					              this.screenAdapter(); | 
				
			||||||
 | 
					            }); | 
				
			||||||
 | 
					          } | 
				
			||||||
 | 
					        } | 
				
			||||||
 | 
					      }, | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  mounted() { | 
				
			||||||
 | 
					    this.initChart(); | 
				
			||||||
 | 
					    this.screenAdapter(); | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  destroyed() { | 
				
			||||||
 | 
					    //取消监听器 | 
				
			||||||
 | 
					    window.removeEventListener("resize", this.screenAdapter); | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  methods: { | 
				
			||||||
 | 
					    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 | 
				
			||||||
 | 
					    screenAdapter() { | 
				
			||||||
 | 
					      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子 | 
				
			||||||
 | 
					      const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; | 
				
			||||||
 | 
					      //因为option可以多次配置的,所以这里的option只需要写 需要配置大小的相关数据 | 
				
			||||||
 | 
					      const adapterOption = {}; | 
				
			||||||
 | 
					      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变,option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 | 
				
			||||||
 | 
					      this.chartInstance.setOption(adapterOption); | 
				
			||||||
 | 
					      //手动的调用图标对象的resize才能产生效果 | 
				
			||||||
 | 
					      this.chartInstance.resize(); | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    //初始化chartInstance对象 | 
				
			||||||
 | 
					    initChart() { | 
				
			||||||
 | 
					      const chartRef = this.$refs.chart_ref; | 
				
			||||||
 | 
					      if (chartRef) { | 
				
			||||||
 | 
					        // 初始化图表的代码 | 
				
			||||||
 | 
					        this.chartInstance = echarts.init(this.$refs.chart_ref); | 
				
			||||||
 | 
					        this.option = { | 
				
			||||||
 | 
					          tooltip: { | 
				
			||||||
 | 
					            trigger: "axis", | 
				
			||||||
 | 
					          }, | 
				
			||||||
 | 
					          legend: { | 
				
			||||||
 | 
					            show: true, | 
				
			||||||
 | 
					            top: 0, | 
				
			||||||
 | 
					            textStyle: { | 
				
			||||||
 | 
					              color: "white", | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					          }, | 
				
			||||||
 | 
					          grid: { | 
				
			||||||
 | 
					            top: "10%", | 
				
			||||||
 | 
					            left: "4%", | 
				
			||||||
 | 
					            right: "6%", | 
				
			||||||
 | 
					            bottom: "3%", | 
				
			||||||
 | 
					            containLabel: true, | 
				
			||||||
 | 
					          }, | 
				
			||||||
 | 
					          xAxis: { | 
				
			||||||
 | 
					            type: "category", | 
				
			||||||
 | 
					            //设置为true代表离零刻度间隔一段距离 | 
				
			||||||
 | 
					            boundaryGap: true, | 
				
			||||||
 | 
					            // 修饰刻度标签的颜色即x坐标数据 | 
				
			||||||
 | 
					            axisLabel: { | 
				
			||||||
 | 
					              // interval: 0, //强制显示所有x轴数据 | 
				
			||||||
 | 
					              // rotate: 30, //x轴坐标字体倾斜30度 | 
				
			||||||
 | 
					              color: "rgba(255, 255, 255, 1)", | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            axisTick: { | 
				
			||||||
 | 
					              show: false, // 不显示坐标轴刻度线 | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            // x坐标轴的颜色 | 
				
			||||||
 | 
					            axisLine: { | 
				
			||||||
 | 
					              show: true, | 
				
			||||||
 | 
					              lineStyle: { | 
				
			||||||
 | 
					                color: "#365576", | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            splitLine: { | 
				
			||||||
 | 
					              lineStyle: { | 
				
			||||||
 | 
					                color: "#e2e6f0", | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, //x轴分割线 | 
				
			||||||
 | 
					            data: this.bottomData, | 
				
			||||||
 | 
					          }, | 
				
			||||||
 | 
					          yAxis: { | 
				
			||||||
 | 
					            min: 0, | 
				
			||||||
 | 
					            // max:20, | 
				
			||||||
 | 
					            // // // min:'dataMin', | 
				
			||||||
 | 
					            // // // max:'dataMax', | 
				
			||||||
 | 
					            // name: "kwh", // 第一个 y 轴的单位描述 | 
				
			||||||
 | 
					            // 设置 name 的样式 | 
				
			||||||
 | 
					            nameTextStyle: { | 
				
			||||||
 | 
					              color: "rgba(255, 255, 255, 1)", | 
				
			||||||
 | 
					              fontSize: 12, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            miniInterval: 5, | 
				
			||||||
 | 
					            type: "value", | 
				
			||||||
 | 
					            // 修饰刻度标签的颜色即y坐标数据 | 
				
			||||||
 | 
					            axisLabel: { | 
				
			||||||
 | 
					              color: "rgba(255, 255, 255, 1)", | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            // 显示y坐标轴 | 
				
			||||||
 | 
					            axisLine: { | 
				
			||||||
 | 
					              show: true, | 
				
			||||||
 | 
					              lineStyle: { | 
				
			||||||
 | 
					                color: "#365576", // 设置 y 轴线的颜色 | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            //y轴分割线段数 | 
				
			||||||
 | 
					            // splitNumber: 10, | 
				
			||||||
 | 
					            // 修改y轴分割线的颜色 | 
				
			||||||
 | 
					            splitLine: { | 
				
			||||||
 | 
					              lineStyle: { | 
				
			||||||
 | 
					                color: "#1a3d62", // 设置分割线的颜色 | 
				
			||||||
 | 
					                type: "dashed", // 设置分割线为虚线 | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					          }, | 
				
			||||||
 | 
					          series: [ | 
				
			||||||
 | 
					            { | 
				
			||||||
 | 
					              type: "line", | 
				
			||||||
 | 
					              // 拐点大小 | 
				
			||||||
 | 
					              symbolSize: 8, | 
				
			||||||
 | 
					              data: this.chartData1, | 
				
			||||||
 | 
					              //折线颜色 | 
				
			||||||
 | 
					              itemStyle: { | 
				
			||||||
 | 
					                color: "#1a69f1", //折线点的颜色 | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					              lineStyle: { | 
				
			||||||
 | 
					                color: "#1a69f1", //折线点的颜色 | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					              smooth: false, | 
				
			||||||
 | 
					              // 不显示折线点 | 
				
			||||||
 | 
					              showSymbol: false, | 
				
			||||||
 | 
					              // 区域填充样式,添加渐变背景 | 
				
			||||||
 | 
					              areaStyle: { | 
				
			||||||
 | 
					                color: { | 
				
			||||||
 | 
					                  type: "linear", | 
				
			||||||
 | 
					                  x: 0, | 
				
			||||||
 | 
					                  y: 0, | 
				
			||||||
 | 
					                  x2: 0, | 
				
			||||||
 | 
					                  y2: 1, | 
				
			||||||
 | 
					                  colorStops: [ | 
				
			||||||
 | 
					                    { | 
				
			||||||
 | 
					                      offset: 0, | 
				
			||||||
 | 
					                      color: "rgba(26, 105, 241, 0.5)", // 渐变起始颜色 | 
				
			||||||
 | 
					                    }, | 
				
			||||||
 | 
					                    { | 
				
			||||||
 | 
					                      offset: 1, | 
				
			||||||
 | 
					                      color: "rgba(26, 105, 241, 0)", // 渐变结束颜色 | 
				
			||||||
 | 
					                    }, | 
				
			||||||
 | 
					                  ], | 
				
			||||||
 | 
					                  global: false, // 缺省为 false | 
				
			||||||
 | 
					                }, | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            { | 
				
			||||||
 | 
					              type: "line", | 
				
			||||||
 | 
					              // 拐点大小 | 
				
			||||||
 | 
					              symbolSize: 8, | 
				
			||||||
 | 
					              data: this.chartData2, | 
				
			||||||
 | 
					              //折线颜色 | 
				
			||||||
 | 
					              itemStyle: { | 
				
			||||||
 | 
					                color: "#00CED1", //折线的颜色 | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					              smooth: false, | 
				
			||||||
 | 
					              // 不显示折线点 | 
				
			||||||
 | 
					              showSymbol: false, | 
				
			||||||
 | 
					              areaStyle: { | 
				
			||||||
 | 
					                color: { | 
				
			||||||
 | 
					                  type: "linear", | 
				
			||||||
 | 
					                  x: 0, | 
				
			||||||
 | 
					                  y: 0, | 
				
			||||||
 | 
					                  x2: 0, | 
				
			||||||
 | 
					                  y2: 1, | 
				
			||||||
 | 
					                  colorStops: [ | 
				
			||||||
 | 
					                    { | 
				
			||||||
 | 
					                      offset: 0, | 
				
			||||||
 | 
					                      color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 | 
				
			||||||
 | 
					                    }, | 
				
			||||||
 | 
					                    { | 
				
			||||||
 | 
					                      offset: 1, | 
				
			||||||
 | 
					                      color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 | 
				
			||||||
 | 
					                    }, | 
				
			||||||
 | 
					                  ], | 
				
			||||||
 | 
					                  global: false, // 缺省为 false | 
				
			||||||
 | 
					                }, | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            { | 
				
			||||||
 | 
					              type: "line", | 
				
			||||||
 | 
					              // 拐点大小 | 
				
			||||||
 | 
					              symbolSize: 8, | 
				
			||||||
 | 
					              data: this.chartData3, | 
				
			||||||
 | 
					              //折线颜色 | 
				
			||||||
 | 
					              itemStyle: { | 
				
			||||||
 | 
					                color: "#00CED1", //折线的颜色 | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					              smooth: false, | 
				
			||||||
 | 
					              // 不显示折线点 | 
				
			||||||
 | 
					              showSymbol: false, | 
				
			||||||
 | 
					              areaStyle: { | 
				
			||||||
 | 
					                color: { | 
				
			||||||
 | 
					                  type: "linear", | 
				
			||||||
 | 
					                  x: 0, | 
				
			||||||
 | 
					                  y: 0, | 
				
			||||||
 | 
					                  x2: 0, | 
				
			||||||
 | 
					                  y2: 1, | 
				
			||||||
 | 
					                  colorStops: [ | 
				
			||||||
 | 
					                    { | 
				
			||||||
 | 
					                      offset: 0, | 
				
			||||||
 | 
					                      color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 | 
				
			||||||
 | 
					                    }, | 
				
			||||||
 | 
					                    { | 
				
			||||||
 | 
					                      offset: 1, | 
				
			||||||
 | 
					                      color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 | 
				
			||||||
 | 
					                    }, | 
				
			||||||
 | 
					                  ], | 
				
			||||||
 | 
					                  global: false, // 缺省为 false | 
				
			||||||
 | 
					                }, | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            { | 
				
			||||||
 | 
					              type: "line", | 
				
			||||||
 | 
					              // 拐点大小 | 
				
			||||||
 | 
					              symbolSize: 8, | 
				
			||||||
 | 
					              data: this.chartData4, | 
				
			||||||
 | 
					              //折线颜色 | 
				
			||||||
 | 
					              itemStyle: { | 
				
			||||||
 | 
					                color: "#00CED1", //折线的颜色 | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					              smooth: false, | 
				
			||||||
 | 
					              // 不显示折线点 | 
				
			||||||
 | 
					              showSymbol: false, | 
				
			||||||
 | 
					              areaStyle: { | 
				
			||||||
 | 
					                color: { | 
				
			||||||
 | 
					                  type: "linear", | 
				
			||||||
 | 
					                  x: 0, | 
				
			||||||
 | 
					                  y: 0, | 
				
			||||||
 | 
					                  x2: 0, | 
				
			||||||
 | 
					                  y2: 1, | 
				
			||||||
 | 
					                  colorStops: [ | 
				
			||||||
 | 
					                    { | 
				
			||||||
 | 
					                      offset: 0, | 
				
			||||||
 | 
					                      color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 | 
				
			||||||
 | 
					                    }, | 
				
			||||||
 | 
					                    { | 
				
			||||||
 | 
					                      offset: 1, | 
				
			||||||
 | 
					                      color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 | 
				
			||||||
 | 
					                    }, | 
				
			||||||
 | 
					                  ], | 
				
			||||||
 | 
					                  global: false, // 缺省为 false | 
				
			||||||
 | 
					                }, | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					          ], | 
				
			||||||
 | 
					        }; | 
				
			||||||
 | 
					        //把配置项给实例对象 | 
				
			||||||
 | 
					        this.chartInstance.setOption(this.option, true); | 
				
			||||||
 | 
					      } else { | 
				
			||||||
 | 
					        console.error("未找到有效的 DOM 元素"); | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					}; | 
				
			||||||
 | 
					</script> | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<style lang="scss" scoped> | 
				
			||||||
 | 
					.historyCharts { | 
				
			||||||
 | 
					  width: 100%; | 
				
			||||||
 | 
					  height: 4rem; | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					</style> | 
				
			||||||
@ -0,0 +1,67 @@ | 
				
			|||||||
 | 
					<template> | 
				
			||||||
 | 
					    <div class="crossed-lines-container"> | 
				
			||||||
 | 
					      <!-- 上边线 --> | 
				
			||||||
 | 
					      <div | 
				
			||||||
 | 
					        class="line horizontal-line" | 
				
			||||||
 | 
					        :style="{ width: (horizontalLength / 100) + 'rem', left: `calc(50% - ${horizontalLength / 200}rem)`, top: `calc(50% - ${(verticalLength / 200) - (overlap / 100)}rem)` }" | 
				
			||||||
 | 
					      ></div> | 
				
			||||||
 | 
					      <!-- 右边线 --> | 
				
			||||||
 | 
					      <div | 
				
			||||||
 | 
					        class="line vertical-line" | 
				
			||||||
 | 
					        :style="{ height: (verticalLength / 100) + 'rem', top: `calc(50% - ${verticalLength / 200}rem)`, left: `calc(50% + ${(horizontalLength / 200) - (overlap / 100)}rem)` }" | 
				
			||||||
 | 
					      ></div> | 
				
			||||||
 | 
					      <!-- 下边线 --> | 
				
			||||||
 | 
					      <div | 
				
			||||||
 | 
					        class="line horizontal-line" | 
				
			||||||
 | 
					        :style="{ width: (horizontalLength / 100) + 'rem', left: `calc(50% - ${horizontalLength / 200}rem)`, top: `calc(50% + ${(verticalLength / 200) - (overlap / 100)}rem)` }" | 
				
			||||||
 | 
					      ></div> | 
				
			||||||
 | 
					      <!-- 左边线 --> | 
				
			||||||
 | 
					      <div | 
				
			||||||
 | 
					        class="line vertical-line" | 
				
			||||||
 | 
					        :style="{ height: (verticalLength / 100) + 'rem', top: `calc(50% - ${verticalLength / 200}rem)`, left: `calc(50% - ${(horizontalLength / 200) - (overlap / 100)}rem)` }" | 
				
			||||||
 | 
					      ></div> | 
				
			||||||
 | 
					    </div> | 
				
			||||||
 | 
					  </template> | 
				
			||||||
 | 
					   | 
				
			||||||
 | 
					  <script> | 
				
			||||||
 | 
					  export default { | 
				
			||||||
 | 
					    props: { | 
				
			||||||
 | 
					      // 水平方向(上下边)的直线长度 | 
				
			||||||
 | 
					      horizontalLength: { | 
				
			||||||
 | 
					        type: Number, | 
				
			||||||
 | 
					        default: 100 | 
				
			||||||
 | 
					      }, | 
				
			||||||
 | 
					      // 垂直方向(左右边)的直线长度 | 
				
			||||||
 | 
					      verticalLength: { | 
				
			||||||
 | 
					        type: Number, | 
				
			||||||
 | 
					        default: 100 | 
				
			||||||
 | 
					      }, | 
				
			||||||
 | 
					      // 直线交叉时超出的长度 | 
				
			||||||
 | 
					      overlap: { | 
				
			||||||
 | 
					        type: Number, | 
				
			||||||
 | 
					        default: 10 | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  }; | 
				
			||||||
 | 
					  </script> | 
				
			||||||
 | 
					   | 
				
			||||||
 | 
					  <style scoped> | 
				
			||||||
 | 
					  .crossed-lines-container { | 
				
			||||||
 | 
					    position: relative; | 
				
			||||||
 | 
					    width: 100%; | 
				
			||||||
 | 
					    height: 100%; | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					   | 
				
			||||||
 | 
					  .line { | 
				
			||||||
 | 
					    position: absolute; | 
				
			||||||
 | 
					    background-color: rgb(45, 121, 236,0.7); | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					   | 
				
			||||||
 | 
					  .horizontal-line { | 
				
			||||||
 | 
					    height: 0.01rem; | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					   | 
				
			||||||
 | 
					  .vertical-line { | 
				
			||||||
 | 
					    width: 0.01rem; | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					  </style> | 
				
			||||||
@ -0,0 +1,452 @@ | 
				
			|||||||
 | 
					<template> | 
				
			||||||
 | 
					  <div> | 
				
			||||||
 | 
					    <div class="sys_charts" ref="sys_charts"></div> | 
				
			||||||
 | 
					  </div> | 
				
			||||||
 | 
					</template> | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script> | 
				
			||||||
 | 
					import * as echarts from "echarts"; | 
				
			||||||
 | 
					import { eventBus } from "@/utils/evenBus"; | 
				
			||||||
 | 
					import { overView } from "@/api/bigScreen"; | 
				
			||||||
 | 
					import { getDay, getMonth, getYear } from "@/utils/datetime"; | 
				
			||||||
 | 
					export default { | 
				
			||||||
 | 
					  props: { | 
				
			||||||
 | 
					    hostData: { | 
				
			||||||
 | 
					      type: Array, | 
				
			||||||
 | 
					      default: () => [], | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  data() { | 
				
			||||||
 | 
					    return { | 
				
			||||||
 | 
					      chartInstance: null, | 
				
			||||||
 | 
					      option: {}, | 
				
			||||||
 | 
					      loadPercent: "", | 
				
			||||||
 | 
					    }; | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  watch: { | 
				
			||||||
 | 
					    hostData: { | 
				
			||||||
 | 
					      immediate: true, // 页面加载时立即触发一次监听 | 
				
			||||||
 | 
					      handler(newVal, oldVal) { | 
				
			||||||
 | 
					        if (newVal) { | 
				
			||||||
 | 
					          console.log("charts传值", newVal); | 
				
			||||||
 | 
					          let data = newVal; | 
				
			||||||
 | 
					          if (data.length > 0) { | 
				
			||||||
 | 
					            data.forEach((item) => { | 
				
			||||||
 | 
					              if (item.paramType === "28") { | 
				
			||||||
 | 
					                this.loadPercent = item.curValue; | 
				
			||||||
 | 
					              } | 
				
			||||||
 | 
					            }); | 
				
			||||||
 | 
					            this.$nextTick(() => { | 
				
			||||||
 | 
					              // 销毁现有的 ECharts 实例 | 
				
			||||||
 | 
					              if (this.chartInstance) { | 
				
			||||||
 | 
					                this.chartInstance.dispose(); | 
				
			||||||
 | 
					              } | 
				
			||||||
 | 
					              // 重新初始化图表 | 
				
			||||||
 | 
					              this.initChart(); | 
				
			||||||
 | 
					            }); | 
				
			||||||
 | 
					          } else { | 
				
			||||||
 | 
					          } | 
				
			||||||
 | 
					        } | 
				
			||||||
 | 
					      }, | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  mounted() { | 
				
			||||||
 | 
					    this.initChart(); | 
				
			||||||
 | 
					    this.screenAdapter(); | 
				
			||||||
 | 
					    window.addEventListener("resize", this.screenAdapter); | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  destroyed() { | 
				
			||||||
 | 
					    //与mounted中的监听对应,在组件销毁的时候,需要将监听器取消掉 | 
				
			||||||
 | 
					    window.removeEventListener("resize", this.screenAdapter); | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  methods: { | 
				
			||||||
 | 
					    // 计算颜色设置的函数 | 
				
			||||||
 | 
					    getAxisLineColor(useData, maxData) { | 
				
			||||||
 | 
					      // 计算阈值 | 
				
			||||||
 | 
					      // 真实值大于最大值的0.75才使用颜色渐变 | 
				
			||||||
 | 
					      const threshold = maxData * 0.75; | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      // 判断实际值是否超过阈值 | 
				
			||||||
 | 
					      if (useData > threshold) { | 
				
			||||||
 | 
					        return [ | 
				
			||||||
 | 
					          [ | 
				
			||||||
 | 
					            useData / maxData, | 
				
			||||||
 | 
					            new echarts.graphic.LinearGradient(0, 0, 1, 0, [ | 
				
			||||||
 | 
					              { offset: 0, color: "rgba(0,127,208,1)" }, | 
				
			||||||
 | 
					              { offset: 0.6, color: "rgba(0,127,208,1)" }, | 
				
			||||||
 | 
					              { offset: 1, color: "rgba(69, 235, 167,0.5)" }, | 
				
			||||||
 | 
					            ]), | 
				
			||||||
 | 
					          ], | 
				
			||||||
 | 
					          [1, "rgba(28,128,245,.0)"], | 
				
			||||||
 | 
					        ]; | 
				
			||||||
 | 
					      } else { | 
				
			||||||
 | 
					        return [ | 
				
			||||||
 | 
					          [ | 
				
			||||||
 | 
					            useData / maxData, | 
				
			||||||
 | 
					            new echarts.graphic.LinearGradient(0, 0, 1, 0, [ | 
				
			||||||
 | 
					              { offset: 0, color: "rgba(0,127,208,1)" }, | 
				
			||||||
 | 
					              { offset: 0.5, color: "rgba(0,127,208,1)" }, | 
				
			||||||
 | 
					              { offset: 1, color: "rgba(0,127,208,1)" }, | 
				
			||||||
 | 
					            ]), | 
				
			||||||
 | 
					          ], | 
				
			||||||
 | 
					          [1, "rgba(28,128,245,.0)"], | 
				
			||||||
 | 
					        ]; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    //初始化chartInstance2对象 折线图 | 
				
			||||||
 | 
					    initChart() { | 
				
			||||||
 | 
					      var value = 80; | 
				
			||||||
 | 
					      // 初始化数据 | 
				
			||||||
 | 
					      const dataArr = this.loadPercent; //负载数据 | 
				
			||||||
 | 
					      const dataX = 100; | 
				
			||||||
 | 
					      this.chartInstance = echarts.init(this.$refs.sys_charts); | 
				
			||||||
 | 
					      this.option = { | 
				
			||||||
 | 
					        backgroundStyle: { | 
				
			||||||
 | 
					          borderWidth: 1, | 
				
			||||||
 | 
					          color: "transparent", | 
				
			||||||
 | 
					        }, | 
				
			||||||
 | 
					        title: [ | 
				
			||||||
 | 
					          { | 
				
			||||||
 | 
					            text: `${dataArr} %`, | 
				
			||||||
 | 
					            bottom: "8%", | 
				
			||||||
 | 
					            left: "center", | 
				
			||||||
 | 
					            textStyle: { | 
				
			||||||
 | 
					              fontSize: "16", //标记 | 
				
			||||||
 | 
					              color: "#ffff", | 
				
			||||||
 | 
					              fontWeight: 800, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            triggerEvent: true, | 
				
			||||||
 | 
					          }, | 
				
			||||||
 | 
					        ], | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        legend: { | 
				
			||||||
 | 
					          show: false, | 
				
			||||||
 | 
					        }, | 
				
			||||||
 | 
					        series: [ | 
				
			||||||
 | 
					          { | 
				
			||||||
 | 
					            name: "最外部进度条", | 
				
			||||||
 | 
					            type: "gauge", | 
				
			||||||
 | 
					            radius: "99%", | 
				
			||||||
 | 
					            splitNumber: 10, | 
				
			||||||
 | 
					            axisLine: { | 
				
			||||||
 | 
					              lineStyle: { | 
				
			||||||
 | 
					                color: [ | 
				
			||||||
 | 
					                  [ | 
				
			||||||
 | 
					                    dataArr / dataX, | 
				
			||||||
 | 
					                    { | 
				
			||||||
 | 
					                      type: "linear", | 
				
			||||||
 | 
					                      x: 0, | 
				
			||||||
 | 
					                      y: 1, | 
				
			||||||
 | 
					                      x2: 0.5, | 
				
			||||||
 | 
					                      y2: 0.5, | 
				
			||||||
 | 
					                      colorStops: [ | 
				
			||||||
 | 
					                        { | 
				
			||||||
 | 
					                          offset: 0, | 
				
			||||||
 | 
					                          color: "rgba(0,0,0,0)", // 0% 处的颜色 | 
				
			||||||
 | 
					                        }, | 
				
			||||||
 | 
					                        { | 
				
			||||||
 | 
					                          offset: 0.8, | 
				
			||||||
 | 
					                          color: "#195b9d", // 100% 处的颜色 | 
				
			||||||
 | 
					                        }, | 
				
			||||||
 | 
					                        { | 
				
			||||||
 | 
					                          offset: 1, | 
				
			||||||
 | 
					                          color: "#0a2256", // 100% 处的颜色 | 
				
			||||||
 | 
					                        }, | 
				
			||||||
 | 
					                      ], | 
				
			||||||
 | 
					                      global: false, // 缺省为 false | 
				
			||||||
 | 
					                    }, | 
				
			||||||
 | 
					                  ], | 
				
			||||||
 | 
					                  [1, "#083158"], | 
				
			||||||
 | 
					                ], | 
				
			||||||
 | 
					                width: 5, //标记 | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            axisLabel: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            axisTick: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            splitLine: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            itemStyle: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            detail: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            title: { | 
				
			||||||
 | 
					              // 标题 | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            data: [ | 
				
			||||||
 | 
					              { | 
				
			||||||
 | 
					                name: "title", | 
				
			||||||
 | 
					                value: dataArr, | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            ], | 
				
			||||||
 | 
					            pointer: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            animationDuration: 4000, | 
				
			||||||
 | 
					          }, | 
				
			||||||
 | 
					          { | 
				
			||||||
 | 
					            name: "刻度尺", | 
				
			||||||
 | 
					            type: "gauge", | 
				
			||||||
 | 
					            radius: "88%", | 
				
			||||||
 | 
					            splitNumber: 10, // 刻度数量 | 
				
			||||||
 | 
					            min: 0, // 最小刻度 | 
				
			||||||
 | 
					            max: dataX, // 最大刻度 | 
				
			||||||
 | 
					            // 分隔线 | 
				
			||||||
 | 
					            splitLine: { | 
				
			||||||
 | 
					              show: true, | 
				
			||||||
 | 
					              length: 12, | 
				
			||||||
 | 
					              lineStyle: { | 
				
			||||||
 | 
					                width: 3, | 
				
			||||||
 | 
					                color: "#12E5FE", | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            // 刻度线 | 
				
			||||||
 | 
					            axisTick: { | 
				
			||||||
 | 
					              show: true, | 
				
			||||||
 | 
					              splitNumber: 10, | 
				
			||||||
 | 
					              length: 5, | 
				
			||||||
 | 
					              lineStyle: { | 
				
			||||||
 | 
					                color: "#12E5FE", | 
				
			||||||
 | 
					                width: 2, | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            // 刻度标签 | 
				
			||||||
 | 
					            axisLabel: { | 
				
			||||||
 | 
					              distance: -8, //刻度数字离轴线的距离 | 
				
			||||||
 | 
					              color: "#CEF3FE", | 
				
			||||||
 | 
					              fontSize: "6", | 
				
			||||||
 | 
					              fontWeight: 600, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            detail: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            axisLine: { | 
				
			||||||
 | 
					              lineStyle: { | 
				
			||||||
 | 
					                width: -10, //刻度离轴线的距离 | 
				
			||||||
 | 
					                color: [ | 
				
			||||||
 | 
					                  [ | 
				
			||||||
 | 
					                    1, | 
				
			||||||
 | 
					                    { | 
				
			||||||
 | 
					                      type: "radial", | 
				
			||||||
 | 
					                      x: 0.5, | 
				
			||||||
 | 
					                      y: 0.6, | 
				
			||||||
 | 
					                      r: 0.6, | 
				
			||||||
 | 
					                      colorStops: [ | 
				
			||||||
 | 
					                        { | 
				
			||||||
 | 
					                          offset: 0.85, | 
				
			||||||
 | 
					                          color: "#031F46", // 0% 处的颜色 | 
				
			||||||
 | 
					                        }, | 
				
			||||||
 | 
					                        { | 
				
			||||||
 | 
					                          offset: 0.93, | 
				
			||||||
 | 
					                          color: "#060d25", // 100% 处的颜色 | 
				
			||||||
 | 
					                        }, | 
				
			||||||
 | 
					                        { | 
				
			||||||
 | 
					                          offset: 1, | 
				
			||||||
 | 
					                          color: "#12D7EF", // 100% 处的颜色 | 
				
			||||||
 | 
					                        }, | 
				
			||||||
 | 
					                      ], | 
				
			||||||
 | 
					                    }, | 
				
			||||||
 | 
					                  ], | 
				
			||||||
 | 
					                ], | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					          }, | 
				
			||||||
 | 
					          { | 
				
			||||||
 | 
					            name: "外部指针", | 
				
			||||||
 | 
					            type: "gauge", | 
				
			||||||
 | 
					            radius: "90%", | 
				
			||||||
 | 
					            axisLine: { | 
				
			||||||
 | 
					              lineStyle: { | 
				
			||||||
 | 
					                color: [ | 
				
			||||||
 | 
					                  [dataArr / dataX - 0.001, "rgba(0,0,0,0)"], | 
				
			||||||
 | 
					                  [dataArr / dataX + 0.003, "#e43c59"], | 
				
			||||||
 | 
					                  [1, "rgba(0,0,0,0)"], | 
				
			||||||
 | 
					                ], | 
				
			||||||
 | 
					                width: 33, | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            axisLabel: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            axisTick: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            splitLine: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            itemStyle: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            detail: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            title: { | 
				
			||||||
 | 
					              // 标题 | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            data: [ | 
				
			||||||
 | 
					              { | 
				
			||||||
 | 
					                name: "title", | 
				
			||||||
 | 
					                value: dataArr, | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            ], | 
				
			||||||
 | 
					            pointer: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					          }, | 
				
			||||||
 | 
					          { | 
				
			||||||
 | 
					            name: "内层带指针", | 
				
			||||||
 | 
					            type: "gauge", | 
				
			||||||
 | 
					            radius: "60%", | 
				
			||||||
 | 
					            splitNumber: 10, // 刻度数量 | 
				
			||||||
 | 
					            min: 0, // 最小刻度 | 
				
			||||||
 | 
					            max: dataX, // 最大刻度 | 
				
			||||||
 | 
					            // 仪表盘轴线相关配置 | 
				
			||||||
 | 
					            axisLine: { | 
				
			||||||
 | 
					              lineStyle: { | 
				
			||||||
 | 
					                color: [ | 
				
			||||||
 | 
					                  [ | 
				
			||||||
 | 
					                    1, | 
				
			||||||
 | 
					                    { | 
				
			||||||
 | 
					                      type: "radial", | 
				
			||||||
 | 
					                      x: 0.5, | 
				
			||||||
 | 
					                      y: 0.59, | 
				
			||||||
 | 
					                      r: 0.6, | 
				
			||||||
 | 
					                      colorStops: [ | 
				
			||||||
 | 
					                        { | 
				
			||||||
 | 
					                          offset: 0.72, | 
				
			||||||
 | 
					                          color: "#032046", | 
				
			||||||
 | 
					                        }, | 
				
			||||||
 | 
					                        { | 
				
			||||||
 | 
					                          offset: 0.94, | 
				
			||||||
 | 
					                          color: "#086989", | 
				
			||||||
 | 
					                        }, | 
				
			||||||
 | 
					                        { | 
				
			||||||
 | 
					                          offset: 0.98, | 
				
			||||||
 | 
					                          color: "#0FAFCB", | 
				
			||||||
 | 
					                        }, | 
				
			||||||
 | 
					                        { | 
				
			||||||
 | 
					                          offset: 1, | 
				
			||||||
 | 
					                          color: "#0EA4C1", | 
				
			||||||
 | 
					                        }, | 
				
			||||||
 | 
					                      ], | 
				
			||||||
 | 
					                    }, | 
				
			||||||
 | 
					                  ], | 
				
			||||||
 | 
					                ], | 
				
			||||||
 | 
					                width: 1000, | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            // 分隔线 | 
				
			||||||
 | 
					            splitLine: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            // 刻度线 | 
				
			||||||
 | 
					            axisTick: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            // 刻度标签 | 
				
			||||||
 | 
					            axisLabel: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            // 仪表盘指针 | 
				
			||||||
 | 
					            pointer: { | 
				
			||||||
 | 
					              show: true, | 
				
			||||||
 | 
					              length: "95%", | 
				
			||||||
 | 
					              width: 5, // 指针粗细 | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            // 仪表盘指针样式 | 
				
			||||||
 | 
					            itemStyle: { | 
				
			||||||
 | 
					              color: "#01eaf8", | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            data: [ | 
				
			||||||
 | 
					              { | 
				
			||||||
 | 
					                value: dataArr, | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            ], | 
				
			||||||
 | 
					            detail: { | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					          }, | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					          // 中间半圆装饰 | 
				
			||||||
 | 
					          { | 
				
			||||||
 | 
					            type: "gauge", | 
				
			||||||
 | 
					            radius: "110%", // 大小 | 
				
			||||||
 | 
					            center: ["50%", "127%"], | 
				
			||||||
 | 
					            axisLine: { | 
				
			||||||
 | 
					              show: true, | 
				
			||||||
 | 
					              lineStyle: { | 
				
			||||||
 | 
					                // 轴线样式 | 
				
			||||||
 | 
					                width: 4, // 宽度 | 
				
			||||||
 | 
					                color: [ | 
				
			||||||
 | 
					                  [ | 
				
			||||||
 | 
					                    1, | 
				
			||||||
 | 
					                    { | 
				
			||||||
 | 
					                      type: "radial", | 
				
			||||||
 | 
					                      x: 0.5, | 
				
			||||||
 | 
					                      y: 0, | 
				
			||||||
 | 
					                      r: 0.6, | 
				
			||||||
 | 
					                      colorStops: [ | 
				
			||||||
 | 
					                        { | 
				
			||||||
 | 
					                          offset: 0, | 
				
			||||||
 | 
					                          color: "#00f3f9", // 0% 处的颜色 | 
				
			||||||
 | 
					                        }, | 
				
			||||||
 | 
					                        { | 
				
			||||||
 | 
					                          offset: 1, | 
				
			||||||
 | 
					                          color: "#000", // 100% 处的颜色 | 
				
			||||||
 | 
					                        }, | 
				
			||||||
 | 
					                      ], | 
				
			||||||
 | 
					                    }, | 
				
			||||||
 | 
					                  ], | 
				
			||||||
 | 
					                ], | 
				
			||||||
 | 
					              }, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            axisTick: { | 
				
			||||||
 | 
					              // 刻度 | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            splitLine: { | 
				
			||||||
 | 
					              // 分割线 | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            axisLabel: { | 
				
			||||||
 | 
					              // 刻度标签 | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            pointer: { | 
				
			||||||
 | 
					              // 仪表盘指针 | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					            detail: { | 
				
			||||||
 | 
					              // 仪表盘详情 | 
				
			||||||
 | 
					              show: false, | 
				
			||||||
 | 
					            }, | 
				
			||||||
 | 
					          }, | 
				
			||||||
 | 
					        ], | 
				
			||||||
 | 
					      }; | 
				
			||||||
 | 
					      //把配置项给实例对象 | 
				
			||||||
 | 
					      this.chartInstance.setOption(this.option, true); | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    screenAdapter() { | 
				
			||||||
 | 
					      const titleFontSize = this.$refs.sys_charts.offsetWidth / 18; | 
				
			||||||
 | 
					      const adapterOption = {}; | 
				
			||||||
 | 
					      this.chartInstance.setOption(adapterOption); | 
				
			||||||
 | 
					      this.chartInstance.resize(); | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					}; | 
				
			||||||
 | 
					</script> | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<style lang="scss" scoped> | 
				
			||||||
 | 
					.sys_charts { | 
				
			||||||
 | 
					  width: 2rem; | 
				
			||||||
 | 
					  height: 2rem; | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					</style> | 
				
			||||||
@ -0,0 +1,15 @@ | 
				
			|||||||
 | 
					<template> | 
				
			||||||
 | 
					  <div class="title-img"> | 
				
			||||||
 | 
					    <img src="../../../../assets/images/big.png" class="img1" alt="" /> | 
				
			||||||
 | 
					  </div> | 
				
			||||||
 | 
					</template> | 
				
			||||||
 | 
					<style lang="scss" scoped> | 
				
			||||||
 | 
					.title-img { | 
				
			||||||
 | 
					  position: relative; | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					.img1 { | 
				
			||||||
 | 
					  width: 0.8rem; | 
				
			||||||
 | 
					  height: 0.5rem; | 
				
			||||||
 | 
					  z-index: 10; | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					</style> | 
				
			||||||
@ -0,0 +1,344 @@ | 
				
			|||||||
 | 
					<template> | 
				
			||||||
 | 
					  <div class="monitor" v-loading="loading"> | 
				
			||||||
 | 
					    <div class="monitor-top"> | 
				
			||||||
 | 
					      <img | 
				
			||||||
 | 
					        class="title-left" | 
				
			||||||
 | 
					        src="../../../assets/images/title-left.png" | 
				
			||||||
 | 
					        alt="" | 
				
			||||||
 | 
					      /> | 
				
			||||||
 | 
					      <img | 
				
			||||||
 | 
					        class="title-center" | 
				
			||||||
 | 
					        src="../../../assets/images/title-center.png" | 
				
			||||||
 | 
					        alt="" | 
				
			||||||
 | 
					      /> | 
				
			||||||
 | 
					      <img | 
				
			||||||
 | 
					        class="title-right" | 
				
			||||||
 | 
					        src="../../../assets/images/title-right.png" | 
				
			||||||
 | 
					        alt="" | 
				
			||||||
 | 
					      /> | 
				
			||||||
 | 
					      <div class="sys-title">铭汉高效冷源站管理系统</div> | 
				
			||||||
 | 
					      <!-- logo --> | 
				
			||||||
 | 
					      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" /> | 
				
			||||||
 | 
					      <div class="nowTime">{{ formattedDate }}</div> | 
				
			||||||
 | 
					      <div class="monitor-time">已监测时长:{{ dayData }}天</div> | 
				
			||||||
 | 
					      <img | 
				
			||||||
 | 
					        class="icon_warning" | 
				
			||||||
 | 
					        src="../../../assets/images/warning.png" | 
				
			||||||
 | 
					        title="报警记录" | 
				
			||||||
 | 
					        @click="goWarning" | 
				
			||||||
 | 
					        v-if="isShowWarning" | 
				
			||||||
 | 
					        alt="" | 
				
			||||||
 | 
					      /> | 
				
			||||||
 | 
					      <img | 
				
			||||||
 | 
					        class="icon_home" | 
				
			||||||
 | 
					        src="../../../assets/images/icon_home.png" | 
				
			||||||
 | 
					        title="首页" | 
				
			||||||
 | 
					        @click="goSys" | 
				
			||||||
 | 
					        alt="" | 
				
			||||||
 | 
					      /> | 
				
			||||||
 | 
					      <img | 
				
			||||||
 | 
					        class="back-icon" | 
				
			||||||
 | 
					        src="../../../assets/images/back-icon.png" | 
				
			||||||
 | 
					        title="返回" | 
				
			||||||
 | 
					        @click="goBack" | 
				
			||||||
 | 
					        alt="" | 
				
			||||||
 | 
					      /> | 
				
			||||||
 | 
					    </div> | 
				
			||||||
 | 
					    <div class="host-detail"> | 
				
			||||||
 | 
					      <div class="detail-top"> | 
				
			||||||
 | 
					        <div class="detail-top-left"></div> | 
				
			||||||
 | 
					        <div class="detail-top-middle"></div> | 
				
			||||||
 | 
					        <div class="detail-top-right"></div> | 
				
			||||||
 | 
					      </div> | 
				
			||||||
 | 
					      <div class="detail-bottom"></div> | 
				
			||||||
 | 
					    </div> | 
				
			||||||
 | 
					  </div> | 
				
			||||||
 | 
					</template> | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script> | 
				
			||||||
 | 
					import { | 
				
			||||||
 | 
					  hostDetailsData, | 
				
			||||||
 | 
					  hostTemData, | 
				
			||||||
 | 
					  runTime, | 
				
			||||||
 | 
					} from "@/api/centerairC/sysMonitor"; | 
				
			||||||
 | 
					import { alarmRecordList } from "@/api/alarm/alarmRecord"; | 
				
			||||||
 | 
					import { cpmList } from "@/api/device/gather"; | 
				
			||||||
 | 
					import LoadData from "./components/loadData.vue"; | 
				
			||||||
 | 
					import hostChart from "./components/hostChart.vue"; | 
				
			||||||
 | 
					import titleImg from "./components/titleImg.vue"; | 
				
			||||||
 | 
					import lineSquare from "./components/lineSquare.vue"; | 
				
			||||||
 | 
					import { format } from "@/utils/datetime"; | 
				
			||||||
 | 
					export default { | 
				
			||||||
 | 
					  name: "sysControl", | 
				
			||||||
 | 
					  components: { LoadData, hostChart, titleImg, lineSquare }, | 
				
			||||||
 | 
					  data() { | 
				
			||||||
 | 
					    return { | 
				
			||||||
 | 
					      loading: false, | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      currentDate: new Date(), | 
				
			||||||
 | 
					      nowTimer: null, | 
				
			||||||
 | 
					      deviceName: "", //主机名称 | 
				
			||||||
 | 
					      hostData: [], //主机参数 | 
				
			||||||
 | 
					      rightHostData: [], //右 | 
				
			||||||
 | 
					      automaticObj: {}, //手自动状态 | 
				
			||||||
 | 
					      localObj: {}, //本地远程状态 | 
				
			||||||
 | 
					      badObj: {}, //故障状态 | 
				
			||||||
 | 
					      timeObj: {}, //累计运行时间 | 
				
			||||||
 | 
					      compressorData: [], //压缩机参数 | 
				
			||||||
 | 
					      temArray: [], //冷冻冷却水温度 | 
				
			||||||
 | 
					      isMagnetic: false, | 
				
			||||||
 | 
					      isShowWarning: false, //是否有报警 | 
				
			||||||
 | 
					      dayData: "", //监测天数 | 
				
			||||||
 | 
					    }; | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  computed: { | 
				
			||||||
 | 
					    formattedDate() { | 
				
			||||||
 | 
					      const year = this.currentDate.getFullYear(); | 
				
			||||||
 | 
					      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0"); | 
				
			||||||
 | 
					      const day = String(this.currentDate.getDate()).padStart(2, "0"); | 
				
			||||||
 | 
					      const hours = String(this.currentDate.getHours()).padStart(2, "0"); | 
				
			||||||
 | 
					      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0"); | 
				
			||||||
 | 
					      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0"); | 
				
			||||||
 | 
					      const weekDays = [ | 
				
			||||||
 | 
					        "星期日", | 
				
			||||||
 | 
					        "星期一", | 
				
			||||||
 | 
					        "星期二", | 
				
			||||||
 | 
					        "星期三", | 
				
			||||||
 | 
					        "星期四", | 
				
			||||||
 | 
					        "星期五", | 
				
			||||||
 | 
					        "星期六", | 
				
			||||||
 | 
					      ]; | 
				
			||||||
 | 
					      const weekDay = weekDays[this.currentDate.getDay()]; | 
				
			||||||
 | 
					      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`; | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  created() {}, | 
				
			||||||
 | 
					  mounted() { | 
				
			||||||
 | 
					    this.getHostDetailsData(); | 
				
			||||||
 | 
					    this.getDayData(); | 
				
			||||||
 | 
					    // 在组件挂载后尝试进入全屏 | 
				
			||||||
 | 
					    setTimeout(() => { | 
				
			||||||
 | 
					      this.requestFullscreen(); | 
				
			||||||
 | 
					    }, 100); // 延迟 100 毫秒执行全屏操作 | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  beforeDestroy() { | 
				
			||||||
 | 
					    // 组件销毁前清除定时器 | 
				
			||||||
 | 
					    if (this.nowTimer) { | 
				
			||||||
 | 
					      clearInterval(this.nowTimer); | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					  methods: { | 
				
			||||||
 | 
					    // 全屏操作 | 
				
			||||||
 | 
					    requestFullscreen() { | 
				
			||||||
 | 
					      const element = document.documentElement; | 
				
			||||||
 | 
					      console.log("全屏了吗"); | 
				
			||||||
 | 
					      if (element.requestFullscreen) { | 
				
			||||||
 | 
					        element.requestFullscreen(); | 
				
			||||||
 | 
					      } else if (element.mozRequestFullScreen) { | 
				
			||||||
 | 
					        // Firefox | 
				
			||||||
 | 
					        element.mozRequestFullScreen(); | 
				
			||||||
 | 
					      } else if (element.webkitRequestFullscreen) { | 
				
			||||||
 | 
					        // Chrome, Safari and Opera | 
				
			||||||
 | 
					        element.webkitRequestFullscreen(); | 
				
			||||||
 | 
					      } else if (element.msRequestFullscreen) { | 
				
			||||||
 | 
					        // IE/Edge | 
				
			||||||
 | 
					        element.msRequestFullscreen(); | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    // 退出全屏 | 
				
			||||||
 | 
					    exitFullscreen() { | 
				
			||||||
 | 
					      if (document.exitFullscreen) { | 
				
			||||||
 | 
					        document.exitFullscreen(); | 
				
			||||||
 | 
					      } else if (document.mozCancelFullScreen) { | 
				
			||||||
 | 
					        // Firefox | 
				
			||||||
 | 
					        document.mozCancelFullScreen(); | 
				
			||||||
 | 
					      } else if (document.webkitExitFullscreen) { | 
				
			||||||
 | 
					        // Chrome, Safari and Opera | 
				
			||||||
 | 
					        document.webkitExitFullscreen(); | 
				
			||||||
 | 
					      } else if (document.msExitFullscreen) { | 
				
			||||||
 | 
					        // IE/Edge | 
				
			||||||
 | 
					        document.msExitFullscreen(); | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    // 进入系统首页 | 
				
			||||||
 | 
					    goSys() { | 
				
			||||||
 | 
					      this.exitFullscreen(); | 
				
			||||||
 | 
					      this.$router.push("/"); | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    // 返回上一页 | 
				
			||||||
 | 
					    goBack() { | 
				
			||||||
 | 
					      this.$router.back(); | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    getHostDetailsData() { | 
				
			||||||
 | 
					      // 请求数据 | 
				
			||||||
 | 
					      // this.getHostParams(deviceLedgerId); | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    // 监测天数 | 
				
			||||||
 | 
					    getDayData() { | 
				
			||||||
 | 
					      runTime().then((res) => { | 
				
			||||||
 | 
					        if (res.code == 200) { | 
				
			||||||
 | 
					          this.dayData = res.data.runTime; | 
				
			||||||
 | 
					        } | 
				
			||||||
 | 
					      }); | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    // 报警列表 | 
				
			||||||
 | 
					    getAlarnStatus() { | 
				
			||||||
 | 
					      let data = { | 
				
			||||||
 | 
					        pageNum: 1, | 
				
			||||||
 | 
					        pageSize: 10, | 
				
			||||||
 | 
					        status: "0", | 
				
			||||||
 | 
					      }; | 
				
			||||||
 | 
					      let timeArr = [getDay(0), getDay(0)]; | 
				
			||||||
 | 
					      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => { | 
				
			||||||
 | 
					        if (res.code == 200 && res.rows.length > 0) { | 
				
			||||||
 | 
					          this.isShowWarning = true; | 
				
			||||||
 | 
					        } else { | 
				
			||||||
 | 
					          this.isShowWarning = false; | 
				
			||||||
 | 
					        } | 
				
			||||||
 | 
					      }); | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					    goWarning() { | 
				
			||||||
 | 
					      this.exitFullscreen(); | 
				
			||||||
 | 
					      this.$router.push("/alarm/alarmRecord"); | 
				
			||||||
 | 
					    }, | 
				
			||||||
 | 
					  }, | 
				
			||||||
 | 
					}; | 
				
			||||||
 | 
					</script> | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<style lang="scss" scoped> | 
				
			||||||
 | 
					.monitor { | 
				
			||||||
 | 
					  width: 100%; | 
				
			||||||
 | 
					  min-height: 100vh; | 
				
			||||||
 | 
					  height: auto; | 
				
			||||||
 | 
					  background-color: black; | 
				
			||||||
 | 
					  color: #fff; | 
				
			||||||
 | 
					  .monitor-top { | 
				
			||||||
 | 
					    width: 100%; | 
				
			||||||
 | 
					    display: flex; | 
				
			||||||
 | 
					    flex-direction: row; | 
				
			||||||
 | 
					    align-items: flex-start; | 
				
			||||||
 | 
					    justify-content: space-between; | 
				
			||||||
 | 
					    flex-wrap: nowrap; | 
				
			||||||
 | 
					    padding: 0.1rem 0.2rem; | 
				
			||||||
 | 
					    position: relative; | 
				
			||||||
 | 
					    .title-left { | 
				
			||||||
 | 
					      width: 3.41rem; | 
				
			||||||
 | 
					      height: 0.8rem; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    .title-center { | 
				
			||||||
 | 
					      width: 9.46rem; | 
				
			||||||
 | 
					      height: 0.69rem; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    .title-right { | 
				
			||||||
 | 
					      width: 5.04rem; | 
				
			||||||
 | 
					      height: 0.61rem; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    .sys-title { | 
				
			||||||
 | 
					      position: absolute; | 
				
			||||||
 | 
					      top: 40%; | 
				
			||||||
 | 
					      left: 50%; | 
				
			||||||
 | 
					      transform: translate(-50%, -50%); | 
				
			||||||
 | 
					      font-size: 0.28rem; | 
				
			||||||
 | 
					      color: #ffffff; | 
				
			||||||
 | 
					      font-weight: bold; | 
				
			||||||
 | 
					      z-index: 100; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    .nowTime { | 
				
			||||||
 | 
					      position: absolute; | 
				
			||||||
 | 
					      top: 0.3rem; | 
				
			||||||
 | 
					      right: 0.6rem; | 
				
			||||||
 | 
					      font-size: 0.18rem; | 
				
			||||||
 | 
					      color: #ffffff; | 
				
			||||||
 | 
					      font-weight: bold; | 
				
			||||||
 | 
					      z-index: 100; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    .sys-logo { | 
				
			||||||
 | 
					      width: 1.8rem; | 
				
			||||||
 | 
					      height: 0.5rem; | 
				
			||||||
 | 
					      position: absolute; | 
				
			||||||
 | 
					      top: 0.26rem; | 
				
			||||||
 | 
					      left: 0.8rem; | 
				
			||||||
 | 
					      z-index: 10; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    .monitor-time { | 
				
			||||||
 | 
					      position: absolute; | 
				
			||||||
 | 
					      top: 0.44rem; | 
				
			||||||
 | 
					      left: 4.2rem; | 
				
			||||||
 | 
					      z-index: 10; | 
				
			||||||
 | 
					      font-size: 0.18rem; | 
				
			||||||
 | 
					      color: #ffffff; | 
				
			||||||
 | 
					      font-weight: bold; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    .icon_warning { | 
				
			||||||
 | 
					      position: absolute; | 
				
			||||||
 | 
					      top: 0.33rem; | 
				
			||||||
 | 
					      right: 4.4rem; | 
				
			||||||
 | 
					      z-index: 10; | 
				
			||||||
 | 
					      width: 0.3rem; | 
				
			||||||
 | 
					      height: 0.27rem; | 
				
			||||||
 | 
					      margin: 0 0.25rem 0 0.27rem; | 
				
			||||||
 | 
					      cursor: pointer; | 
				
			||||||
 | 
					      /* 添加闪烁动画 */ | 
				
			||||||
 | 
					      animation: blink 1s infinite; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    @keyframes blink { | 
				
			||||||
 | 
					      100% { | 
				
			||||||
 | 
					        opacity: 1; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					      50% { | 
				
			||||||
 | 
					        opacity: 0; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    .icon_home { | 
				
			||||||
 | 
					      position: absolute; | 
				
			||||||
 | 
					      top: 0.33rem; | 
				
			||||||
 | 
					      right: 4rem; | 
				
			||||||
 | 
					      z-index: 10; | 
				
			||||||
 | 
					      width: 0.3rem; | 
				
			||||||
 | 
					      height: 0.27rem; | 
				
			||||||
 | 
					      margin: 0 0.2rem 0 0.27rem; | 
				
			||||||
 | 
					      cursor: pointer; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    .back-icon { | 
				
			||||||
 | 
					      position: absolute; | 
				
			||||||
 | 
					      top: 0.33rem; | 
				
			||||||
 | 
					      right: 3.7rem; | 
				
			||||||
 | 
					      z-index: 10; | 
				
			||||||
 | 
					      width: 0.3rem; | 
				
			||||||
 | 
					      height: 0.27rem; | 
				
			||||||
 | 
					      cursor: pointer; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					  .host-detail { | 
				
			||||||
 | 
					    padding: 0.2rem; | 
				
			||||||
 | 
					    width: 100%; | 
				
			||||||
 | 
					    display: flex; | 
				
			||||||
 | 
					    flex-direction: column; | 
				
			||||||
 | 
					    .detail-top { | 
				
			||||||
 | 
					      width: 100%; | 
				
			||||||
 | 
					      display: flex; | 
				
			||||||
 | 
					      flex-direction: row; | 
				
			||||||
 | 
					      align-items: center; | 
				
			||||||
 | 
					      justify-content: space-between; | 
				
			||||||
 | 
					      .detail-top-left { | 
				
			||||||
 | 
					        width: 7rem; | 
				
			||||||
 | 
					        height: 4.4rem; | 
				
			||||||
 | 
					        // background-color: aquamarine; | 
				
			||||||
 | 
					        position: relative; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					      .detail-top-right { | 
				
			||||||
 | 
					        width: calc(100% - 7.25rem); | 
				
			||||||
 | 
					        height: 4.4rem; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    .detail-bottom { | 
				
			||||||
 | 
					      height: 2.6rem; | 
				
			||||||
 | 
					      margin-top: 0.3rem; | 
				
			||||||
 | 
					      margin-left: 0.25rem; | 
				
			||||||
 | 
					      display: flex; | 
				
			||||||
 | 
					      flex-direction: row; | 
				
			||||||
 | 
					      justify-content: space-between; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					</style> | 
				
			||||||