|
@@ -9,7 +9,7 @@
|
|
|
<!-- 图形图 -->
|
|
|
<div class="statistics-chart" style="border-top:5px solid #eee;min-height: calc(65% - 3px);">
|
|
|
<div class="chart-title">共包含原始点位:{{ originalPoint }} 个</div>
|
|
|
- <div style="padding:15px 10%;line-height:2;">
|
|
|
+ <div style="padding:15px 20px;line-height:2;">
|
|
|
1点位对多表号功能号:{{ pointData.oneToM.toString() }}
|
|
|
<br />
|
|
|
多点位对1表号功能号:{{ pointData.mToOne.toString() }}
|
|
@@ -18,7 +18,32 @@
|
|
|
style="margin:-25px 0 0 50px;background:rgb(121, 187, 255);color:rgb(225, 228, 229);border:none;"></el-button>
|
|
|
</div>
|
|
|
<hr style="width:90%;margin-top: 1px;" />
|
|
|
- <div ref="barchart" class="chart" id="barchart" :style="{height:barChartData.length * 120 + 'px'}"></div>
|
|
|
+ <div ref="barchart" class="" id="barchart" :style="{height:barChartData.length * 120 + 'px'}">
|
|
|
+ <el-row class="barchart-title">
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="background:#79bbff;"></span>已接入点位 {{pointInSum}}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <span style="background:#e1e4e5;"></span>未接入点位 {{pointOutSum}}
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div>
|
|
|
+ <div class="source" v-for="t in barChartData" :key="t.Id">
|
|
|
+ <el-row class="source-name">
|
|
|
+ <div :title='t.Name'>{{t.Name}}</div>
|
|
|
+ <div>{{t.Notrelatedall+t.Relatedall}}个原始点位</div>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="source-chart already-in">
|
|
|
+ <el-col :style="{width:(t.widthin>1?t.widthin:1)+'%'}"></el-col>
|
|
|
+ <el-col>{{t.Relatedall}}</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="source-chart not-in">
|
|
|
+ <el-col :style="{width:(t.widthout>1?t.widthout:1)+'%'}"></el-col>
|
|
|
+ <el-col>{{t.Notrelatedall}}</el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 点位/表号功能号对应总览 -->
|
|
|
<pointTabOverview ref="overviewDialog"></pointTabOverview>
|
|
@@ -43,8 +68,6 @@ export default {
|
|
|
return {
|
|
|
//环形图
|
|
|
loopChart: null,
|
|
|
- //条形图
|
|
|
- barChart: null,
|
|
|
//环形图数据
|
|
|
loopChartData: [],
|
|
|
//条形图数据
|
|
@@ -57,7 +80,9 @@ export default {
|
|
|
disConn: 0//可能断数数量
|
|
|
},
|
|
|
//原始点数量
|
|
|
- originalPoint: null
|
|
|
+ originalPoint: null,
|
|
|
+ pointInSum: 0, //左侧柱形图已接入
|
|
|
+ pointOutSum: 0, //左侧柱形图未接入
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -132,8 +157,8 @@ export default {
|
|
|
avoidLabelOverlap: false,
|
|
|
legendHoverLink: false,
|
|
|
selectedOffset: 0,
|
|
|
- label:{
|
|
|
- color:'rgb(121, 187, 255)',
|
|
|
+ label: {
|
|
|
+ color: 'rgb(121, 187, 255)',
|
|
|
},
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
@@ -168,7 +193,22 @@ export default {
|
|
|
|
|
|
//获取条形图数据
|
|
|
getIntegrateStatisticsToBar({}, res => {
|
|
|
- this.barChartData = res.Content;
|
|
|
+ let max = 1;
|
|
|
+ res.Content.forEach(t => {
|
|
|
+ this.pointInSum += t.Relatedall;
|
|
|
+ this.pointOutSum += t.Notrelatedall;
|
|
|
+ if (t.Relatedall > max) {
|
|
|
+ max = t.Relatedall
|
|
|
+ }
|
|
|
+ if (t.Notrelatedall > max) {
|
|
|
+ max = t.Notrelatedall
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.barChartData = res.Content.map(t => {
|
|
|
+ t.widthin = ((t.Relatedall / max) * 0.8).toFixed(2) * 100
|
|
|
+ t.widthout = ((t.Notrelatedall / max) * 0.8).toFixed(2) * 100
|
|
|
+ return t;
|
|
|
+ });
|
|
|
this.originalPoint = (() => {
|
|
|
let sum = 0;
|
|
|
this.barChartData.map(item => {
|
|
@@ -176,71 +216,6 @@ export default {
|
|
|
});
|
|
|
return sum;
|
|
|
})();
|
|
|
-
|
|
|
- //条形图参数
|
|
|
- let barOption = {
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- // 坐标轴指示器,坐标轴触发有效
|
|
|
- type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- color: ['rgb(121, 187, 255)', 'rgb(225, 228, 229)'],
|
|
|
- legend: {
|
|
|
- data: ["已接入", "未接入"]
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: "3%",
|
|
|
- right: "4%",
|
|
|
- bottom: "3%",
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- position: "top"
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: "category",
|
|
|
- axisTick: { show: false },
|
|
|
- data: this.barChartData.map(item => item.Name)
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "已接入",
|
|
|
- type: "bar",
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: true,
|
|
|
- position: "inside"
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.barChartData.map(item => item.Relatedall)
|
|
|
- },
|
|
|
- {
|
|
|
- name: "未接入",
|
|
|
- type: "bar",
|
|
|
- stack: "总量",
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: true
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.barChartData.map(item => item.Notrelatedall)
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- /* 条形图高度随数量变化,延时初始化 */
|
|
|
- let that = this;
|
|
|
- setTimeout(() => {
|
|
|
- that.barChart = echarts.init(document.getElementById("barchart"));
|
|
|
- that.barChart.setOption(barOption);
|
|
|
- }, 100);
|
|
|
});
|
|
|
},
|
|
|
//点位/表号
|
|
@@ -258,8 +233,6 @@ export default {
|
|
|
window.onresize = () => {
|
|
|
if (that.loopChart != null)
|
|
|
that.loopChart.resize();
|
|
|
- if (that.barChart != null)
|
|
|
- that.barChart.resize();
|
|
|
};
|
|
|
},
|
|
|
components: {
|
|
@@ -271,18 +244,76 @@ export default {
|
|
|
<style lang="less" scoped>
|
|
|
#integrateStatistics {
|
|
|
border-top: 5px solid #eee;
|
|
|
-}
|
|
|
-.statistics-chart {
|
|
|
- min-height: calc(35% - 3px);
|
|
|
-}
|
|
|
-.chart-title {
|
|
|
- padding: 5px 5%;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
-.chart {
|
|
|
- min-height: 200px;
|
|
|
- height: auto;
|
|
|
- width: 100%;
|
|
|
+ .statistics-chart {
|
|
|
+ min-height: calc(35% - 3px);
|
|
|
+ .chart-title {
|
|
|
+ padding: 5px 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chart {
|
|
|
+ min-height: 200px;
|
|
|
+ height: auto;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ #barchart {
|
|
|
+ font-size: 12px;
|
|
|
+ .barchart-title {
|
|
|
+ margin: 15px 0;
|
|
|
+ .el-col {
|
|
|
+ padding-left: 20px;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin: 0 10px -2px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .source {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ .source-name {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ div {
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ &:nth-child(1) {
|
|
|
+ width: 65%;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ width: 35%;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .source-chart {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20px;
|
|
|
+ .el-col {
|
|
|
+ height: 30px;
|
|
|
+ &:nth-child(2) {
|
|
|
+ padding-left: 10px;
|
|
|
+ width: 20%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.already-in {
|
|
|
+ .el-col:nth-child(1) {
|
|
|
+ background: #79bbff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.not-in {
|
|
|
+ .el-col:nth-child(1) {
|
|
|
+ background: #e1e4e5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|