| | |
| | | +<template> |
| | | <template> |
| | | <div style="width: 100%; height: 100%; margin:0 auto"> |
| | | <div class="topSelect"> |
| | | <el-cascader |
| | |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | /> |
| | | </el-select> |
| | | <component |
| | | :is="dataType" |
| | |
| | | @sendPickerChild="showPickerChild" |
| | | /> |
| | | <!--查询按钮--> |
| | | <el-button @click="selectData" class="btn1">查询</el-button> |
| | | <el-button |
| | | class="btn1" |
| | | @click="selectData" |
| | | > |
| | | 查询 |
| | | </el-button> |
| | | </div> |
| | | <!-- <div class="topTitle"> |
| | | <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: 23rem;"/> |
| | | <LineChart |
| | | :chart-data="lineChartData" |
| | | style="height: 40rem;" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | props: { |
| | | // defaultData: Array |
| | | }, |
| | | data() { |
| | | data () { |
| | | // 这里存放数据 |
| | | return { |
| | | dataType: 'HourPicker', |
| | |
| | | computed: {}, |
| | | // 监控data中的数据变化 |
| | | watch: { |
| | | newMac(newVal, oldval) { |
| | | newMac (newVal, oldval) { |
| | | this.newMac1 = [] |
| | | // for (let i = 0; i < newVal.length; i++) { |
| | | // this.newMac1.push(newVal[i][1][1]) |
| | |
| | | // this.getSensor() |
| | | // } |
| | | }, |
| | | value(n, o) { |
| | | value (n, o) { |
| | | this.value1 = [] |
| | | for (let i = 0; i < n.length; i++) { |
| | | this.value1.push(n[i][0]) |
| | | } |
| | | }, |
| | | radio1(nv, ov) { |
| | | radio1 (nv, ov) { |
| | | if (nv === '日报') { |
| | | this.dataType = 'HourPicker' |
| | | this.unit = 0 |
| | |
| | | }, |
| | | }, |
| | | // 生命周期 - 创建完成(可以访问当前 this 实例) |
| | | created() { |
| | | created () { |
| | | this.getData() |
| | | }, |
| | | // 生命周期 - 挂载完成(可以访问 DOM 元素) |
| | | mounted() {}, |
| | | beforeCreate() {}, // 生命周期 - 创建之前 |
| | | beforeMount() {}, // 生命周期 - 挂载之前 |
| | | beforeUpdate() {}, // 生命周期 - 更新之前 |
| | | updated() {}, // 生命周期 - 更新之后 |
| | | beforeDestroy() {}, // 生命周期 - 销毁之前 |
| | | destroyed() {}, // 生命周期 - 销毁完成 |
| | | activated() {}, |
| | | mounted () { }, |
| | | beforeCreate () { }, // 生命周期 - 创建之前 |
| | | beforeMount () { }, // 生命周期 - 挂载之前 |
| | | beforeUpdate () { }, // 生命周期 - 更新之前 |
| | | updated () { }, // 生命周期 - 更新之后 |
| | | beforeDestroy () { }, // 生命周期 - 销毁之前 |
| | | destroyed () { }, // 生命周期 - 销毁完成 |
| | | activated () { }, |
| | | // 方法集合 |
| | | methods: { |
| | | // 请求左侧设备数据 |
| | | getData() { |
| | | getData () { |
| | | this.$request({ |
| | | url: '/monitorPoint/queryMonitorPoints', |
| | | method: 'get', |
| | |
| | | label: this.defaultData[i].name, |
| | | }) |
| | | this.options[i].children = [] |
| | | for (let j = 0; j < this.defaultData[i].devices.length; j++) { |
| | | this.options[i].children.push({ |
| | | value: [ |
| | | this.defaultData[i].devices[j].name, |
| | | this.defaultData[i].devices[j].mac, |
| | | ], |
| | | label: this.defaultData[i].devices[j].name, |
| | | }) |
| | | if (this.defaultData[i].devices) { |
| | | for (let j = 0; j < this.defaultData[i].devices.length; j++) { |
| | | this.options[i].children.push({ |
| | | value: [ |
| | | this.defaultData[i].devices[j].name, |
| | | this.defaultData[i].devices[j].mac, |
| | | ], |
| | | label: this.defaultData[i].devices[j].name, |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | }) |
| | |
| | | }) |
| | | }, |
| | | // 通过mac号获得因子 |
| | | getSensor() { |
| | | getSensor () { |
| | | // stringMacs.su |
| | | // var newMac = this.newMac[this.newMac.length - 1][this.newMac[this.newMac.length - 1].length - 1] |
| | | // this.newMac1 = this.newMac[this.newMac.length - 1][this.newMac[this.newMac.length - 1].length - 1] |
| | |
| | | }) |
| | | }, |
| | | // 查询 |
| | | selectData() { |
| | | selectData () { |
| | | var newLineChartData = { |
| | | series: [], |
| | | xAxis: [], |
| | | title: [], |
| | | yAxis:[] |
| | | yAxis: [] |
| | | } |
| | | this.newXData = [] |
| | | this.$request({ |
| | |
| | | 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}) |
| | | 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); |
| | | 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) |
| | | newLineChartData.series[i].data.push(data[i].timeValueList[j].value === 0 ? undefined : data[i].timeValueList[j].value) |
| | | } |
| | | } |
| | | this.lineChartData = newLineChartData |
| | |
| | | }) |
| | | }, |
| | | // 获得子组件时间选择器传递的数据 |
| | | showPickerChild(data) { |
| | | showPickerChild (data) { |
| | | // var newLineChartData = { |
| | | // series: [], |
| | | // xAxis: [], |
| | |
| | | // }) |
| | | }, |
| | | // 获取最大值 |
| | | getMaxValue(arr) { |
| | | getMaxValue (arr) { |
| | | // return Math.max.apply(null, arr) |
| | | return Math.max(...arr) |
| | | }, |
| | | // 对比排序函数 |
| | | compare(property, desc) { |
| | | compare (property, desc) { |
| | | return (a, b) => { |
| | | var value1 = a[property] |
| | | var value2 = b[property] |
| | |
| | | } |
| | | }, |
| | | // 过滤图表因子名称 |
| | | filterSensorName() { |
| | | filterSensorName () { |
| | | this.chartSensorName = this.$options.filters.sensorFilter( |
| | | this.chartSensorKey[0].sensorCode |
| | | ) |
| | |
| | | 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%; |
| | | } |