<template>
|
<div id="chartTableContent" style="width: 100%; height: 100%">
|
<div class="topSelect">
|
<!-- <el-cascader v-model="newMac" :options="options" clearable change-on-select :props="{ checkStrictly: true }" placeholder="选择设备" /> -->
|
<el-cascader
|
v-model="newMac"
|
:options="options"
|
:props="props"
|
collapse-tags
|
clearable
|
placeholder="选择设备"
|
style="width: 354px"
|
/>
|
<!-- <div> -->
|
<el-select v-model="value" placeholder="选择因子" style="margin-left: 20px">
|
<el-option v-for="(item, index) in newSensor" :key="index" :label="item.label" :value="item.value" />
|
</el-select>
|
<!-- </div> -->
|
<!-- <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="select1" placeholder="请选择" style="margin-left: 20px; width: 200px">
|
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
<component
|
:is="dataType"
|
style="padding-left: 0; margin-left: 20px; width: 160px"
|
class="select11"
|
@sendPickerChild="showPickerChild"
|
/>
|
<!--查询按钮-->
|
<el-button class="btn1" @click="selectData">查询</el-button>
|
</div>
|
<div class="topTitle">
|
<div style="position: absolute">{{ selectyz }}</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 style="padding: 0px 10px;margin-bottom: 50px;">
|
<el-table v-if="searchData.length>0" :data="tableData" border size="mini" style="width: 100%" max-height="250" tooltip-effect>
|
<el-table-column prop="rankingTitle" label="日期" width="150" align="center">
|
<el-table-column
|
prop="rankingTitle"
|
label="高值"
|
align="center"
|
width="150"
|
/>
|
</el-table-column>
|
<template v-for="(th, thIndex) in thArr">
|
<el-table-column :key="thIndex" align="center" :label="th.label" :prop="th.prop" />
|
</template>
|
</el-table>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
|
import LineChart from '@/components/Echarts/LineChart2'
|
import DatePicker from '@/components/Form/DatePicker'
|
import MouthPicker from '@/components/Form/MouthPicker'
|
import HourPicker from '@/components/Form/HourPicker'
|
import HourPicker1 from '@/components/Form/HourPicker1'
|
import CustomPicker from '@/components/Form/CustomPicker'
|
import CustomPicker1 from '@/components/Form/CustomPicker1'
|
import TimePicker1 from '@/components/Form/TimePicker1'
|
import json from '@/assets/json/sensor.json'
|
import _ from 'lodash'
|
|
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 引入的组件需要注入到对象中才能使用
|
components: {
|
LineChart,
|
DatePicker,
|
MouthPicker,
|
HourPicker,
|
CustomPicker,
|
CustomPicker1,
|
TimePicker1,
|
HourPicker1
|
},
|
filters: {
|
sensorFilter: function(value) {
|
if (!value) return ''
|
return json[value]
|
}
|
},
|
props: {
|
// defaultData: Array
|
},
|
data() {
|
// 这里存放数据
|
return {
|
dataType: 'HourPicker',
|
lineChartData: lineChartData.purchases,
|
props: { multiple: true },
|
options: [],
|
value: '',
|
select1: '日报',
|
selectyz: '(单位:ug/m³)',
|
newMac: '',
|
newMac1: [],
|
newSensor: [] /* 因子数组 */,
|
radio1: '日报',
|
unit: 'day',
|
type: 'select',
|
newLineChartData: {
|
series: [],
|
xAxis: [],
|
title: ''
|
},
|
newData: '',
|
defaultData: [],
|
medium: '',
|
isSelect: false,
|
options1: [
|
{
|
label: '五分钟报',
|
value: '五分钟报'
|
},
|
{
|
label: '小时报',
|
value: '小时报'
|
},
|
{
|
label: '日报',
|
value: '日报'
|
},
|
{
|
label: '月报',
|
value: '月报'
|
}
|
],
|
searchData: []
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {
|
thArr() {
|
const data = []
|
if (this.searchData.length > 0) {
|
this.searchData.forEach((item, index) => {
|
data.push({
|
label: item.time,
|
name: item.time,
|
prop: 'souceData' + index
|
})
|
})
|
console.log(data)
|
}
|
return data
|
},
|
tableData() {
|
const data = []
|
const souceData = []
|
const firstData = []
|
const fobj = {}
|
const sobj = {}
|
if (this.searchData.length > 0) {
|
this.searchData.forEach((item, index) => {
|
fobj['souceData' + index] = this.sortFind(item.deviceData)[0].name
|
sobj['souceData' + index] = this.sortFind(item.deviceData)[1].name
|
})
|
}
|
const a = [...firstData]
|
data.push({ ...fobj, rankingTitle: '第一高值' }, { ...sobj, rankingTitle: '第二高值' })
|
console.log('firstData', fobj)
|
console.log('souceData', sobj)
|
console.log('datadatadata', data)
|
return data
|
}
|
},
|
// 监控data中的数据变化
|
watch: {
|
// 监听设备的数据更新
|
newMac(newVal, oldval) {
|
this.newMac1 = []
|
for (let i = 0; i < newVal.length; i++) {
|
// console.log(newVal[i], 111)
|
this.newMac1.push(newVal[i][1][1])
|
}
|
// 设备更新后，重新获取因子数据
|
this.getSensor()
|
},
|
// 监听dataType的数据更新
|
select1(nv, ov) {
|
if (nv === '日报') {
|
this.dataType = 'HourPicker'
|
this.unit = 'day'
|
} else if (nv === '月报') {
|
this.dataType = 'DatePicker'
|
this.unit = 'month'
|
} else if (nv === '年报') {
|
this.dataType = 'MouthPicker'
|
this.unit = 'month'
|
} else if (nv === '小时报') {
|
this.dataType = 'HourPicker1'
|
this.unit = 'hour'
|
} else if (nv === '五分钟报') {
|
this.dataType = 'HourPicker1'
|
this.unit = 'FiveMinute'
|
} else {
|
this.dataType = 'CustomPicker'
|
this.unit = 'hour'
|
}
|
},
|
value(one, two) {
|
if (
|
one === 'a34004' ||
|
one === 'a34002' ||
|
one === 'a21004' ||
|
one === 'a21026' ||
|
one === 'a05024'
|
) {
|
this.selectyz = '(单位:ug/m³)'
|
} else if (
|
one === 'a21005' ||
|
one === 'a99054' ||
|
one === 'a31001' ||
|
one === 'a24088'
|
) {
|
this.selectyz = '(单位:mg/m³)'
|
} else if (one === 'a01001') {
|
this.selectyz = '(单位:℃)'
|
} else if (one === 'a01002') {
|
this.selectyz = '(单位:%)'
|
} else if (one === 'a01007') {
|
this.selectyz = '(单位:m/s)'
|
} else if (one === 'a01008') {
|
this.selectyz = '(单位:。)'
|
} else if (one === 'a01006') {
|
this.selectyz = '(单位:hpa)'
|
} else if (one === 'a00e12') {
|
this.selectyz = '(单位:lux)'
|
} else if (one === 'a19002') {
|
this.selectyz = '(单位:无)'
|
} else if (one === 'a00e03' || one === 'a00e04') {
|
this.selectyz = '(单位:pcs/0.1L)'
|
} else if (one === 'a00e13') {
|
this.selectyz = '(单位:db)'
|
} else if (
|
one === 'a21028' ||
|
one === 'a25002' ||
|
one === 'a21001' ||
|
one === 'a25005' ||
|
one === 'a25003'
|
) {
|
this.selectyz = '(单位:ppm)'
|
}
|
}
|
},
|
// 生命周期 - 创建完成（可以访问当前 this 实例）
|
created() {
|
this.getData()
|
},
|
// 生命周期 - 挂载完成（可以访问 DOM 元素）
|
// mounted() {
|
//
|
// },
|
beforeCreate() { }, // 生命周期 - 创建之前
|
beforeMount() { }, // 生命周期 - 挂载之前
|
beforeUpdate() { }, // 生命周期 - 更新之前
|
updated() { }, // 生命周期 - 更新之后
|
beforeDestroy() { }, // 生命周期 - 销毁之前
|
destroyed() { }, // 生命周期 - 销毁完成
|
activated() { },
|
// 方法集合
|
methods: {
|
sortFind(data) {
|
let arr = []
|
let a = ''
|
let b = ''
|
// const duplicateValue = _.orderBy(this.refrain(data), ['sensorValue'], ['desc']) // 重复值排序
|
// console.log('duplicateValue', duplicateValue)
|
const originalValue = _.orderBy(data, ['sensorValue'], ['desc'])
|
const firstIndex = []
|
const fiestDateList = []
|
const secondeIndex = []
|
const secondeDateList = []
|
console.log('originalValue', originalValue)
|
if ((Number(originalValue[0].sensorValue) === Number(0))) {
|
return [{ name: '/' }, { name: '/' }]
|
}
|
originalValue.forEach((value, inx) => {
|
if ((Number(originalValue[0].sensorValue) === Number(value.sensorValue))) {
|
firstIndex.push(inx)
|
}
|
})
|
|
if (firstIndex.length > 1) {
|
firstIndex.forEach(item => {
|
a += (originalValue[item].name).replace(/\s+/g, '') + '(' + originalValue[item].sensorValue + ')' + ','
|
})
|
fiestDateList.push({
|
name: a
|
})
|
// 第二高值
|
const secondInd = firstIndex[firstIndex.length - 1]
|
originalValue.forEach((value, inx) => {
|
if ((Number(originalValue[secondInd].sensorValue) === Number(value.sensorValue))) {
|
secondeIndex.push(inx)
|
}
|
})
|
secondeIndex.forEach(item => {
|
b += (originalValue[item].name).replace(/\s+/g, '') + '(' + originalValue[item].sensorValue + ')' + ','
|
})
|
secondeDateList.push({
|
name: b
|
})
|
} else if (firstIndex.length <= 1) {
|
fiestDateList.push({
|
name: (originalValue[0].name).replace(/\s+/g, '') + '(' + originalValue[0].sensorValue + ')'
|
})
|
if (originalValue.length > 1) {
|
originalValue.forEach((value, inx) => {
|
if ((Number(originalValue[1].sensorValue) === Number(value.sensorValue))) {
|
secondeIndex.push(inx)
|
}
|
})
|
secondeIndex.forEach(item => {
|
b += (originalValue[item].name).replace(/\s+/g, '') + '(' + originalValue[item].sensorValue + ')' + ','
|
})
|
secondeDateList.push({
|
name: b
|
})
|
}
|
}
|
console.log('fiestDateList', fiestDateList)
|
console.log('secondeDateList', secondeDateList)
|
arr = fiestDateList.concat(secondeDateList)
|
console.log('arr', arr)
|
return arr
|
// console.log('refrainrefrainrefrain', this.refrain(data))
|
// const arr = []
|
// const duplicates = data.filter(item => data.indexOf(item) !== data.lastIndexOf(item))
|
// unUnit.forEach(item => {
|
// _.find(data, function(o) { return Number(item.sensorValue) === Number(o.sensorValue) })
|
// arr.push()
|
// })
|
},
|
// 查询数据
|
selectData() {
|
console.log(this.newData)
|
var newLineChartData = {
|
series: [],
|
xAxis: [],
|
title: []
|
}
|
this.newXData = []
|
this.$request({
|
url: '/deviceInfo/getTrendChartData',
|
method: 'post',
|
data: {
|
macs: this.newMac1,
|
sensorCode: this.value,
|
type: this.unit,
|
// times: data instanceof Array ? data : [data]
|
times: this.newData instanceof Array ? this.newData : [this.newData]
|
}
|
})
|
.then((res) => {
|
// console.log('获得时间对应因子数据')
|
this.searchData = _.cloneDeep(res.data)
|
const data = _.cloneDeep(res.data)
|
console.log('this.se', this.searchData)
|
const lockLength = 0
|
for (let i = 0; i < data.length; i++) {
|
for (let j = 0; j < data[i].deviceData.length; j++) {
|
if (res.data[0].deviceData.length === 1) {
|
if (lockLength < data[i].deviceData.length) {
|
newLineChartData.series.push({
|
data: [],
|
triggerLineEvent: true,
|
emphasis: {
|
focus: 'series'
|
},
|
name: '',
|
type: 'line',
|
label: {
|
show: true,
|
position: 'top'
|
}
|
})
|
}
|
} else {
|
newLineChartData.series.push({
|
data: [],
|
name: '',
|
triggerLineEvent: true,
|
emphasis: { focus: 'series' },
|
type: 'line'
|
})
|
}
|
newLineChartData.series[j].name = data[i].deviceData[j].name
|
newLineChartData.title.push(data[i].deviceData[j].name)
|
newLineChartData.series[j].data.push(
|
data[i].deviceData[j].sensorValue
|
)
|
}
|
newLineChartData.xAxis.push(data[i].time)
|
}
|
// newLineChartData.title = this.value
|
this.lineChartData = newLineChartData
|
console.log(lineChartData, 'newLineChartData')
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
// 请求左侧设备数据
|
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 = []
|
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)
|
})
|
},
|
// 通过设备号获得因子数据
|
getSensor() {
|
this.newSensor = []
|
// 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((result) => {
|
// console.log(result)
|
// this.newSensor = []
|
var sensor = result.data
|
for (var i in sensor) {
|
this.newSensor.push({ value: i, label: sensor[i] })
|
// this.newSensor[i].value = sensor.i
|
// this.newSensor[i].name = sensor[i]
|
}
|
})
|
.catch((err) => {
|
console.log(err)
|
})
|
},
|
// 获得子组件时间选择器传递的数据
|
showPickerChild(data) {
|
this.newData = data
|
}
|
} // 如果页面有keep-alive缓存功能，这个函数会触发
|
}
|
</script>
|
<style scoped lang="scss">
|
#chartTableContent{
|
overflow-y: scroll;
|
overflow-x: hidden;
|
}
|
.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%;
|
}
|
/*::v-deep 这里主要的作用就是用来强制修改element默认的样式*/
|
::v-deep .el-table thead.is-group th {
|
background: none;
|
padding: 0px;
|
}
|
|
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
|
border-bottom: none; /*中间的横线去掉*/
|
}
|
|
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
|
text-align: right; /*上边文字靠右*/
|
}
|
|
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
|
text-align: left; /*下边文字靠左*/
|
}
|
/*核心代码*/
|
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
|
content: "";
|
position: absolute;
|
width: 1px;
|
height: 100px; /*斜线的长度*/
|
top: 0;
|
left: 0;
|
background-color: grey;
|
opacity: 0.2;
|
display: block;
|
transform: rotate(-43deg); /*调整斜线的角度*/
|
transform: rotate(-70deg); /*调整斜线的角度*/
|
-webkit-transform-origin: top;
|
transform-origin: top;
|
}
|
|
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
|
content: "";
|
position: absolute;
|
width: 1px;
|
height: 100px; /*斜线的长度*/
|
bottom: 0;
|
right: 0;
|
background-color: grey;
|
opacity: 0.2;
|
display: block;
|
transform: rotate(-45deg); /*调整斜线的角度*/
|
transform: rotate(-70deg); /*调整斜线的角度*/
|
-webkit-transform-origin: bottom;
|
transform-origin: bottom;
|
}
|
::v-deep .el-table thead.is-group th {
|
height: 27.4px;
|
}
|
|
</style>
|
