<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-select v-model="value" placeholder="选择因子">
|
<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-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>
|
<component
|
:is="dataType"
|
class="select11"
|
style="padding-left: 0; margin-left: 20px; width: 160px"
|
@sendPickerChild="showPickerChild"
|
/>
|
<!--查询按钮-->
|
<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: 40rem;"
|
/>
|
</div>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
|
import LineChart from '@/components/Echarts/LineChartSpe'
|
import DatePicker from '@/components/Form/DatePicker'
|
import MouthPicker from '@/components/Form/MouthPicker'
|
import HourPicker from '@/components/Form/HourPicker'
|
import CustomPicker from '@/components/Form/CustomPicker'
|
import json from '@/assets/json/sensor.json'
|
import HourPicker1 from '@/components/Form/HourPicker1'
|
const lineChartData = {
|
newVisitis: {
|
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
actualData: [120, 82, 91, 154, 162, 140, 145],
|
},
|
messages: {
|
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
actualData: [180, 160, 151, 106, 145, 150, 130],
|
},
|
purchases: {
|
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
actualData: [120, 90, 100, 138, 142, 130, 130],
|
},
|
shoppings: {
|
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
actualData: [120, 82, 91, 154, 162, 140, 130],
|
},
|
}
|
export default {
|
// import 引入的组件需要注入到对象中才能使用props
|
components: {
|
LineChart,
|
DatePicker,
|
MouthPicker,
|
HourPicker,
|
CustomPicker,
|
HourPicker1,
|
},
|
filters: {
|
sensorFilter: function (value) {
|
if (!value) return ''
|
return json[value]
|
},
|
},
|
props: {
|
// defaultData: Array
|
},
|
data () {
|
// 这里存放数据
|
return {
|
isYaxisSame: ['a34004', 'a34002', 'a05024', 'a21004', 'a21026'],
|
dataType: 'HourPicker',
|
lineChartData: lineChartData.purchases,
|
props: { multiple: true },
|
options: [],
|
value: '',
|
value1: '',
|
newMac: '',
|
newMac1: [],
|
// newMac2:'',
|
newSensor: [],
|
radio1: '日报',
|
unit: 1,
|
type: 'select',
|
newLineChartData: {
|
series: [],
|
xAxis: [],
|
title: '',
|
},
|
newData: '',
|
defaultData: [],
|
newListData: [],
|
chartSensorName: '',
|
middleData: [],
|
options1: [
|
{
|
label: '小时报',
|
value: '小时报',
|
},
|
{
|
label: '日报',
|
value: '日报',
|
},
|
{
|
label: '月报',
|
value: '月报',
|
},
|
],
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {},
|
// 监控data中的数据变化
|
watch: {
|
newMac (newVal, oldval) {
|
this.newMac1 = []
|
// for (let i = 0; i < newVal.length; i++) {
|
// this.newMac1.push(newVal[i][1][1])
|
// }
|
this.newMac1.push(newVal[1][1])
|
this.getSensor()
|
// if (newVal.length === 2) {
|
// this.getSensor()
|
// }
|
},
|
value (n, o) {
|
this.value1 = []
|
for (let i = 0; i < n.length; i++) {
|
this.value1.push(n[i][0])
|
}
|
},
|
radio1 (nv, ov) {
|
if (nv === '日报') {
|
this.dataType = 'HourPicker'
|
this.unit = 1
|
} else if (nv === '月报') {
|
this.dataType = 'DatePicker'
|
this.unit = 3
|
} else if (nv === '小时报') {
|
this.dataType = 'HourPicker1'
|
this.unit = 0
|
}
|
// else if (nv === '年报') {
|
// this.dataType = 'MouthPicker'
|
// this.unit = 'month'
|
// } else {
|
// this.dataType = 'CustomPicker'
|
// this.unit = 'hour'
|
// }
|
},
|
},
|
// 生命周期 - 创建完成（可以访问当前 this 实例）
|
created () {
|
this.getData()
|
},
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
mounted () { },
|
beforeCreate () { }, // 生命周期 - 创建之前
|
beforeMount () { }, // 生命周期 - 挂载之前
|
beforeUpdate () { }, // 生命周期 - 更新之前
|
updated () { }, // 生命周期 - 更新之后
|
beforeDestroy () { }, // 生命周期 - 销毁之前
|
destroyed () { }, // 生命周期 - 销毁完成
|
activated () { },
|
// 方法集合
|
methods: {
|
// 请求左侧设备数据
|
getData () {
|
this.$request({
|
url: '/monitorPoint/queryMonitorPoints',
|
method: 'get',
|
params: {
|
organizationId: this.$store.state.orgId,
|
},
|
})
|
.then((res) => {
|
// console.log('这是index页面左侧设备数据')
|
// console.log(res)
|
this.defaultData = res.data.monitorPoints
|
for (let i = 0; i < this.defaultData.length; i++) {
|
this.options.push({
|
value: this.defaultData[i].name,
|
label: this.defaultData[i].name,
|
})
|
this.options[i].children = []
|
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,
|
})
|
}
|
}
|
}
|
})
|
.catch((error) => {
|
console.log(error)
|
})
|
},
|
// 通过mac号获得因子
|
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]
|
this.$request({
|
url: '/deviceInfo/getMacSensors',
|
method: 'post',
|
data: {
|
macs: this.newMac1,
|
},
|
})
|
.then((res) => {
|
// console.log(res)
|
this.newSensor = []
|
var sensor = res.data
|
for (var i in sensor) {
|
this.newSensor.push({ value: i, label: sensor[i] })
|
// this.newSensor.push({ value: '123', label: '123' })
|
// this.newSensor[i].value = sensor.i
|
// this.newSensor[i].name = sensor[i]
|
}
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
// 查询
|
selectData () {
|
var newLineChartData = {
|
series: [],
|
xAxis: [],
|
title: [],
|
yAxis: []
|
}
|
this.newXData = []
|
this.$request({
|
// dataDisplay/sensorComparisonDisplayV2
|
url: '/dataDisplay/sensorComparisonDisplayV2',
|
method: 'post',
|
data: {
|
mac: this.newMac1[0],
|
sensorCodes: this.value1,
|
reportType: this.unit,
|
times: this.newData,
|
},
|
})
|
.then((res) => {
|
console.log('获得时间对应因子数据', res.data)
|
const data = res.data
|
let yAxisList = []
|
for (let i = 0; i < data.length; i++) {
|
data[i].name = this.$options.filters.sensorFilter(
|
data[i].sensorCode
|
)
|
}
|
for (let i = 0; i < data[0].timeValueList.length; i++) {
|
newLineChartData.xAxis.push(data[0].timeValueList[i].time)
|
}
|
|
for (var i = 0; i < data.length; i++) {
|
if (this.isYaxisSame.includes(data[i].sensorCode)) {
|
yAxisList.push(data[i].name)
|
} else {
|
newLineChartData.yAxis.push(
|
{name: data[i].name,
|
code: data[i].sensorCode,
|
type: 'value',
|
position: 'left',
|
axisTick: {
|
show: true, // 轴线刻度
|
},
|
axisLine: {
|
show: true, // 不显示坐标轴线
|
},
|
splitNumber: 4, // 设置坐标轴的分割段数
|
splitLine: {
|
// 去除网格线
|
show: false,
|
},
|
},
|
)
|
}
|
|
newLineChartData.series.push({
|
data: [],
|
name: data[i].name,
|
code: data[i].sensorCode,
|
type: 'line',
|
triggerLineEvent: true,
|
yAxisIndex: 0,
|
emphasis: { focus: 'series' },
|
lineStyle: { width: 4 }
|
})
|
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)
|
}
|
}
|
if (yAxisList.length > 0) {
|
newLineChartData.yAxis = [ {
|
type: 'value',
|
position: 'left',
|
axisTick: {
|
show: true, // 轴线刻度
|
},
|
axisLine: {
|
show: true, // 不显示坐标轴线
|
},
|
splitNumber: 4, // 设置坐标轴的分割段数
|
splitLine: {
|
// 去除网格线
|
show: false,
|
},
|
}, ...newLineChartData.yAxis]
|
}
|
newLineChartData.yAxis.forEach((item, index) => {
|
item.position = (index + 1) % 2 === 0 ? 'right' : 'left'
|
item.offset = this.getoffsetData(index)
|
})
|
newLineChartData.series.forEach(item => {
|
item.yAxisIndex = yAxisList.includes(item.name) ? 0 : newLineChartData.yAxis.findIndex(
|
i => i.code && item.code === i.code
|
)
|
})
|
this.lineChartData = newLineChartData
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
// 获得子组件时间选择器传递的数据
|
showPickerChild (data) {
|
// var newLineChartData = {
|
// series: [],
|
// xAxis: [],
|
// title: []
|
// }
|
this.newData = data
|
// this.newXData = []
|
// this.$request({
|
// url: '/dataDisplay/sensorComparisonDisplay',
|
// method: 'post',
|
// data: {
|
// mac: this.newMac1[0],
|
// sensors: this.value1,
|
// reportType: this.unit,
|
// time: this.newData
|
// // time: data
|
// }
|
// }).then((res) => {
|
// // console.log('获得时间对应因子数据')
|
// // console.log(res)
|
// this.middleData = JSON.parse(JSON.stringify(res.data))
|
// const data = res.data
|
// // 无量纲算法
|
// // 遍历因子数组
|
// for (let i = 0; i < data.length; i++) {
|
// // 使用因子名称过滤替换方法
|
// data[i].name = this.$options.filters.sensorFilter(data[i].sensorCode)
|
// // data[i].name = data[i].sensorCode
|
// var tempArray = []
|
// for (let j = 0; j < data[i].timeValueList.length; j++) {
|
// tempArray.push(data[i].timeValueList[j].value)
|
// }
|
// data[i].MaxValue = this.getMaxValue(tempArray)
|
// data[i].sort = i
|
// }
|
// // 大数组MaxValue降序方法
|
// data.sort(this.compare('MaxValue', false))
|
// // 用1除以选择因子的数量
|
// var step = Math.floor((1 / data.length) * 100) / 100
|
// data[0].Factor = 1
|
// // 以降序排的数组，第一个为基准值，从第二个开始计算
|
// for (let i = 1; i < data.length; i++) {
|
// // 拿到最大值
|
// var supposemMaxValue = data[0].MaxValue - i * step * data[0].MaxValue
|
// if (data[i].MaxValue < supposemMaxValue) {
|
// data[i].Factor = supposemMaxValue / data[i].MaxValue
|
// }
|
// }
|
// // 大数组sort升序方法
|
// data.sort(this.compare('sort', true))
|
// // 给折线图数据添加遍历
|
// // for (let i = 0; i < data.length; i++) {
|
// // newLineChartData.series.push({ data: [], name: '', type: 'line' })
|
// // newLineChartData.series[i].name = data[i].name
|
// // newLineChartData.title.push(data[i].name)
|
// // for (let j = 0; j < data[i].timeValueList.length; j++) {
|
// // data[i].timeValueList[j].value = data[i].timeValueList[j].value * data[i].Factor
|
// // newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
|
// // }
|
// // }
|
// for (let i = 0; i < data.length; i++) {
|
// newLineChartData.series.push({ data: [], name: '', type: 'line' })
|
// newLineChartData.series[i].name = data[i].name
|
// newLineChartData.title.push(data[i].name)
|
// for (let j = 0; j < data[i].timeValueList.length; j++) {
|
// data[i].timeValueList[j].value = data[i].timeValueList[j].value * data[i].Factor
|
// newLineChartData.series[i].data.push({ value: 0, data0: 0 })
|
// newLineChartData.series[i].data[j].value = data[i].timeValueList[j].value
|
// }
|
// }
|
// for (let i = 0; i < data[0].timeValueList.length; i++) {
|
// newLineChartData.xAxis.push(data[0].timeValueList[i].time)
|
// }
|
// // 给图表tooltip赋值原始数据
|
// for (let i = 0; i < this.middleData.length; i++) {
|
// for (let j = 0; j < this.middleData[i].timeValueList.length; j++) {
|
// newLineChartData.series[i].data[j].data0 = this.middleData[i].timeValueList[j].value
|
// }
|
// }
|
// this.lineChartData = newLineChartData
|
// }).catch((err) => {
|
// console.log(err)
|
// })
|
},
|
// 获取y轴偏移距离
|
getoffsetData (val) {
|
if (val === 0 || val === 1) return 0
|
if (val % 2 === 0) {
|
return val / 2 * 60
|
}
|
if (val % 2 !== 0) {
|
return val / 3 * 60
|
}
|
},
|
// 获取最大值
|
getMaxValue (arr) {
|
// return Math.max.apply(null, arr)
|
return Math.max(...arr)
|
},
|
// 对比排序函数
|
compare (property, desc) {
|
return (a, b) => {
|
var value1 = a[property]
|
var value2 = b[property]
|
if (desc === true) {
|
return value1 - value2
|
} else {
|
return value2 - value1
|
}
|
}
|
},
|
// 过滤图表因子名称
|
filterSensorName () {
|
this.chartSensorName = this.$options.filters.sensorFilter(
|
this.chartSensorKey[0].sensorCode
|
)
|
},
|
}, // 如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
<style scoped lang="scss">
|
.topSelect {
|
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%;
|
}
|
</style>
|
