integrateStatistics.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. <template>
  2. <div id="integrateStatistics">
  3. <!-- 环形表 -->
  4. <div class="statistics-chart">
  5. <div class="chart-title">表号功能号总数量:{{ pointData.tabFuncNumSum }}</div>
  6. <hr style="width:90%" />
  7. <div ref="loopchart" class="chart" id="loopchart"></div>
  8. <div class="chart-title" style="padding-left:10%;">目前可能断数的数量:{{ pointData.disConn }}</div>
  9. <hr style="width:80%" />
  10. <div style="padding:15px 10%;line-height:2;">
  11. 1点位对多表号功能号:{{ pointData.oneToM }}
  12. <br />
  13. 多点为对1表号功能号:{{ pointData.mToOne }}
  14. <!-- 查看表号功能号一对多多对一总览 -->
  15. <el-button @click="showOverview" type="info" icon="el-icon-arrow-right" circle
  16. style="margin:-25px 0 0 50px;background:rgb(121, 187, 255);color:rgb(225, 228, 229);border:none;"></el-button>
  17. </div>
  18. </div>
  19. <!-- 图形图 -->
  20. <div class="statistics-chart" style="border-top:5px solid #eee;">
  21. <div class="chart-title">共包含原始点位:{{ originalPoint }} 个</div>
  22. <hr style="width:90%" />
  23. <div ref="barchart" class="chart" id="barchart" :style="{height:barChartData.length * 120 + 'px'}"></div>
  24. </div>
  25. <!-- 点位/表号共更好对应总览 -->
  26. <pointTabOverview ref="overviewDialog"></pointTabOverview>
  27. </div>
  28. </template>
  29. <script>
  30. //echarts
  31. import echarts from "echarts";
  32. import "echarts/lib/chart/bar";
  33. import "echarts/lib/component/tooltip";
  34. import "echarts/lib/component/title";
  35. import {
  36. getIntegrateStatisticsToLoop,
  37. getIntegrateStatisticsToBar
  38. } from "@/api/scan/request";
  39. import pointTabOverview from "./pointTabOverview";
  40. export default {
  41. data() {
  42. return {
  43. //环形图
  44. loopChart: null,
  45. //条形图
  46. barChart: null,
  47. //环形图数据
  48. loopChartData: [],
  49. //条形图数据
  50. barChartData: [],
  51. //点位-标号功能号数据
  52. pointData: {
  53. tabFuncNumSum: 0,//总数
  54. oneToM: 0,//一对多
  55. mToOne: 0,//多对一
  56. disConn: 0//可能断数数量
  57. },
  58. //原始点数量
  59. originalPoint: null
  60. };
  61. },
  62. methods: {
  63. //加载图表数据
  64. loadChart() {
  65. //获取环形图数据
  66. getIntegrateStatisticsToLoop({}, res => {
  67. //设置点位-表号功能号数据
  68. this.pointData = {
  69. tabFuncNumSum: res.Content[0].Sum,
  70. oneToM: res.Content[0].OtoM,
  71. mToOne: res.Content[0].MtoO,
  72. disConn: res.Content[0].Disconn
  73. };
  74. //设置环形表数据
  75. this.loopChartData = [
  76. { value: res.Content[0].RelatedCount, name: "已对实例数量" },
  77. { value: res.Content[0].Sum - res.Content[0].RelatedCount, name: "未对应实例数量" }
  78. ];
  79. let that = this;
  80. //环形图参数
  81. let loopOption = {
  82. tooltip: {
  83. trigger: "item",
  84. formatter: "{a} <br/>{b}: {c} ({d}%)"
  85. },
  86. color: ['rgb(121, 187, 255)', 'rgb(225, 228, 229)'],
  87. legend: {
  88. orient: "vertical",
  89. x: "5%",
  90. y: "top",
  91. data: that.loopChartData.map(item => item.name)
  92. },
  93. graphic: {
  94. elements: [
  95. {
  96. type: "text",
  97. left: "center",
  98. top: "center",
  99. style: {
  100. text: (() => {
  101. let s = 0;
  102. that.loopChartData.map(item => {
  103. s += item["value"];
  104. });
  105. return s + "\n总数";
  106. })(),
  107. textAlign: "center",
  108. fontSize: 20,
  109. fontWeight: 300
  110. }
  111. }
  112. ]
  113. },
  114. series: [
  115. {
  116. name: "实例总数",
  117. type: "pie",
  118. radius: ["50%", "70%"],
  119. avoidLabelOverlap: false,
  120. legendHoverLink: false,
  121. selectedOffset: 0,
  122. label:{
  123. color:'rgb(121, 187, 255)',
  124. },
  125. emphasis: {
  126. itemStyle: {
  127. // 高亮时点的颜色。
  128. color: undefined
  129. }
  130. },
  131. data: this.loopChartData
  132. }
  133. ]
  134. };
  135. setTimeout(() => {
  136. //实例化
  137. that.loopChart = echarts.init(document.getElementById("loopchart"));
  138. //设置参数并加载
  139. that.loopChart.setOption(loopOption);
  140. //消除高亮
  141. that.loopChart.on('mouseover', function (param) {
  142. if (param.dataIndex == 1) {
  143. loopOption.series[0].emphasis.itemStyle.color = 'rgb(225, 228, 229)';
  144. that.loopChart.setOption(loopOption);
  145. }
  146. else {
  147. loopOption.series[0].emphasis.itemStyle.color = 'rgb(121, 187, 255)';
  148. that.loopChart.setOption(loopOption);
  149. }
  150. });
  151. }, 100);
  152. })
  153. //获取条形图数据
  154. getIntegrateStatisticsToBar({}, res => {
  155. this.barChartData = res.Content;
  156. this.originalPoint = (() => {
  157. let sum = 0;
  158. this.barChartData.map(item => {
  159. sum += item["Sum"];
  160. });
  161. return sum;
  162. })();
  163. //条形图参数
  164. let barOption = {
  165. tooltip: {
  166. trigger: "axis",
  167. axisPointer: {
  168. // 坐标轴指示器,坐标轴触发有效
  169. type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
  170. }
  171. },
  172. color: ['rgb(121, 187, 255)', 'rgb(225, 228, 229)'],
  173. legend: {
  174. data: ["已接入", "未接入"]
  175. },
  176. grid: {
  177. left: "3%",
  178. right: "4%",
  179. bottom: "3%",
  180. containLabel: true
  181. },
  182. xAxis: [
  183. {
  184. type: "value",
  185. position: "top"
  186. }
  187. ],
  188. yAxis: [
  189. {
  190. type: "category",
  191. axisTick: { show: false },
  192. data: this.barChartData.map(item => item.Name)
  193. }
  194. ],
  195. series: [
  196. {
  197. name: "已接入",
  198. type: "bar",
  199. label: {
  200. normal: {
  201. show: true,
  202. position: "inside"
  203. }
  204. },
  205. data: this.barChartData.map(item => item.Relatedall)
  206. },
  207. {
  208. name: "未接入",
  209. type: "bar",
  210. stack: "总量",
  211. label: {
  212. normal: {
  213. show: true
  214. }
  215. },
  216. data: this.barChartData.map(item => item.Notrelatedall)
  217. }
  218. ]
  219. };
  220. /* 条形图高度随数量变化,延时初始化 */
  221. let that = this;
  222. setTimeout(() => {
  223. that.barChart = echarts.init(document.getElementById("barchart"));
  224. that.barChart.setOption(barOption);
  225. }, 100);
  226. });
  227. },
  228. //点位/表号
  229. showOverview() {
  230. this.$refs.overviewDialog.loadOverviewData();
  231. },
  232. init() {
  233. this.loadChart();
  234. }
  235. },
  236. mounted() {
  237. this.init();
  238. //图表随窗口变化
  239. let that = this;
  240. window.onresize = () => {
  241. if (that.loopChart != null)
  242. that.loopChart.resize();
  243. if (that.barChart != null)
  244. that.barChart.resize();
  245. };
  246. },
  247. components: {
  248. pointTabOverview
  249. }
  250. };
  251. </script>
  252. <style lang="less" scoped>
  253. #integrateStatistics {
  254. border-top: 5px solid #eee;
  255. }
  256. .statistics-chart {
  257. min-height: calc(50% - 3px);
  258. }
  259. .chart-title {
  260. padding: 5px 5%;
  261. font-size: 16px;
  262. font-weight: 500;
  263. }
  264. .chart {
  265. min-height: 200px;
  266. height: auto;
  267. width: 100%;
  268. }
  269. </style>