scene-key.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. <template>
  2. <div class="sceneKey">
  3. <div class="scene-title">{{ sceneTitle }}</div>
  4. <div class="scene-content">
  5. <div class="content-t">
  6. <a-select style="width: 372px;" v-model:value="selectVal" allowClear class="code-mode-select" @change="changeSelect" >
  7. <a-select-option v-for="item in selectList" :value="item.value">{{
  8. item.label
  9. }}
  10. </a-select-option>
  11. </a-select>
  12. </div>
  13. <div class="content-c">
  14. <echartScene :echartData="echartData"></echartScene>
  15. </div>
  16. <div class="content-b">
  17. <div class="card-box" v-for="(item, index) in sceneList" :key="index">
  18. <i class="box-icon">
  19. <SvgIcon v-if="index == 0" class="icon" size="14" name="vent-c" />
  20. <SvgIcon v-if="index == 1" class="icon" size="14" name="fire-c" />
  21. <SvgIcon v-if="index == 2" class="icon" size="14" name="gas-c" />
  22. <SvgIcon v-if="index == 3" class="icon" size="14" name="dust-c" />
  23. </i>
  24. <span class="box-label">{{ item.label }}</span>
  25. <span class="box-value">{{ item.value }}</span>
  26. <i class="box-img">
  27. <img v-if="true" src="../../../../../assets/images/company/iconS1.png" alt="">
  28. <img v-else src="../../../../../assets/images/company/iconS2.png" alt="">
  29. <img v-else src="../../../../../assets/images/company/iconS3.png" alt="">
  30. <img v-else src="../../../../../assets/images/company/iconS4.png" alt="">
  31. </i>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. </template>
  37. <script lang="ts" setup>
  38. import { ref, reactive, defineProps, watch } from 'vue'
  39. import { SvgIcon } from '/@/components/Icon';
  40. import echartScene from '../components/echart-scene.vue'
  41. let props = defineProps({
  42. compositeData: {
  43. type: Array,
  44. default: () => {
  45. return []
  46. }
  47. }
  48. })
  49. let sceneTitle = ref('关键场景通防综合监测')
  50. let sceneList = reactive([
  51. { label: '总进风', value: 0 },
  52. { label: '总风量', value: 0 },
  53. { label: '等级孔', value: 0 },
  54. ])
  55. let selectVal = ref('')
  56. let selectList = reactive<any[]>([])
  57. let compositeDatas=ref<any[]>([])
  58. //图表数据
  59. let echartData = reactive({
  60. jfq: 0,
  61. yfq: 0,
  62. hfq: 0,
  63. zf: 0
  64. })
  65. //下拉选项切换
  66. function changeSelect(val){
  67. console.log(val,'下拉选项')
  68. selectVal.value=val
  69. let datas=compositeDatas.value.filter(v=>v.deviceName==selectVal.value)[0]
  70. echartData.jfq = datas.majorpath.drag_1
  71. echartData.yfq = datas.majorpath.drag_2
  72. echartData.hfq = datas.majorpath.drag_3
  73. echartData.zf =datas.majorpath.drag_total
  74. sceneList[0].value = datas.majorpath.drag_total
  75. sceneList[1].value = datas.majorpath.m3_total
  76. sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100
  77. }
  78. watch(() => props.compositeData, (newS, oldS) => {
  79. console.log(newS, '综合监测数据------------')
  80. compositeDatas.value=newS
  81. if (newS.length != 0) {
  82. selectList.length = 0
  83. newS.forEach(el => {
  84. selectList.push({ label: el.deviceName, value: el.deviceName })
  85. })
  86. if (selectVal.value) {
  87. let datas=newS.filter(v=>v.deviceName==selectVal.value)[0]
  88. echartData.jfq = datas.majorpath.drag_1
  89. echartData.yfq = datas.majorpath.drag_2
  90. echartData.hfq = datas.majorpath.drag_3
  91. echartData.zf =datas.majorpath.drag_total
  92. sceneList[0].value = datas.majorpath.drag_total
  93. sceneList[1].value = datas.majorpath.m3_total
  94. sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100
  95. } else {
  96. selectVal.value = selectList[0].value
  97. console.log(selectVal.value, '0009999')
  98. echartData.jfq = newS[0].majorpath.drag_1
  99. echartData.yfq = newS[0].majorpath.drag_2
  100. echartData.hfq = newS[0].majorpath.drag_3
  101. echartData.zf = newS[0].majorpath.drag_total
  102. sceneList[0].value = newS[0].majorpath.drag_total
  103. sceneList[1].value = newS[0].majorpath.m3_total
  104. sceneList[2].value = Math.round(((1.19 * sceneList[1].value) / 60 / Math.sqrt(sceneList[0].value)) * 100) / 100
  105. }
  106. }
  107. }, {
  108. immediate: true,
  109. deep: true
  110. })
  111. </script>
  112. <style lang="less" scoped>
  113. @font-face {
  114. font-family: 'douyuFont';
  115. src: url('../../../../assets/font/douyuFont.otf');
  116. }
  117. .sceneKey {
  118. position: relative;
  119. width: 100%;
  120. height: 100%;
  121. .scene-title {
  122. position: absolute;
  123. left: 50px;
  124. top: 12px;
  125. color: #fff;
  126. font-family: 'douyuFont';
  127. font-size: 14px;
  128. }
  129. .scene-content {
  130. height: 100%;
  131. padding: 62px 20px 28px 20px;
  132. box-sizing: border-box;
  133. display: flex;
  134. flex-direction: column;
  135. justify-content: space-between;
  136. align-items: center;
  137. .content-t {
  138. position: relative;
  139. width: 100%;
  140. height: 30px;
  141. display: flex;
  142. justify-content: space-between;
  143. align-items: center;
  144. background: url('../../../../../assets/images/company/content-label.png') no-repeat center;
  145. background-size: 100% 100%;
  146. .zxm-select {
  147. position: absolute;
  148. top: 50%;
  149. transform: translate(0, -50%);
  150. &:nth-child(1) {
  151. left: 10px;
  152. }
  153. }
  154. }
  155. .content-c {
  156. width: 100%;
  157. height: calc((100% - 30px) / 2);
  158. background: url('../../../../../assets/images/company/area2.png') no-repeat center;
  159. background-size: 100% 100%;
  160. }
  161. .content-b {
  162. width: 100%;
  163. height: calc((100% - 30px) / 2);
  164. background: url('../../../../../assets/images/company/area1.png') no-repeat center;
  165. background-size: 100% 100%;
  166. display: flex;
  167. flex-direction: column;
  168. justify-content: space-around;
  169. align-items: center;
  170. .card-box {
  171. position: relative;
  172. width: 331px;
  173. height: 32px;
  174. background: url('../../../../../assets/images/company/fxfx.png') no-repeat center;
  175. background-size: 100% 100%;
  176. .box-icon {
  177. position: absolute;
  178. left: 13px;
  179. top: 50%;
  180. transform: translate(0, -50%);
  181. }
  182. .box-label {
  183. position: absolute;
  184. left: 56px;
  185. top: 50%;
  186. transform: translate(0, -50%);
  187. color: #fff;
  188. font-size: 14px;
  189. }
  190. .box-value {
  191. position: absolute;
  192. right: 96px;
  193. top: 50%;
  194. transform: translate(0, -48%);
  195. font-family: 'douyuFont';
  196. font-size: 14px;
  197. color: #31fbcc;
  198. }
  199. .box-img {
  200. position: absolute;
  201. right: 2px;
  202. top: 50%;
  203. transform: translate(0, -60%);
  204. }
  205. }
  206. }
  207. }
  208. }
  209. ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector {
  210. height: 24px;
  211. }
  212. ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector .zxm-select-selection-search-input {
  213. height: 24px;
  214. }
  215. ::v-deep .zxm-select-selection-placeholder {
  216. color: #fff !important;
  217. line-height: 22px !important;
  218. }
  219. ::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector::after {
  220. line-height: 24px;
  221. }
  222. ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
  223. background-color: transparent;
  224. border-top: 0px;
  225. border-bottom: 0px;
  226. border-left: 2px solid;
  227. border-right: 2px solid;
  228. border-image: linear-gradient(to bottom, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
  229. }
  230. ::v-deep .zxm-select-arrow {
  231. color: #fff !important;
  232. }
  233. ::v-deep .zxm-select-selection-item {
  234. color: #fff !important
  235. }
  236. ::v-deep .zxm-select-single .zxm-select-selector .zxm-select-selection-item {
  237. line-height: 24px !important;
  238. }
  239. </style>