integrateStatistics.vue 8.1 KB

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