wind-line.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539
  1. <template>
  2. <div class="windLine">
  3. <div class="title-top" @click="getDetail">关键路线通风</div>
  4. <div class="toggle-search">
  5. <i class="icon-search">
  6. <SvgIcon class="icon" size="14" name="toggle" />
  7. </i>
  8. <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="lineTypeList"
  9. aria-placeholder="请选择" @change="changeSelect" />
  10. </div>
  11. <div class="line-echart">
  12. <div class="line" ref="line"></div>
  13. <div class="pic">
  14. <img src="../../../../../assets/images/home-container/pie.png" alt="" />
  15. </div>
  16. <div class="percent">
  17. <div class="percent-box">
  18. <span>{{ percentF }}</span>
  19. <span class="dw">%</span>
  20. </div>
  21. <div class="percent-box">
  22. <span>{{ percentT }}</span>
  23. <span class="dw">%</span>
  24. </div>
  25. <div class="percent-box">
  26. <span>{{ percentE }}</span>
  27. <span class="dw">%</span>
  28. </div>
  29. </div>
  30. </div>
  31. <div class="line-card">
  32. <div class="card-item" v-for="(item, index) in tabList" :key="index">
  33. <div class="item-s">
  34. <div class="item-label">{{ item.name }}</div>
  35. <div class="item-val">{{ item.val }}</div>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. </template>
  41. <script lang="ts" setup>
  42. import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
  43. import { SvgIcon } from '/@/components/Icon';
  44. import * as echarts from 'echarts';
  45. const emit = defineEmits(['goDetail'])
  46. let props = defineProps({
  47. lineList: Array,
  48. });
  49. //获取dom节点
  50. let line = ref<any>();
  51. let lineData = reactive<any[]>([]);
  52. let searchValue = ref('');
  53. const lineTypeList = reactive<any[]>([]);
  54. let echartData = reactive<any[]>([
  55. { name: '进风区', value: 0 },
  56. { name: '用风区', value: 0 },
  57. { name: '回风区', value: 0 },
  58. ]);
  59. let xData = reactive<any[]>([]);
  60. let yData = reactive<any[]>([]);
  61. let percentE = ref<any>(0);
  62. let percentF = ref<any>(0);
  63. let percentT = ref<any>(0);
  64. let tabList = reactive<any[]>([
  65. { name: '总风量(m³/min)', val: 0 },
  66. { name: '总阻力(Pa)', val: 0 },
  67. { name: '等积孔(m²)', val: 0 },
  68. ]);
  69. //跳转详情
  70. function getDetail() {
  71. emit('goDetail', 'majorpath')
  72. }
  73. //选项切换
  74. function changeSelect(val) {
  75. searchValue.value = val;
  76. switch (val) {
  77. case 'bet关键路线1':
  78. echartData[0].value = lineData[0].majorpath.drag_1 || 0;
  79. echartData[1].value = lineData[0].majorpath.drag_2 || 0;
  80. echartData[2].value = lineData[0].majorpath.drag_3 || 0;
  81. tabList[0].val = lineData[0].majorpath.drag_total || 0;
  82. tabList[1].val = lineData[0].majorpath.m3_total || 0;
  83. tabList[2].val = 0.78;
  84. percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
  85. percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
  86. percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
  87. // echartData[0].value = Math.floor(Math.random() * (629 - 620 + 1)) + 620;
  88. // echartData[1].value = Math.floor(Math.random() * (949 - 940 + 1)) + 940;
  89. // echartData[2].value = Math.floor(Math.random() * (855 - 850 + 1)) + 850;
  90. // tabList[0].val = Math.floor(Math.random() * (10700 - 10600 + 1)) + 10600;
  91. // tabList[1].val = Math.floor(Math.random() * (2433 - 2423 + 1)) + 2423;
  92. // tabList[2].val = 0.56;
  93. // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  94. // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  95. // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  96. getOption();
  97. break;
  98. case 'bet关键路线2':
  99. echartData[0].value = lineData[1].majorpath.drag_1 || 0;
  100. echartData[1].value = lineData[1].majorpath.drag_2 || 0;
  101. echartData[2].value = lineData[1].majorpath.drag_3 || 0;
  102. tabList[0].val = lineData[1].majorpath.drag_total || 0;
  103. tabList[1].val = lineData[1].majorpath.m3_total || 0;
  104. tabList[2].val = 0.83;
  105. percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
  106. percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
  107. percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
  108. // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
  109. // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
  110. // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
  111. // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
  112. // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
  113. // tabList[2].val = 0.78;
  114. // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  115. // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  116. // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  117. getOption();
  118. break;
  119. case 'sw关键路线1':
  120. echartData[0].value = lineData[2].majorpath.drag_1 || 0;
  121. echartData[1].value = lineData[2].majorpath.drag_2 || 0;
  122. echartData[2].value = lineData[2].majorpath.drag_3 || 0;
  123. tabList[0].val = lineData[2].majorpath.drag_total || 0;
  124. tabList[1].val = lineData[2].majorpath.m3_total || 0;
  125. tabList[2].val = 0.88;
  126. percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
  127. percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
  128. percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
  129. // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
  130. // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
  131. // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
  132. // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
  133. // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
  134. // tabList[2].val = 0.78;
  135. // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  136. // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  137. // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  138. getOption();
  139. break;
  140. case 'sw关键路线2':
  141. echartData[0].value = lineData[3].majorpath.drag_1 || 0;
  142. echartData[1].value = lineData[3].majorpath.drag_2 || 0;
  143. echartData[2].value = lineData[3].majorpath.drag_3 || 0;
  144. tabList[0].val = lineData[3].majorpath.drag_total || 0;
  145. tabList[1].val = lineData[3].majorpath.m3_total || 0;
  146. tabList[2].val = 0.93;
  147. percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
  148. percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
  149. percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
  150. // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
  151. // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
  152. // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
  153. // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
  154. // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
  155. // tabList[2].val = 0.78;
  156. // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  157. // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  158. // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  159. getOption();
  160. break;
  161. case '关键-路线':
  162. echartData[0].value = Math.floor(Math.random() * (110 - 100 + 1)) + 100;
  163. echartData[1].value = Math.floor(Math.random() * (210 - 200 + 1)) + 200;
  164. echartData[2].value = Math.floor(Math.random() * (310 - 300 + 1)) + 300;
  165. tabList[0].val = Math.floor(Math.random() * (1010 - 1000 + 1)) + 1000;
  166. tabList[1].val = Math.floor(Math.random() * (2010 - 2000+ 1)) + 2000;
  167. tabList[2].val = 0.56;
  168. percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  169. percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  170. percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
  171. getOption();
  172. break;
  173. }
  174. }
  175. function getOption() {
  176. nextTick(() => {
  177. function deepCopy(obj) {
  178. if (typeof obj !== 'object') {
  179. return obj;
  180. }
  181. var newobj = {};
  182. for (var attr in obj) {
  183. newobj[attr] = obj[attr];
  184. }
  185. return newobj;
  186. }
  187. echartData.map((a, b) => {
  188. xData.push(a.name);
  189. yData.push(a.value);
  190. });
  191. var startColor = ['rgba(255, 224, 28,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 255, 168,.6)'];
  192. var borderStartColor = ['#ffe01c', '#1ff8fb', '#9affa8'];
  193. var RealData = [];
  194. var borderData = [];
  195. echartData.map((item, index) => {
  196. var newobj = deepCopy(item);
  197. var newobj1 = deepCopy(item);
  198. RealData.push(newobj);
  199. borderData.push(newobj1);
  200. });
  201. RealData.map((item, index) => {
  202. item.itemStyle = {
  203. normal: {
  204. color: startColor[index],
  205. },
  206. };
  207. });
  208. borderData.map((item, index) => {
  209. item.itemStyle = {
  210. normal: {
  211. color: borderStartColor[index],
  212. },
  213. };
  214. });
  215. const myChart = echarts.init(line.value);
  216. let option = {
  217. legend: [
  218. {
  219. // orient: 'vertical',
  220. x: '50%',
  221. y: '12%',
  222. itemWidth: 10,
  223. itemHeight: 10,
  224. align: 'left',
  225. textStyle: {
  226. fontSize: 14,
  227. color: '#b3b8cc',
  228. },
  229. data: ['进风区'],
  230. },
  231. {
  232. // orient: 'vertical',
  233. x: '50%',
  234. y: '42%',
  235. itemWidth: 10,
  236. itemHeight: 10,
  237. align: 'left',
  238. textStyle: {
  239. fontSize: 14,
  240. color: '#b3b8cc',
  241. },
  242. data: ['用风区'],
  243. },
  244. {
  245. // orient: 'vertical',
  246. x: '50%',
  247. y: '70%',
  248. itemWidth: 10,
  249. itemHeight: 10,
  250. align: 'left',
  251. textStyle: {
  252. fontSize: 14,
  253. color: '#b3b8cc',
  254. },
  255. data: ['回风区'],
  256. },
  257. ],
  258. tooltip: {
  259. formatter: '{b}:{c}',
  260. },
  261. series: [
  262. // 主要展示层的
  263. {
  264. radius: ['40%', '80%'],
  265. center: ['25%', '50%'],
  266. type: 'pie',
  267. z: 10,
  268. label: {
  269. normal: {
  270. show: false,
  271. },
  272. emphasis: {
  273. show: false,
  274. },
  275. },
  276. labelLine: {
  277. normal: {
  278. show: false,
  279. },
  280. emphasis: {
  281. show: false,
  282. },
  283. },
  284. itemStyle: {
  285. normal: {
  286. borderWidth: 5,
  287. borderColor: 'rgba(1, 57, 134,1)',
  288. },
  289. },
  290. data: RealData,
  291. },
  292. // 边框的设置
  293. {
  294. radius: ['45%', '52%'],
  295. center: ['25%', '50%'],
  296. type: 'pie',
  297. z: 5,
  298. label: {
  299. normal: {
  300. show: false,
  301. },
  302. emphasis: {
  303. show: false,
  304. },
  305. },
  306. labelLine: {
  307. normal: {
  308. show: false,
  309. },
  310. emphasis: {
  311. show: false,
  312. },
  313. },
  314. animation: false,
  315. tooltip: {
  316. show: false,
  317. },
  318. data: borderData,
  319. },
  320. ],
  321. };
  322. myChart.setOption(option);
  323. window.onresize = function () {
  324. myChart.resize();
  325. };
  326. });
  327. }
  328. watch(
  329. () => props.lineList,
  330. (val) => {
  331. console.log(val, '关键路线数据');
  332. lineData = val;
  333. lineTypeList.length = 0;
  334. lineData.forEach((el) => {
  335. lineTypeList.push({
  336. label: el.deviceName,
  337. value: el.deviceName,
  338. });
  339. });
  340. if (searchValue.value) {
  341. changeSelect(searchValue.value);
  342. } else {
  343. searchValue.value = lineTypeList[0].value;
  344. changeSelect(searchValue.value);
  345. }
  346. },
  347. {
  348. deep: true,
  349. }
  350. );
  351. onMounted(() => { });
  352. </script>
  353. <style lang="less" scoped>
  354. @font-face {
  355. font-family: 'douyuFont';
  356. src: url('../../../../../assets/font/douyuFont.otf');
  357. }
  358. .windLine {
  359. width: 100%;
  360. height: 100%;
  361. position: relative;
  362. .title-top {
  363. position: absolute;
  364. top: 9px;
  365. left: 46px;
  366. color: #fff;
  367. font-size: 16px;
  368. font-family: 'douyuFont';
  369. cursor: pointer;
  370. &:hover {
  371. color: #66ffff;
  372. }
  373. }
  374. .toggle-search {
  375. position: absolute;
  376. left: 9px;
  377. top: 37px;
  378. display: flex;
  379. .icon-search {
  380. position: absolute;
  381. top: 50%;
  382. left: 5px;
  383. transform: translate(0%, -50%);
  384. }
  385. }
  386. .line-echart {
  387. position: absolute;
  388. top: 66px;
  389. left: 0;
  390. width: 100%;
  391. height: 120px;
  392. .line {
  393. width: 100%;
  394. height: 100%;
  395. }
  396. .pic {
  397. height: 100%;
  398. position: absolute;
  399. left: 45%;
  400. top: 0;
  401. display: flex;
  402. align-items: center;
  403. img {
  404. height: 60%;
  405. }
  406. }
  407. .percent {
  408. position: absolute;
  409. left: 75%;
  410. top: 0;
  411. width: 45px;
  412. height: 100%;
  413. display: flex;
  414. flex-direction: column;
  415. // justify-content: space-between;
  416. align-items: center;
  417. .percent-box {
  418. font-size: 14px;
  419. // color: #b3b8cc;
  420. &:nth-child(1) {
  421. position: absolute;
  422. top: 12%;
  423. color: #ffe01c;
  424. }
  425. &:nth-child(2) {
  426. position: absolute;
  427. top: 42%;
  428. color: #1ff8fb;
  429. }
  430. &:nth-child(3) {
  431. position: absolute;
  432. top: 70%;
  433. color: #9affa8;
  434. }
  435. .dw {
  436. color: #b3b8cc;
  437. margin-left: 5px;
  438. }
  439. }
  440. }
  441. }
  442. .line-card {
  443. position: absolute;
  444. top: 186px;
  445. left: 0;
  446. width: 100%;
  447. height: calc(100% - 186px);
  448. padding: 0px 15px 15px 15px;
  449. box-sizing: border-box;
  450. display: flex;
  451. justify-content: space-around;
  452. align-items: center;
  453. .card-item {
  454. display: flex;
  455. flex: 1;
  456. justify-content: center;
  457. align-items: center;
  458. height: 100%;
  459. .item-s {
  460. position: relative;
  461. width: 105px;
  462. height: 58px;
  463. margin-top: 20px;
  464. background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
  465. background-size: 100% 90%;
  466. .item-label {
  467. width: 100%;
  468. text-align: center;
  469. color: #b3b8cc;
  470. font-size: 12px;
  471. }
  472. .item-val {
  473. position: absolute;
  474. left: 50%;
  475. top: 26px;
  476. font-size: 14px;
  477. font-family: 'douyuFont';
  478. color: #fff;
  479. transform: translate(-50%, 0);
  480. }
  481. }
  482. }
  483. }
  484. }
  485. :deep .zxm-select-selector {
  486. width: 100%;
  487. height: 30px !important;
  488. padding: 0 11px 0px 25px !important;
  489. background-color: rgba(8, 148, 255, 0.3) !important;
  490. border: 1px solid #1d80da !important;
  491. }
  492. :deep .zxm-select-selection-item {
  493. color: #fff !important;
  494. line-height: 28px !important;
  495. }
  496. :deep .zxm-select-arrow {
  497. color: #fff !important;
  498. }
  499. </style>