| | |
| | | <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" |
| | |
| | | <!-- <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-option> |
| | | <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" /> |
| | | <component |
| | | :is="dataType" |
| | | class="select11" |
| | | style="padding-left: 0; margin-left: 20px; width: 160px" |
| | | @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: 40rem;" /> |
| | | <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: [], |
| | |
| | | } |
| | | for (var i = 0; i < data.length; i++) { |
| | | newLineChartData.series.push({ |
| | | data: [], name: '', type: 'line', triggerLineEvent: true, |
| | | emphasis: { focus: 'series' }, lineStyle: { width: 4 } |
| | | 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) |
| | | } |
| | |
| | | }) |
| | | }, |
| | | // 获得子组件时间选择器传递的数据 |
| | | 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 |
| | | ) |