263 lines
9.1 KiB
Vue
263 lines
9.1 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 温度1 -->
|
||
<view class="historyCurve-leakage">
|
||
<view class="historyCurve-leakage-title">
|
||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||
<text class="pl20">线路1温度</text>
|
||
</view>
|
||
<view class="historyCurve-leakage-content">
|
||
<view class="historyCurve-leakage-switch">
|
||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||
:class="{leakageAction:line1_pickIndex==index}" @click="switch1Fn(item,index)">{{item}}</view>
|
||
</view>
|
||
<view class="historyCurve-leakage-chart">
|
||
<template v-if="line1_pickIndex == 0">
|
||
<columnScroll canvasId="temperatureColumn1" @onRenderFinsh="onRenderFinshBarLine1" :width="690" :chartData="line1_dataSource" :reshowStatus="line1_barChart" v-show="line1_barChart"></columnScroll>
|
||
</template>
|
||
<template v-else-if="line1_pickIndex == 1">
|
||
<lineScroll canvasId="temperatureLine1" @onRenderComplete="onRenderCompleteLine1" :width="690" :chartData="line1_dataSource" :reshowStatus="line1_polyLineChart" v-show="line1_polyLineChart"></lineScroll>
|
||
</template>
|
||
<template v-else-if="line1_pickIndex == 2">
|
||
<htable :prodDataList="line1_dataSource" @onRenderFinsh="onRenderFinshTableLine1" v-show="line1_tableChart" :reshowStatus="line1_tableChart"></htable>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 温度2 -->
|
||
<view class="historyCurve-leakage" v-if="render2">
|
||
<view class="historyCurve-leakage-title">
|
||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||
<text class="pl20">线路2温度</text>
|
||
</view>
|
||
<view class="historyCurve-leakage-content">
|
||
<view class="historyCurve-leakage-switch">
|
||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||
:class="{leakageAction:line2_pickIndex==index}" @click="switch2Fn(item,index)">{{item}}</view>
|
||
</view>
|
||
<view class="historyCurve-leakage-chart">
|
||
<template v-if="line2_pickIndex == 0">
|
||
<columnScroll canvasId="temperatureColumn2" @onRenderFinsh="onRenderFinshBarLine2" :width="690" :chartData="line2_dataSource" :reshowStatus="line2_barChart" v-show="line2_barChart"></columnScroll>
|
||
</template>
|
||
<template v-else-if="line2_pickIndex == 1">
|
||
<lineScroll canvasId="temperatureLine2" @onRenderComplete="onRenderCompleteLine2" :width="690" :chartData="line2_dataSource" :reshowStatus="line2_polyLineChart" v-show="line2_polyLineChart"></lineScroll>
|
||
</template>
|
||
<template v-else-if="line2_pickIndex == 2">
|
||
<htable :prodDataList="line2_dataSource" @onRenderFinsh="onRenderFinshTableLine2" v-show="line2_tableChart" :reshowStatus="line2_tableChart"></htable>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 温度3 -->
|
||
<view class="historyCurve-leakage" v-if="render3">
|
||
<view class="historyCurve-leakage-title">
|
||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||
<text class="pl20">线路3温度</text>
|
||
</view>
|
||
<view class="historyCurve-leakage-content">
|
||
<view class="historyCurve-leakage-switch">
|
||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||
:class="{leakageAction:line3_pickIndex==index}" @click="switch3Fn(item,index)">{{item}}</view>
|
||
</view>
|
||
<view class="historyCurve-leakage-chart">
|
||
<template v-if="line3_pickIndex == 0">
|
||
<columnScroll canvasId="temperatureColumn3" @onRenderFinsh="onRenderFinshBarLine3" :width="690" :chartData="line3_dataSource" :reshowStatus="line3_barChart" v-show="line3_barChart"></columnScroll>
|
||
</template>
|
||
<template v-else-if="line3_pickIndex == 1">
|
||
<lineScroll canvasId="temperatureLine3" @onRenderComplete="onRenderCompleteLine3" :width="690" :chartData="line3_dataSource" :reshowStatus="line3_polyLineChart" v-show="line3_polyLineChart"></lineScroll>
|
||
</template>
|
||
<template v-else-if="line3_pickIndex == 2">
|
||
<htable :prodDataList="line3_dataSource" @onRenderFinsh="onRenderFinshTableLine3" v-show="line3_tableChart" :reshowStatus="line3_tableChart"></htable>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 温度4 -->
|
||
<view class="historyCurve-leakage" v-if="render4">
|
||
<view class="historyCurve-leakage-title">
|
||
<tuiIcon name="quxian4" color="#FE761C" size="42"></tuiIcon>
|
||
<text class="pl20">线路4温度</text>
|
||
</view>
|
||
<view class="historyCurve-leakage-content">
|
||
<view class="historyCurve-leakage-switch">
|
||
<view class="historyCurve-leakage-switch-box" v-for="(item,index) in switchList" :key="index"
|
||
:class="{leakageAction:line4_pickIndex==index}" @click="switch4Fn(item,index)">{{item}}</view>
|
||
</view>
|
||
<view class="historyCurve-leakage-chart">
|
||
<template v-if="line4_pickIndex == 0">
|
||
<columnScroll canvasId="temperatureColumn4" @onRenderFinsh="onRenderFinshBarLine4" :width="690" :chartData="line4_dataSource" :reshowStatus="line4_barChart" v-show="line4_barChart"></columnScroll>
|
||
</template>
|
||
<template v-else-if="line4_pickIndex == 1">
|
||
<lineScroll canvasId="temperatureLine4" @onRenderComplete="onRenderCompleteLine4" :width="690" :chartData="line4_dataSource" :reshowStatus="line4_polyLineChart" v-show="line4_polyLineChart"></lineScroll>
|
||
</template>
|
||
<template v-else-if="line4_pickIndex == 2">
|
||
<htable :prodDataList="line4_dataSource" @onRenderFinsh="onRenderFinshTableLine4" v-show="line4_tableChart" :reshowStatus="line4_tableChart"></htable>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import lineScroll from "@/components/uchartComponents/line-scroll.vue";
|
||
import columnScroll from "@/components/uchartComponents/column-scroll.vue";
|
||
import htable from "@/components/historyCmp/table.vue"
|
||
|
||
export default {
|
||
components:{lineScroll,columnScroll,htable},
|
||
props: {
|
||
lineRoad1Data: {
|
||
type: Object,
|
||
default() {
|
||
return {}
|
||
}
|
||
},
|
||
lineRoad2Data: {
|
||
type: Object,
|
||
default() {
|
||
return {}
|
||
}
|
||
},
|
||
lineRoad3Data: {
|
||
type: Object,
|
||
default() {
|
||
return {}
|
||
}
|
||
},
|
||
lineRoad4Data: {
|
||
type: Object,
|
||
default() {
|
||
return {}
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
switchList: ["柱状图","折线图","数据视图"],
|
||
line1_pickIndex: 0,
|
||
line1_barChart: false,
|
||
line1_polyLineChart: false,
|
||
line1_tableChart: false,
|
||
line1_dataSource: {},
|
||
|
||
line2_pickIndex: 0,
|
||
line2_barChart: false,
|
||
line2_polyLineChart: false,
|
||
line2_tableChart: false,
|
||
line2_dataSource: {},
|
||
|
||
line3_pickIndex: 0,
|
||
line3_barChart: false,
|
||
line3_polyLineChart: false,
|
||
line3_tableChart: false,
|
||
line3_dataSource: {},
|
||
|
||
line4_pickIndex: 0,
|
||
line4_barChart: false,
|
||
line4_polyLineChart: false,
|
||
line4_tableChart: false,
|
||
line4_dataSource: {},
|
||
|
||
render2: false,
|
||
render3: false,
|
||
render4: false
|
||
}
|
||
},
|
||
created() {
|
||
console.log(this.lineRoad1Data, 'lineRoad1Data')
|
||
this.line1_dataSource = this.lineRoad1Data;
|
||
this.line2_dataSource = this.lineRoad2Data;
|
||
this.line3_dataSource = this.lineRoad3Data;
|
||
this.line4_dataSource = this.lineRoad4Data;
|
||
},
|
||
watch: {
|
||
lineRoad1Data(newVal) {
|
||
this.line1_dataSource = newVal;
|
||
},
|
||
lineRoad2Data(newVal) {
|
||
this.line2_dataSource = newVal;
|
||
},
|
||
lineRoad3Data(newVal) {
|
||
this.line3_dataSource = newVal;
|
||
},
|
||
lineRoad4Data(newVal) {
|
||
this.line4_dataSource = newVal;
|
||
}
|
||
},
|
||
methods: {
|
||
// 温度1
|
||
switch1Fn(item,index){
|
||
this.line1_pickIndex = index;
|
||
this.line1_barChart = false;
|
||
this.line1_polyLineChart = false;
|
||
this.line1_tableChart = false;
|
||
},
|
||
onRenderFinshBarLine1() {
|
||
this.line1_barChart = true;
|
||
this.render2 = true; //1温度渲染完开始渲染2温度，以此类推
|
||
},
|
||
onRenderCompleteLine1() {
|
||
this.line1_polyLineChart = true;
|
||
},
|
||
onRenderFinshTableLine1() {
|
||
this.line1_tableChart = true;
|
||
},
|
||
// 温度2
|
||
switch2Fn(item,index){
|
||
this.line2_pickIndex = index;
|
||
this.line2_barChart = false;
|
||
this.line2_polyLineChart = false;
|
||
this.line2_tableChart = false;
|
||
},
|
||
onRenderFinshBarLine2() {
|
||
this.line2_barChart = true;
|
||
this.render3 = true;
|
||
},
|
||
onRenderCompleteLine2() {
|
||
this.line2_polyLineChart = true;
|
||
},
|
||
onRenderFinshTableLine2() {
|
||
this.line2_tableChart = true;
|
||
},
|
||
// 温度3
|
||
switch3Fn(item,index){
|
||
this.line3_pickIndex = index;
|
||
this.line3_barChart = false;
|
||
this.line3_polyLineChart = false;
|
||
this.line3_tableChart = false;
|
||
},
|
||
onRenderFinshBarLine3() {
|
||
this.line3_barChart = true;
|
||
this.render4 = true;
|
||
},
|
||
onRenderCompleteLine3() {
|
||
this.line3_polyLineChart = true;
|
||
},
|
||
onRenderFinshTableLine3() {
|
||
this.line3_tableChart = true;
|
||
},
|
||
// // 温度4
|
||
switch4Fn(item,index){
|
||
this.line4_pickIndex = index;
|
||
this.line4_barChart = false;
|
||
this.line4_polyLineChart = false;
|
||
this.line4_tableChart = false;
|
||
},
|
||
onRenderFinshBarLine4() {
|
||
this.line4_barChart = true;
|
||
},
|
||
onRenderCompleteLine4() {
|
||
this.line4_polyLineChart = true;
|
||
},
|
||
onRenderFinshTableLine4() {
|
||
this.line4_tableChart = true;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '../common/common.scss'
|
||
</style>
|