| | |
| | | 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 |
| | | 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-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 |
| | | 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" |
| | |
| | | @sendPickerChild="showPickerChild" |
| | | /> |
| | | <!--查询按钮--> |
| | | <el-button class="btn1" @click="selectData">查询</el-button> |
| | | <el-button class="btn1" @click="selectData"> 查询 </el-button> |
| | | </div> |
| | | <div class="topTitle"> |
| | | <div style="position: absolute">{{ selectyz }}</div> |
| | | <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="dark"> |
| | | <el-table-column prop="rankingTitle" label="日期" width="100" align="center" fixed="left"> |
| | | <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="dark" |
| | | > |
| | | <el-table-column |
| | | prop="rankingTitle" |
| | | label="日期" |
| | | width="100" |
| | | align="center" |
| | | fixed="left" |
| | | > |
| | | <el-table-column |
| | | prop="rankingTitle" |
| | | class-name="rankingTitle" |
| | |
| | | /> |
| | | </el-table-column> |
| | | <template v-for="(th, thIndex) in thArr"> |
| | | <el-table-column :key="thIndex" align="center" :label="th.label" :prop="th.prop" :show-overflow-tooltip="true" min-width="120"> |
| | | <el-table-column |
| | | :key="thIndex" |
| | | align="center" |
| | | :label="th.label" |
| | | :prop="th.prop" |
| | | :show-overflow-tooltip="true" |
| | | min-width="120" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" v-html="scope.row[th.prop]" /> |
| | | <div |
| | | style=" |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | " |
| | | v-html="scope.row[th.prop]" |
| | | /> |
| | | </template> |
| | | </el-table-column> |
| | | </template> |
| | | </el-table> |
| | | </div> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | HourPicker1 |
| | | }, |
| | | filters: { |
| | | sensorFilter: function(value) { |
| | | if (!value) return '' |
| | | sensorFilter: function (value) { |
| | | if (!value) { return '' } |
| | | return json[value] |
| | | } |
| | | }, |
| | | props: { |
| | | // defaultData: Array |
| | | }, |
| | | data() { |
| | | data () { |
| | | // 这里存放数据 |
| | | return { |
| | | dataType: 'HourPicker', |
| | |
| | | }, |
| | | // 计算属性 类似于data概念 |
| | | computed: { |
| | | thArr() { |
| | | thArr () { |
| | | const data = [] |
| | | if (this.searchData.length > 0) { |
| | | this.searchData.forEach((item, index) => { |
| | |
| | | } |
| | | return data |
| | | }, |
| | | tableData() { |
| | | tableData () { |
| | | const data = [] |
| | | 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 ? this.sortFind(item.deviceData)[1]?.name : '--' |
| | | if (item.deviceData.length > 0) { |
| | | fobj['souceData' + index] = this.sortFind(item.deviceData)[0].name |
| | | sobj['souceData' + index] = this.sortFind(item.deviceData)[1]?.name ? this.sortFind(item.deviceData)[1]?.name : '--' |
| | | } |
| | | |
| | | }) |
| | | } |
| | | 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) { |
| | | newMac (newVal, oldval) { |
| | | this.newMac1 = [] |
| | | for (let i = 0; i < newVal.length; i++) { |
| | | // console.log(newVal[i], 111) |
| | |
| | | this.getSensor() |
| | | }, |
| | | // 监听dataType的数据更新 |
| | | select1(nv, ov) { |
| | | select1 (nv, ov) { |
| | | if (nv === '日报') { |
| | | this.dataType = 'HourPicker' |
| | | this.unit = 'day' |
| | |
| | | this.unit = 'hour' |
| | | } |
| | | }, |
| | | value(one, two) { |
| | | value (one, two) { |
| | | if ( |
| | | one === 'a34004' || |
| | | one === 'a34002' || |
| | |
| | | } |
| | | }, |
| | | // 生命周期 - 创建完成(可以访问当前 this 实例) |
| | | created() { |
| | | created () { |
| | | this.getData() |
| | | }, |
| | | // 生命周期 - 挂载完成(可以访问 DOM 元素) |
| | | // mounted() { |
| | | // |
| | | // }, |
| | | beforeCreate() { }, // 生命周期 - 创建之前 |
| | | beforeMount() { }, // 生命周期 - 挂载之前 |
| | | beforeUpdate() { }, // 生命周期 - 更新之前 |
| | | updated() { }, // 生命周期 - 更新之后 |
| | | beforeDestroy() { }, // 生命周期 - 销毁之前 |
| | | destroyed() { }, // 生命周期 - 销毁完成 |
| | | activated() { }, |
| | | beforeCreate () { }, // 生命周期 - 创建之前 |
| | | beforeMount () { }, // 生命周期 - 挂载之前 |
| | | beforeUpdate () { }, // 生命周期 - 更新之前 |
| | | updated () { }, // 生命周期 - 更新之后 |
| | | beforeDestroy () { }, // 生命周期 - 销毁之前 |
| | | destroyed () { }, // 生命周期 - 销毁完成 |
| | | activated () { }, |
| | | // 方法集合 |
| | | methods: { |
| | | sortFind(data) { |
| | | 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']) |
| | | let allData = data.map(item => { |
| | | if (item.sensorValue !== null) { |
| | | return item |
| | | } else { |
| | | item.sensorValue = '0.0' |
| | | return item |
| | | } |
| | | |
| | | }) |
| | | |
| | | const originalValue = _.orderBy(allData, ['sensorValue'], ['desc']) |
| | | const firstIndex = [] |
| | | const fiestDateList = [] |
| | | const secondeIndex = [] |
| | | const secondeDateList = [] |
| | | console.log('originalValue', originalValue) |
| | | console.log('allData', allData) |
| | | if ((Number(originalValue[0].sensorValue) === Number(0))) { |
| | | return [{ name: '--' }, { name: '--' }] |
| | | } |
| | |
| | | }) |
| | | } |
| | | } |
| | | 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 = [] |
| | |
| | | // }) |
| | | }, |
| | | // 查询数据 |
| | | selectData() { |
| | | selectData () { |
| | | console.log(this.newData) |
| | | var newLineChartData = { |
| | | series: [], |
| | |
| | | }) |
| | | }, |
| | | // 请求左侧设备数据 |
| | | getData() { |
| | | getData () { |
| | | this.$request({ |
| | | url: '/monitorPoint/queryMonitorPoints', |
| | | method: 'get', |
| | |
| | | }) |
| | | }, |
| | | // 通过设备号获得因子数据 |
| | | getSensor() { |
| | | getSensor () { |
| | | this.newSensor = [] |
| | | // stringMacs.su |
| | | // var newMac = this.newMac[this.newMac.length - 1][this.newMac[this.newMac.length - 1].length - 1] |
| | |
| | | }) |
| | | }, |
| | | // 获得子组件时间选择器传递的数据 |
| | | showPickerChild(data) { |
| | | showPickerChild (data) { |
| | | this.newData = data |
| | | } |
| | | } // 如果页面有keep-alive缓存功能,这个函数会触发 |
| | | } |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | #chartTableContent{ |
| | | #chartTableContent { |
| | | overflow-y: scroll; |
| | | overflow-x: hidden; |
| | | } |
| | |
| | | } |
| | | /*核心代码*/ |
| | | ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before { |
| | | content: ""; |
| | | content: ''; |
| | | position: absolute; |
| | | width: 1px; |
| | | height: 100px; /*斜线的长度*/ |
| | |
| | | } |
| | | |
| | | ::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before { |
| | | content: ""; |
| | | content: ''; |
| | | position: absolute; |
| | | width: 1px; |
| | | height: 100px; /*斜线的长度*/ |
| | |
| | | ::v-deep .el-table thead.is-group th { |
| | | height: 27.4px; |
| | | } |
| | | ::v-deep .el-table thead{ |
| | | ::v-deep .el-table thead { |
| | | color: #000; |
| | | font-size: 15px; |
| | | } |
| | | ::v-deep .el-table tr{ |
| | | ::v-deep .el-table tr { |
| | | font-size: 15px; |
| | | } |
| | | /deep/.numColor{ |
| | | /deep/.numColor { |
| | | color: red; |
| | | display: inline-block; |
| | | margin-right: 8px; |
| | | margin-right: 8px; |
| | | } |
| | | /deep/.rankingTitle{ |
| | | /deep/.rankingTitle { |
| | | font-weight: 700; |
| | | color: #000; |
| | | } |
| | | </style> |
| | | <style> |
| | | .el-tooltip__popper{ |
| | | font-size: 16px!important; |
| | | .el-tooltip__popper { |
| | | font-size: 16px !important; |
| | | } |
| | | </style> |