Newer
Older
urbanLifeline_YanAn / src / views / oneMap / smartTunnel / RightBox.vue
@zhangzhihui zhangzhihui on 16 Oct 11 KB 隧道点位
  1. <!-- 总体概览右侧面板 -->
  2. <template>
  3. <div class="rightSD">
  4. <!-- 运行监测 -->
  5. <div class="topBox">
  6. <div class="ListBoxHeader">
  7. <div class="ListBoxHeader_font">运行监测</div>
  8. </div>
  9. <div class="topContent">
  10. <!-- 结构监测 -->
  11. <div class="jcBox">
  12. <div class="jcBox_Header">
  13. <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
  14. <span class="jcBox_HeaderFont">结构监测</span>
  15. </div>
  16. <div class="jcBox_Content jgBox">
  17. <div class="jcInfo" v-for="(item, index) in jgjcTitle" :key="item.code">
  18. <div class="jcInfo_title">{{ item.name }}</div>
  19. <div class="jcInfo_state" :class="jgjcData[item.code] == '1' ? '' : 'active'">
  20. <div class="jcInfo_stateIcon" :class="jgjcData[item.code] == '1' ? '' : 'active'"></div>
  21. {{ jgjcData[item.code] == '1' ? '正常' : '异常' }}
  22. </div>
  23. <div class="jcInfo_btn" v-show="jgjcData[item.code] == '0'">派单</div>
  24. </div>
  25. </div>
  26. </div>
  27. <!-- 通行监测 -->
  28. <div class="jcBox txBox">
  29. <div class="jcBox_Header">
  30. <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
  31. <span class="jcBox_HeaderFont">通行监测</span>
  32. </div>
  33. <div class="lineBox">
  34. <twoLine :echartData="lineData" :refresh="chartRefresh" />
  35. </div>
  36. </div>
  37. <!-- 突发事件监测 -->
  38. <div class="jcBox">
  39. <div class="jcBox_Header">
  40. <img src="@/assets/images/Sponge_screen/QiaoLiang/JX.png" class="jcBox_HeaderIcon" />
  41. <span class="jcBox_HeaderFont">突发事件监测</span>
  42. </div>
  43. <div class="jcBox_Content">
  44. <div class="tfInfo" v-for="(item, index) in tfjcTitle" :key="item.code">
  45. <img :src="item.icon" alt="" class="tfInfo_icon" />
  46. <div class="tfInfo_title">{{ item.name }}</div>
  47. <div class="tfInfo_state" :class="tfjcData[item.code] == '0' ? '' : 'active'">
  48. {{ tfjcData[item.code] == '1' ? '有' : '无' }}
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. <!-- 检测评估 -->
  56. <div class="bottomBox">
  57. <div class="ListBoxHeader">
  58. <div class="ListBoxHeader_font">检测评估</div>
  59. <img src="@/assets/tunnelImg/bg_img.png" alt="" class="ListBoxHeader_img" />
  60. </div>
  61. <div class="bottomContent">
  62. <div class="contentTop">
  63. <div class="pgBox">
  64. <div class="pgInfo">
  65. <div>{{ assessment.update.slice(0, 4) }}年</div>
  66. <div>{{ assessment.update.slice(5, 7) }}月{{ assessment.update.slice(8) }}日</div>
  67. </div>
  68. <div class="pgTitle">最近一次检测</div>
  69. </div>
  70. <div class="pgBox">
  71. <div class="pgInfo">
  72. <div>{{ assessment.state }}</div>
  73. </div>
  74. <div class="pgTitle">整体工作性能</div>
  75. </div>
  76. <div class="pgBox">
  77. <div class="pgInfo">
  78. <div>{{ assessment.level }}</div>
  79. </div>
  80. <div class="pgTitle">技术状况等级</div>
  81. </div>
  82. </div>
  83. <div class="contentBottom">
  84. <div>检测单位</div>
  85. <div class="pgCompany">{{ assessment.company }}</div>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. </template>
  91.  
  92. <script setup name="rightSD">
  93. import twoLine from './components/twoLine.vue';
  94. import { ref, reactive, toRefs, onMounted } from 'vue';
  95.  
  96. import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
  97. import czsj from '@/assets/newImgs/czsj.png'; //处置数据
  98. import czl from '@/assets/newImgs/czl.png'; //处置率
  99.  
  100. import ranqi_icon from '@/assets/newImgs/ranqi_icon.png'; //燃气
  101. import qiaoliang from '@/assets/newImgs/qiaoliang.png'; //桥梁
  102. import sd_icon from '@/assets/newImgs/sd_icon.png'; //隧道
  103. import ps_icon from '@/assets/newImgs/ps_icon.png'; //隧道
  104. import fxzb from '@/assets/newImgs/fxzb.png'; //风险占比
  105.  
  106. import hz_icon from '@/assets/tunnelImg/hz_icon.png';
  107. import jtsg_icon from '@/assets/tunnelImg/jtsg_icon.png';
  108. import ydqt_icon from '@/assets/tunnelImg/ydqt_icon.png';
  109.  
  110. let chartRefresh = ref(Math.random());
  111.  
  112. const assessment = ref({
  113. update: '2023-11-20',
  114. state: '良好',
  115. level: '二类',
  116. company: '陕西海嵘工程试验检测股份有限公司',
  117. });
  118. const jgjcTitle = [
  119. { name: '沉降监测', code: 'cj' },
  120. { name: '滑坡监测', code: 'hp' },
  121. { name: '收敛监测', code: 'sl' },
  122. { name: '裂缝监测', code: 'lf' },
  123. { name: '水位监测', code: 'sw' },
  124. { name: '应变监测', code: 'yb' },
  125. ];
  126. const jgjcData = ref({
  127. cj: '1',
  128. hp: '1',
  129. sl: '0',
  130. lf: '1',
  131. sw: '1',
  132. yb: '1',
  133. });
  134. const tfjcTitle = [
  135. { name: '火灾', code: 'hz', icon: hz_icon },
  136. { name: '交通事故', code: 'jt', icon: jtsg_icon },
  137. { name: '有毒气体', code: 'dq', icon: ydqt_icon },
  138. ];
  139. const tfjcData = ref({
  140. hz: '0',
  141. jt: '0',
  142. dq: '0',
  143. });
  144.  
  145. const lineData = ref({
  146. tabX: ['9/1', '9/2', '9/3', '9/4', '9/5', '9/6', '9/7'],
  147. unit: '辆',
  148. series: [
  149. {
  150. name: '南向北',
  151. tabY: ['0', '150', '150', '200', '130', '320', '300'],
  152. },
  153. {
  154. name: '北向南',
  155. tabY: ['100', '200', '200', '150', '240', '240', '180'],
  156. },
  157. ],
  158. });
  159.  
  160. watch(
  161. () => lineData.value,
  162. (newVal, oldVal) => {
  163. // console.log('change', newVal);
  164. // eData.value = ArrayToObject(newVal.slice(0, 10));
  165. // eData.value.headerList = headerList.value;
  166. nextTick(() => {
  167. chartRefresh.value = Math.random();
  168. });
  169. // console.log('obj', rightData.value);
  170. },
  171. {
  172. immediate: true,
  173. deep: true,
  174. }
  175. );
  176.  
  177. onMounted(() => {});
  178. </script>
  179.  
  180. <style lang="scss" scoped>
  181. .rightSD {
  182. width: 100%;
  183. height: 100%;
  184. // box-sizing: border-box;
  185. padding: 10px;
  186. display: flex;
  187. flex-direction: column;
  188. }
  189.  
  190. .topBox {
  191. width: 100%;
  192. flex: 1;
  193. // height: 49%;
  194. // background: yellowgreen;
  195. .topContent {
  196. width: 100%;
  197. margin: 0px 0 5px;
  198. height: calc(100% - 49px);
  199. display: flex;
  200. flex-direction: column;
  201. // border: 1px solid red;
  202. .jcBox {
  203. width: 100%;
  204. margin-top: 5px;
  205. .jcBox_Header {
  206. height: 24px;
  207. width: 100%;
  208. .jcBox_HeaderIcon {
  209. width: 24px;
  210. height: 24px;
  211. vertical-align: middle;
  212. }
  213. .jcBox_HeaderFont {
  214. display: inline-block;
  215. font-family: Source Han Sans CN;
  216. font-weight: bold;
  217. font-size: 14px;
  218. color: #ebfeff;
  219. height: 24px;
  220. line-height: 24px;
  221. position: relative;
  222.  
  223. &::after {
  224. content: '';
  225. // width: 60px;
  226. width: 100%;
  227. height: 10px;
  228. background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
  229. position: absolute;
  230. bottom: 0;
  231. left: 0;
  232. }
  233. }
  234. }
  235. .jgBox {
  236. height: 140px;
  237. }
  238. .jcBox_Content {
  239. margin-top: 5px;
  240. // border: 1px solid red;
  241. display: flex;
  242. justify-content: space-between;
  243. flex-wrap: wrap;
  244. align-content: space-between;
  245. .jcInfo {
  246. position: relative;
  247. width: 200px;
  248. height: 40px;
  249. background: linear-gradient(90deg, rgba(21, 210, 253, 0.2) 0%, rgba(21, 210, 253, 0.05) 100%);
  250. display: flex;
  251. align-items: center;
  252. // justify-content: space-between;
  253. &::before {
  254. content: '';
  255. width: 4px;
  256. height: 40px;
  257. position: absolute;
  258. left: 0;
  259. top: 0;
  260. background: #00f2ff;
  261. }
  262. .jcInfo_title {
  263. font-weight: bold;
  264. font-size: 16px;
  265. color: #ebfeff;
  266. margin-left: 15px;
  267. }
  268. .jcInfo_state {
  269. display: flex;
  270. align-items: center;
  271. color: #00ff9c;
  272. margin-left: 16px;
  273. &.active {
  274. color: #fe667b;
  275. }
  276. .jcInfo_stateIcon {
  277. width: 10px;
  278. height: 10px;
  279. background: #00ff9c;
  280. border-radius: 50%;
  281. margin-right: 3px;
  282. &.active {
  283. background: #fe667b;
  284. }
  285. }
  286. }
  287. .jcInfo_btn {
  288. width: 38px;
  289. height: 21px;
  290. margin-left: 18px;
  291. background: #0ea3c3;
  292. border-radius: 11px;
  293. font-weight: 500;
  294. font-size: 14px;
  295. color: #ebfeff;
  296. text-align: center;
  297. }
  298. }
  299. .tfInfo {
  300. width: 136px;
  301. height: 130px;
  302. display: flex;
  303. flex-direction: column;
  304. justify-content: center;
  305. align-items: center;
  306. background: url('@/assets/tunnelImg/tfjcBg.png') no-repeat;
  307. background-size: 100% 100%;
  308. .tfInfo_icon {
  309. width: 60px;
  310. height: 60px;
  311. }
  312. .tfInfo_title {
  313. font-weight: bold;
  314. font-size: 14px;
  315. color: #09bdf2;
  316. }
  317. .tfInfo_state {
  318. font-weight: bold;
  319. font-size: 26px;
  320. color: #3effb9;
  321. &.active {
  322. color: #fe667b;
  323. }
  324. }
  325. }
  326. }
  327. }
  328. .txBox {
  329. flex: 1;
  330. // border: 1px solid red;
  331. display: flex;
  332. flex-direction: column;
  333. .lineBox {
  334. flex: 1;
  335. // border: 1px solid red;
  336. }
  337. }
  338. }
  339. }
  340. .bottomBox {
  341. width: 100%;
  342. // height: 49%;
  343. // background: red;
  344. // border: 1px solid red;
  345. .bottomContent {
  346. width: 100%;
  347. .contentTop {
  348. display: flex;
  349. justify-content: space-between;
  350. align-items: center;
  351. margin: 8px 0;
  352. .pgBox {
  353. width: 136px;
  354. height: 130px;
  355. background: url('@/assets/images/Sponge_screen/QiaoLiang/FBox.png') no-repeat;
  356. background-size: 100% 100%;
  357. text-align: center;
  358. .pgInfo {
  359. width: 100%;
  360. height: 89px;
  361. display: flex;
  362. flex-direction: column;
  363. font-weight: bold;
  364. font-size: 20px;
  365. color: #00f2ff;
  366. align-items: center;
  367. justify-content: center;
  368. }
  369.  
  370. .pgTitle {
  371. font-family: Source Han Sans CN;
  372. font-weight: 500;
  373. font-size: 14px;
  374. color: #ffffff;
  375. height: 14px;
  376. line-height: 14px;
  377. // border: 1px solid red;
  378. }
  379. }
  380. }
  381. .contentBottom {
  382. width: 100%;
  383. height: 39px;
  384. box-sizing: border-box;
  385. line-height: 39px;
  386. background: url('@/assets/images/Sponge_screen/QiaoLiang/CBox.png') no-repeat;
  387. background-size: 100% 100%;
  388. display: flex;
  389. align-items: center;
  390. padding: 0 20px;
  391. font-family: Source Han Sans CN;
  392. font-weight: bold;
  393. font-size: 16px;
  394. color: #ebfeff;
  395. .pgCompany {
  396. color: #00f2ff;
  397. margin-left: 20px;
  398. }
  399. }
  400. }
  401. }
  402. .ListBoxHeader {
  403. height: 44px;
  404. line-height: 50px;
  405. width: 98%;
  406. background: url('@/assets/newImgs/partBg.png') no-repeat;
  407. background-size: 100% 100%;
  408. display: flex;
  409. align-items: center;
  410. justify-content: space-between;
  411. // margin: 7px 0px 0px 8px;
  412. .ListBoxHeader_font {
  413. font-family: PangMenZhengDao;
  414. font-weight: 400;
  415. font-size: 23px;
  416. color: #ebfeff;
  417. padding-left: 34px;
  418. }
  419. .ListBoxHeader_img {
  420. width: 23px;
  421. height: 27px;
  422. margin-right: 5px;
  423. }
  424. }
  425. </style>