gy-app-shop/pages/home/wisdomElectricity/historyCurve/components/leakage.vue

37 lines
1.5 KiB
Vue

<template>
<view class="historyCurve-leakage">
<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:pickIndex==index}" @click="switchFn(item,index)">{{item}}</view>
</view>
<view class="historyCurve-leakage-chart">
<template v-if="pickIndex == 0">
<columnScroll canvasId="leakageColumn" @onRenderFinsh="onRenderFinshBar" :width="690" :chartData="dataSource" :reshowStatus="barChart" v-show="barChart"></columnScroll>
</template>
<template v-else-if="pickIndex == 1">
<lineScroll canvasId="leakageLine" @onRenderComplete="onRenderComplete" :width="690" :chartData="dataSource" :reshowStatus="polyLineChart" v-show="polyLineChart"></lineScroll>
</template>
<template v-else-if="pickIndex == 2">
<htable :prodDataList="dataSource" @onRenderFinsh="onRenderFinshTable" v-show="tableChart" :reshowStatus="tableChart"></htable>
</template>
</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"
import mixins from '../common/mixins.js'
export default {
mixins:[mixins],
components:{lineScroll,columnScroll,htable}
}
</script>
<style lang="scss" scoped>
@import '../common/common.scss'
</style>