integrateStatistics.vue 8.1 KB

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