Merge branch 'feature_1.0'

quanyawei

2023-09-19 076d8685573236fd044bdbcd167b60652e8799cd

Merge branch 'feature_1.0'

 src/components/Echarts/LineChart2.vue

@@ -27,6 +27,10 @@
      type: Boolean,
      default: true,
    },
    isMouse: {
      type: Boolean,
      default: false,
    },
    chartData: {
      type: Object,
      required: true,
@@ -89,6 +93,42 @@
        return res * fontSize
      }
      let that = this
      if (this.isMouse) {
        this.chart.on('mouseover', function (params) {
          that.chart.setOption({
            series: [
              {
                name: params.seriesName,
                label: {
                  show: true,
                  fontSize: 16,
                  position: [10, -15],
                  formatter: '{c}'
                }
              }
            ]
          })
        })
        // 增加监听，mouseout事件（鼠标离开）
        this.chart.on('mouseout', function (params) {
          that.chart.setOption({
            series: [
              {
                name: params.seriesName,
                lineStyle: {
                  width: 2
                },
                label: {
                  show: false
                },
                endLabel: {
                  show: false
                }
              }
            ]
          })
        })
      }
      this.chart.setOption(
        {
          title: {
@@ -188,8 +228,14 @@

          yAxis: {
            axisTick: {
              show: false, // 轴线刻度
              show: true, // 轴线刻度
            },
            axisLine: {
              show: true, //不显示坐标轴线
            },
            axisLabel: {
              show: true, //不显示坐标轴上的文字
            }
            // axisLine: {
            //   lineStyle: {
            //     color: '#000000'

 src/components/Echarts/LineChartSpe.vue

@@ -6,7 +6,7 @@
</template>

<script>
import echarts from 'echarts'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

@@ -48,7 +48,7 @@
      handler(val) {
        this.setOptions(val)
      },
      deep: true,
      deep: true
    },
  },
  mounted() {
@@ -66,9 +66,11 @@
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.clear()
      this.setOptions(this.chartData)
    },
    setOptions(val) {
      let that = this
      function fontSize(res) {
        let clientWidth =
          window.innerWidth ||
@@ -78,107 +80,95 @@
        let fontSize = 100 * (clientWidth / 1920)
        return res * fontSize
      }
      /**
   * 增加监听，mouseover事件（鼠标放在上面）
   * 节点事件触发 是默认开启的，我们再开启了线事件触发后，
   * 目前鼠标放在线上或者放在节点上都能触发下面的监听，
   * 事件触发后，修改series内对应系列的参数配置。
   * 注：params内包含系列名称等信息
   */
      this.chart.on('mouseover', function (params) {
        that.chart.setOption({
          series: [
            {
              name: params.seriesName,
              label: {
                show: true,
                fontSize: 16,
                position: [10, -15],
                formatter: '{c}'
              }
            }
          ]
        })
      })
      // 增加监听，mouseout事件（鼠标离开）
      this.chart.on('mouseout', function (params) {
        that.chart.setOption({
          series: [
            {
              name: params.seriesName,
              lineStyle: {
                width: 2
              },
              label: {
                show: false
              },
              endLabel: {
                show: false
              }
            }
          ]
        })
      })
      this.chart.setOption(
        {
          xAxis: {
            data: val.xAxis,
            boundaryGap: true,
            boundaryGap: false,
            axisTick: {
              show: true,
            },
            

          },
          grid: {
            left: 100,
            right: 10,
            bottom: 20,
            top: 30,
            height: fontSize(4),
            width: fontSize(15),
            left: '5%',
            right: '5%',
            top: '5%',
            containLabel: true,
            height: fontSize(4.3),
          },
          // toolbox: {
          //   feature: {
          //     dataZoom: {
          //       yAxisIndex: 'none',
          //     },
          //     restore: {},
          //     saveAsImage: {},
          //   },
          // },
          // tooltip: {
          //   trigger: 'axis',
          //   position: function(pt) {
          //     return [pt[0], '10%']
          //   }
          // },
          tooltip: {
            trigger: 'axis',
            position: function (pt) {
              return [pt[0], '10%']
            },
            // formatter(params) {
            //   console.log(params,'ssss');
            //   let data=[]
            //   for (let i = 0; i < params.length; i++) {
            //     data+=params[i].seriesName + '&nbsp:' +'&nbsp&nbsp'+params[i].value+ '<br/>'
            //   }
            // return data
            // },
            backgroundColor: 'rgba(50,50,50,0.5)',
            textStyle: {
              color: 'rgb(255, 255, 255);',
              fontSize: fontSize(0.117), // 字体大小
              lineHeight: 0
            }
          },

          yAxis: [
            {
              type: 'value',
              position: 'left',
              axisLabel: {
                show: true,
              },
          yAxis: {
            axisTick: {
              show: true, // 轴线刻度
            },
            {
              type: 'value',
              position: 'right',
              axisLabel: {
                show: true,
              },
            axisLine: {
              show: true, //不显示坐标轴线
            },
            {
              type: 'value',
              position: 'right',
              offset: 50,
              axisLabel: {
                show: true,
              },
              min: 'dataMin', //取最小值为最小刻度
              max: 'dataMax', //取最大值为最大刻度
              min: function (value) {
                //取最小值向下取整为最小刻度
                return Math.floor(value.min)
              },
              max: function (value) {
                //取最大值向上取整为最大刻度
                return Math.ceil(value.max)
              },

              scale: true, //自适应
              minInterval: 0.1, //分割刻度
            },
            {
              type: 'value',
              position: 'left',
              axisLabel: {
                show: true,
              },
              offset: 50,
            },
          ],
            axisLabel: {
              show: true, //不显示坐标轴上的文字
            }
          },
          legend: {
            icon: 'circle',
            itemHeight: 15,
            // textStyle: {
            //   fontSize: 18
            // },
            data: val.title,
            tooltip: {
              show: true,
            },
            textStyle: {
              fontSize: fontSize(0.15),
            },
            widht: 'auto',
            height: 'auto',
            top: fontSize(5.5),
          },
          dataZoom: [
            {
@@ -193,34 +183,11 @@
              height: fontSize(0.4),
            },
          ],
          series: val.series,
          // [{
          //   name: JSON.parse(JSON.stringify(val.title)),
          //   itemStyle: {
          //     normal: {
          //       color: '#7AC5CD',
          //       lineStyle: {
          //         color: '#7AC5CD',
          //         width: 2
          //       }
          //     }
          //   },
          //   smooth: true,
          //   type: 'line',
          //   data: val.series,
          //   animationDuration: 2800,
          //   animationEasing: 'cubicInOut',
          //   areaStyle: {},
          //   label: {
          //     normal: {
          //       show: true,
          //       position: 'top'
          //     }
          //   }
          // }]
          series: val.series
        },
        true
      )
      window.onresize = this.chart.resize
    },
  },
}

 src/views/averageContrast/index.vue

@@ -1,39 +1,16 @@
<template>
  <div style="width: 100%">
    <div class="topSelect">
      <el-cascader
        v-model="newMac"
        :options="options"
        clearable
        placeholder="选择设备"
        style="width: 354px"
      />
      <el-select
        v-model="value"
        placeholder="选择因子"
        style="margin-left: 20px"
      >
        <el-option
          v-for="item in newSensor"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      <el-cascader v-model="newMac" :options="options" clearable placeholder="选择设备" style="width: 354px" />
      <el-select v-model="value" placeholder="选择因子" style="margin-left: 20px">
        <el-option v-for="item in newSensor" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <!-- <el-radio-group v-model="radio1" style="margin-left:20px">
        <el-radio-button label="日报" />
        <el-radio-button label="月报" />
      </el-radio-group> -->
      <el-date-picker
        v-model="timevalue"
        type="datetimerange"
        range-separator="至"
        value-format="yyyy-MM-dd HH"
        start-placeholder="开始日期"
        :picker-options="pickerOptions"
        end-placeholder="结束日期"
        style="margin-left: 1rem"
      >
      <el-date-picker v-model="timevalue" type="datetimerange" range-separator="至" value-format="yyyy-MM-dd HH"
        start-placeholder="开始日期" :picker-options="pickerOptions" end-placeholder="结束日期" style="margin-left: 1rem">
      </el-date-picker>
      <!--查询按钮-->
      <el-button @click="selectData" class="btn1">查询</el-button>
@@ -46,7 +23,7 @@
      <div style="position:absolute">(单位:ug/m³)</div>
      <div style="text-align: center;width: 100%;">{{ newData }}·{{ newMac?newMac[0]:'' }}·{{ newMac?newMac[newMac.length - 1][0]:'' }}·{{ value |sensorFilter }}·趋势图</div>
    </div> -->
    <LineChart :chart-data="lineChartData" style="height: 30rem" />
    <LineChart :chart-data="lineChartData" :isMouse="true" style="height: 30rem" />
  </div>
</template>

@@ -199,14 +176,14 @@
    this.getData()
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  mounted() { },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    // 请求左侧设备数据
@@ -301,7 +278,10 @@
          //   }
          // }
          for (let i = 0; i < 3; i++) {
            newLineChartData.series.push({ data: [], name: '', type: 'line' })
            newLineChartData.series.push({
              data: [], name: '', type: 'line', triggerLineEvent: true,
              emphasis: { focus: 'series' }
            })
            for (let j = 0; j < data.length; j++) {
              newLineChartData.series[i].data.push(data[j].values[i])
              newLineChartData.series[i].name = this.seriesName[i]
@@ -395,21 +375,25 @@
  display: flex;
  margin-bottom: 20px;
  padding: 20px 15px 0 15px;

  span:first-child {
    flex: 1;
  }

  div:last-child {
    width: 300px;
    line-height: 40px;
    padding-left: 6px;
  }
}

.topTitle {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 15px;
}

.btn1 {
  margin-left: 1%;
  height: 40px;

 src/views/contrast/index.vue

@@ -1,22 +1,9 @@
+<template>
<template>
  <div style="width: 100%; height: 100%; margin:0 auto">
    <div class="topSelect">
      <el-cascader
        v-model="newMac"
        :options="options"
        clearable
        placeholder="选择设备"
        style="width: 354px"
      />
      <el-cascader
        v-model="value"
        :options="newSensor"
        :props="props"
        collapse-tags
        clearable
        placeholder="选择因子"
        style="margin-left: 20px"
      />
      <el-cascader v-model="newMac" :options="options" clearable placeholder="选择设备" style="width: 354px" />
      <el-cascader v-model="value" :options="newSensor" :props="props" collapse-tags clearable placeholder="选择因子"
        style="margin-left: 20px" />
      <!-- <el-select v-model="value" placeholder="选择因子">
        <el-option
          v-for="item in newSensor"
@@ -31,25 +18,12 @@
      <!-- <el-radio-button label="年报" />
        <el-radio-button label="自定义" /> -->
      <!-- </el-radio-group>  -->
      <el-select
        v-model="radio1"
        placeholder="请选择"
        style="margin-left: 20px"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
      <el-select v-model="radio1" placeholder="请选择" style="margin-left: 20px">
        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <component
        :is="dataType"
        class="select11"
        style="padding-left: 0; margin-left: 20px; width: 160px"
        @sendPickerChild="showPickerChild"
      />
      <component :is="dataType" class="select11" style="padding-left: 0; margin-left: 20px; width: 160px"
        @sendPickerChild="showPickerChild" />
      <!--查询按钮-->
      <el-button @click="selectData" class="btn1">查询</el-button>
    </div>
@@ -57,7 +31,7 @@
      <div style="position:absolute">(单位:ug/m³)</div>
      <div style="text-align: center;width: 100%;">{{ newData }}·{{ newMac?newMac[0]:'' }}·{{ newMac?newMac[newMac.length - 1][0]:'' }}·{{ value |sensorFilter }}·趋势图</div>
    </div> -->
    <LineChart :chart-data="lineChartData"  style="height: 40rem;"/>
    <LineChart :chart-data="lineChartData" style="height: 40rem;" />
  </div>
</template>

@@ -197,14 +171,14 @@
    this.getData()
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  mounted() { },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    // 请求左侧设备数据
@@ -274,7 +248,7 @@
        series: [],
        xAxis: [],
        title: [],
        yAxis:[]
        yAxis: []
      }
      this.newXData = []
      this.$request({
@@ -300,12 +274,15 @@
            newLineChartData.xAxis.push(data[0].timeValueList[i].time)
          }
          for (var i = 0; i < data.length; i++) {
            newLineChartData.series.push({ data: [], name: '', type: 'line' ,yAxisIndex:data[i].code,lineStyle:{width:4}})
            newLineChartData.series.push({
              data: [], name: '', type: 'line', triggerLineEvent: true,
              emphasis: { focus: 'series' }, lineStyle: { width: 4 }
            })
            // newLineChartData.yAxis.push({})
            newLineChartData.series[i].name = data[i].name
            newLineChartData.title.push(data[i].name);
            for (var j = 0; j < data[i].timeValueList.length; j++) {
             newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
              newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
            }
          }
          this.lineChartData = newLineChartData
@@ -502,28 +479,34 @@
  display: flex;
  margin-bottom: 20px;
  padding: 20px 15px 0 15px;

  span:first-child {
    flex: 1;
  }

  div:last-child {
    width: 300px;
    line-height: 40px;
    padding-left: 6px;
  }
}

.topTitle {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 15px;
}

.btn1 {
  margin-left: 1%;
  height: 40px;
}

.select11 {
  width: 20% !important;
}

/deep/.el-date-editor .el-range-separator {
  width: 11%;
}