| | |
|---|
| | | <p class="title_left">高频开关电源柜遥测量</p> |
|---|
| | | <el-col :span="8" class="height98"> |
|---|
| | | <div class="left-list-box"> |
|---|
| | | <p class="chart-title"><i class="icon"></i>第1路交流三相输入电压（V）</p> |
|---|
| | | <div ref="chartvol1" class="chart-box"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <p class="chart-title"> |
|---|
| | | <i class="icon"></i>第1路交流三相输入电压（V） |
|---|
| | | </p> |
|---|
| | | <div ref="chartvol1" class="chart-box"></div> |
|---|
| | | <div class="arrows-box border-left-top"></div> |
|---|
| | | <div class="arrows-box border-left-bottom"></div> |
|---|
| | | <div class="arrows-box border-right-top"></div> |
|---|
| | | <div class="arrows-box border-right-bottom"></div> |
|---|
| | | </div> |
|---|
| | | <div class="left-list-box"> |
|---|
| | | <p class="chart-title"><i class="icon"></i>第2路交流三相输入电压（V）</p> |
|---|
| | | <div ref="chartvol2" class="chart-box"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <p class="chart-title"> |
|---|
| | | <i class="icon"></i>第2路交流三相输入电压（V） |
|---|
| | | </p> |
|---|
| | | <div ref="chartvol2" class="chart-box"></div> |
|---|
| | | <div class="arrows-box border-left-top"></div> |
|---|
| | | <div class="arrows-box border-left-bottom"></div> |
|---|
| | | <div class="arrows-box border-right-top"></div> |
|---|
| | | <div class="arrows-box border-right-bottom"></div> |
|---|
| | | </div> |
|---|
| | | <div class="left-list-box"> |
|---|
| | | <p class="chart-title"><i class="icon"></i>三相交流输入电压（V）</p> |
|---|
| | | <div ref="chartvol3" class="chart-box"> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <p class="chart-title"> |
|---|
| | | <i class="icon"></i>三相交流输入电压（V） |
|---|
| | | </p> |
|---|
| | | <div ref="chartvol3" class="chart-box"></div> |
|---|
| | | <div class="arrows-box border-left-top"></div> |
|---|
| | | <div class="arrows-box border-left-bottom"></div> |
|---|
| | | <div class="arrows-box border-right-top"></div> |
|---|
| | | <div class="arrows-box border-right-bottom"></div> |
|---|
| | | </div> |
|---|
| | | <div class="left-list-box"> |
|---|
| | | <p class="chart-title"><i class="icon"></i>三相交流输入电流（A）</p> |
|---|
| | | <p class="chart-title"> |
|---|
| | | <i class="icon"></i>三相交流输入电流（A） |
|---|
| | | </p> |
|---|
| | | <div class="current-box"> |
|---|
| | | <el-col :span="8" class="height98"> |
|---|
| | | <div ref="chartcurrent1" class="current-list-box"></div> |
|---|
| | |
|---|
| | | <div class="arrows-box border-right-top"></div> |
|---|
| | | <div class="arrows-box border-right-bottom"></div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="16" class="height98"> |
|---|
| | | <div class="grid-content bg-purple-light row-height"> |
|---|
| | |
|---|
| | | <el-col :span="12"> |
|---|
| | | <p class="center-list-title"> |
|---|
| | | <el-col :span="17"> |
|---|
| | | <i class="icon"></i><span class="text-color">高频开关电源柜温度</span> |
|---|
| | | <i class="icon"></i |
|---|
| | | ><span class="text-color">高频开关电源柜温度</span> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="5"> |
|---|
| | | <span class="text-span">{{ acdcData.acdcmTemp }}℃</span> |
|---|
| | |
|---|
| | | </p> |
|---|
| | | <p class="center-list-title"> |
|---|
| | | <el-col :span="17"> |
|---|
| | | <i class="icon"></i><span class="text-color">直流输出电压</span> |
|---|
| | | <i class="icon"></i |
|---|
| | | ><span class="text-color">直流输出电压</span> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="5"> |
|---|
| | | <span class="text-span">{{ acdcData.dcOutVol }}V</span> |
|---|
| | |
|---|
| | | </p> |
|---|
| | | <p class="center-list-title"> |
|---|
| | | <el-col :span="17"> |
|---|
| | | <i class="icon"></i><span class="text-color">负载电流</span> |
|---|
| | | <i class="icon"></i |
|---|
| | | ><span class="text-color">负载电流</span> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="5"> |
|---|
| | | <span class="text-span">{{ acdcData.loaderCurr }}A</span> |
|---|
| | | <span class="text-span" |
|---|
| | | >{{ acdcData.loaderCurr }}A</span |
|---|
| | | > |
|---|
| | | </el-col> |
|---|
| | | </p> |
|---|
| | | <p class="center-list-title"> |
|---|
| | | <el-col :span="17"> |
|---|
| | | <i class="icon"></i><span class="text-color">电池充电限流值</span> |
|---|
| | | <i class="icon"></i |
|---|
| | | ><span class="text-color">电池充电限流值</span> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="5"> |
|---|
| | | <span class="text-span">{{ acdcData.chargLimitCurr }}A</span> |
|---|
| | | <span class="text-span" |
|---|
| | | >{{ acdcData.chargLimitCurr }}A</span |
|---|
| | | > |
|---|
| | | </el-col> |
|---|
| | | </p> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <p class="center-list-title"> |
|---|
| | | <el-col :span="17"> |
|---|
| | | <i class="icon"></i><span class="text-color">交流电压告警阙值上限</span> |
|---|
| | | <i class="icon"></i |
|---|
| | | ><span class="text-color">交流电压告警阙值上限</span> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="5"> |
|---|
| | | <span class="text-span">{{ acdcData.acVolHLimit }}V</span> |
|---|
| | | <span class="text-span" |
|---|
| | | >{{ acdcData.acVolHLimit }}V</span |
|---|
| | | > |
|---|
| | | </el-col> |
|---|
| | | </p> |
|---|
| | | <p class="center-list-title"> |
|---|
| | | <el-col :span="17"> |
|---|
| | | <i class="icon"></i><span class="text-color">交流电压告警阙值下限</span> |
|---|
| | | <i class="icon"></i |
|---|
| | | ><span class="text-color">交流电压告警阙值下限</span> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="5"> |
|---|
| | | <span class="text-span">{{ acdcData.acVolLLimit }}V</span> |
|---|
| | | <span class="text-span" |
|---|
| | | >{{ acdcData.acVolLLimit }}V</span |
|---|
| | | > |
|---|
| | | </el-col> |
|---|
| | | </p> |
|---|
| | | <p class="center-list-title"> |
|---|
| | | <el-col :span="17"> |
|---|
| | | <i class="icon"></i><span class="text-color">直流输出电压告警阙值上限</span> |
|---|
| | | <i class="icon"></i |
|---|
| | | ><span class="text-color" |
|---|
| | | >直流输出电压告警阙值上限</span |
|---|
| | | > |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="5"> |
|---|
| | | <span class="text-span">{{ acdcData.dcOutVolHLimit }}V</span> |
|---|
| | | <span class="text-span" |
|---|
| | | >{{ acdcData.dcOutVolHLimit }}V</span |
|---|
| | | > |
|---|
| | | </el-col> |
|---|
| | | </p> |
|---|
| | | <p class="center-list-title"> |
|---|
| | | <el-col :span="17"> |
|---|
| | | <i class="icon"></i><span class="text-color">直流输出电压告警阙值下限</span> |
|---|
| | | <i class="icon"></i |
|---|
| | | ><span class="text-color" |
|---|
| | | >直流输出电压告警阙值下限</span |
|---|
| | | > |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="5"> |
|---|
| | | <span class="text-span">{{ acdcData.dcOutVolLLimit }}V</span> |
|---|
| | | <span class="text-span" |
|---|
| | | >{{ acdcData.dcOutVolLLimit }}V</span |
|---|
| | | > |
|---|
| | | </el-col> |
|---|
| | | </p> |
|---|
| | | </el-col> |
|---|
| | |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <div class="chart-input"> |
|---|
| | | <span class="text-span marign-top40">{{ acdcData.junChargeVol }}V</span> |
|---|
| | | <span class="text-span marign-top40" |
|---|
| | | >{{ acdcData.junChargeVol }}V</span |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </el-col> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <div class="chart-input"> |
|---|
| | | <span class="text-span marign-top40">{{ acdcData.floatChargeVol }}V</span> |
|---|
| | | <span class="text-span marign-top40" |
|---|
| | | >{{ acdcData.floatChargeVol }}V</span |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </el-col> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <div class="chart-input"> |
|---|
| | | <span class="text-span marign-top40">{{ acdcData.battgroup1Vol }}V</span> |
|---|
| | | <span class="text-span marign-top40" |
|---|
| | | >{{ acdcData.battgroup1Vol }}V</span |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </el-col> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <div class="chart-input"> |
|---|
| | | <span class="text-span marign-top40">{{ acdcData.battgroup2Vol }}V</span> |
|---|
| | | <span class="text-span marign-top40" |
|---|
| | | >{{ acdcData.battgroup2Vol }}V</span |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | </el-col> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="11" class="height98"> |
|---|
| | | <div class="center-list-box"> |
|---|
| | | <p class="chart-title"><i class="icon"></i>蓄电池组充电电流</p> |
|---|
| | | <p class="chart-title"> |
|---|
| | | <i class="icon"></i>蓄电池组充电电流 |
|---|
| | | </p> |
|---|
| | | <div class="height98"> |
|---|
| | | <el-col :span="12" class="height98"> |
|---|
| | | <div ref="chartcurrent4" class="chart-xdcz"></div> |
|---|
| | | <p class="title-center"><span class="xdc-box">蓄电池组1</span></p> |
|---|
| | | <p class="title-center"> |
|---|
| | | <span class="xdc-box">蓄电池组1</span> |
|---|
| | | </p> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12" class="height98"> |
|---|
| | | <div ref="chartcurrent5" class="chart-xdcz"></div> |
|---|
| | | <p class="title-center"><span class="xdc-box">蓄电池组2</span></p> |
|---|
| | | <p class="title-center"> |
|---|
| | | <span class="xdc-box">蓄电池组2</span> |
|---|
| | | </p> |
|---|
| | | </el-col> |
|---|
| | | </div> |
|---|
| | | <div class="arrows-box border-left-top"></div> |
|---|
| | |
|---|
| | | <div class="arrows-box border-right-bottom"></div> |
|---|
| | | </div> |
|---|
| | | </el-col> |
|---|
| | | |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <div class="center-box center-botton-box"> |
|---|
| | | <p class="chart-title"><i class="icon"></i>模块输出电流</p> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="7" class="row-height"> |
|---|
| | | <div class="grid-content bg-purple-light box-left right-box row-height"> |
|---|
| | | <div |
|---|
| | | class="grid-content bg-purple-light box-left right-box row-height" |
|---|
| | | > |
|---|
| | | <p class="title_left">交流配电柜遥信量</p> |
|---|
| | | <div class="table"> |
|---|
| | | <el-table :data="tableData" stripe style="width: 100%" :show-header="false"> |
|---|
| | | <el-table |
|---|
| | | :data="tableData" |
|---|
| | | stripe |
|---|
| | | style="width: 100%" |
|---|
| | | :show-header="false" |
|---|
| | | > |
|---|
| | | <el-table-column prop="data" align="center"></el-table-column> |
|---|
| | | <el-table-column > |
|---|
| | | <template slot-scope="scope"> |
|---|
| | |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | <div class="table"> |
|---|
| | | <el-table :data="tableData2" stripe style="width: 100%" :show-header="false"> |
|---|
| | | <el-table |
|---|
| | | :data="tableData2" |
|---|
| | | stripe |
|---|
| | | style="width: 100%" |
|---|
| | | :show-header="false" |
|---|
| | | > |
|---|
| | | <el-table-column prop="data" align="center"></el-table-column> |
|---|
| | | <el-table-column > |
|---|
| | | <template> |
|---|
| | | <div><hdw-light></hdw-light></div> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <div><hdw-light :type="scope.row.status"></hdw-light></div> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | |
|---|
| | | </flex-layout> |
|---|
| | | </template> |
|---|
| | | <script> |
|---|
| | | import * as echarts from 'echarts'; |
|---|
| | | import HdwLight from "@/pages/dataMager/components/HdwLight"; |
|---|
| | | import * as echarts from "echarts"; |
|---|
| | | import HdwLight from "@/pages/dataMager/components/HdwLight"; |
|---|
| | | import produceData from "@/assets/js/const/produceData"; |
|---|
| | | export default { |
|---|
| | | chart:{}, |
|---|
| | | props: { |
|---|
| | | powerDeviceId: { |
|---|
| | | type: Number, |
|---|
| | | default: 110000112 |
|---|
| | | default: 110000112, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data(){ |
|---|
| | |
|---|
| | | jfcdy:"89V", |
|---|
| | | acdcData:{}, |
|---|
| | | tableData:[], |
|---|
| | | tableData2:[] |
|---|
| | | } |
|---|
| | | tableData2: [], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | components:{ |
|---|
| | | HdwLight |
|---|
| | | HdwLight, |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | let self =this; |
|---|
| | | this.intData(); |
|---|
| | | window.addEventListener('resize', function(){ |
|---|
| | | window.addEventListener("resize", function () { |
|---|
| | | for(let item in self.$options.chart){ |
|---|
| | | self.$options.chart[item].resize() ; } |
|---|
| | | self.$options.chart[item].resize(); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | intData:function(){ |
|---|
| | | let self = this; |
|---|
| | | let id = self.powerDeviceId; |
|---|
| | | this.$apis.dataMager.powerMager.getPowerBoxData(id).then(res=>{ |
|---|
| | | this.$apis.dataMager.powerMager.getPowerBoxData(id).then((res) => { |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | if(rs.code == 1){ |
|---|
| | | if(rs.data.acdc.powerDeviceId){ |
|---|
| | |
|---|
| | | } |
|---|
| | | self.$nextTick(function(){ |
|---|
| | | self.setOption(); |
|---|
| | | }) |
|---|
| | | }); |
|---|
| | | self.setListData(self.acdcData); |
|---|
| | | }else{ |
|---|
| | | self.acdcData = produceData.acdc; |
|---|
| | | self.$nextTick(function(){ |
|---|
| | | self.setOption(); |
|---|
| | | }) |
|---|
| | | }); |
|---|
| | | self.setListData(self.acdcData); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | // 初始化chart图表 |
|---|
| | | setOption:function(){ |
|---|
| | |
|---|
| | | this.$options.chart.chartvol1 = echarts.init(this.$refs.chartvol1); |
|---|
| | | this.$options.chart.chartvol2 = echarts.init(this.$refs.chartvol2); |
|---|
| | | this.$options.chart.chartvol3 = echarts.init(this.$refs.chartvol3); |
|---|
| | | this.$options.chart.chartcurrent1 = echarts.init(this.$refs.chartcurrent1); |
|---|
| | | this.$options.chart.chartcurrent2 = echarts.init(this.$refs.chartcurrent2); |
|---|
| | | this.$options.chart.chartcurrent3 = echarts.init(this.$refs.chartcurrent3); |
|---|
| | | this.$options.chart.chartcurrent1 = echarts.init( |
|---|
| | | this.$refs.chartcurrent1 |
|---|
| | | ); |
|---|
| | | this.$options.chart.chartcurrent2 = echarts.init( |
|---|
| | | this.$refs.chartcurrent2 |
|---|
| | | ); |
|---|
| | | this.$options.chart.chartcurrent3 = echarts.init( |
|---|
| | | this.$refs.chartcurrent3 |
|---|
| | | ); |
|---|
| | | this.$options.chart.chartvol4 = echarts.init(this.$refs.chartvol4); |
|---|
| | | this.$options.chart.chartvol5 = echarts.init(this.$refs.chartvol5); |
|---|
| | | this.$options.chart.chartvol6 = echarts.init(this.$refs.chartvol6); |
|---|
| | | this.$options.chart.chartvol7 = echarts.init(this.$refs.chartvol7); |
|---|
| | | this.$options.chart.chartcurrent4 = echarts.init(this.$refs.chartcurrent4); |
|---|
| | | this.$options.chart.chartcurrent5 = echarts.init(this.$refs.chartcurrent5); |
|---|
| | | this.$options.chart.chartcurrent6 = echarts.init(this.$refs.chartcurrent6); |
|---|
| | | this.$options.chart.chartcurrent4 = echarts.init( |
|---|
| | | this.$refs.chartcurrent4 |
|---|
| | | ); |
|---|
| | | this.$options.chart.chartcurrent5 = echarts.init( |
|---|
| | | this.$refs.chartcurrent5 |
|---|
| | | ); |
|---|
| | | this.$options.chart.chartcurrent6 = echarts.init( |
|---|
| | | this.$refs.chartcurrent6 |
|---|
| | | ); |
|---|
| | | |
|---|
| | | this.optionData1(); |
|---|
| | | this.optionData2(); |
|---|
| | |
|---|
| | | optionData1:function(){ |
|---|
| | | let self = this; |
|---|
| | | let chartdata = [ |
|---|
| | | [self.acdcData.acIn1VolA, self.acdcData.acIn1VolB, self.acdcData.acIn1VolC], |
|---|
| | | ['A相', 'B相', 'C相'], |
|---|
| | | [ |
|---|
| | | self.acdcData.acIn1VolA, |
|---|
| | | self.acdcData.acIn1VolB, |
|---|
| | | self.acdcData.acIn1VolC, |
|---|
| | | ], |
|---|
| | | ["A相", "B相", "C相"], |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | var getmydmc = chartdata[1]; //数据点名称 |
|---|
| | |
|---|
| | | |
|---|
| | | let big = 0; |
|---|
| | | getmyd.forEach((el) => { |
|---|
| | | if (!(el === undefined || el === '')) { |
|---|
| | | if (!(el === undefined || el === "")) { |
|---|
| | | if (big < Number(el)) { |
|---|
| | | big = Number(el); |
|---|
| | | } |
|---|
| | |
|---|
| | | let max = 0; |
|---|
| | | arr.forEach((el) => { |
|---|
| | | el.forEach((el1) => { |
|---|
| | | if (!(el1 === undefined || el1 === '')) { |
|---|
| | | if (!(el1 === undefined || el1 === "")) { |
|---|
| | | if (max < Number(el1)) { |
|---|
| | | max = Number(el1); |
|---|
| | | } |
|---|
| | |
|---|
| | | let option = { |
|---|
| | | // backgroundColor: backgroundColor, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '13%', |
|---|
| | | bottom: '10%', |
|---|
| | | top: '10%', |
|---|
| | | left: "3%", |
|---|
| | | right: "13%", |
|---|
| | | bottom: "10%", |
|---|
| | | top: "10%", |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | formatter: (params) => { |
|---|
| | | if (params.name !== '') { |
|---|
| | | return params.name+ ' : ' + getmyd[params.dataIndex]; |
|---|
| | | if (params.name !== "") { |
|---|
| | | return params.name + " : " + getmyd[params.dataIndex]; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | align: 'left', |
|---|
| | | align: "left", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | type: "value", |
|---|
| | | axisLabel: { |
|---|
| | | margin: 5, |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | formatter: function (val) { |
|---|
| | | return val + ''; |
|---|
| | | return val + ""; |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: '13', |
|---|
| | | fontSize: "13", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | min: 0, |
|---|
| | |
|---|
| | | splitLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | width: 1, |
|---|
| | | opacity: 0.3, |
|---|
| | | }, |
|---|
| | |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel:{ |
|---|
| | | show:false |
|---|
| | | } |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | type: "value", |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | |
|---|
| | | splitLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | type: 'dashed', |
|---|
| | | color: '#D8D8D8', |
|---|
| | | type: "dashed", |
|---|
| | | color: "#D8D8D8", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | |
|---|
| | | ], |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | type: "category", |
|---|
| | | inverse: true, |
|---|
| | | // boundaryGap:true, |
|---|
| | | axisLabel: { |
|---|
| | |
|---|
| | | return value; |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | color: 'rgba(255,255,255,0.8)', |
|---|
| | | fontSize: '12', |
|---|
| | | align: 'right', |
|---|
| | | color: "rgba(255,255,255,0.8)", |
|---|
| | | fontSize: "12", |
|---|
| | | align: "right", |
|---|
| | | lineHeight: 18, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | |
|---|
| | | axisLine: { |
|---|
| | | show:false, |
|---|
| | | lineStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | width: 1, |
|---|
| | | opacity: 0.3, |
|---|
| | | }, |
|---|
| | |
|---|
| | | data: getmydmc, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | type: "category", |
|---|
| | | inverse: true, |
|---|
| | | axisTick: 'none', |
|---|
| | | axisLine: 'none', |
|---|
| | | axisTick: "none", |
|---|
| | | axisLine: "none", |
|---|
| | | show: true, |
|---|
| | | axisLabel: { |
|---|
| | | textStyle: { |
|---|
| | | color: '#9aeced', |
|---|
| | | fontSize: '12' |
|---|
| | | color: "#9aeced", |
|---|
| | | fontSize: "12", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: function(){ |
|---|
| | | data: (function () { |
|---|
| | | let arr = []; |
|---|
| | | getmyd.forEach(item => { |
|---|
| | | getmyd.forEach((item) => { |
|---|
| | | let data = item + "V"; |
|---|
| | | arr.push(data); |
|---|
| | | }); |
|---|
| | | return arr; |
|---|
| | | }()//getmyd |
|---|
| | | } |
|---|
| | | })(), //getmyd |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | dataZoom: [ |
|---|
| | | { |
|---|
| | | type: 'inside', |
|---|
| | | type: "inside", |
|---|
| | | show: true, |
|---|
| | | height: 15, |
|---|
| | | start: 1, |
|---|
| | | end: 100, |
|---|
| | | orient: 'vertical', |
|---|
| | | orient: "vertical", |
|---|
| | | zlevel: 66, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '值', |
|---|
| | | type: 'bar', |
|---|
| | | name: "值", |
|---|
| | | type: "bar", |
|---|
| | | // zlevel: 1, |
|---|
| | | xAxisIndex: 0, |
|---|
| | | itemStyle: { |
|---|
| | |
|---|
| | | // barBorderRadius: [0, 5, 5, 0], |
|---|
| | | color: function(params){ |
|---|
| | | let colorList=["#00feff","#f7bd45","#f2535f"]; |
|---|
| | | return colorList[params.dataIndex] |
|---|
| | | return colorList[params.dataIndex]; |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | barWidth: 15, |
|---|
| | | data: getmyd, |
|---|
| | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | // 分隔 |
|---|
| | | type: 'pictorialBar', |
|---|
| | | type: "pictorialBar", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: '#022539', |
|---|
| | | color: "#022539", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | symbolRepeat: 'fixed', |
|---|
| | | symbolRepeat: "fixed", |
|---|
| | | symbolMargin: 4, |
|---|
| | | symbol: 'rect', |
|---|
| | | symbol: "rect", |
|---|
| | | symbolClip: true, |
|---|
| | | symbolSize: [2, 15], |
|---|
| | | symbolPosition: 'start', |
|---|
| | | symbolPosition: "start", |
|---|
| | | symbolOffset: [-1, 0], |
|---|
| | | data: getmydzd, |
|---|
| | | z: 66, |
|---|
| | | animationEasing: 'elasticOut', |
|---|
| | | animationEasing: "elasticOut", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '背景', |
|---|
| | | type: 'bar', |
|---|
| | | name: "背景", |
|---|
| | | type: "bar", |
|---|
| | | barWidth: 15, |
|---|
| | | barGap: '-100%', |
|---|
| | | barGap: "-100%", |
|---|
| | | xAxisIndex: 1, |
|---|
| | | data: getmydzd, |
|---|
| | | itemStyle: { |
|---|
| | |
|---|
| | | colorStops: [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: 'rgba(24,144,255,0.3)', // 0% 处的颜色 |
|---|
| | | color: "rgba(24,144,255,0.3)", // 0% 处的颜色 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: 'rgba(99,180,255,0.3)', // 100% 处的颜色 |
|---|
| | | color: "rgba(99,180,255,0.3)", // 100% 处的颜色 |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | |
|---|
| | | optionData2:function(){ |
|---|
| | | let self = this; |
|---|
| | | let chartdata = [ |
|---|
| | | [self.acdcData.acIn2VolA, self.acdcData.acIn2VolB, self.acdcData.acIn2VolC], |
|---|
| | | ['A相', 'B相', 'C相'], |
|---|
| | | [ |
|---|
| | | self.acdcData.acIn2VolA, |
|---|
| | | self.acdcData.acIn2VolB, |
|---|
| | | self.acdcData.acIn2VolC, |
|---|
| | | ], |
|---|
| | | ["A相", "B相", "C相"], |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | var getmydmc = chartdata[1]; //数据点名称 |
|---|
| | |
|---|
| | | |
|---|
| | | let big = 0; |
|---|
| | | getmyd.forEach((el) => { |
|---|
| | | if (!(el === undefined || el === '')) { |
|---|
| | | if (!(el === undefined || el === "")) { |
|---|
| | | if (big < Number(el)) { |
|---|
| | | big = Number(el); |
|---|
| | | } |
|---|
| | |
|---|
| | | let max = 0; |
|---|
| | | arr.forEach((el) => { |
|---|
| | | el.forEach((el1) => { |
|---|
| | | if (!(el1 === undefined || el1 === '')) { |
|---|
| | | if (!(el1 === undefined || el1 === "")) { |
|---|
| | | if (max < Number(el1)) { |
|---|
| | | max = Number(el1); |
|---|
| | | } |
|---|
| | |
|---|
| | | let option = { |
|---|
| | | // backgroundColor: backgroundColor, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '13%', |
|---|
| | | bottom: '10%', |
|---|
| | | top: '10%', |
|---|
| | | left: "3%", |
|---|
| | | right: "13%", |
|---|
| | | bottom: "10%", |
|---|
| | | top: "10%", |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | formatter: (params) => { |
|---|
| | | if (params.name !== '') { |
|---|
| | | return params.name+ ' : ' + getmyd[params.dataIndex]; |
|---|
| | | if (params.name !== "") { |
|---|
| | | return params.name + " : " + getmyd[params.dataIndex]; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | align: 'left', |
|---|
| | | align: "left", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | type: "value", |
|---|
| | | axisLabel: { |
|---|
| | | margin: 5, |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | formatter: function (val) { |
|---|
| | | return val + ''; |
|---|
| | | return val + ""; |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: '13', |
|---|
| | | fontSize: "13", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | min: 0, |
|---|
| | |
|---|
| | | splitLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | width: 1, |
|---|
| | | opacity: 0.3, |
|---|
| | | }, |
|---|
| | |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel:{ |
|---|
| | | show:false |
|---|
| | | } |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | type: "value", |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | |
|---|
| | | splitLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | type: 'dashed', |
|---|
| | | color: '#D8D8D8', |
|---|
| | | type: "dashed", |
|---|
| | | color: "#D8D8D8", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | |
|---|
| | | ], |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | type: "category", |
|---|
| | | inverse: true, |
|---|
| | | // boundaryGap:true, |
|---|
| | | axisLabel: { |
|---|
| | |
|---|
| | | return value; |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | color: 'rgba(255,255,255,0.8)', |
|---|
| | | fontSize: '12', |
|---|
| | | align: 'right', |
|---|
| | | color: "rgba(255,255,255,0.8)", |
|---|
| | | fontSize: "12", |
|---|
| | | align: "right", |
|---|
| | | lineHeight: 18, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | |
|---|
| | | axisLine: { |
|---|
| | | show:false, |
|---|
| | | lineStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | width: 1, |
|---|
| | | opacity: 0.3, |
|---|
| | | }, |
|---|
| | |
|---|
| | | data: getmydmc, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | type: "category", |
|---|
| | | inverse: true, |
|---|
| | | axisTick: 'none', |
|---|
| | | axisLine: 'none', |
|---|
| | | axisTick: "none", |
|---|
| | | axisLine: "none", |
|---|
| | | show: true, |
|---|
| | | axisLabel: { |
|---|
| | | textStyle: { |
|---|
| | | color: '#9aeced', |
|---|
| | | fontSize: '12' |
|---|
| | | color: "#9aeced", |
|---|
| | | fontSize: "12", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: function(){ |
|---|
| | | data: (function () { |
|---|
| | | let arr = []; |
|---|
| | | getmyd.forEach(item => { |
|---|
| | | getmyd.forEach((item) => { |
|---|
| | | let data = item + "V"; |
|---|
| | | arr.push(data); |
|---|
| | | }); |
|---|
| | | return arr; |
|---|
| | | }() |
|---|
| | | } |
|---|
| | | })(), |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | dataZoom: [ |
|---|
| | | { |
|---|
| | | type: 'inside', |
|---|
| | | type: "inside", |
|---|
| | | show: true, |
|---|
| | | height: 15, |
|---|
| | | start: 1, |
|---|
| | | end: 100, |
|---|
| | | orient: 'vertical', |
|---|
| | | orient: "vertical", |
|---|
| | | zlevel: 66, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '值', |
|---|
| | | type: 'bar', |
|---|
| | | name: "值", |
|---|
| | | type: "bar", |
|---|
| | | // zlevel: 1, |
|---|
| | | xAxisIndex: 0, |
|---|
| | | itemStyle: { |
|---|
| | |
|---|
| | | // barBorderRadius: [0, 5, 5, 0], |
|---|
| | | color: function(params){ |
|---|
| | | let colorList=["#90ed7d","#fd7ecf","#ffe329"]; |
|---|
| | | return colorList[params.dataIndex] |
|---|
| | | return colorList[params.dataIndex]; |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | barWidth: 15, |
|---|
| | | data: getmyd, |
|---|
| | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | // 分隔 |
|---|
| | | type: 'pictorialBar', |
|---|
| | | type: "pictorialBar", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: '#022539', |
|---|
| | | color: "#022539", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | symbolRepeat: 'fixed', |
|---|
| | | symbolRepeat: "fixed", |
|---|
| | | symbolMargin: 4, |
|---|
| | | symbol: 'rect', |
|---|
| | | symbol: "rect", |
|---|
| | | symbolClip: true, |
|---|
| | | symbolSize: [2, 15], |
|---|
| | | symbolPosition: 'start', |
|---|
| | | symbolPosition: "start", |
|---|
| | | symbolOffset: [-1, 0], |
|---|
| | | data: getmydzd, |
|---|
| | | z: 66, |
|---|
| | | animationEasing: 'elasticOut', |
|---|
| | | animationEasing: "elasticOut", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '背景', |
|---|
| | | type: 'bar', |
|---|
| | | name: "背景", |
|---|
| | | type: "bar", |
|---|
| | | barWidth: 15, |
|---|
| | | barGap: '-100%', |
|---|
| | | barGap: "-100%", |
|---|
| | | xAxisIndex: 1, |
|---|
| | | data: getmydzd, |
|---|
| | | itemStyle: { |
|---|
| | |
|---|
| | | colorStops: [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: 'rgba(24,144,255,0.3)', // 0% 处的颜色 |
|---|
| | | color: "rgba(24,144,255,0.3)", // 0% 处的颜色 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: 'rgba(99,180,255,0.3)', // 100% 处的颜色 |
|---|
| | | color: "rgba(99,180,255,0.3)", // 100% 处的颜色 |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | |
|---|
| | | optionData3:function(){ |
|---|
| | | let self = this; |
|---|
| | | let chartdata = [ |
|---|
| | | [self.acdcData.acOutVolA, self.acdcData.acOutVolB, self.acdcData.acOutVolC], |
|---|
| | | ['A相', 'B相', 'C相'], |
|---|
| | | [ |
|---|
| | | self.acdcData.acOutVolA, |
|---|
| | | self.acdcData.acOutVolB, |
|---|
| | | self.acdcData.acOutVolC, |
|---|
| | | ], |
|---|
| | | ["A相", "B相", "C相"], |
|---|
| | | ]; |
|---|
| | | |
|---|
| | | var getmydmc = chartdata[1]; //数据点名称 |
|---|
| | |
|---|
| | | |
|---|
| | | let big = 0; |
|---|
| | | getmyd.forEach((el) => { |
|---|
| | | if (!(el === undefined || el === '')) { |
|---|
| | | if (!(el === undefined || el === "")) { |
|---|
| | | if (big < Number(el)) { |
|---|
| | | big = Number(el); |
|---|
| | | } |
|---|
| | |
|---|
| | | let max = 0; |
|---|
| | | arr.forEach((el) => { |
|---|
| | | el.forEach((el1) => { |
|---|
| | | if (!(el1 === undefined || el1 === '')) { |
|---|
| | | if (!(el1 === undefined || el1 === "")) { |
|---|
| | | if (max < Number(el1)) { |
|---|
| | | max = Number(el1); |
|---|
| | | } |
|---|
| | |
|---|
| | | let option = { |
|---|
| | | // backgroundColor: backgroundColor, |
|---|
| | | grid: { |
|---|
| | | left: '3%', |
|---|
| | | right: '13%', |
|---|
| | | bottom: '10%', |
|---|
| | | top: '10%', |
|---|
| | | left: "3%", |
|---|
| | | right: "13%", |
|---|
| | | bottom: "10%", |
|---|
| | | top: "10%", |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | formatter: (params) => { |
|---|
| | | if (params.name !== '') { |
|---|
| | | return params.name+ ' : ' + getmyd[params.dataIndex]; |
|---|
| | | if (params.name !== "") { |
|---|
| | | return params.name + " : " + getmyd[params.dataIndex]; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | align: 'left', |
|---|
| | | align: "left", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | type: "value", |
|---|
| | | axisLabel: { |
|---|
| | | margin: 5, |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | formatter: function (val) { |
|---|
| | | return val + ''; |
|---|
| | | return val + ""; |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: '13', |
|---|
| | | fontSize: "13", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | min: 0, |
|---|
| | |
|---|
| | | splitLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | width: 1, |
|---|
| | | opacity: 0.3, |
|---|
| | | }, |
|---|
| | |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel:{ |
|---|
| | | show:false |
|---|
| | | } |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | type: "value", |
|---|
| | | axisLabel: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | |
|---|
| | | splitLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | type: 'dashed', |
|---|
| | | color: '#D8D8D8', |
|---|
| | | type: "dashed", |
|---|
| | | color: "#D8D8D8", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine: { |
|---|
| | | show: false, |
|---|
| | | lineStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | |
|---|
| | | ], |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | type: "category", |
|---|
| | | inverse: true, |
|---|
| | | // boundaryGap:true, |
|---|
| | | axisLabel: { |
|---|
| | |
|---|
| | | return value; |
|---|
| | | }, |
|---|
| | | textStyle: { |
|---|
| | | color: 'rgba(255,255,255,0.8)', |
|---|
| | | fontSize: '12', |
|---|
| | | align: 'right', |
|---|
| | | color: "rgba(255,255,255,0.8)", |
|---|
| | | fontSize: "12", |
|---|
| | | align: "right", |
|---|
| | | lineHeight: 18, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | |
|---|
| | | axisLine: { |
|---|
| | | show:false, |
|---|
| | | lineStyle: { |
|---|
| | | color: '#fff', |
|---|
| | | color: "#fff", |
|---|
| | | width: 1, |
|---|
| | | opacity: 0.3, |
|---|
| | | }, |
|---|
| | |
|---|
| | | data: getmydmc, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | type: "category", |
|---|
| | | inverse: true, |
|---|
| | | axisTick: 'none', |
|---|
| | | axisLine: 'none', |
|---|
| | | axisTick: "none", |
|---|
| | | axisLine: "none", |
|---|
| | | show: true, |
|---|
| | | axisLabel: { |
|---|
| | | textStyle: { |
|---|
| | | color: '#9aeced', |
|---|
| | | fontSize: '12' |
|---|
| | | color: "#9aeced", |
|---|
| | | fontSize: "12", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: function(){ |
|---|
| | | data: (function () { |
|---|
| | | let arr = []; |
|---|
| | | getmyd.forEach(item => { |
|---|
| | | getmyd.forEach((item) => { |
|---|
| | | let data = item + "V"; |
|---|
| | | arr.push(data); |
|---|
| | | }); |
|---|
| | | return arr; |
|---|
| | | }() |
|---|
| | | } |
|---|
| | | })(), |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | dataZoom: [ |
|---|
| | | { |
|---|
| | | type: 'inside', |
|---|
| | | type: "inside", |
|---|
| | | show: true, |
|---|
| | | height: 15, |
|---|
| | | start: 1, |
|---|
| | | end: 100, |
|---|
| | | orient: 'vertical', |
|---|
| | | orient: "vertical", |
|---|
| | | zlevel: 66, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '值', |
|---|
| | | type: 'bar', |
|---|
| | | name: "值", |
|---|
| | | type: "bar", |
|---|
| | | // zlevel: 1, |
|---|
| | | xAxisIndex: 0, |
|---|
| | | itemStyle: { |
|---|
| | |
|---|
| | | // barBorderRadius: [0, 5, 5, 0], |
|---|
| | | color: function(params){ |
|---|
| | | let colorList=["#757efa","#f58981","#9fe6b8"]; |
|---|
| | | return colorList[params.dataIndex] |
|---|
| | | return colorList[params.dataIndex]; |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | barWidth: 15, |
|---|
| | | data: getmyd, |
|---|
| | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | // 分隔 |
|---|
| | | type: 'pictorialBar', |
|---|
| | | type: "pictorialBar", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: '#022539', |
|---|
| | | color: "#022539", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | symbolRepeat: 'fixed', |
|---|
| | | symbolRepeat: "fixed", |
|---|
| | | symbolMargin: 4, |
|---|
| | | symbol: 'rect', |
|---|
| | | symbol: "rect", |
|---|
| | | symbolClip: true, |
|---|
| | | symbolSize: [2, 15], |
|---|
| | | symbolPosition: 'start', |
|---|
| | | symbolPosition: "start", |
|---|
| | | symbolOffset: [-1, 0], |
|---|
| | | data: getmydzd, |
|---|
| | | z: 66, |
|---|
| | | animationEasing: 'elasticOut', |
|---|
| | | animationEasing: "elasticOut", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '背景', |
|---|
| | | type: 'bar', |
|---|
| | | name: "背景", |
|---|
| | | type: "bar", |
|---|
| | | barWidth: 15, |
|---|
| | | barGap: '-100%', |
|---|
| | | barGap: "-100%", |
|---|
| | | xAxisIndex: 1, |
|---|
| | | data: getmydzd, |
|---|
| | | itemStyle: { |
|---|
| | |
|---|
| | | colorStops: [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: 'rgba(24,144,255,0.3)', // 0% 处的颜色 |
|---|
| | | color: "rgba(24,144,255,0.3)", // 0% 处的颜色 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: 'rgba(99,180,255,0.3)', // 100% 处的颜色 |
|---|
| | | color: "rgba(99,180,255,0.3)", // 100% 处的颜色 |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | |
|---|
| | | var percent = self.acdcData.acOutCurrA; //百分数 |
|---|
| | | let option = { |
|---|
| | | title: { |
|---|
| | | "x": '50%', |
|---|
| | | "y": '45%', |
|---|
| | | x: "50%", |
|---|
| | | y: "45%", |
|---|
| | | textAlign: "center", |
|---|
| | | top: '68%',//字体的位置 |
|---|
| | | left:'45%', |
|---|
| | | 'text': 'A相', |
|---|
| | | "textStyle": { |
|---|
| | | |
|---|
| | | "fontWeight": 'normal', |
|---|
| | | "color": '#FFF', |
|---|
| | | "fontSize": 20 |
|---|
| | | top: "68%", //字体的位置 |
|---|
| | | left: "45%", |
|---|
| | | text: "A相", |
|---|
| | | textStyle: { |
|---|
| | | fontWeight: "normal", |
|---|
| | | color: "#FFF", |
|---|
| | | fontSize: 20, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | show: false,//是否展示x轴 |
|---|
| | | min: function(value) {//调整x轴上面数据的位置 |
|---|
| | | min: function (value) { |
|---|
| | | //调整x轴上面数据的位置 |
|---|
| | | return value.min - 7; |
|---|
| | | }, |
|---|
| | | max: function(value) { |
|---|
| | |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | show: true, |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | type: "dashed", |
|---|
| | | }, |
|---|
| | | "axisLabel": { |
|---|
| | | "interval": 0, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | interval: 0, |
|---|
| | | rotate: 40, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: 12, |
|---|
| | | color: '#000' |
|---|
| | | color: "#000", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: ['1', '2', '3', '4', '5'] |
|---|
| | | data: ["1", "2", "3", "4", "5"], |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | show: false, |
|---|
| | | name: '', |
|---|
| | | name: "", |
|---|
| | | max: 200, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | type: "dashed", |
|---|
| | | }, |
|---|
| | | series: [{ |
|---|
| | | "name": '', |
|---|
| | | "type": 'pie', |
|---|
| | | "radius": ['50%', '70%'], |
|---|
| | | "avoidLabelOverlap": false, |
|---|
| | | "startAngle": 225, |
|---|
| | | "color": [{ |
|---|
| | | type: 'linear', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: "", |
|---|
| | | type: "pie", |
|---|
| | | radius: ["50%", "70%"], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | startAngle: 225, |
|---|
| | | color: [ |
|---|
| | | { |
|---|
| | | type: "linear", |
|---|
| | | x: 0, |
|---|
| | | y: 0, |
|---|
| | | x2: 0.4, |
|---|
| | | y2: 1, |
|---|
| | | colorStops: [{ |
|---|
| | | colorStops: [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "#cfbe22" // 0% 处的颜色 |
|---|
| | | }, { |
|---|
| | | color: "#cfbe22", // 0% 处的颜色 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "#90ed7d" // 100% 处的颜色 |
|---|
| | | }], |
|---|
| | | globalCoord: false // 缺省为 false |
|---|
| | | }, 'none'], |
|---|
| | | "hoverAnimation": false,//是否开启 hover 在扇区上的放大动画效果。 |
|---|
| | | "legendHoverLink": false,//是否启用图例 hover 时的联动高亮。 |
|---|
| | | "label": { |
|---|
| | | "normal": { |
|---|
| | | "show": false, |
|---|
| | | "position": 'center' |
|---|
| | | color: "#90ed7d", // 100% 处的颜色 |
|---|
| | | }, |
|---|
| | | "emphasis": { |
|---|
| | | "show": true, |
|---|
| | | "textStyle": { |
|---|
| | | "fontSize": '30', |
|---|
| | | "fontWeight": 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | globalCoord: false, // 缺省为 false |
|---|
| | | }, |
|---|
| | | "labelLine": { |
|---|
| | | "normal": { |
|---|
| | | "show": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "data": [{ |
|---|
| | | "value": 75, |
|---|
| | | "name": '1' |
|---|
| | | }, { |
|---|
| | | "value": 25, |
|---|
| | | "name": '2' |
|---|
| | | }] |
|---|
| | | }, { |
|---|
| | | "name": ' ', |
|---|
| | | "type": 'pie', |
|---|
| | | "radius": ['42%', '47%'], |
|---|
| | | "avoidLabelOverlap": false,//是否启用防止标签重叠策略 |
|---|
| | | "startAngle": 225, |
|---|
| | | "hoverAnimation": false, |
|---|
| | | "legendHoverLink": false, |
|---|
| | | "label": { |
|---|
| | | "normal": { |
|---|
| | | "show": false, |
|---|
| | | "position": 'center' |
|---|
| | | }, |
|---|
| | | "emphasis": { |
|---|
| | | "show": true, |
|---|
| | | "textStyle": { |
|---|
| | | "fontSize": '30', |
|---|
| | | "fontWeight": 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | "labelLine": { |
|---|
| | | "normal": { |
|---|
| | | "show": true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "data": [{ |
|---|
| | | "value": 75, |
|---|
| | | "name": '1', |
|---|
| | | "itemStyle": { |
|---|
| | | "normal": { |
|---|
| | | "color": '#0b388a', |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | "value": 25, |
|---|
| | | "name": '2' |
|---|
| | | }] |
|---|
| | | }, { |
|---|
| | | "name": '', |
|---|
| | | "type": 'pie', |
|---|
| | | "radius": ['50%', '70%'], |
|---|
| | | "avoidLabelOverlap": false, |
|---|
| | | "startAngle": 315, |
|---|
| | | "color":"#4ba1fa", |
|---|
| | | "hoverAnimation": false, |
|---|
| | | "legendHoverLink": false, |
|---|
| | | "clockwise": false,//饼图的扇区是否是顺时针排布。 |
|---|
| | | "itemStyle": { |
|---|
| | | "normal": { |
|---|
| | | "borderColor": "transparent", |
|---|
| | | "borderWidth": "20" |
|---|
| | | }, |
|---|
| | | "emphasis": { |
|---|
| | | "borderColor": "transparent", |
|---|
| | | "borderWidth": "20" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "z": 10, |
|---|
| | | "label": { |
|---|
| | | "normal": { |
|---|
| | | "show": false, |
|---|
| | | "position": 'center' |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | "labelLine": { |
|---|
| | | "normal": { |
|---|
| | | "show": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "data": [{ |
|---|
| | | "value": (100 - percent) * 270 / 360, |
|---|
| | | |
|---|
| | | "label": { |
|---|
| | | "none", |
|---|
| | | ], |
|---|
| | | hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。 |
|---|
| | | legendHoverLink: false, //是否启用图例 hover 时的联动高亮。 |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | formatter: percent + 'A', |
|---|
| | | position: 'center', |
|---|
| | | show: false, |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: '12', |
|---|
| | | fontWeight: 'normal', |
|---|
| | | color: '#ffe329' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | fontSize: "30", |
|---|
| | | fontWeight: "bold", |
|---|
| | | }, |
|---|
| | | "name": '' |
|---|
| | | }, { |
|---|
| | | "value": percent, |
|---|
| | | "name": '' |
|---|
| | | }, { |
|---|
| | | "value": 100 - (100 - percent) * 270 / 360, |
|---|
| | | "name": '' |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 75, |
|---|
| | | name: "1", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 25, |
|---|
| | | name: "2", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: " ", |
|---|
| | | type: "pie", |
|---|
| | | radius: ["42%", "47%"], |
|---|
| | | avoidLabelOverlap: false, //是否启用防止标签重叠策略 |
|---|
| | | startAngle: 225, |
|---|
| | | hoverAnimation: false, |
|---|
| | | legendHoverLink: false, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: "30", |
|---|
| | | fontWeight: "bold", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | labelLine: { |
|---|
| | | normal: { |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 75, |
|---|
| | | name: "1", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "#0b388a", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 25, |
|---|
| | | name: "2", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "", |
|---|
| | | type: "pie", |
|---|
| | | radius: ["50%", "70%"], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | startAngle: 315, |
|---|
| | | color: "#4ba1fa", |
|---|
| | | hoverAnimation: false, |
|---|
| | | legendHoverLink: false, |
|---|
| | | clockwise: false, //饼图的扇区是否是顺时针排布。 |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | borderColor: "transparent", |
|---|
| | | borderWidth: "20", |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | borderColor: "transparent", |
|---|
| | | borderWidth: "20", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | z: 10, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: ((100 - percent) * 270) / 360, |
|---|
| | | |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | formatter: percent + "A", |
|---|
| | | position: "center", |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: "12", |
|---|
| | | fontWeight: "normal", |
|---|
| | | color: "#ffe329", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | name: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: percent, |
|---|
| | | name: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100 - ((100 - percent) * 270) / 360, |
|---|
| | | name: "", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.$options.chart.chartcurrent1.setOption(option); |
|---|
| | | }, |
|---|
| | |
|---|
| | | var percent = self.acdcData.acOutCurrB; //百分数 |
|---|
| | | let option = { |
|---|
| | | title: { |
|---|
| | | "x": '50%', |
|---|
| | | "y": '45%', |
|---|
| | | x: "50%", |
|---|
| | | y: "45%", |
|---|
| | | textAlign: "center", |
|---|
| | | top: '68%',//字体的位置 |
|---|
| | | left:'45%', |
|---|
| | | 'text': 'B相', |
|---|
| | | "textStyle": { |
|---|
| | | |
|---|
| | | "fontWeight": 'normal', |
|---|
| | | "color": '#FFF', |
|---|
| | | "fontSize": 20, |
|---|
| | | top: "68%", //字体的位置 |
|---|
| | | left: "45%", |
|---|
| | | text: "B相", |
|---|
| | | textStyle: { |
|---|
| | | fontWeight: "normal", |
|---|
| | | color: "#FFF", |
|---|
| | | fontSize: 20, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | show: false,//是否展示x轴 |
|---|
| | | min: function(value) {//调整x轴上面数据的位置 |
|---|
| | | min: function (value) { |
|---|
| | | //调整x轴上面数据的位置 |
|---|
| | | return value.min - 7; |
|---|
| | | }, |
|---|
| | | max: function(value) { |
|---|
| | |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | show: true, |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | type: "dashed", |
|---|
| | | }, |
|---|
| | | "axisLabel": { |
|---|
| | | "interval": 0, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | interval: 0, |
|---|
| | | rotate: 40, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: 12, |
|---|
| | | color: '#000' |
|---|
| | | color: "#000", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: ['1', '2', '3', '4', '5'] |
|---|
| | | data: ["1", "2", "3", "4", "5"], |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | show: false, |
|---|
| | | name: '', |
|---|
| | | name: "", |
|---|
| | | max: 200, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | type: "dashed", |
|---|
| | | }, |
|---|
| | | series: [{ |
|---|
| | | "name": '', |
|---|
| | | "type": 'pie', |
|---|
| | | "radius": ['50%', '70%'], |
|---|
| | | "avoidLabelOverlap": false, |
|---|
| | | "startAngle": 225, |
|---|
| | | "color": [{ |
|---|
| | | type: 'linear', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: "", |
|---|
| | | type: "pie", |
|---|
| | | radius: ["50%", "70%"], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | startAngle: 225, |
|---|
| | | color: [ |
|---|
| | | { |
|---|
| | | type: "linear", |
|---|
| | | x: 0, |
|---|
| | | y: 0, |
|---|
| | | x2: 0.4, |
|---|
| | | y2: 1, |
|---|
| | | colorStops: [{ |
|---|
| | | colorStops: [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "#cfbe22" // 0% 处的颜色 |
|---|
| | | }, { |
|---|
| | | color: "#cfbe22", // 0% 处的颜色 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "#f2535f" // 100% 处的颜色 |
|---|
| | | }], |
|---|
| | | globalCoord: false // 缺省为 false |
|---|
| | | }, 'none'], |
|---|
| | | "hoverAnimation": false,//是否开启 hover 在扇区上的放大动画效果。 |
|---|
| | | "legendHoverLink": false,//是否启用图例 hover 时的联动高亮。 |
|---|
| | | "label": { |
|---|
| | | "normal": { |
|---|
| | | "show": false, |
|---|
| | | "position": 'center' |
|---|
| | | color: "#f2535f", // 100% 处的颜色 |
|---|
| | | }, |
|---|
| | | "emphasis": { |
|---|
| | | "show": true, |
|---|
| | | "textStyle": { |
|---|
| | | "fontSize": '30', |
|---|
| | | "fontWeight": 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | globalCoord: false, // 缺省为 false |
|---|
| | | }, |
|---|
| | | "labelLine": { |
|---|
| | | "normal": { |
|---|
| | | "show": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "data": [{ |
|---|
| | | "value": 75, |
|---|
| | | "name": '1' |
|---|
| | | }, { |
|---|
| | | "value": 25, |
|---|
| | | "name": '2' |
|---|
| | | }] |
|---|
| | | }, { |
|---|
| | | "name": ' ', |
|---|
| | | "type": 'pie', |
|---|
| | | "radius": ['42%', '47%'], |
|---|
| | | "avoidLabelOverlap": false,//是否启用防止标签重叠策略 |
|---|
| | | "startAngle": 225, |
|---|
| | | "hoverAnimation": false, |
|---|
| | | "legendHoverLink": false, |
|---|
| | | "label": { |
|---|
| | | "normal": { |
|---|
| | | "show": false, |
|---|
| | | "position": 'center' |
|---|
| | | }, |
|---|
| | | "emphasis": { |
|---|
| | | "show": true, |
|---|
| | | "textStyle": { |
|---|
| | | "fontSize": '30', |
|---|
| | | "fontWeight": 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | "labelLine": { |
|---|
| | | "normal": { |
|---|
| | | "show": true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "data": [{ |
|---|
| | | "value": 75, |
|---|
| | | "name": '1', |
|---|
| | | "itemStyle": { |
|---|
| | | "normal": { |
|---|
| | | "color": '#0b388a', |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | "value": 25, |
|---|
| | | "name": '2' |
|---|
| | | }] |
|---|
| | | }, { |
|---|
| | | "name": '', |
|---|
| | | "type": 'pie', |
|---|
| | | "radius": ['50%', '70%'], |
|---|
| | | "avoidLabelOverlap": false, |
|---|
| | | "startAngle": 315, |
|---|
| | | "color":"#4ba1fa", |
|---|
| | | "hoverAnimation": false, |
|---|
| | | "legendHoverLink": false, |
|---|
| | | "clockwise": false,//饼图的扇区是否是顺时针排布。 |
|---|
| | | "itemStyle": { |
|---|
| | | "normal": { |
|---|
| | | "borderColor": "transparent", |
|---|
| | | "borderWidth": "20" |
|---|
| | | }, |
|---|
| | | "emphasis": { |
|---|
| | | "borderColor": "transparent", |
|---|
| | | "borderWidth": "20" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "z": 10, |
|---|
| | | "label": { |
|---|
| | | "normal": { |
|---|
| | | "show": false, |
|---|
| | | "position": 'center' |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | "labelLine": { |
|---|
| | | "normal": { |
|---|
| | | "show": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "data": [{ |
|---|
| | | "value": (100 - percent) * 270 / 360, |
|---|
| | | |
|---|
| | | "label": { |
|---|
| | | "none", |
|---|
| | | ], |
|---|
| | | hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。 |
|---|
| | | legendHoverLink: false, //是否启用图例 hover 时的联动高亮。 |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | formatter: percent + 'A', |
|---|
| | | position: 'center', |
|---|
| | | show: false, |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: '12', |
|---|
| | | fontWeight: 'normal', |
|---|
| | | color: '#ffe329' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | fontSize: "30", |
|---|
| | | fontWeight: "bold", |
|---|
| | | }, |
|---|
| | | "name": '' |
|---|
| | | }, { |
|---|
| | | "value": percent, |
|---|
| | | "name": '' |
|---|
| | | }, { |
|---|
| | | "value": 100 - (100 - percent) * 270 / 360, |
|---|
| | | "name": '' |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 75, |
|---|
| | | name: "1", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 25, |
|---|
| | | name: "2", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: " ", |
|---|
| | | type: "pie", |
|---|
| | | radius: ["42%", "47%"], |
|---|
| | | avoidLabelOverlap: false, //是否启用防止标签重叠策略 |
|---|
| | | startAngle: 225, |
|---|
| | | hoverAnimation: false, |
|---|
| | | legendHoverLink: false, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: "30", |
|---|
| | | fontWeight: "bold", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | labelLine: { |
|---|
| | | normal: { |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 75, |
|---|
| | | name: "1", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "#0b388a", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 25, |
|---|
| | | name: "2", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "", |
|---|
| | | type: "pie", |
|---|
| | | radius: ["50%", "70%"], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | startAngle: 315, |
|---|
| | | color: "#4ba1fa", |
|---|
| | | hoverAnimation: false, |
|---|
| | | legendHoverLink: false, |
|---|
| | | clockwise: false, //饼图的扇区是否是顺时针排布。 |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | borderColor: "transparent", |
|---|
| | | borderWidth: "20", |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | borderColor: "transparent", |
|---|
| | | borderWidth: "20", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | z: 10, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: ((100 - percent) * 270) / 360, |
|---|
| | | |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | formatter: percent + "A", |
|---|
| | | position: "center", |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: "12", |
|---|
| | | fontWeight: "normal", |
|---|
| | | color: "#ffe329", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | name: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: percent, |
|---|
| | | name: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100 - ((100 - percent) * 270) / 360, |
|---|
| | | name: "", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.$options.chart.chartcurrent2.setOption(option); |
|---|
| | | }, |
|---|
| | |
|---|
| | | var percent = self.acdcData.acOutCurrC; //百分数 |
|---|
| | | let option = { |
|---|
| | | title: { |
|---|
| | | "x": '50%', |
|---|
| | | "y": '45%', |
|---|
| | | x: "50%", |
|---|
| | | y: "45%", |
|---|
| | | textAlign: "center", |
|---|
| | | top: '68%',//字体的位置 |
|---|
| | | left:'45%', |
|---|
| | | 'text': 'C相', |
|---|
| | | "textStyle": { |
|---|
| | | |
|---|
| | | "fontWeight": 'normal', |
|---|
| | | "color": '#FFF', |
|---|
| | | "fontSize": 20 |
|---|
| | | top: "68%", //字体的位置 |
|---|
| | | left: "45%", |
|---|
| | | text: "C相", |
|---|
| | | textStyle: { |
|---|
| | | fontWeight: "normal", |
|---|
| | | color: "#FFF", |
|---|
| | | fontSize: 20, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | show: false,//是否展示x轴 |
|---|
| | | min: function(value) {//调整x轴上面数据的位置 |
|---|
| | | min: function (value) { |
|---|
| | | //调整x轴上面数据的位置 |
|---|
| | | return value.min - 7; |
|---|
| | | }, |
|---|
| | | max: function(value) { |
|---|
| | |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | show: true, |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | type: "dashed", |
|---|
| | | }, |
|---|
| | | "axisLabel": { |
|---|
| | | "interval": 0, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | interval: 0, |
|---|
| | | rotate: 40, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: 12, |
|---|
| | | color: '#000' |
|---|
| | | color: "#000", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: ['1', '2', '3', '4', '5'] |
|---|
| | | data: ["1", "2", "3", "4", "5"], |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | show: false, |
|---|
| | | name: '', |
|---|
| | | name: "", |
|---|
| | | max: 200, |
|---|
| | | splitLine: { |
|---|
| | | lineStyle: { |
|---|
| | | type: 'dashed' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | type: "dashed", |
|---|
| | | }, |
|---|
| | | series: [{ |
|---|
| | | "name": '', |
|---|
| | | "type": 'pie', |
|---|
| | | "radius": ['50%', '70%'], |
|---|
| | | "avoidLabelOverlap": false, |
|---|
| | | "startAngle": 225, |
|---|
| | | "color": [{ |
|---|
| | | type: 'linear', |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: "", |
|---|
| | | type: "pie", |
|---|
| | | radius: ["50%", "70%"], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | startAngle: 225, |
|---|
| | | color: [ |
|---|
| | | { |
|---|
| | | type: "linear", |
|---|
| | | x: 0, |
|---|
| | | y: 0, |
|---|
| | | x2: 0.4, |
|---|
| | | y2: 1, |
|---|
| | | colorStops: [{ |
|---|
| | | colorStops: [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: "#cfbe22" // 0% 处的颜色 |
|---|
| | | }, { |
|---|
| | | color: "#cfbe22", // 0% 处的颜色 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: "#00feff" // 100% 处的颜色 |
|---|
| | | }], |
|---|
| | | globalCoord: false // 缺省为 false |
|---|
| | | }, 'none'], |
|---|
| | | "hoverAnimation": false,//是否开启 hover 在扇区上的放大动画效果。 |
|---|
| | | "legendHoverLink": false,//是否启用图例 hover 时的联动高亮。 |
|---|
| | | "label": { |
|---|
| | | "normal": { |
|---|
| | | "show": false, |
|---|
| | | "position": 'center' |
|---|
| | | color: "#00feff", // 100% 处的颜色 |
|---|
| | | }, |
|---|
| | | "emphasis": { |
|---|
| | | "show": true, |
|---|
| | | "textStyle": { |
|---|
| | | "fontSize": '30', |
|---|
| | | "fontWeight": 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | globalCoord: false, // 缺省为 false |
|---|
| | | }, |
|---|
| | | "labelLine": { |
|---|
| | | "normal": { |
|---|
| | | "show": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "data": [{ |
|---|
| | | "value": 75, |
|---|
| | | "name": '1' |
|---|
| | | }, { |
|---|
| | | "value": 25, |
|---|
| | | "name": '2' |
|---|
| | | }] |
|---|
| | | }, { |
|---|
| | | "name": ' ', |
|---|
| | | "type": 'pie', |
|---|
| | | "radius": ['42%', '47%'], |
|---|
| | | "avoidLabelOverlap": false,//是否启用防止标签重叠策略 |
|---|
| | | "startAngle": 225, |
|---|
| | | "hoverAnimation": false, |
|---|
| | | "legendHoverLink": false, |
|---|
| | | "label": { |
|---|
| | | "normal": { |
|---|
| | | "show": false, |
|---|
| | | "position": 'center' |
|---|
| | | }, |
|---|
| | | "emphasis": { |
|---|
| | | "show": true, |
|---|
| | | "textStyle": { |
|---|
| | | "fontSize": '30', |
|---|
| | | "fontWeight": 'bold' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | "labelLine": { |
|---|
| | | "normal": { |
|---|
| | | "show": true |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "data": [{ |
|---|
| | | "value": 75, |
|---|
| | | "name": '1', |
|---|
| | | "itemStyle": { |
|---|
| | | "normal": { |
|---|
| | | "color": '#0b388a', |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, { |
|---|
| | | "value": 25, |
|---|
| | | "name": '2' |
|---|
| | | }] |
|---|
| | | }, { |
|---|
| | | "name": '', |
|---|
| | | "type": 'pie', |
|---|
| | | "radius": ['50%', '70%'], |
|---|
| | | "avoidLabelOverlap": false, |
|---|
| | | "startAngle": 315, |
|---|
| | | "color":"#4ba1fa", |
|---|
| | | "hoverAnimation": false, |
|---|
| | | "legendHoverLink": false, |
|---|
| | | "clockwise": false,//饼图的扇区是否是顺时针排布。 |
|---|
| | | "itemStyle": { |
|---|
| | | "normal": { |
|---|
| | | "borderColor": "transparent", |
|---|
| | | "borderWidth": "20" |
|---|
| | | }, |
|---|
| | | "emphasis": { |
|---|
| | | "borderColor": "transparent", |
|---|
| | | "borderWidth": "20" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "z": 10, |
|---|
| | | "label": { |
|---|
| | | "normal": { |
|---|
| | | "show": false, |
|---|
| | | "position": 'center' |
|---|
| | | }, |
|---|
| | | |
|---|
| | | }, |
|---|
| | | "labelLine": { |
|---|
| | | "normal": { |
|---|
| | | "show": false |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "data": [{ |
|---|
| | | "value": (100 - percent) * 270 / 360, |
|---|
| | | |
|---|
| | | "label": { |
|---|
| | | "none", |
|---|
| | | ], |
|---|
| | | hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。 |
|---|
| | | legendHoverLink: false, //是否启用图例 hover 时的联动高亮。 |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | formatter: percent + 'A', |
|---|
| | | position: 'center', |
|---|
| | | show: false, |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: '12', |
|---|
| | | fontWeight: 'normal', |
|---|
| | | color: '#ffe329' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | fontSize: "30", |
|---|
| | | fontWeight: "bold", |
|---|
| | | }, |
|---|
| | | "name": '' |
|---|
| | | }, { |
|---|
| | | "value": percent, |
|---|
| | | "name": '' |
|---|
| | | }, { |
|---|
| | | "value": 100 - (100 - percent) * 270 / 360, |
|---|
| | | "name": '' |
|---|
| | | }] |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 75, |
|---|
| | | name: "1", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 25, |
|---|
| | | name: "2", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: " ", |
|---|
| | | type: "pie", |
|---|
| | | radius: ["42%", "47%"], |
|---|
| | | avoidLabelOverlap: false, //是否启用防止标签重叠策略 |
|---|
| | | startAngle: 225, |
|---|
| | | hoverAnimation: false, |
|---|
| | | legendHoverLink: false, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: "30", |
|---|
| | | fontWeight: "bold", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | labelLine: { |
|---|
| | | normal: { |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 75, |
|---|
| | | name: "1", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: "#0b388a", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 25, |
|---|
| | | name: "2", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: "", |
|---|
| | | type: "pie", |
|---|
| | | radius: ["50%", "70%"], |
|---|
| | | avoidLabelOverlap: false, |
|---|
| | | startAngle: 315, |
|---|
| | | color: "#4ba1fa", |
|---|
| | | hoverAnimation: false, |
|---|
| | | legendHoverLink: false, |
|---|
| | | clockwise: false, //饼图的扇区是否是顺时针排布。 |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | borderColor: "transparent", |
|---|
| | | borderWidth: "20", |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | borderColor: "transparent", |
|---|
| | | borderWidth: "20", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | z: 10, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | position: "center", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | labelLine: { |
|---|
| | | normal: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: ((100 - percent) * 270) / 360, |
|---|
| | | |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | formatter: percent + "A", |
|---|
| | | position: "center", |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: "12", |
|---|
| | | fontWeight: "normal", |
|---|
| | | color: "#ffe329", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | name: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: percent, |
|---|
| | | name: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100 - ((100 - percent) * 270) / 360, |
|---|
| | | name: "", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.$options.chart.chartcurrent3.setOption(option); |
|---|
| | | }, |
|---|
| | |
|---|
| | | optionData7:function(){ |
|---|
| | | let pieData = [ |
|---|
| | | { |
|---|
| | | name: '均充', |
|---|
| | | name: "均充", |
|---|
| | | value: 180, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | let thisColor = "#ffe145" |
|---|
| | | let thisColor = "#ffe145"; |
|---|
| | | function _pie3() { |
|---|
| | | let dataArr = []; |
|---|
| | | for (var i = 0; i < 100; i++) { |
|---|
| | |
|---|
| | | normal: { |
|---|
| | | color: thisColor, |
|---|
| | | borderWidth: 0, |
|---|
| | | borderColor: thisColor |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | borderColor: thisColor, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | dataArr.push({ |
|---|
| | | name: (i + 1).toString(), |
|---|
| | |
|---|
| | | normal: { |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | borderWidth: 0, |
|---|
| | | borderColor: "rgba(0,0,0,0)" |
|---|
| | | borderColor: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | return dataArr |
|---|
| | | |
|---|
| | | return dataArr; |
|---|
| | | } |
|---|
| | | |
|---|
| | | let option = { |
|---|
| | | grid: { |
|---|
| | | left: '2%', |
|---|
| | | right: '2%', |
|---|
| | | bottom: '0%', |
|---|
| | | top: '0%', |
|---|
| | | left: "2%", |
|---|
| | | right: "2%", |
|---|
| | | bottom: "0%", |
|---|
| | | top: "0%", |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | // backgroundColor: 'black', |
|---|
| | | title: { |
|---|
| | | text: "", |
|---|
| | | top: '60%', |
|---|
| | | textAlign: 'center', |
|---|
| | | top: "60%", |
|---|
| | | textAlign: "center", |
|---|
| | | textStyle: { |
|---|
| | | fontWeight: 'normal', |
|---|
| | | fontSize: '10', |
|---|
| | | color: 'white', |
|---|
| | | textAlign: 'center', |
|---|
| | | fontWeight: "normal", |
|---|
| | | fontSize: "10", |
|---|
| | | color: "white", |
|---|
| | | textAlign: "center", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: 'pie', |
|---|
| | | name: '外层细圆环', |
|---|
| | | radius: ['94%', '98%'], |
|---|
| | | type: "pie", |
|---|
| | | name: "外层细圆环", |
|---|
| | | radius: ["94%", "98%"], |
|---|
| | | // center: [12.5 + '%', '45%'], |
|---|
| | | hoverAnimation: false, |
|---|
| | | clockWise: false, |
|---|
| | |
|---|
| | | data: _pie3(), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'pie', |
|---|
| | | name: '内刻度圈', |
|---|
| | | radius: ['74%', '88%'], |
|---|
| | | type: "pie", |
|---|
| | | name: "内刻度圈", |
|---|
| | | radius: ["74%", "88%"], |
|---|
| | | // center: [12.5 + '%', '45%'], |
|---|
| | | hoverAnimation: false, |
|---|
| | | clockWise: false, |
|---|
| | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: pieData[0].name, |
|---|
| | | type: 'pie', |
|---|
| | | type: "pie", |
|---|
| | | clockWise: false, |
|---|
| | | radius: ['74%', '89%'], |
|---|
| | | radius: ["74%", "89%"], |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|---|
| | |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | formatter: "均充", |
|---|
| | | position: 'center', |
|---|
| | | position: "center", |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: '12', |
|---|
| | | fontSize: "12", |
|---|
| | | // fontWeight: 'bold', |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100, |
|---|
| | | name: 'invisible', |
|---|
| | | name: "invisible", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: 'rgba(0,0,0,0)', |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | color: 'rgba(0,0,0,0)', |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'pie', |
|---|
| | | name: '内层层细圆环', |
|---|
| | | radius: ['63%', '69%'], |
|---|
| | | type: "pie", |
|---|
| | | name: "内层层细圆环", |
|---|
| | | radius: ["63%", "69%"], |
|---|
| | | // center: [12.5 + '%', '45%'], |
|---|
| | | hoverAnimation: false, |
|---|
| | | clockWise: false, |
|---|
| | |
|---|
| | | optionData8:function(){ |
|---|
| | | let pieData = [ |
|---|
| | | { |
|---|
| | | name: '浮充', |
|---|
| | | name: "浮充", |
|---|
| | | value: 180, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | let thisColor = "#27b0f8" |
|---|
| | | let thisColor = "#27b0f8"; |
|---|
| | | function _pie3() { |
|---|
| | | let dataArr = []; |
|---|
| | | for (var i = 0; i < 100; i++) { |
|---|
| | |
|---|
| | | normal: { |
|---|
| | | color: thisColor, |
|---|
| | | borderWidth: 0, |
|---|
| | | borderColor: thisColor |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | borderColor: thisColor, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | dataArr.push({ |
|---|
| | | name: (i + 1).toString(), |
|---|
| | |
|---|
| | | normal: { |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | borderWidth: 0, |
|---|
| | | borderColor: "rgba(0,0,0,0)" |
|---|
| | | borderColor: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | return dataArr |
|---|
| | | |
|---|
| | | return dataArr; |
|---|
| | | } |
|---|
| | | |
|---|
| | | let option = { |
|---|
| | | grid: { |
|---|
| | | left: '2%', |
|---|
| | | right: '2%', |
|---|
| | | bottom: '0%', |
|---|
| | | top: '0%', |
|---|
| | | left: "2%", |
|---|
| | | right: "2%", |
|---|
| | | bottom: "0%", |
|---|
| | | top: "0%", |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | // backgroundColor: 'black', |
|---|
| | | title: { |
|---|
| | | text: "", |
|---|
| | | top: '60%', |
|---|
| | | textAlign: 'center', |
|---|
| | | top: "60%", |
|---|
| | | textAlign: "center", |
|---|
| | | textStyle: { |
|---|
| | | fontWeight: 'normal', |
|---|
| | | fontSize: '10', |
|---|
| | | color: 'white', |
|---|
| | | textAlign: 'center', |
|---|
| | | fontWeight: "normal", |
|---|
| | | fontSize: "10", |
|---|
| | | color: "white", |
|---|
| | | textAlign: "center", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: 'pie', |
|---|
| | | name: '外层细圆环', |
|---|
| | | radius: ['94%', '98%'], |
|---|
| | | type: "pie", |
|---|
| | | name: "外层细圆环", |
|---|
| | | radius: ["94%", "98%"], |
|---|
| | | // center: [12.5 + '%', '45%'], |
|---|
| | | hoverAnimation: false, |
|---|
| | | clockWise: false, |
|---|
| | |
|---|
| | | data: _pie3(), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'pie', |
|---|
| | | name: '内刻度圈', |
|---|
| | | radius: ['74%', '88%'], |
|---|
| | | type: "pie", |
|---|
| | | name: "内刻度圈", |
|---|
| | | radius: ["74%", "88%"], |
|---|
| | | // center: [12.5 + '%', '45%'], |
|---|
| | | hoverAnimation: false, |
|---|
| | | clockWise: false, |
|---|
| | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: pieData[0].name, |
|---|
| | | type: 'pie', |
|---|
| | | type: "pie", |
|---|
| | | clockWise: false, |
|---|
| | | radius: ['74%', '89%'], |
|---|
| | | radius: ["74%", "89%"], |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|---|
| | |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | formatter: "浮充", |
|---|
| | | position: 'center', |
|---|
| | | position: "center", |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: '12', |
|---|
| | | fontSize: "12", |
|---|
| | | // fontWeight: 'bold', |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100, |
|---|
| | | name: 'invisible', |
|---|
| | | name: "invisible", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: 'rgba(0,0,0,0)', |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | color: 'rgba(0,0,0,0)', |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'pie', |
|---|
| | | name: '内层层细圆环', |
|---|
| | | radius: ['63%', '69%'], |
|---|
| | | type: "pie", |
|---|
| | | name: "内层层细圆环", |
|---|
| | | radius: ["63%", "69%"], |
|---|
| | | // center: [12.5 + '%', '45%'], |
|---|
| | | hoverAnimation: false, |
|---|
| | | clockWise: false, |
|---|
| | |
|---|
| | | optionData9:function(){ |
|---|
| | | let pieData = [ |
|---|
| | | { |
|---|
| | | name: '01端', |
|---|
| | | name: "01端", |
|---|
| | | value: 180, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | let thisColor = "#ff8b00" |
|---|
| | | let thisColor = "#ff8b00"; |
|---|
| | | function _pie3() { |
|---|
| | | let dataArr = []; |
|---|
| | | for (var i = 0; i < 100; i++) { |
|---|
| | |
|---|
| | | normal: { |
|---|
| | | color: thisColor, |
|---|
| | | borderWidth: 0, |
|---|
| | | borderColor: thisColor |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | borderColor: thisColor, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | dataArr.push({ |
|---|
| | | name: (i + 1).toString(), |
|---|
| | |
|---|
| | | normal: { |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | borderWidth: 0, |
|---|
| | | borderColor: "rgba(0,0,0,0)" |
|---|
| | | borderColor: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | return dataArr |
|---|
| | | |
|---|
| | | return dataArr; |
|---|
| | | } |
|---|
| | | |
|---|
| | | let option = { |
|---|
| | | grid: { |
|---|
| | | left: '2%', |
|---|
| | | right: '2%', |
|---|
| | | bottom: '0%', |
|---|
| | | top: '0%', |
|---|
| | | left: "2%", |
|---|
| | | right: "2%", |
|---|
| | | bottom: "0%", |
|---|
| | | top: "0%", |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | // backgroundColor: 'black', |
|---|
| | | title: { |
|---|
| | | text: "", |
|---|
| | | top: '60%', |
|---|
| | | textAlign: 'center', |
|---|
| | | top: "60%", |
|---|
| | | textAlign: "center", |
|---|
| | | textStyle: { |
|---|
| | | fontWeight: 'normal', |
|---|
| | | fontSize: '10', |
|---|
| | | color: 'white', |
|---|
| | | textAlign: 'center', |
|---|
| | | fontWeight: "normal", |
|---|
| | | fontSize: "10", |
|---|
| | | color: "white", |
|---|
| | | textAlign: "center", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: 'pie', |
|---|
| | | name: '外层细圆环', |
|---|
| | | radius: ['94%', '98%'], |
|---|
| | | type: "pie", |
|---|
| | | name: "外层细圆环", |
|---|
| | | radius: ["94%", "98%"], |
|---|
| | | // center: [12.5 + '%', '45%'], |
|---|
| | | hoverAnimation: false, |
|---|
| | | clockWise: false, |
|---|
| | |
|---|
| | | data: _pie3(), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'pie', |
|---|
| | | name: '内刻度圈', |
|---|
| | | radius: ['74%', '88%'], |
|---|
| | | type: "pie", |
|---|
| | | name: "内刻度圈", |
|---|
| | | radius: ["74%", "88%"], |
|---|
| | | // center: [12.5 + '%', '45%'], |
|---|
| | | hoverAnimation: false, |
|---|
| | | clockWise: false, |
|---|
| | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: pieData[0].name, |
|---|
| | | type: 'pie', |
|---|
| | | type: "pie", |
|---|
| | | clockWise: false, |
|---|
| | | radius: ['74%', '89%'], |
|---|
| | | radius: ["74%", "89%"], |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|---|
| | |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | formatter: "01端", |
|---|
| | | position: 'center', |
|---|
| | | position: "center", |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: '12', |
|---|
| | | fontSize: "12", |
|---|
| | | // fontWeight: 'bold', |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100, |
|---|
| | | name: 'invisible', |
|---|
| | | name: "invisible", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: 'rgba(0,0,0,0)', |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | color: 'rgba(0,0,0,0)', |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'pie', |
|---|
| | | name: '内层层细圆环', |
|---|
| | | radius: ['63%', '69%'], |
|---|
| | | type: "pie", |
|---|
| | | name: "内层层细圆环", |
|---|
| | | radius: ["63%", "69%"], |
|---|
| | | // center: [12.5 + '%', '45%'], |
|---|
| | | hoverAnimation: false, |
|---|
| | | clockWise: false, |
|---|
| | |
|---|
| | | optionData10:function(){ |
|---|
| | | let pieData = [ |
|---|
| | | { |
|---|
| | | name: '02端', |
|---|
| | | name: "02端", |
|---|
| | | value: 180, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ]; |
|---|
| | | let thisColor = "#27b0f8" |
|---|
| | | let thisColor = "#27b0f8"; |
|---|
| | | function _pie3() { |
|---|
| | | let dataArr = []; |
|---|
| | | for (var i = 0; i < 100; i++) { |
|---|
| | |
|---|
| | | normal: { |
|---|
| | | color: thisColor, |
|---|
| | | borderWidth: 0, |
|---|
| | | borderColor: thisColor |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | borderColor: thisColor, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | dataArr.push({ |
|---|
| | | name: (i + 1).toString(), |
|---|
| | |
|---|
| | | normal: { |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | borderWidth: 0, |
|---|
| | | borderColor: "rgba(0,0,0,0)" |
|---|
| | | borderColor: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | return dataArr |
|---|
| | | |
|---|
| | | return dataArr; |
|---|
| | | } |
|---|
| | | |
|---|
| | | let option = { |
|---|
| | | grid: { |
|---|
| | | left: '2%', |
|---|
| | | right: '2%', |
|---|
| | | bottom: '0%', |
|---|
| | | top: '0%', |
|---|
| | | left: "2%", |
|---|
| | | right: "2%", |
|---|
| | | bottom: "0%", |
|---|
| | | top: "0%", |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | // backgroundColor: 'black', |
|---|
| | | title: { |
|---|
| | | text: "", |
|---|
| | | top: '60%', |
|---|
| | | textAlign: 'center', |
|---|
| | | top: "60%", |
|---|
| | | textAlign: "center", |
|---|
| | | textStyle: { |
|---|
| | | fontWeight: 'normal', |
|---|
| | | fontSize: '10', |
|---|
| | | color: 'white', |
|---|
| | | textAlign: 'center', |
|---|
| | | fontWeight: "normal", |
|---|
| | | fontSize: "10", |
|---|
| | | color: "white", |
|---|
| | | textAlign: "center", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | type: 'pie', |
|---|
| | | name: '外层细圆环', |
|---|
| | | radius: ['94%', '98%'], |
|---|
| | | type: "pie", |
|---|
| | | name: "外层细圆环", |
|---|
| | | radius: ["94%", "98%"], |
|---|
| | | // center: [12.5 + '%', '45%'], |
|---|
| | | hoverAnimation: false, |
|---|
| | | clockWise: false, |
|---|
| | |
|---|
| | | data: _pie3(), |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'pie', |
|---|
| | | name: '内刻度圈', |
|---|
| | | radius: ['74%', '88%'], |
|---|
| | | type: "pie", |
|---|
| | | name: "内刻度圈", |
|---|
| | | radius: ["74%", "88%"], |
|---|
| | | // center: [12.5 + '%', '45%'], |
|---|
| | | hoverAnimation: false, |
|---|
| | | clockWise: false, |
|---|
| | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: pieData[0].name, |
|---|
| | | type: 'pie', |
|---|
| | | type: "pie", |
|---|
| | | clockWise: false, |
|---|
| | | radius: ['74%', '89%'], |
|---|
| | | radius: ["74%", "89%"], |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|---|
| | |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | formatter: "02端", |
|---|
| | | position: 'center', |
|---|
| | | position: "center", |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: '12', |
|---|
| | | fontSize: "12", |
|---|
| | | // fontWeight: 'bold', |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 100, |
|---|
| | | name: 'invisible', |
|---|
| | | name: "invisible", |
|---|
| | | itemStyle: { |
|---|
| | | normal: { |
|---|
| | | color: 'rgba(0,0,0,0)', |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | emphasis: { |
|---|
| | | color: 'rgba(0,0,0,0)', |
|---|
| | | color: "rgba(0,0,0,0)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | type: 'pie', |
|---|
| | | name: '内层层细圆环', |
|---|
| | | radius: ['63%', '69%'], |
|---|
| | | type: "pie", |
|---|
| | | name: "内层层细圆环", |
|---|
| | | radius: ["63%", "69%"], |
|---|
| | | // center: [12.5 + '%', '45%'], |
|---|
| | | hoverAnimation: false, |
|---|
| | | clockWise: false, |
|---|
| | |
|---|
| | | top: 0, |
|---|
| | | bottom: 0, |
|---|
| | | left: "10%", |
|---|
| | | right: "10%" |
|---|
| | | right: "10%", |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | show: false, |
|---|
| | | type: "value", |
|---|
| | | boundaryGap: [1.1, 0.1] |
|---|
| | | boundaryGap: [1.1, 0.1], |
|---|
| | | }, |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | |
|---|
| | | axisLine: { show: false }, |
|---|
| | | axisTick: [ |
|---|
| | | { |
|---|
| | | show: false |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: "", |
|---|
| | | type: "bar", |
|---|
| | | barWidth: 20, |
|---|
| | | data: [""] |
|---|
| | | data: [""], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '背景', |
|---|
| | | type: 'bar', |
|---|
| | | name: "背景", |
|---|
| | | type: "bar", |
|---|
| | | barWidth: 6, |
|---|
| | | barGap: '200%', |
|---|
| | | barGap: "200%", |
|---|
| | | data: [100], |
|---|
| | | itemStyle: { |
|---|
| | | normal: {// '#ff4b87' |
|---|
| | | normal: { |
|---|
| | | // '#ff4b87' |
|---|
| | | color:"rgba(255,75,135, 1)", |
|---|
| | | barBorderRadius: 10, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '', |
|---|
| | | type: 'pie', |
|---|
| | | barGap: '90%', |
|---|
| | | radius: ['60%', '80%'], |
|---|
| | | name: "", |
|---|
| | | type: "pie", |
|---|
| | | barGap: "90%", |
|---|
| | | radius: ["60%", "80%"], |
|---|
| | | startAngle: 180, |
|---|
| | | hoverAnimation: false, |
|---|
| | | legendHoverLink: false, |
|---|
| | | color: ["#ff4b87",'transparent'], |
|---|
| | | color: ["#ff4b87", "transparent"], |
|---|
| | | z: 10, |
|---|
| | | labelLine: { |
|---|
| | | normal: { |
|---|
| | | show: false |
|---|
| | | } |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | data: [{ |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 160, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | formatter: battgroup1Curr + "A", |
|---|
| | | position: 'center', |
|---|
| | | position: "center", |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: '12', |
|---|
| | | fontWeight: 'normal', |
|---|
| | | color: '#fff' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | fontSize: "12", |
|---|
| | | fontWeight: "normal", |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | name: '' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | name: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 490 |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | value: 490, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | { |
|---|
| | | name: '', |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['60%', '80%'], |
|---|
| | | name: "", |
|---|
| | | type: "pie", |
|---|
| | | radius: ["60%", "80%"], |
|---|
| | | silent: true, |
|---|
| | | startAngle: 180, |
|---|
| | | labelLine: { |
|---|
| | | normal: { |
|---|
| | | show: false |
|---|
| | | } |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | z: 5, |
|---|
| | | data: [{ |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 25, |
|---|
| | | itemStyle: { |
|---|
| | | color: '#ff84b6' |
|---|
| | | } |
|---|
| | | color: "#ff84b6", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 25, |
|---|
| | | itemStyle: { |
|---|
| | | color: 'transparent' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | color: "transparent", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.$options.chart.chartcurrent4.setOption(option); |
|---|
| | | }, |
|---|
| | | // 蓄电池组1 |
|---|
| | |
|---|
| | | top: 0, |
|---|
| | | bottom: 0, |
|---|
| | | left: "10%", |
|---|
| | | right: "10%" |
|---|
| | | right: "10%", |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | show: false, |
|---|
| | | type: "value", |
|---|
| | | boundaryGap: [1.1, 0.1] |
|---|
| | | boundaryGap: [1.1, 0.1], |
|---|
| | | }, |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | |
|---|
| | | axisLine: { show: false }, |
|---|
| | | axisTick: [ |
|---|
| | | { |
|---|
| | | show: false |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: "", |
|---|
| | | type: "bar", |
|---|
| | | barWidth: 20, |
|---|
| | | data: [""] |
|---|
| | | data: [""], |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '背景', |
|---|
| | | type: 'bar', |
|---|
| | | name: "背景", |
|---|
| | | type: "bar", |
|---|
| | | barWidth: 6, |
|---|
| | | barGap: '200%', |
|---|
| | | barGap: "200%", |
|---|
| | | data: [100], |
|---|
| | | itemStyle: { |
|---|
| | | normal: {// '#ff4b87' |
|---|
| | | normal: { |
|---|
| | | // '#ff4b87' |
|---|
| | | color:"#29c67f", |
|---|
| | | barBorderRadius: 10, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '', |
|---|
| | | type: 'pie', |
|---|
| | | barGap: '90%', |
|---|
| | | radius: ['60%', '80%'], |
|---|
| | | name: "", |
|---|
| | | type: "pie", |
|---|
| | | barGap: "90%", |
|---|
| | | radius: ["60%", "80%"], |
|---|
| | | startAngle: 180, |
|---|
| | | hoverAnimation: false, |
|---|
| | | legendHoverLink: false, |
|---|
| | | color: ["#29c67f",'transparent'], |
|---|
| | | color: ["#29c67f", "transparent"], |
|---|
| | | z: 10, |
|---|
| | | labelLine: { |
|---|
| | | normal: { |
|---|
| | | show: false |
|---|
| | | } |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | data: [{ |
|---|
| | | }, |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 160, |
|---|
| | | label: { |
|---|
| | | normal: { |
|---|
| | | formatter: battgroup2Curr + 'A', |
|---|
| | | position: 'center', |
|---|
| | | formatter: battgroup2Curr + "A", |
|---|
| | | position: "center", |
|---|
| | | show: true, |
|---|
| | | textStyle: { |
|---|
| | | fontSize: '12', |
|---|
| | | fontWeight: 'normal', |
|---|
| | | color: '#fff' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | fontSize: "12", |
|---|
| | | fontWeight: "normal", |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | name: '' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | name: "", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 490 |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | value: 490, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | { |
|---|
| | | name: '', |
|---|
| | | type: 'pie', |
|---|
| | | radius: ['60%', '80%'], |
|---|
| | | name: "", |
|---|
| | | type: "pie", |
|---|
| | | radius: ["60%", "80%"], |
|---|
| | | silent: true, |
|---|
| | | startAngle: 180, |
|---|
| | | labelLine: { |
|---|
| | | normal: { |
|---|
| | | show: false |
|---|
| | | } |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | z: 5, |
|---|
| | | data: [{ |
|---|
| | | data: [ |
|---|
| | | { |
|---|
| | | value: 25, |
|---|
| | | itemStyle: { |
|---|
| | | color: '#60e2af' |
|---|
| | | } |
|---|
| | | color: "#60e2af", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: 25, |
|---|
| | | itemStyle: { |
|---|
| | | color: 'transparent' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | color: "transparent", |
|---|
| | | }, |
|---|
| | | |
|---|
| | | |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.$options.chart.chartcurrent5.setOption(option); |
|---|
| | | }, |
|---|
| | | // 模块输出电流 |
|---|
| | |
|---|
| | | let self = this; |
|---|
| | | let data = []; |
|---|
| | | let dataName = []; |
|---|
| | | let dataInfo = ["m1OutCurr","m2OutCurr","m3OutCurr","m4OutCurr","m5OutCurr","m6OutCurr","m7OutCurr","m8OutCurr","m9OutCurr","m10OutCurr","m11OutCurr","m12OutCurr","m13OutCurr","m14OutCurr","m15OutCurr","m16OutCurr",]; |
|---|
| | | let dataInfo = [ |
|---|
| | | "m1OutCurr", |
|---|
| | | "m2OutCurr", |
|---|
| | | "m3OutCurr", |
|---|
| | | "m4OutCurr", |
|---|
| | | "m5OutCurr", |
|---|
| | | "m6OutCurr", |
|---|
| | | "m7OutCurr", |
|---|
| | | "m8OutCurr", |
|---|
| | | "m9OutCurr", |
|---|
| | | "m10OutCurr", |
|---|
| | | "m11OutCurr", |
|---|
| | | "m12OutCurr", |
|---|
| | | "m13OutCurr", |
|---|
| | | "m14OutCurr", |
|---|
| | | "m15OutCurr", |
|---|
| | | "m16OutCurr", |
|---|
| | | ]; |
|---|
| | | dataInfo.forEach((item,i) => { |
|---|
| | | let index = i + 1; |
|---|
| | | dataName.push("模块" + index); |
|---|
| | |
|---|
| | | }); |
|---|
| | | let option = { |
|---|
| | | grid: { |
|---|
| | | top: '20%', |
|---|
| | | left: '10%', |
|---|
| | | right: '5%', |
|---|
| | | bottom: '15%', |
|---|
| | | top: "20%", |
|---|
| | | left: "10%", |
|---|
| | | right: "5%", |
|---|
| | | bottom: "15%", |
|---|
| | | }, |
|---|
| | | tooltip:{ |
|---|
| | | trigger:"axis", |
|---|
| | | axisPointer:{ |
|---|
| | | type:"cross" |
|---|
| | | } |
|---|
| | | type: "cross", |
|---|
| | | }, |
|---|
| | | xAxis: [{ |
|---|
| | | type: 'category', |
|---|
| | | }, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | type: "category", |
|---|
| | | axisLine: { |
|---|
| | | show: true, |
|---|
| | | lineStyle: { |
|---|
| | | color: '#ccc' |
|---|
| | | color: "#ccc", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLabel: { |
|---|
| | | color: '#fff' |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | splitLine: { |
|---|
| | | show: false |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | boundaryGap: false, |
|---|
| | | data: dataName, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | |
|---|
| | | }], |
|---|
| | | |
|---|
| | | yAxis: [{ |
|---|
| | | type: 'value', |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: "value", |
|---|
| | | // min: 0, |
|---|
| | | // max: 140, |
|---|
| | | splitNumber: 10, |
|---|
| | |
|---|
| | | |
|---|
| | | lineStyle: { |
|---|
| | | type:"dotted", |
|---|
| | | color: 'rgba(255,255,255,0.1)' |
|---|
| | | } |
|---|
| | | color: "rgba(255,255,255,0.1)", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | axisLine:{ |
|---|
| | | show:false |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | axisLabel:{ |
|---|
| | | color:"#fff" |
|---|
| | | color: "#fff", |
|---|
| | | }, |
|---|
| | | axisTick: { |
|---|
| | | show: false, |
|---|
| | | }, |
|---|
| | | }], |
|---|
| | | series: [{ |
|---|
| | | name: '电流', |
|---|
| | | type: 'line', |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: "电流", |
|---|
| | | type: "line", |
|---|
| | | // smooth: true, //是否平滑 |
|---|
| | | showAllSymbol: true, |
|---|
| | | // symbol: 'image://./static/images/guang-circle.png', |
|---|
| | | symbol: 'circle', |
|---|
| | | symbol: "circle", |
|---|
| | | symbolSize: 10, |
|---|
| | | label: { |
|---|
| | | show: false, |
|---|
| | | position: 'top', |
|---|
| | | position: "top", |
|---|
| | | textStyle: { |
|---|
| | | color: '#6c50f3', |
|---|
| | | } |
|---|
| | | color: "#6c50f3", |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | itemStyle: { |
|---|
| | | color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ |
|---|
| | | color: new echarts.graphic.LinearGradient( |
|---|
| | | 0, |
|---|
| | | 0, |
|---|
| | | 1, |
|---|
| | | 0, |
|---|
| | | [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: '#d3c209' |
|---|
| | | color: "#d3c209", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: '#e29300' |
|---|
| | | } |
|---|
| | | ], false), |
|---|
| | | color: "#e29300", |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | false |
|---|
| | | ), |
|---|
| | | borderWidth: 8, |
|---|
| | | shadowBlur: 0, |
|---|
| | | shadowOffsetY: 0, |
|---|
| | | shadowOffsetX: 0, |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | show: true |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | | areaStyle: { |
|---|
| | | normal: { |
|---|
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|---|
| | | color: new echarts.graphic.LinearGradient( |
|---|
| | | 0, |
|---|
| | | 0, |
|---|
| | | 0, |
|---|
| | | 1, |
|---|
| | | [ |
|---|
| | | { |
|---|
| | | offset: 0, |
|---|
| | | color: 'rgba(255,236,85,1)' |
|---|
| | | color: "rgba(255,236,85,1)", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | offset: 1, |
|---|
| | | color: 'rgba(23,129,186,0)' |
|---|
| | | } |
|---|
| | | ], false), |
|---|
| | | shadowBlur: 10 |
|---|
| | | } |
|---|
| | | color: "rgba(23,129,186,0)", |
|---|
| | | }, |
|---|
| | | data: data |
|---|
| | | ], |
|---|
| | | false |
|---|
| | | ), |
|---|
| | | shadowBlur: 10, |
|---|
| | | }, |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | data: data, |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | this.$options.chart.chartcurrent6.setOption(option); |
|---|
| | | }, |
|---|
| | |
|---|
| | | ]; |
|---|
| | | // 1段交流母线输出开关 |
|---|
| | | self.tableData2 = []; |
|---|
| | | // console.log("data", data); |
|---|
| | | for(let i=1;i<17;i++){ |
|---|
| | | let name = data['isAcdcMod'+i+'Off'] |
|---|
| | | let name = data["isAcdcMod" + i + "Off"]; |
|---|
| | | if(name !=undefined){ |
|---|
| | | let obj = {data:'1段交流母线输出开关' + i + '跳闸',status:data['isAcdcMod'+i+'Off']}; |
|---|
| | | self.tableData2.push(obj) |
|---|
| | | let obj = { |
|---|
| | | data: "1段交流母线输出开关" + i + "跳闸", |
|---|
| | | status: data["isAcdcMod" + i + "Off"], |
|---|
| | | }; |
|---|
| | | self.tableData2.push(obj); |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | | .clear{ |
|---|
| | |
|---|
| | | display: inline-block; |
|---|
| | | width: 15px; |
|---|
| | | height: 27px; |
|---|
| | | background-image: url('../../assets/images/tb1.png'); |
|---|
| | | background-image: url("../../assets/images/tb1.png"); |
|---|
| | | background-repeat:no-repeat; |
|---|
| | | background-size:contain; |
|---|
| | | margin-right: 5px; |
|---|
| | |
|---|
| | | position:relative; |
|---|
| | | background-image: radial-gradient( |
|---|
| | | rgba(21,32,63,0.27), |
|---|
| | | rgba(54,103,236,0.27) ); |
|---|
| | | rgba(54, 103, 236, 0.27) |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | .arrows-box{ |
|---|
| | | position:absolute; |
|---|
| | |
|---|
| | | padding: 10px; |
|---|
| | | background-image: radial-gradient( |
|---|
| | | rgba(21,32,63,0.27), |
|---|
| | | rgba(54,103,236,0.27) ); |
|---|
| | | rgba(54, 103, 236, 0.27) |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | .center-list{ |
|---|
| | | height: 24.5%; |
|---|
| | |
|---|
| | | padding: 10px; |
|---|
| | | background-image: radial-gradient( |
|---|
| | | rgba(21,32,63,0.27), |
|---|
| | | rgba(54,103,236,0.27) ); |
|---|
| | | rgba(54, 103, 236, 0.27) |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | .list-coneter{ |
|---|
| | | margin: 0 13px; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | .chart-box{ |
|---|
| | | width: 98%; |
|---|
| | |
|---|
| | | text-align: left; |
|---|
| | | } |
|---|
| | | .text-color{ |
|---|
| | | color:#00feff |
|---|
| | | color: #00feff; |
|---|
| | | } |
|---|
| | | .text-span{ |
|---|
| | | display:inline-block; |
|---|
| | |
|---|
| | | text-align: center; |
|---|
| | | font-size: 14px; |
|---|
| | | /* padding:0 15px */ |
|---|
| | | |
|---|
| | | } |
|---|
| | | .marign-top40{ |
|---|
| | | margin-top: 40%; |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <flex-layout direction="row" class="page-real-time" :no-bg="true"> |
|---|
| | | <content-box style="margin-left: 4px; margin-right: 4px;" :title="battFullName"> |
|---|
| | | <content-box |
|---|
| | | style="margin-left: 4px; margin-right: 4px" |
|---|
| | | :title="battFullName" |
|---|
| | | > |
|---|
| | | <div class="flex-page-content"> |
|---|
| | | <div class="page-content-tools"> |
|---|
| | | <div> |
|---|
| | | <el-row :gutter="8"> |
|---|
| | | <el-col :span="16" class="status-text"> |
|---|
| | | 通讯状态: |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="16" class="status-text"> 通讯状态: </el-col> |
|---|
| | | <el-col :span="8"> |
|---|
| | | <hdw-light :type="allSignal"></hdw-light> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </div> |
|---|
| | | <el-tabs type="border-card" class="flex-layout noborder top-border" v-model="acTabs" @tab-click="tabsChange"> |
|---|
| | | <el-tabs |
|---|
| | | type="border-card" |
|---|
| | | class="flex-layout noborder top-border" |
|---|
| | | v-model="acTabs" |
|---|
| | | @tab-click="tabsChange" |
|---|
| | | > |
|---|
| | | <el-tab-pane label="交流配电柜遥测量" name="acData"> |
|---|
| | | <div class="full-height"> |
|---|
| | | <ggdmeasure v-if="acTabs=='acData'" :powerDeviceId="powerData.info.powerDeviceId"></ggdmeasure> |
|---|
| | | <ggdmeasure |
|---|
| | | v-if="acTabs == 'acData'" |
|---|
| | | :powerDeviceId="powerData.info.powerDeviceId" |
|---|
| | | ></ggdmeasure> |
|---|
| | | </div> |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane label="交流配电柜" name="acSignalData"> |
|---|
| | | <power-box-component title="交流配电柜遥测量" :data="acData" :length="1"></power-box-component> |
|---|
| | | <power-box-component title="交流配电柜遥信量" :data="acSignalData" :length="4"> |
|---|
| | | <power-box-component |
|---|
| | | title="交流配电柜遥测量" |
|---|
| | | :data="acData" |
|---|
| | | :length="1" |
|---|
| | | ></power-box-component> |
|---|
| | | <power-box-component |
|---|
| | | title="交流配电柜遥信量" |
|---|
| | | :data="acSignalData" |
|---|
| | | :length="4" |
|---|
| | | > |
|---|
| | | <div slot="tools"> |
|---|
| | | <i class="box-tools el-icon-s-tools" @click="acDialog=true"></i> |
|---|
| | | <i |
|---|
| | | class="box-tools el-icon-s-tools" |
|---|
| | | @click="acDialog = true" |
|---|
| | | ></i> |
|---|
| | | </div> |
|---|
| | | </power-box-component> |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane label="高频开关电源柜遥测量" name="acDcData"> |
|---|
| | | <div class="full-height"> |
|---|
| | | <hf-switch v-if="acTabs=='acDcData'" :powerDeviceId="powerData.info.powerDeviceId"></hf-switch> |
|---|
| | | <hf-switch |
|---|
| | | v-if="acTabs == 'acDcData'" |
|---|
| | | :powerDeviceId="powerData.info.powerDeviceId" |
|---|
| | | ></hf-switch> |
|---|
| | | </div> |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane label="高频开关电源柜" name="acDcSignalData"> |
|---|
| | | <power-box-component title="高频开关电源柜遥测量" :data="acDcData" :length="1"></power-box-component> |
|---|
| | | <power-box-component title="高频开关电源柜遥信量" :data="acDcSignalData" :length="4"> |
|---|
| | | <power-box-component |
|---|
| | | title="高频开关电源柜遥测量" |
|---|
| | | :data="acDcData" |
|---|
| | | :length="1" |
|---|
| | | ></power-box-component> |
|---|
| | | <power-box-component |
|---|
| | | title="高频开关电源柜遥信量" |
|---|
| | | :data="acDcSignalData" |
|---|
| | | :length="4" |
|---|
| | | > |
|---|
| | | <div slot="tools"> |
|---|
| | | <i class="box-tools el-icon-s-tools" @click="acDcDialog=true"></i> |
|---|
| | | <i |
|---|
| | | class="box-tools el-icon-s-tools" |
|---|
| | | @click="acDcDialog = true" |
|---|
| | | ></i> |
|---|
| | | </div> |
|---|
| | | </power-box-component> |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane label="直流配电柜遥测量" name="dcData"> |
|---|
| | | <div class="full-height"> |
|---|
| | | <dcmeasure v-if="acTabs=='dcData'" :powerDeviceId="powerData.info.powerDeviceId"></dcmeasure> |
|---|
| | | <dcmeasure |
|---|
| | | v-if="acTabs == 'dcData'" |
|---|
| | | :powerDeviceId="powerData.info.powerDeviceId" |
|---|
| | | ></dcmeasure> |
|---|
| | | </div> |
|---|
| | | </el-tab-pane> |
|---|
| | | <el-tab-pane label="直流配电柜" name="dcSignalData"> |
|---|
| | | <power-box-component title="直流配电柜遥测量" :data="dcData" :length="1"></power-box-component> |
|---|
| | | <power-box-component title="直流配电柜遥信量" :data="dcSignalData" :length="4"> |
|---|
| | | <power-box-component |
|---|
| | | title="直流配电柜遥测量" |
|---|
| | | :data="dcData" |
|---|
| | | :length="1" |
|---|
| | | ></power-box-component> |
|---|
| | | <power-box-component |
|---|
| | | title="直流配电柜遥信量" |
|---|
| | | :data="dcSignalData" |
|---|
| | | :length="4" |
|---|
| | | > |
|---|
| | | <div slot="tools"> |
|---|
| | | <i class="box-tools el-icon-s-tools" @click="dcDialog=true"></i> |
|---|
| | | <i |
|---|
| | | class="box-tools el-icon-s-tools" |
|---|
| | | @click="dcDialog = true" |
|---|
| | | ></i> |
|---|
| | | </div> |
|---|
| | | </power-box-component> |
|---|
| | | </el-tab-pane> |
|---|
| | |
|---|
| | | top="0" |
|---|
| | | class="dialog-center" |
|---|
| | | :modal-append-to-body="false" |
|---|
| | | :destroy-on-close="true"> |
|---|
| | | <ac-config :visible.sync="acDialog" :batt="batt" :info="configs.ac" @success="getPowerACConfigById"></ac-config> |
|---|
| | | :destroy-on-close="true" |
|---|
| | | > |
|---|
| | | <ac-config |
|---|
| | | :visible.sync="acDialog" |
|---|
| | | :batt="batt" |
|---|
| | | :info="configs.ac" |
|---|
| | | @success="getPowerACConfigById" |
|---|
| | | ></ac-config> |
|---|
| | | </el-dialog> |
|---|
| | | <el-dialog |
|---|
| | | title="高频开关电源柜遥信量配置" |
|---|
| | |
|---|
| | | top="0" |
|---|
| | | class="dialog-center" |
|---|
| | | :modal-append-to-body="false" |
|---|
| | | :destroy-on-close="true"> |
|---|
| | | <ac-dc-config :visible.sync="acDcDialog" :batt="batt" :info="configs.acDc" @success="getPowerACDCConfigById"></ac-dc-config> |
|---|
| | | :destroy-on-close="true" |
|---|
| | | > |
|---|
| | | <ac-dc-config |
|---|
| | | :visible.sync="acDcDialog" |
|---|
| | | :batt="batt" |
|---|
| | | :info="configs.acDc" |
|---|
| | | @success="getPowerACDCConfigById" |
|---|
| | | ></ac-dc-config> |
|---|
| | | </el-dialog> |
|---|
| | | <el-dialog |
|---|
| | | title="直流配电柜遥信量配置" |
|---|
| | |
|---|
| | | top="0" |
|---|
| | | class="dialog-center" |
|---|
| | | :modal-append-to-body="false" |
|---|
| | | :destroy-on-close="true"> |
|---|
| | | <dc-config :visible.sync="dcDialog" :batt="batt" :info="configs.dc" @success="getPowerDCConfigById"></dc-config> |
|---|
| | | :destroy-on-close="true" |
|---|
| | | > |
|---|
| | | <dc-config |
|---|
| | | :visible.sync="dcDialog" |
|---|
| | | :batt="batt" |
|---|
| | | :info="configs.dc" |
|---|
| | | @success="getPowerDCConfigById" |
|---|
| | | ></dc-config> |
|---|
| | | </el-dialog> |
|---|
| | | <el-dialog |
|---|
| | | title="图表配置" |
|---|
| | |
|---|
| | | top="0" |
|---|
| | | class="dialog-center" |
|---|
| | | :modal-append-to-body="false" |
|---|
| | | :destroy-on-close="true"> |
|---|
| | | <chart-type-config :visible.sync="chartDialog" v-if="chartDialog" :info="chartTypeConfig" @success="changeChartTypeSuccess"></chart-type-config> |
|---|
| | | :destroy-on-close="true" |
|---|
| | | > |
|---|
| | | <chart-type-config |
|---|
| | | :visible.sync="chartDialog" |
|---|
| | | v-if="chartDialog" |
|---|
| | | :info="chartTypeConfig" |
|---|
| | | @success="changeChartTypeSuccess" |
|---|
| | | ></chart-type-config> |
|---|
| | | </el-dialog> |
|---|
| | | </flex-layout> |
|---|
| | | </template> |
|---|
| | |
|---|
| | | import getItemByKey from "@/assets/js/tools/getItemByKey"; |
|---|
| | | import ChartTypeConfig from "@/pages/dataTest/movingRingSystem/dialog/chartTypeConfig"; |
|---|
| | | import HdwLight from "@/pages/dataMager/components/HdwLight"; |
|---|
| | | import ggdmeasure from '@/pages/alarmMager/GGDmeasure.vue'; |
|---|
| | | import dcmeasure from '@/pages/alarmMager/DCmeasure.vue'; |
|---|
| | | import hfSwitch from '@/pages/alarmMager/hfSwitch.vue'; |
|---|
| | | import ggdmeasure from "@/pages/alarmMager/GGDmeasure.vue"; |
|---|
| | | import dcmeasure from "@/pages/alarmMager/DCmeasure.vue"; |
|---|
| | | import hfSwitch from "@/pages/alarmMager/hfSwitch.vue"; |
|---|
| | | export default { |
|---|
| | | name: "powerBox", |
|---|
| | | components: { |
|---|
| | |
|---|
| | | EChartWrapper, |
|---|
| | | ggdmeasure, |
|---|
| | | dcmeasure, |
|---|
| | | hfSwitch |
|---|
| | | hfSwitch, |
|---|
| | | }, |
|---|
| | | chartOpts(option) { |
|---|
| | | let opt = option?option:{}; |
|---|
| | | let unit = opt.unit?option.unit:""; |
|---|
| | | let type = opt.type?option.type:'bar'; |
|---|
| | | let type = opt.type ? option.type : "bar"; |
|---|
| | | return { |
|---|
| | | animation: false, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis', |
|---|
| | | axisPointer: { // 坐标轴指示器，坐标轴触发有效 |
|---|
| | | type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |
|---|
| | | trigger: "axis", |
|---|
| | | axisPointer: { |
|---|
| | | // 坐标轴指示器，坐标轴触发有效 |
|---|
| | | type: "shadow", // 默认为直线，可选为：'line' | 'shadow' |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | grid: { |
|---|
| | | top: '32px', |
|---|
| | | left: '1%', |
|---|
| | | right: '1%', |
|---|
| | | bottom: '18px', |
|---|
| | | containLabel: true |
|---|
| | | top: "32px", |
|---|
| | | left: "1%", |
|---|
| | | right: "1%", |
|---|
| | | bottom: "18px", |
|---|
| | | containLabel: true, |
|---|
| | | }, |
|---|
| | | xAxis: [ |
|---|
| | | { |
|---|
| | | type: 'category', |
|---|
| | | type: "category", |
|---|
| | | axisLabel: { |
|---|
| | | interval: 0, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | yAxis: [ |
|---|
| | | { |
|---|
| | | type: 'value', |
|---|
| | | name: unit?'Y('+unit+')':'Y', |
|---|
| | | type: "value", |
|---|
| | | name: unit ? "Y(" + unit + ")" : "Y", |
|---|
| | | splitLine: { |
|---|
| | | show: true, |
|---|
| | | }, |
|---|
| | |
|---|
| | | type: type, |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | position: 'top', |
|---|
| | | color: '#fff', |
|---|
| | | position: "top", |
|---|
| | | color: "#fff", |
|---|
| | | formatter: function (params) { |
|---|
| | | return params.value[1] + unit; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: [] |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | data: [], |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | data() { |
|---|
| | | let acData = getAcData(); |
|---|
| | |
|---|
| | | stationName4: " ", |
|---|
| | | stationName5: "", |
|---|
| | | }, |
|---|
| | | realData: {} |
|---|
| | | realData: {}, |
|---|
| | | }, |
|---|
| | | acData, |
|---|
| | | acDcData, |
|---|
| | |
|---|
| | | acDcDialog: false, |
|---|
| | | dcDialog: false, |
|---|
| | | configs: { |
|---|
| | | ac: getPowerConfigData('ac'), |
|---|
| | | acDc: getPowerConfigData('acDc'), |
|---|
| | | dc: getPowerConfigData('dc'), |
|---|
| | | ac: getPowerConfigData("ac"), |
|---|
| | | acDc: getPowerConfigData("acDc"), |
|---|
| | | dc: getPowerConfigData("dc"), |
|---|
| | | }, |
|---|
| | | chartDialog: false, |
|---|
| | | chartTypeConfig: { |
|---|
| | | id: null, |
|---|
| | | name: '', |
|---|
| | | name: "", |
|---|
| | | type: 0, |
|---|
| | | }, |
|---|
| | | chartTypes: [], |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | "$route.params.powerDeviceId"(powerDeviceId) { |
|---|
| | |
|---|
| | | getPowerACDCConfigById() { |
|---|
| | | let id = this.powerData.info.powerDeviceId; |
|---|
| | | this.acDcSignalData = getAcDcSignalData(); |
|---|
| | | this.$apis.dataMager.powerMager.getPowerACDCConfigById(id).then(res=>{ |
|---|
| | | this.$apis.dataMager.powerMager |
|---|
| | | .getPowerACDCConfigById(id) |
|---|
| | | .then((res) => { |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | if(rs.code == 1) { |
|---|
| | | let data = rs.data; |
|---|
| | |
|---|
| | | usePurpose: data.usePurpose, |
|---|
| | | }; |
|---|
| | | }else { |
|---|
| | | this.configs.acDc = getPowerConfigData('acDc'); |
|---|
| | | this.configs.acDc = getPowerConfigData("acDc"); |
|---|
| | | } |
|---|
| | | this.configs.acDc.powerDeviceId = id; |
|---|
| | | this.changeAcDcData(this.configs.acDc); |
|---|
| | | }).catch(error=>{ |
|---|
| | | this.configs.acDc = getPowerConfigData('acDc'); |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | this.configs.acDc = getPowerConfigData("acDc"); |
|---|
| | | this.configs.acDc.powerDeviceId = id; |
|---|
| | | this.changeAcDcData(this.configs.acDc); |
|---|
| | | console.log(error); |
|---|
| | |
|---|
| | | let inUseCount = config.moduleInUseCount; |
|---|
| | | let list = {}; |
|---|
| | | for(let i=1; i<=inUseCount; i++) { |
|---|
| | | list['isAcdcMod'+i+'Off'] = 1; |
|---|
| | | list['isAcdcMod'+i+'Err'] = 1; |
|---|
| | | list["isAcdcMod" + i + "Off"] = 1; |
|---|
| | | list["isAcdcMod" + i + "Err"] = 1; |
|---|
| | | } |
|---|
| | | this.acDcSignalData.map(item=>{ |
|---|
| | | this.acDcSignalData.map((item) => { |
|---|
| | | if(item.inUse == 0) { |
|---|
| | | item.inUse = getValByKey(item.key, list, 0); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | |
|---|
| | | let slotCount = config.moduleSlotCount; |
|---|
| | | let list2 = {}; |
|---|
| | | for(let i=1; i<=slotCount; i++) { |
|---|
| | | list2['isAcdcMod'+i+'Off'] = 1; |
|---|
| | | list2['isAcdcMod'+i+'Err'] = 1; |
|---|
| | | list2["isAcdcMod" + i + "Off"] = 1; |
|---|
| | | list2["isAcdcMod" + i + "Err"] = 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 更新插槽数 |
|---|
| | | this.acDcSignalData = this.acDcSignalData.filter(item=>{ |
|---|
| | | this.acDcSignalData = this.acDcSignalData.filter((item) => { |
|---|
| | | let pattern = /^isAcdcMod\d*(Off|Err)$/; |
|---|
| | | if(pattern.test(item.key)) { |
|---|
| | | return getValByKey(item.key, list2, 0)?true:false; |
|---|
| | |
|---|
| | | getPowerACConfigById() { |
|---|
| | | let id = this.powerData.info.powerDeviceId; |
|---|
| | | this.acSignalData = getAcSignalData(); |
|---|
| | | this.$apis.dataMager.powerMager.getPowerACConfigById(id).then(res=>{ |
|---|
| | | this.$apis.dataMager.powerMager |
|---|
| | | .getPowerACConfigById(id) |
|---|
| | | .then((res) => { |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | if(rs.code == 1) { |
|---|
| | | let data = rs.data; |
|---|
| | |
|---|
| | | usePurpose: data.usePurpose, |
|---|
| | | }; |
|---|
| | | }else { |
|---|
| | | this.configs.ac = getPowerConfigData('ac'); |
|---|
| | | this.configs.ac = getPowerConfigData("ac"); |
|---|
| | | } |
|---|
| | | this.configs.ac.powerDeviceId = id; |
|---|
| | | this.changeAcData(this.configs.ac); |
|---|
| | | }).catch(error=>{ |
|---|
| | | this.configs.ac = getPowerConfigData('ac'); |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | this.configs.ac = getPowerConfigData("ac"); |
|---|
| | | this.configs.ac.powerDeviceId = id; |
|---|
| | | this.changeAcData(this.configs.ac); |
|---|
| | | console.log(error); |
|---|
| | |
|---|
| | | let outputSWCount = config.outputSWCount; |
|---|
| | | let list = {}; |
|---|
| | | for(let i=1; i<=outputSWCount; i++) { |
|---|
| | | list['isFsw1Sw'+i+'trip'] = 1; |
|---|
| | | list['isFsw2Sw'+i+'trip'] = 1; |
|---|
| | | list["isFsw1Sw" + i + "trip"] = 1; |
|---|
| | | list["isFsw2Sw" + i + "trip"] = 1; |
|---|
| | | } |
|---|
| | | this.acSignalData = this.acSignalData.filter(item=>{ |
|---|
| | | this.acSignalData = this.acSignalData.filter((item) => { |
|---|
| | | let pattern = /^isFsw\d*Sw\d*trip$/; |
|---|
| | | if(pattern.test(item.key)) { |
|---|
| | | return getValByKey(item.key, list, 0)?true:false; |
|---|
| | |
|---|
| | | getPowerDCConfigById() { |
|---|
| | | let id = this.powerData.info.powerDeviceId; |
|---|
| | | this.dcSignalData = getDcSignalData(); |
|---|
| | | this.$apis.dataMager.powerMager.getPowerDCConfigById(id).then(res=>{ |
|---|
| | | this.$apis.dataMager.powerMager |
|---|
| | | .getPowerDCConfigById(id) |
|---|
| | | .then((res) => { |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | if(rs.code == 1) { |
|---|
| | | let data = rs.data; |
|---|
| | |
|---|
| | | usePurpose: data.usePurpose, |
|---|
| | | }; |
|---|
| | | }else { |
|---|
| | | this.configs.dc = getPowerConfigData('dc'); |
|---|
| | | this.configs.dc = getPowerConfigData("dc"); |
|---|
| | | } |
|---|
| | | this.configs.dc.powerDeviceId = id; |
|---|
| | | this.changeDcData(this.configs.dc); |
|---|
| | | }).catch(error=>{ |
|---|
| | | this.configs.dc = getPowerConfigData('dc'); |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | this.configs.dc = getPowerConfigData("dc"); |
|---|
| | | this.configs.dc.powerDeviceId = id; |
|---|
| | | this.changeDcData(this.configs.dc); |
|---|
| | | console.log(error); |
|---|
| | |
|---|
| | | let outputSWCount = config.outputSWCount; |
|---|
| | | let list = {}; |
|---|
| | | for(let i=1; i<=outputSWCount; i++) { |
|---|
| | | list['isFsw1Sw'+i+'trip'] = 1; |
|---|
| | | list['isFsw2Sw'+i+'trip'] = 1; |
|---|
| | | list["isFsw1Sw" + i + "trip"] = 1; |
|---|
| | | list["isFsw2Sw" + i + "trip"] = 1; |
|---|
| | | } |
|---|
| | | this.dcSignalData = this.dcSignalData.filter(item=>{ |
|---|
| | | this.dcSignalData = this.dcSignalData.filter((item) => { |
|---|
| | | let pattern = /^isFsw\d*Sw\d*trip$/; |
|---|
| | | if(pattern.test(item.key)) { |
|---|
| | | return getValByKey(item.key, list, 0)?true:false; |
|---|
| | |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | getPowerConfig() { |
|---|
| | | this.$axios.all([ |
|---|
| | | this.$axios |
|---|
| | | .all([ |
|---|
| | | this.getPowerACDCConfigById(), |
|---|
| | | this.getPowerACConfigById(), |
|---|
| | | this.getPowerDCConfigById(), |
|---|
| | | this.getPowerDisplayConfigList(), |
|---|
| | | ]).then(()=>{ |
|---|
| | | ]) |
|---|
| | | .then(() => { |
|---|
| | | this.startSearch(); |
|---|
| | | }).catch(error=>{ |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | this.startSearch(); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | startSearch() { |
|---|
| | | this.timer.start(()=>{ |
|---|
| | | this.$axios.all([ |
|---|
| | | this.getPowerBoxData(), |
|---|
| | | ]).then(()=>{ |
|---|
| | | this.$axios |
|---|
| | | .all([this.getPowerBoxData()]) |
|---|
| | | .then(() => { |
|---|
| | | // 启动循环 |
|---|
| | | this.timer.open(); |
|---|
| | | }).catch(error=>{ |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | // 启动循环 |
|---|
| | | this.timer.open(); |
|---|
| | | }); |
|---|
| | |
|---|
| | | }, |
|---|
| | | getPowerInfo(powerDeviceId) { |
|---|
| | | this.powerData.info.powerDeviceId = powerDeviceId; |
|---|
| | | this.$apis.dataMager.powerMager.getInfoById({ |
|---|
| | | powerDeviceId: powerDeviceId |
|---|
| | | }).then(res => { |
|---|
| | | this.$apis.dataMager.powerMager |
|---|
| | | .getInfoById({ |
|---|
| | | powerDeviceId: powerDeviceId, |
|---|
| | | }) |
|---|
| | | .then((res) => { |
|---|
| | | console.log(res); |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | if (rs.code == 1) { |
|---|
| | |
|---|
| | | } |
|---|
| | | // 获取配置数据 |
|---|
| | | this.getPowerConfig(); |
|---|
| | | }).catch(error => { |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | console.log(error); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | |
|---|
| | | }, |
|---|
| | | getPowerBoxData() { |
|---|
| | | let id = this.powerData.info.powerDeviceId; |
|---|
| | | this.$apis.dataMager.powerMager.getPowerBoxData(id).then(res=>{ |
|---|
| | | console.log(res); |
|---|
| | | this.$apis.dataMager.powerMager |
|---|
| | | .getPowerBoxData(id) |
|---|
| | | .then((res) => { |
|---|
| | | // console.log(res); |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | if(rs.code == 1) { |
|---|
| | | this.allSignal = 0; |
|---|
| | |
|---|
| | | }else { |
|---|
| | | this.setDcInfo({}); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }else { |
|---|
| | | this.setAcInfo({}); |
|---|
| | | this.setAcDcInfo({}); |
|---|
| | | this.setDcInfo({}); |
|---|
| | | this.allSignal = 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | }).catch(error=>{ |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | console.log(error); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | setAcInfo(data) { // 设置交流配电柜的值 |
|---|
| | | setAcInfo(data) { |
|---|
| | | // 设置交流配电柜的值 |
|---|
| | | let acTabs = this.acTabs; |
|---|
| | | if(acTabs == "acData" || acTabs == "acSignalData") { |
|---|
| | | this.acData.map(item=>{ |
|---|
| | | this.acData.map((item) => { |
|---|
| | | item.value = getValByKey(item.key, data, "???", 2); |
|---|
| | | }); |
|---|
| | | |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | if(acTabs == "acSignalData") { |
|---|
| | | this.acSignalData.map(item=>{ |
|---|
| | | this.acSignalData.map((item) => { |
|---|
| | | item.value = getValByKey(item.key, data, -1); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | setAcDcInfo(data) { // 设置高频开关电源柜的值 |
|---|
| | | setAcDcInfo(data) { |
|---|
| | | // 设置高频开关电源柜的值 |
|---|
| | | let acTabs = this.acTabs; |
|---|
| | | if(acTabs == "acDcData" || acTabs == "acDcSignalData") { |
|---|
| | | this.acDcData.map(item=>{ |
|---|
| | | this.acDcData.map((item) => { |
|---|
| | | item.value = getValByKey(item.key, data, "???", 2); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | if(acTabs == "acDcData") { |
|---|
| | | this.setAcDcChart(this.acDcData); |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | if(acTabs == "acDcSignalData") { |
|---|
| | | this.acDcSignalData.map(item=>{ |
|---|
| | | this.acDcSignalData.map((item) => { |
|---|
| | | item.value = item.inUse==0?-1:getValByKey(item.key, data, -1); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | setDcInfo(data) { // 设置直流配电柜的值 |
|---|
| | | setDcInfo(data) { |
|---|
| | | // 设置直流配电柜的值 |
|---|
| | | let acTabs = this.acTabs; |
|---|
| | | if(acTabs == "dcData" || acTabs == "dcSignalData") { |
|---|
| | | this.dcData.map(item=>{ |
|---|
| | | this.dcData.map((item) => { |
|---|
| | | item.value = getValByKey(item.key, data, "???", 2); |
|---|
| | | }); |
|---|
| | | if(acTabs == "dcData") { |
|---|
| | | this.setDcChart(this.dcData); |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | if(acTabs == "dcSignalData") { |
|---|
| | | this.dcSignalData.map(item=>{ |
|---|
| | | this.dcSignalData.map((item) => { |
|---|
| | | item.value = getValByKey(item.key, data, -1); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | |
|---|
| | | }, |
|---|
| | | setAcChart(data) { |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['acIn1VolA', 'acIn1VolB', 'acIn1VolC'], |
|---|
| | | keys: ["acIn1VolA", "acIn1VolB", "acIn1VolC"], |
|---|
| | | refs: this.$refs.acOneInputVol, |
|---|
| | | name: 'acOneInputVol', |
|---|
| | | name: "acOneInputVol", |
|---|
| | | unit: "V", |
|---|
| | | }); |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['acIn1CurrA', 'acIn1CurrB', 'acIn1CurrC'], |
|---|
| | | keys: ["acIn1CurrA", "acIn1CurrB", "acIn1CurrC"], |
|---|
| | | refs: this.$refs.acOneInputCurr, |
|---|
| | | name: 'acOneInputCurr', |
|---|
| | | name: "acOneInputCurr", |
|---|
| | | unit: "A", |
|---|
| | | }); |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['acIn2VolA', 'acIn2VolB', 'acIn2VolC'], |
|---|
| | | keys: ["acIn2VolA", "acIn2VolB", "acIn2VolC"], |
|---|
| | | refs: this.$refs.acTwoInputVol, |
|---|
| | | name: 'acTwoInputVol', |
|---|
| | | unit: "V" |
|---|
| | | name: "acTwoInputVol", |
|---|
| | | unit: "V", |
|---|
| | | }); |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['acIn2CurrA', 'acIn2CurrB', 'acIn2CurrC'], |
|---|
| | | keys: ["acIn2CurrA", "acIn2CurrB", "acIn2CurrC"], |
|---|
| | | refs: this.$refs.acTwoInputCurr, |
|---|
| | | name: 'acTwoInputCurr', |
|---|
| | | unit: "A" |
|---|
| | | name: "acTwoInputCurr", |
|---|
| | | unit: "A", |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['acVolHLimit', 'acVolLLimit'], |
|---|
| | | keys: ["acVolHLimit", "acVolLLimit"], |
|---|
| | | refs: this.$refs.acVolAlarmLimit, |
|---|
| | | name: 'acVolAlarmLimit', |
|---|
| | | unit: "V" |
|---|
| | | name: "acVolAlarmLimit", |
|---|
| | | unit: "V", |
|---|
| | | }); |
|---|
| | | |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['temperature'], |
|---|
| | | keys: ["temperature"], |
|---|
| | | refs: this.$refs.acTemp, |
|---|
| | | name: 'acTemp', |
|---|
| | | unit: "℃" |
|---|
| | | name: "acTemp", |
|---|
| | | unit: "℃", |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | setAcDcChart(data) { |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['acIn1VolA', 'acIn1VolB', 'acIn1VolC','acIn2VolA', 'acIn2VolB', 'acIn2VolC'], |
|---|
| | | keys: [ |
|---|
| | | "acIn1VolA", |
|---|
| | | "acIn1VolB", |
|---|
| | | "acIn1VolC", |
|---|
| | | "acIn2VolA", |
|---|
| | | "acIn2VolB", |
|---|
| | | "acIn2VolC", |
|---|
| | | ], |
|---|
| | | refs: this.$refs.acDcInputVol, |
|---|
| | | name: 'acDcInputVol', |
|---|
| | | name: "acDcInputVol", |
|---|
| | | unit: "V", |
|---|
| | | }); |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['acOutVolA', 'acOutVolB', 'acOutVolC'], |
|---|
| | | keys: ["acOutVolA", "acOutVolB", "acOutVolC"], |
|---|
| | | refs: this.$refs.acDcOutputVol, |
|---|
| | | name: 'acDcOutputVol', |
|---|
| | | name: "acDcOutputVol", |
|---|
| | | unit: "V", |
|---|
| | | }); |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['acOutCurrA', 'acOutCurrB', 'acOutCurrC'], |
|---|
| | | keys: ["acOutCurrA", "acOutCurrB", "acOutCurrC"], |
|---|
| | | refs: this.$refs.acDcOutputCurr, |
|---|
| | | name: 'acDcOutputCurr', |
|---|
| | | name: "acDcOutputCurr", |
|---|
| | | unit: "A", |
|---|
| | | }); |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['loaderCurr', 'chargLimitCurr', 'battgroup1Curr', 'battgroup2Curr'], |
|---|
| | | keys: [ |
|---|
| | | "loaderCurr", |
|---|
| | | "chargLimitCurr", |
|---|
| | | "battgroup1Curr", |
|---|
| | | "battgroup2Curr", |
|---|
| | | ], |
|---|
| | | refs: this.$refs.acDcCurr, |
|---|
| | | name: 'acDcCurr', |
|---|
| | | name: "acDcCurr", |
|---|
| | | unit: "A", |
|---|
| | | }); |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['dcOutVol', 'junChargeVol', 'floatChargeVol', 'battgroup1Vol', 'battgroup2Vol'], |
|---|
| | | keys: [ |
|---|
| | | "dcOutVol", |
|---|
| | | "junChargeVol", |
|---|
| | | "floatChargeVol", |
|---|
| | | "battgroup1Vol", |
|---|
| | | "battgroup2Vol", |
|---|
| | | ], |
|---|
| | | refs: this.$refs.acDcVol, |
|---|
| | | name: 'acDcVol', |
|---|
| | | name: "acDcVol", |
|---|
| | | unit: "V", |
|---|
| | | }); |
|---|
| | | |
|---|
| | | let modulesKeys = []; |
|---|
| | | for(let i=1; i<=16; i++) { |
|---|
| | | modulesKeys.push('m'+i+'OutCurr'); |
|---|
| | | modulesKeys.push("m" + i + "OutCurr"); |
|---|
| | | } |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: modulesKeys, |
|---|
| | | refs: this.$refs.acDcModuleOutputCurr, |
|---|
| | | name: 'acDcModuleOutputCurr', |
|---|
| | | name: "acDcModuleOutputCurr", |
|---|
| | | unit: "A", |
|---|
| | | }); |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['acVolHLimit', 'acVolLLimit', 'dcOutVolHLimit', 'dcOutVolLLimit'], |
|---|
| | | keys: [ |
|---|
| | | "acVolHLimit", |
|---|
| | | "acVolLLimit", |
|---|
| | | "dcOutVolHLimit", |
|---|
| | | "dcOutVolLLimit", |
|---|
| | | ], |
|---|
| | | refs: this.$refs.acDcVolAlarmLimit, |
|---|
| | | name: 'acDcVolAlarmLimit', |
|---|
| | | name: "acDcVolAlarmLimit", |
|---|
| | | unit: "V", |
|---|
| | | }); |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['acdcmTemp'], |
|---|
| | | keys: ["acdcmTemp"], |
|---|
| | | refs: this.$refs.acDcTemp, |
|---|
| | | name: 'acDcTemp', |
|---|
| | | name: "acDcTemp", |
|---|
| | | unit: "℃", |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | setDcChart(data) { |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['dcIn1Vol', 'dcIn2Vol'], |
|---|
| | | keys: ["dcIn1Vol", "dcIn2Vol"], |
|---|
| | | refs: this.$refs.dcInputVol, |
|---|
| | | name: 'dcInputVol', |
|---|
| | | name: "dcInputVol", |
|---|
| | | unit: "V", |
|---|
| | | }); |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['dcOut1Vol', 'dcOut2Vol'], |
|---|
| | | keys: ["dcOut1Vol", "dcOut2Vol"], |
|---|
| | | refs: this.$refs.dcOutputVol, |
|---|
| | | name: 'dcOutputVol', |
|---|
| | | name: "dcOutputVol", |
|---|
| | | unit: "V", |
|---|
| | | }); |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['dcOut1Curr', 'dcOut2Curr'], |
|---|
| | | keys: ["dcOut1Curr", "dcOut2Curr"], |
|---|
| | | refs: this.$refs.dcOutputCurr, |
|---|
| | | name: 'dcOutputCurr', |
|---|
| | | name: "dcOutputCurr", |
|---|
| | | unit: "A", |
|---|
| | | }); |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['acVolHLimit', 'acVolLLimit'], |
|---|
| | | keys: ["acVolHLimit", "acVolLLimit"], |
|---|
| | | refs: this.$refs.dcVolLimit, |
|---|
| | | name: 'dcVolLimit', |
|---|
| | | name: "dcVolLimit", |
|---|
| | | unit: "V", |
|---|
| | | }); |
|---|
| | | this.setChartOption(data, { |
|---|
| | | keys: ['temperature'], |
|---|
| | | keys: ["temperature"], |
|---|
| | | refs: this.$refs.dcTemp, |
|---|
| | | name: 'dcTemp', |
|---|
| | | name: "dcTemp", |
|---|
| | | unit: "℃", |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | setChartOption(data, option) { |
|---|
| | | let opt = this.$options.chartOpts({ |
|---|
| | | unit: option.unit |
|---|
| | | unit: option.unit, |
|---|
| | | }); |
|---|
| | | let chartType = this.getItemByName(option.name, this.chartTypes); |
|---|
| | | opt.tooltip.axisPointer.type = chartType==0?'shadow':chartType.type==0?'shadow':'line'; |
|---|
| | | opt.series[0].type = chartType==0?'bar':chartType.type==0?'bar':'line'; |
|---|
| | | opt.series[0].data = option.keys.map(item=>{ |
|---|
| | | opt.tooltip.axisPointer.type = |
|---|
| | | chartType == 0 ? "shadow" : chartType.type == 0 ? "shadow" : "line"; |
|---|
| | | opt.series[0].type = |
|---|
| | | chartType == 0 ? "bar" : chartType.type == 0 ? "bar" : "line"; |
|---|
| | | opt.series[0].data = option.keys.map((item) => { |
|---|
| | | let res = getItemByKey(item, data); |
|---|
| | | return res==0?["未知", 0]:[res.label1, res.value]; |
|---|
| | | }); |
|---|
| | |
|---|
| | | // this.$refs.acVolAlarmLimit.resize(); |
|---|
| | | // this.$refs.acTemp.resize(); |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // // 高频交流电源柜 |
|---|
| | | // if(acTabs == 'acDcData') { |
|---|
| | | // this.$refs.acDcInputVol.resize(); |
|---|
| | |
|---|
| | | // this.$refs.acDcVolAlarmLimit.resize(); |
|---|
| | | // this.$refs.acDcTemp.resize(); |
|---|
| | | // } |
|---|
| | | |
|---|
| | | // // 直流配电柜 |
|---|
| | | // if(acTabs == 'dcData') { |
|---|
| | | // this.$refs.dcInputVol.resize(); |
|---|
| | |
|---|
| | | return result; |
|---|
| | | }, |
|---|
| | | getPowerDisplayConfigList() { |
|---|
| | | this.$apis.dataMager.powerMager.getPowerDisplayConfigList().then(res=>{ |
|---|
| | | this.$apis.dataMager.powerMager |
|---|
| | | .getPowerDisplayConfigList() |
|---|
| | | .then((res) => { |
|---|
| | | let rs = JSON.parse(res.data.result); |
|---|
| | | let data = []; |
|---|
| | | if(rs.code == 1) { |
|---|
| | | data = rs.data; |
|---|
| | | } |
|---|
| | | this.chartTypes = data; |
|---|
| | | }).catch(error=>{ |
|---|
| | | }) |
|---|
| | | .catch((error) => { |
|---|
| | | this.chartTypes = []; |
|---|
| | | console.log(error); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | showChartConfigDialog(name) { |
|---|
| | | let chartType = this.getItemByName(name, this.chartTypes); |
|---|
| | | this.chartTypeConfig = chartType?chartType:{id:null, name: name, type: 0}; |
|---|
| | | this.chartTypeConfig = chartType |
|---|
| | | ? chartType |
|---|
| | | : { id: null, name: name, type: 0 }; |
|---|
| | | this.$nextTick(()=>{ |
|---|
| | | this.chartDialog = true; |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | changeChartTypeSuccess() { |
|---|
| | | this.getPowerDisplayConfigList(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | battFullName() { |
|---|
| | |
|---|
| | | return batt.StationName + "-" + "通信电源"; |
|---|
| | | } |
|---|
| | | return "电池组全称"; |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | mounted() { |
|---|
| | | // 获取电源信息 |
|---|
| | |
|---|
| | | // 设置配置项 |
|---|
| | | this.setOption(); |
|---|
| | | // 添加窗口自动缩放 |
|---|
| | | window.addEventListener('resize', this.resize); |
|---|
| | | window.addEventListener("resize", this.resize); |
|---|
| | | }, |
|---|
| | | destroyed() { |
|---|
| | | this.timer.stop(); |
|---|
| | | // 添加窗口自动缩放 |
|---|
| | | window.removeEventListener('resize', this.resize); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | window.removeEventListener("resize", this.resize); |
|---|
| | | }, |
|---|
| | | }; |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .flex-box-tools-icon:active { |
|---|
| | | color: #FF0000; |
|---|
| | | color: #ff0000; |
|---|
| | | } |
|---|
| | | .page-content-tools { |
|---|
| | | position: absolute; |
|---|
