Newer
Older
urbanLifeline_YanAn / src / views / oneMap / SmartDrainage / PsRightBox.vue
@zhangqy zhangqy on 13 Nov 30 KB 性能优化
  1. <!--智慧排水左右侧面板 -->
  2. <template>
  3. <!-- 风险评估 -->
  4. <div class="riskAssessment">
  5. <div class="ListBoxHeader" style="cursor: pointer" @click="ShowSiSetu(true)">
  6. <div class="ListBoxHeader_font">监测与分析</div>
  7. </div>
  8. <div class="Assessmentop">
  9. <div class="subRightBox">
  10. <div
  11. class="headcenter"
  12. v-for="(item, index) in monitorData"
  13. :key="item"
  14. :class="monitorname == item.name ? 'activedright' : ''"
  15. @click="monitorclick(item, index)"
  16. >
  17. {{ item.name }}
  18. </div>
  19. </div>
  20. <div class="waterBox" v-if="monitorname == '流量监测(0/4)'">
  21. <div class="waterroll">
  22. <div class="tableHeader">
  23. <span class="tableHeaderList tableList1">序号</span>
  24. <span class="tableHeaderList tableList2">河道</span>
  25. <span class="tableHeaderList tableList3">当前流量m³/s</span>
  26. <span class="tableHeaderList tableList4">警戒流量m³/s</span>
  27. <span class="tableHeaderList tableList5">状态</span>
  28. </div>
  29. <div class="tableBody">
  30. <div
  31. class="tableBodyList"
  32. v-for="item in FXJCData"
  33. :class="HhName == item.hd ? 'activedright' : ''"
  34. >
  35. <span class="tableBodyList_span1">{{ item.xh }}</span>
  36. <span class="tableBodyList_span2" @click="WzTrigger(item.hd)"
  37. >{{ item.hd }}
  38. </span>
  39. <span class="tableBodyList_span3">{{ item.dqsw }}</span>
  40. <span class="tableBodyList_span4">{{ item.kzsw }} </span>
  41. <span class="tableBodyList_span5">
  42. <el-tag type="success" v-if="item.zt == '正常'">正常</el-tag>
  43. <el-tag
  44. @click="showcswDalog(item)"
  45. style="cursor: pointer"
  46. type="warning"
  47. v-if="item.zt == '超控制常水位'"
  48. >超控制常水位</el-tag
  49. >
  50. </span>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="watercontent">
  55. <div class="Titlelarge">河湖简介:{{ HhName }}</div>
  56. <div class="Contentdetails">
  57. {{ hdJj }}
  58. </div>
  59. </div>
  60. </div>
  61. <div class="leftSubTabsBox">
  62. <div class="tabContent" v-if="monitorname == '漫溢监测(1/29)'">
  63. <ul>
  64. <li
  65. class="listOne curCick"
  66. v-for="(i, index) in listData"
  67. :key="index"
  68. @click="showMapDalog(i)"
  69. >
  70. <div class="line flex flex-align-center">
  71. <div class="lable">站点名称:</div>
  72. <div class="box flex flex-align-center flex-justcontent-center">
  73. {{ i.siteName }}
  74. </div>
  75. <span
  76. class="box_Status"
  77. :class="i.onlineStatus == 'online' ? 'green' : 'rad'"
  78. >{{ i.onlineStatus == "online" ? "在线" : "离线" }}</span
  79. >
  80. </div>
  81. <div class="line flex flex-align-center">
  82. <div class="lable"><i></i>深:</div>
  83. <div class="box flex flex-align-center flex-justcontent-center">
  84. {{ i.z || 0 }}米
  85. </div>
  86. </div>
  87. <div class="line flex flex-align-center">
  88. <div class="lable">风险分析:</div>
  89. <div
  90. class="box flex flex-align-center flex-justcontent-center"
  91. :class="i.riskAnalysis != '无风险' ? 'cRad' : 'cGreen'"
  92. >
  93. {{ i.riskAnalysis }}
  94. </div>
  95. </div>
  96. </li>
  97. </ul>
  98. </div>
  99. <div class="tabContent" v-if="monitorname == '积水监测(0/16)'">
  100. <ul>
  101. <li
  102. class="listOne curCick"
  103. v-for="(i, index) in listData"
  104. :key="index"
  105. @click="JSshowMapDalog(i)"
  106. >
  107. <div class="line flex flex-align-center">
  108. <div class="lable">站点名称:</div>
  109. <div class="box flex flex-align-center flex-justcontent-center">
  110. {{ i.siteName }}
  111. </div>
  112. <span
  113. class="box_Status"
  114. :class="i.onlineStatus == 'online' ? 'green' : 'rad'"
  115. >{{ i.onlineStatus == "online" ? "在线" : "离线" }}</span
  116. >
  117. </div>
  118. <div class="line flex flex-align-center">
  119. <div class="lable"><i></i>深:</div>
  120. <div class="box flex flex-align-center flex-justcontent-center">
  121. {{ i.z || 0 }}米
  122. </div>
  123. </div>
  124. <div class="line flex flex-align-center">
  125. <div class="lable">风险分析:</div>
  126. <div
  127. class="box flex flex-align-center flex-justcontent-center"
  128. :class="i.riskAnalysis != '无风险' ? 'cRad' : 'cGreen'"
  129. >
  130. {{ i.riskAnalysis }}
  131. </div>
  132. </div>
  133. </li>
  134. </ul>
  135. </div>
  136. </div>
  137. </div>
  138. </div>
  139. <!-- 实时预警 -->
  140. <div class="WarningSou">
  141. <div class="ListBoxHeader">
  142. <div class="ListBoxHeader_font">实时预警</div>
  143. </div>
  144. <div class="WarningSouTop">
  145. <div class="tableHeader">
  146. <span class="tableHeaderList tableList1">位置</span>
  147. <span class="tableHeaderList tableList2">数据(cm)</span>
  148. <span class="tableHeaderList tableList3">状态</span>
  149. <span class="tableHeaderList tableList4">操作</span>
  150. </div>
  151. <Vue3SeamlessScroll
  152. :list="SSYJData"
  153. :singleHeight="34"
  154. :singleWaitTime="1500"
  155. :hover="true"
  156. class="tableBody"
  157. >
  158. <div class="tableBodyList" v-for="item in SSYJData">
  159. <span class="tableBodyList_span1">{{ item.wranLocation }}</span>
  160. <span class="tableBodyList_span2"> {{ item.riskProfile }}</span>
  161. <span class="tableBodyList_span3">{{ item.assessment }}</span>
  162. <span class="tableBodyList_span4">
  163. <el-tag
  164. style="cursor: pointer"
  165. type="danger"
  166. v-if="item.distribute == 0"
  167. @click="paidan(item)"
  168. size="small"
  169. >派单</el-tag
  170. >
  171. <el-tag size="small" type="success" v-if="item.distribute == 1"
  172. >已派单</el-tag
  173. >
  174. </span>
  175. </div>
  176. </Vue3SeamlessScroll>
  177. </div>
  178. </div>
  179. <!-- 预警与处置 -->
  180. <div class="WarningAssess">
  181. <div class="ListBoxHeader">
  182. <div class="ListBoxHeader_font">预警与处置</div>
  183. </div>
  184. <div class="TopProportion">
  185. <div class="WarningSl">
  186. <div class="eachDescribe">
  187. <div class="icon bgcls"></div>
  188. <div class="text">预警数量</div>
  189. </div>
  190. <div class="eachDescribe">
  191. <div class="icon bgcYellow"></div>
  192. <div class="text">处置数量</div>
  193. </div>
  194. </div>
  195. <div class="WarningNy">
  196. <div class="head-right" style="">
  197. <div
  198. class="head-item"
  199. v-for="(item, index) in yearList"
  200. :key="index"
  201. :class="activedname == item.name ? 'activedright' : ''"
  202. @click="yearclick(item, index)"
  203. >
  204. {{ item.name }}
  205. </div>
  206. </div>
  207. </div>
  208. </div>
  209. <div class="fxChart">
  210. <AssessmentjsEcharts
  211. :data="chartData2"
  212. :refresh="chartData2.refresh"
  213. ></AssessmentjsEcharts>
  214. </div>
  215. </div>
  216. </template>
  217.  
  218. <script setup>
  219. import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
  220. import AssessmentjsEcharts from "@/views/oneMap/Echarts/AssessmentjsEcharts.vue";
  221. import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
  222. import bus from "@/bus";
  223. import { commonWarningList } from "@/api/RQWarning";
  224. import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
  225. import {
  226. selectBoxBySiteNo,
  227. selectSiteMonitorBySiteType,
  228. waterloggingArchiveList,
  229. } from "@/api/system/tanchuang";
  230. import dialogTabsStore from "@/store/modules/dialogTabs";
  231. const useDialogTabs = dialogTabsStore();
  232.  
  233. const FXJCData = ref([
  234. {
  235. xh: "1",
  236. hd: "延河",
  237. dqsw: 130,
  238. kzsw: 2000,
  239. // zt: '超控制常水位',
  240. zt: "正常",
  241. siteNo: "2024101614",
  242. position: [109.497341, 36.603151],
  243. },
  244. {
  245. xh: "2",
  246. hd: "杜甫川河",
  247. dqsw: 10,
  248. kzsw: 300,
  249. zt: "正常",
  250. siteNo: "2024101615",
  251. position: [109.417646, 36.571427],
  252. },
  253. {
  254. xh: "3",
  255. hd: "西川河",
  256. dqsw: 11,
  257. kzsw: 700,
  258. zt: "正常",
  259. siteNo: "2024101616",
  260. position: [109.383491, 36.634602],
  261. },
  262. {
  263. xh: "4",
  264. hd: "南川河",
  265. dqsw: 12,
  266. kzsw: 700,
  267. zt: "正常",
  268. siteNo: "2024101617",
  269. position: [109.476953, 36.536511],
  270. },
  271. ]);
  272. const listData = ref([
  273. {
  274. siteName: "东关大街与长青路交叉口",
  275. onlineStatus: "online",
  276. riskAnalysis: "无风险",
  277. siteNo: "2024101612",
  278. position: "109.504561,36.60637",
  279. },
  280. {
  281. siteName: "大桥街与延河西路交叉口",
  282. onlineStatus: "online",
  283. riskAnalysis: "无风险",
  284. siteNo: "2024101613",
  285. position: "109.497323,36.60318",
  286. },
  287. {
  288. siteName: "文化沟路与延河西路交叉口",
  289. siteStatus: "在线",
  290. riskAnalysis: "无风险",
  291. siteNo: "2024101634",
  292. position: "109.480944,36.613436",
  293. },
  294. ]);
  295. const jsjcData = ref([
  296. // { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险', siteNo: '2024101612' },
  297. // { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险', siteNo: '2024101613' },
  298. // // { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo}
  299. ]);
  300. const SSYJData = ref([
  301. // {
  302. // wz: '东大街管网',
  303. // sj: 25,
  304. // zk: '高水位',
  305. // cz: '派单',
  306. // value: '004', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
  307. // },
  308. // {
  309. // wz: '枣园南路与枣园五路管网',
  310. // sj: 40,
  311. // zk: '满管',
  312. // cz: '派单',
  313. // value: '005',
  314. // },
  315. // {
  316. // wz: '王家坪旧址门口',
  317. // sj: 12,
  318. // zk: '积水',
  319. // cz: '派单',
  320. // value: '006',
  321. // },
  322. // {
  323. // wz: '金延安路与枣园大道管网 ',
  324. // sj: 50,
  325. // zk: '满管',
  326. // cz: '已派单',
  327. // },
  328. // {
  329. // wz: '延大路与杨家岭路管网 ',
  330. // sj: 50,
  331. // zk: '满管',
  332. // cz: '已派单',
  333. // },
  334. ]);
  335. const yearList = ref([
  336. { name: "月", value: 1 },
  337. { name: "年", value: 2 },
  338. ]);
  339. const monitorData = ref([
  340. { name: "积水监测(0/16)", value: 2 },
  341. { name: "漫溢监测(1/29)", value: 1 },
  342. { name: "流量监测(0/4)", value: 2 },
  343. ]);
  344. const chartData2 = ref({
  345. xAxis: ["11/7", "11/8", "11/9", "11/10", "11/11", "11/12"],
  346. refresh: 1,
  347. });
  348. const HhName = ref("延河");
  349. const hdJj = ref(
  350. "延河属黄河一级支流,发源于陕西省靖边县东南山区的天赐湾乡高峁山,流向东南经安塞、延安市区、延长县于南河沟乡凉水岸汇入黄河,全长286.9km,流域面积7725km2。以安塞化子坪、延安市的甘谷驿为界,可将延河分为上、中、下游河段,上游河谷狭窄,多呈“V”型,宽度10~80m,中游平均宽度600m,甘谷驿以下河段一般在1500m左右。"
  351. );
  352. const activedname = ref("月");
  353. const monitorname = ref("漫溢监测(1/29)");
  354. function yearclick(val) {
  355. activedname.value = val.name;
  356. }
  357. function monitorclick(val) {
  358. monitorname.value = val.name;
  359. if (monitorname.value == "漫溢监测(1/29)") {
  360. listData.value = [
  361. {
  362. siteName: "东关大街与长青路交叉口",
  363. onlineStatus: "online",
  364. riskAnalysis: "无风险",
  365. siteNo: "2024101612",
  366. position: "109.504561,36.60637",
  367. },
  368. {
  369. siteName: "大桥街与延河西路交叉口",
  370. onlineStatus: "online",
  371. riskAnalysis: "无风险",
  372. siteNo: "2024101613",
  373. position: "109.504561,36.60637",
  374. },
  375. {
  376. siteName: "文化沟路与延河西路交叉口",
  377. siteStatus: "online",
  378. warnInfo: "无风险",
  379. siteNo: "2024101634",
  380. position: "109.504561,36.60637",
  381. },
  382. ];
  383. } else if (monitorname.value == "积水监测(0/16)") {
  384. listData.value = jsjcData.value;
  385. // listData.value = [
  386. // { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
  387. // { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
  388. // // { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
  389. // ];
  390. } else {
  391. console.log(monitorname.value, " monitorname.value");
  392. }
  393. }
  394. // 弹框
  395. function showMapDalog(val) {
  396. console.log("val.siteName", val);
  397.  
  398. useDialogTabs.addPosition(val.position.split(",").map((item) => parseFloat(item)));
  399. let data = {
  400. title: val.siteName,
  401. // comIDs: ['gwpm', 'jcsj', 'danganInfo'], //满溢监测
  402. comIDs: [], //满溢监测
  403. SiteNo: val.siteNo,
  404. };
  405.  
  406. getTabsList(val.siteNo).then((res) => {
  407. data.comIDs = res;
  408. bus.emit("publicDialog", data);
  409. });
  410. // showPipe.value = true;
  411. }
  412. // 积水弹框
  413. function JSshowMapDalog(val) {
  414. console.log("🚀 ~ JSshowMapDalog ~ val:", val);
  415. // let data = {
  416. // title: val.siteName,
  417. // comIDs: ['spjk', 'jcsj', 'danganInfo'], //积水监测
  418. // };
  419. // bus.emit('publicDialog', data);
  420. // useDialogTabs.addPosition(val.position); // 添加全景位置
  421. useDialogTabs.addPosition(val.position.split(",").map((item) => parseFloat(item)));
  422. let data = {
  423. title: val.siteName,
  424. // comIDs: ['gwpm', 'jcsj', 'danganInfo'], //满溢监测
  425. comIDs: [], //满溢监测
  426. SiteNo: val.siteNo,
  427. };
  428.  
  429. getTabsList(val.siteNo).then((res) => {
  430. // console.log('🚀 ~ getTabsList ~ res:', res);
  431. data.comIDs = res;
  432. bus.emit("publicDialog", data);
  433. });
  434. // showPipe.value = true;
  435. }
  436.  
  437. // 派单
  438. const paidan = (item) => {
  439. let data = {
  440. title: item.wranLocation,
  441. comIDs: ["gdpf"],
  442. getSiteId: item.id,
  443. };
  444. bus.emit("publicDialog", data);
  445. };
  446. // 超控制常水位
  447. function showcswDalog(val) {
  448. console.log(val, "val");
  449. let data = {
  450. title: val.hd + "监测点",
  451. comIDs: ["PS_ckzcsw"],
  452. };
  453.  
  454. bus.emit("publicDialog", data);
  455. // showPipe.value = true;
  456. }
  457. // 获取实时预警列表
  458. const getRealTimeWarning = async () => {
  459. try {
  460. const res = await commonWarningList({ moduleType: "drainage" });
  461. SSYJData.value = res.data;
  462. // console.log('🚀 ~ getCommonWarningList ~ res:', res);
  463. } catch (error) {
  464. console.log("🚀 ~ getCommonWarningList ~ error:", error);
  465. }
  466. };
  467.  
  468. // 获取站点弹窗 tab列表
  469. const getTabsList = async (siteNo) => {
  470. try {
  471. const res = await selectBoxBySiteNo(siteNo);
  472. const tabsList = res.data.boxList.map((item) => item.boxId);
  473. return tabsList;
  474. } catch (error) {
  475. console.log(" ~ getTabsList ~ error:", error);
  476. }
  477. };
  478.  
  479. // 积水监测
  480. const getWaterlogging = async () => {
  481. try {
  482. const res = await selectSiteMonitorBySiteType({
  483. monitorTargetType: "waterlogging",
  484. orderBy: "online_status asc",
  485. siteType: "water_level",
  486. });
  487. jsjcData.value = res.data;
  488. // console.log('🚀 ~ getWaterlogging ~ res:', res);
  489. } catch (error) {
  490. console.log("🚀 ~ getWaterlogging ~ error:", error);
  491. }
  492. };
  493.  
  494. // 展示四色图
  495. const ShowSiSetu = (bol) => {
  496. bus.emit("SetLayerShow", ["排水风险评估"]);
  497. // bus.emit("SiSeTuBol", true);
  498. };
  499. // 河道点击
  500. const WzTrigger = (val) => {
  501. HhName.value = val;
  502. if (val == "延河") {
  503. hdJj.value =
  504. "延河属黄河一级支流,发源于陕西省靖边县东南山区的天赐湾乡高峁山,流向东南经安塞、延安市区、延长县于南河沟乡凉水岸汇入黄河,全长286.9km,流域面积7725km2。以安塞化子坪、延安市的甘谷驿为界,可将延河分为上、中、下游河段,上游河谷狭窄,多呈“V”型,宽度10~80m,中游平均宽度600m,甘谷驿以下河段一般在1500m左右。";
  505. } else if (val == "杜甫川河") {
  506. hdJj.value =
  507. "杜甫川河发源于延安市佛道坪,自西向东流经万花,在延安市马家湾汇入南川河,为南川河的一级支流,河长21km,流域面积166km2,河道平均比降9.3‰,多年平均径流量0.04 亿m 3,最大流量100m3 /s,流量最小时河道断流,河谷狭窄,宽度200~300m,最宽约400m。阶地零星分布,阶面倾向河床,川地高程一般在975~1000m。左岸岸坡低缓,坡高在75m 左右,坡度小于40°;右岸斜坡坡高 50~100m,坡度30°~50°,多为黄土斜坡。";
  508. } else if (val == "西川河") {
  509. hdJj.value =
  510. "西川河为延河一级支流,发源于安塞区李盆窑子,自西向东流经安塞县的砖窑湾镇高桥乡,在延安市枣园以东、延安兰家坪桥下游汇入延河。西川河流域面积801.1km2,河长61.5km,河道平均比降5.7‰, 多年平均径流量0.29亿m3,最大流量440m3/s,最小流量 0.001m3/s。西川河下游设有枣园水文站,距河口 13km,枣园水文站以上控制流量面积719km2。西川河河谷在横剖面上呈宽阔的“U”型,宽度一般为400~500m,最大宽度700m;川地高950~965m,河床稍向下游倾斜,受水流影响,河床两岸阶地呈不对称,凸岸阶地发育,阶面微向河床倾斜,凹岸很少有阶地。";
  511. } else {
  512. hdJj.value =
  513. "南川河发源于延安市元庄,自南向北流径柳林镇,在宝塔山下附近入延河,属延河一级支流,河长24.2km,流域面积432.5km2,河道平均比降9.6‰,多年平均径流量0.15亿m 3,最大流量650m3 /s,流量最小时南川河断流。南川河河谷相对较窄,宽度为450m 左右,川地高程960~990m,阶地不甚发育,河床向两侧以缓坡形式过度到两岸斜坡;宝塔山至七里铺段,河谷两岸斜坡高度多在50~100m,坡度普遍大于40°,部分达70°;由于河流14下切,基岩出露,在左右岸坡脚处分别形成 10~20m 和 10~30m的基岩陡坎,坡角普遍大于 80°。在七里铺至柳林河段,岸坡明显减缓,坡度多小于40°,坡高在50m以上。";
  514. }
  515. };
  516.  
  517. onMounted(() => {
  518. // 获取预警列表
  519. getRealTimeWarning();
  520. // 积水监测
  521. getWaterlogging();
  522. });
  523.  
  524. onBeforeUnmount(() => {
  525. bus.emit("clearAllLayer");
  526. });
  527. </script>
  528.  
  529. <style lang="scss" scoped>
  530. .riskAssessment {
  531. z-index: 999;
  532. width: 450px;
  533. height: 43%;
  534.  
  535. .Assessmentop {
  536. width: 450px;
  537. height: calc(100% - 50px);
  538. .subRightBox {
  539. // background: #2cfce9;
  540. width: 440px;
  541. margin: 0 auto;
  542. height: 35px;
  543. display: flex;
  544. cursor: pointer;
  545. font-size: 14px;
  546. color: #ffffff;
  547. line-height: 25px;
  548. .headcenter {
  549. width: 132px;
  550. height: 30px;
  551. padding: 2px 3px;
  552. background: url("@/assets/images/zhps/fxpgw.png") no-repeat;
  553. background-size: 100% 100%;
  554. text-align: center;
  555. margin-top: 5px;
  556. margin-left: 10px;
  557. }
  558. .activedright {
  559. border: 1px solid #1c8aff;
  560. color: #e4f5ff;
  561. background-color: #004285;
  562. background: url("@/assets/images/zhps/fxpgxz.png") no-repeat;
  563. background-size: 100% 100%;
  564. }
  565. }
  566. .leftSubTabsBox {
  567. width: 440px;
  568. height: calc(100% - 50px);
  569. margin: 0 auto;
  570. .tabContent {
  571. height: calc(100% - 1px);
  572. ul {
  573. height: 100%;
  574. // overflow: hidden;
  575. overflow-y: auto;
  576. padding: 0 16px;
  577. list-style: none;
  578. cursor: pointer;
  579. .listOne {
  580. margin-top: 5px;
  581. background: linear-gradient(0deg, #003c99 0%, #1d448d 100%);
  582. border-radius: 4px;
  583. padding: 2px 20px;
  584. .line {
  585. position: relative;
  586. padding: 6px 0;
  587. overflow: hidden;
  588. .lable {
  589. width: 80px;
  590. font-size: 14px;
  591. font-weight: 400;
  592. color: #39f7ff;
  593. padding-right: 4px;
  594. i {
  595. display: inline-block;
  596. width: 28px;
  597. }
  598. span {
  599. display: inline-block;
  600. width: 7px;
  601. }
  602. }
  603. .lable2 {
  604. width: 190px;
  605. }
  606. .box {
  607. // height: 26px;
  608. width: 240px;
  609. padding: 3px 0;
  610. line-height: 20px;
  611. border-radius: 2px 2px 2px 2px;
  612. border: 1px solid #1cf4fc48;
  613. text-align: center;
  614. font-size: 14px;
  615. font-weight: 400;
  616. color: #ffffff;
  617. }
  618. .box_Status {
  619. font-size: 16px;
  620. }
  621. .box2 {
  622. width: 120px;
  623. }
  624. span {
  625. display: block;
  626. padding: 0 6px;
  627. line-height: 18px;
  628. margin-left: 10px;
  629. font-size: 12px;
  630. border: 1px solid #b7b7b7;
  631. border-radius: 14px;
  632. color: #b7b7b7;
  633. background: rgba(183, 183, 183, 0.15);
  634. white-space: nowrap;
  635. &.rad {
  636. border-color: #ff3737;
  637. color: #ff3737;
  638. background: rgba(255, 55, 55, 0.15);
  639. }
  640. &.green {
  641. border-color: lime;
  642. color: lime;
  643. background: rgba(12, 134, 24, 0.15);
  644. }
  645. }
  646. }
  647. }
  648. }
  649. }
  650. }
  651. .waterBox {
  652. margin: 5px auto;
  653. width: 430px;
  654. height: calc(100% - 45px);
  655. .waterroll {
  656. height: 60%;
  657. // background: yellowgreen;
  658. .tableHeader {
  659. width: 100%;
  660. height: 34px;
  661. background: linear-gradient(
  662. 0deg,
  663. rgba(74, 164, 255, 0.6392156863) 0%,
  664. rgba(0, 251, 255, 0) 100%
  665. );
  666. border-radius: 2px;
  667. border: 1px solid #004285;
  668. display: flex;
  669. .tableHeaderList {
  670. font-family: Source Han Sans CN;
  671. font-weight: 400;
  672. font-size: 14px;
  673. color: #ffffff;
  674. height: 34px;
  675. line-height: 34px;
  676. // padding-left: 5px;
  677. // text-align: center;
  678. }
  679. .tableList1 {
  680. width: 10%;
  681. text-align: center;
  682. }
  683. .tableList2 {
  684. width: 15%;
  685. text-align: center;
  686. }
  687. .tableList3 {
  688. width: 25%;
  689. text-align: center;
  690. // background: red;
  691. }
  692. .tableList4 {
  693. width: 35%;
  694. text-align: center;
  695. }
  696. .tableList5 {
  697. width: 20%;
  698. text-align: center;
  699. }
  700. }
  701. .tableBody {
  702. width: 100%;
  703. height: calc(100% - 38px);
  704. overflow: auto;
  705. // background: red;
  706. .tableBodyList {
  707. height: 34px;
  708. line-height: 34px;
  709. width: 100%;
  710. display: flex;
  711. /* 选择偶数行 */
  712. &:nth-child(even) {
  713. background: linear-gradient(
  714. 0deg,
  715. rgba(21, 141, 253, 0.2) 0%,
  716. rgba(21, 141, 253, 0.05) 100%
  717. );
  718. }
  719.  
  720. .tableBodyList_span1 {
  721. font-family: Source Han Sans CN;
  722. font-weight: 400;
  723. font-size: 14px;
  724. color: #ffffff;
  725. height: 34px;
  726. line-height: 34px;
  727. text-align: center;
  728. width: 10%;
  729.  
  730. // background: red;
  731. // padding-left: 5px;
  732. }
  733. .tableBodyList_span2 {
  734. font-family: Source Han Sans CN;
  735. font-weight: 400;
  736. font-size: 14px;
  737. color: #ffffff;
  738. height: 34px;
  739. line-height: 34px;
  740. text-align: center;
  741. width: 15%;
  742. cursor: pointer;
  743. }
  744. .tableBodyList_span3 {
  745. font-family: Source Han Sans CN;
  746. font-weight: 400;
  747. font-size: 14px;
  748. color: #ffffff;
  749. height: 34px;
  750. line-height: 34px;
  751. text-align: center;
  752. width: 20%;
  753. }
  754.  
  755. .tableBodyList_span4 {
  756. font-family: Source Han Sans CN;
  757. font-weight: 400;
  758. font-size: 14px;
  759. color: #ffffff;
  760. height: 34px;
  761. line-height: 34px;
  762. text-align: center;
  763. width: 33%;
  764. }
  765. .tableBodyList_span5 {
  766. font-family: Source Han Sans CN;
  767. font-weight: 400;
  768. font-size: 14px;
  769. color: #ffffff;
  770. height: 34px;
  771. line-height: 34px;
  772. text-align: center;
  773. width: 22%;
  774. }
  775. }
  776. .activedright {
  777. border: 1px solid #1c8aff;
  778. color: #e4f5ff;
  779. background: #004285;
  780. }
  781. }
  782. }
  783. .watercontent {
  784. height: 40%;
  785. .Titlelarge {
  786. font-family: PangMenZhengDao;
  787. font-weight: 400;
  788. font-size: 23px;
  789. color: #ebfeff;
  790. }
  791. .Contentdetails {
  792. height: calc(100% - 30px);
  793. overflow: auto;
  794. // background: red;
  795. text-indent: 20px;
  796. font-family: Source Han Sans CN;
  797. font-weight: 500;
  798. font-size: 14px;
  799. color: #c1d3d4;
  800. }
  801. }
  802. }
  803. }
  804. }
  805. .WarningSou {
  806. width: 450px;
  807. height: 26%;
  808. .WarningSouTop {
  809. margin: 0 auto;
  810. width: 430px;
  811. height: calc(100% - 50px);
  812. .tableHeader {
  813. width: 100%;
  814. height: 34px;
  815. background: linear-gradient(
  816. 0deg,
  817. rgba(74, 164, 255, 0.6392156863) 0%,
  818. rgba(0, 251, 255, 0) 100%
  819. );
  820. border-radius: 2px;
  821. border: 1px solid #004285;
  822. display: flex;
  823. .tableHeaderList {
  824. font-family: Source Han Sans CN;
  825. font-weight: 400;
  826. font-size: 14px;
  827. color: #ffffff;
  828. height: 34px;
  829. line-height: 34px;
  830. // padding-left: 5px;
  831. // text-align: center;
  832. }
  833. .tableList1 {
  834. width: 40%;
  835. padding-left: 15px;
  836. }
  837. .tableList2 {
  838. width: 20%;
  839. text-align: center;
  840. }
  841. .tableList3 {
  842. width: 20%;
  843. text-align: center;
  844. }
  845. .tableList4 {
  846. width: 20%;
  847. text-align: center;
  848. }
  849. }
  850. .tableBody {
  851. height: calc(100% - 35px);
  852. overflow: hidden;
  853. .tableBodyList {
  854. height: 34px;
  855. line-height: 34px;
  856. width: 100%;
  857. display: flex;
  858. /* 选择偶数行 */
  859. &:nth-child(even) {
  860. background: linear-gradient(
  861. 0deg,
  862. rgba(21, 141, 253, 0.2) 0%,
  863. rgba(21, 141, 253, 0.05) 100%
  864. );
  865. }
  866. .tableBodyList_span1 {
  867. font-family: Source Han Sans CN;
  868. font-weight: 400;
  869. font-size: 14px;
  870. color: #ffffff;
  871. height: 34px;
  872. line-height: 34px;
  873. width: 40%;
  874. padding-left: 10px;
  875. }
  876. .tableBodyList_span2 {
  877. font-family: Source Han Sans CN;
  878. font-weight: 400;
  879. font-size: 14px;
  880. color: #ffffff;
  881. height: 34px;
  882. line-height: 34px;
  883. text-align: center;
  884. width: 20%;
  885. }
  886. .tableBodyList_span3 {
  887. font-family: Source Han Sans CN;
  888. font-weight: 400;
  889. font-size: 14px;
  890. color: #ffffff;
  891. height: 34px;
  892. line-height: 34px;
  893. text-align: center;
  894. width: 20%;
  895. }
  896.  
  897. .tableBodyList_span4 {
  898. font-family: Source Han Sans CN;
  899. font-weight: 400;
  900. font-size: 14px;
  901. color: #ffffff;
  902. height: 34px;
  903. line-height: 30px;
  904. text-align: center;
  905. width: 20%;
  906. // background: red;
  907. // cursor: pointer;
  908. }
  909. }
  910. }
  911. }
  912. }
  913. .WarningAssess {
  914. width: 450px;
  915. height: 27%;
  916. .TopProportion {
  917. margin-top: 5px;
  918. display: flex;
  919. width: 100%;
  920. .WarningSl {
  921. display: flex;
  922. justify-content: space-around;
  923. align-items: center;
  924. width: 55%;
  925. .eachDescribe {
  926. display: flex;
  927. align-items: center;
  928. font-family: Source Han Sans CN;
  929. font-weight: 400;
  930. // padding-top: 5px;
  931. .icon {
  932. width: 8px;
  933. height: 8px;
  934. border-radius: 50%;
  935. }
  936. .bgcYellow {
  937. background: #2be7abff;
  938. }
  939. .bgcls {
  940. background: #18a7f2ff;
  941. }
  942. .text {
  943. padding: 0 10px 0 6px;
  944. font-family: Source Han Sans CN;
  945. font-weight: 500;
  946. font-size: 14px;
  947. color: #c1d3d4;
  948. }
  949. }
  950. }
  951. .WarningNy {
  952. display: flex;
  953. width: 45%;
  954. .head-right {
  955. cursor: pointer;
  956. font-size: 14px;
  957. color: #ffffff;
  958. display: flex;
  959. line-height: 18px;
  960. .head-item {
  961. width: 70px;
  962. margin-right: 10px;
  963. padding: 2px 3px;
  964. background: #0d4c7d;
  965. height: 23px;
  966. text-align: center;
  967. position: relative;
  968. left: 40px;
  969. font-size: 16px;
  970. }
  971. .activedright {
  972. border: 1px solid #1c8aff;
  973. color: #e4f5ff;
  974. background: #004285;
  975. }
  976. }
  977. }
  978. }
  979. .fxChart {
  980. margin: 5px auto;
  981. width: 420px;
  982. height: calc(100% - 80px);
  983. }
  984. }
  985.  
  986. .ListBoxHeader {
  987. height: 44px;
  988. line-height: 50px;
  989. width: 98%;
  990. background: url("@/assets/newImgs/partBg.png") no-repeat;
  991. background-size: 100% 100%;
  992. display: flex;
  993. align-items: center;
  994. justify-content: space-between;
  995. margin: 7px 0px 0px 8px;
  996. .ListBoxHeader_font {
  997. font-family: PangMenZhengDao;
  998. font-weight: 400;
  999. font-size: 23px;
  1000. color: #ebfeff;
  1001. padding-left: 34px;
  1002. }
  1003. }
  1004.  
  1005. ::-webkit-scrollbar {
  1006. width: 5px; /* 设置滚动条的宽度 */
  1007. }
  1008. </style>