darkColor.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026
  1. <!--深色样式首页-->
  2. <template>
  3. <div class="homepage-darkcolor">
  4. <div class="homepage">
  5. <div class="left">
  6. <div class="system-main-title">
  7. <h4 class="section-title">系统概况</h4>
  8. <div class="downright"></div>
  9. </div>
  10. <div class="system-list">
  11. <ul>
  12. <li
  13. :class="['system-item', item.selected ? 'selected' : '']"
  14. v-for="(item, index) in systemList"
  15. :key="index"
  16. >
  17. <div class="system-name">
  18. <img :src="imgSrc(item.smsxt)" />
  19. <span>{{ item.smsxtname.replace("系统", "") }}</span>
  20. </div>
  21. <section
  22. v-if="item.assetTypeList.length"
  23. class="system-equipments-container"
  24. >
  25. <div
  26. @click.stop.capture="expandRestItems(item, index)"
  27. class="more"
  28. v-if="item.hasArrow"
  29. :style="{
  30. transform: item.expand ? 'rotate(0)' : 'rotate(180deg)',
  31. }"
  32. >
  33. <img
  34. v-if="item.showColor"
  35. src="../../assets/images/icons/arrow.png"
  36. />
  37. <img v-else src="../../assets/images/icons/grey.png" />
  38. </div>
  39. <div class="system-equipments">
  40. <div
  41. class="number"
  42. v-for="(equip, index) in item.assetTypeList"
  43. :key="index"
  44. @click='navToInnerPage(item, equip)'
  45. >
  46. <div class="title">
  47. <P
  48. :style="{
  49. width:
  50. equip.category_name.length > 6 ? '10rem' : 'auto',
  51. }"
  52. :title="equip.category_name"
  53. >{{ equip.category_name }}</P
  54. >
  55. <span
  56. :style="{
  57. right: equip.category_name.length > 6 ? '0' : '-1rem',
  58. }"
  59. v-if="equip.is_exception_num"
  60. >{{ equip.is_exception_num }}</span
  61. >
  62. </div>
  63. <p>
  64. <span class="amount">{{ equip.asset_num }}</span
  65. ><span>{{
  66. equip.category_name === "屋面logo"
  67. ? "个"
  68. : equip.category_name === "玻璃护栏"
  69. ? "段"
  70. : "台"
  71. }}</span>
  72. </p>
  73. </div>
  74. </div>
  75. <section
  76. class="system-equipments"
  77. v-show="item.expand && item.restAssetTypeList.length"
  78. style="margin-top: 0.4rem"
  79. >
  80. <div
  81. class="number"
  82. v-for="(equip, index) in item.restAssetTypeList"
  83. :key="index"
  84. >
  85. <div class="title">
  86. <P :title="equip.category_name">{{
  87. equip.category_name
  88. }}</P>
  89. <span
  90. :style="{
  91. right: equip.category_name.length > 6 ? '0' : '-1rem',
  92. }"
  93. v-if="equip.is_exception_num"
  94. >{{ equip.is_exception_num }}</span
  95. >
  96. </div>
  97. <p>
  98. <span class="amount">{{ equip.asset_num }}</span
  99. ><span>{{
  100. equip.category_name === "屋面logo"
  101. ? "个"
  102. : equip.category_name === "玻璃护栏"
  103. ? "段"
  104. : "台"
  105. }}</span>
  106. </p>
  107. </div>
  108. </section>
  109. </section>
  110. <div v-else style="width: 65%; text-align: center">暂无数据</div>
  111. </li>
  112. </ul>
  113. </div>
  114. </div>
  115. <div class="center">
  116. <div class="update-record">
  117. <div class="system-main-title">
  118. <h4 class="section-title">说明书更新记录</h4>
  119. <div class="downright"></div>
  120. </div>
  121. <!-- 进度调 -->
  122. <div class="progress">
  123. <div class="number">
  124. <div class="nu">{{ recordTotal }}</div>
  125. <span>当月更新</span>
  126. </div>
  127. <div class="progress-box">
  128. <div class="progress-list" ref="plist">
  129. <div
  130. :class="[
  131. 'progress-item',
  132. index + 1 >= backrecordLength ? 'progress-box-bottom' : '',
  133. ]"
  134. :style="'width:' + item.persent"
  135. v-for="(item, index) in recordList"
  136. :key="index"
  137. ></div>
  138. </div>
  139. <div class="progress-legend">
  140. <div
  141. class="legend-item"
  142. v-for="(item, index) in recordList"
  143. :key="index"
  144. >
  145. <span class="legend-color"></span>
  146. <span class="title">{{ item.typeName }}</span>
  147. <span class="num">{{ item.cnt }}条</span>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. <div class="feng-map" ref="fengmap">
  154. <div class="lcgn-title">
  155. <span class="span1">{{ floorInfo.code }}</span>
  156. </div>
  157. <floorMap
  158. ref="floorMap"
  159. :loadName="loadName"
  160. :type="'floor'"
  161. categoryId="LCGN"
  162. ></floorMap>
  163. <!-- 图例 -->
  164. <div class="legend-boxs">
  165. <Legend
  166. :floors="floorsArr"
  167. type="1"
  168. :editTips="`编辑${floorInfo.code}层楼层功能平面图`"
  169. ></Legend>
  170. <floor-list
  171. v-if="floorsArr.length > 0"
  172. :floorsArr="floorsArr"
  173. :type="1"
  174. @emitFloor="emitFloor"
  175. :id="'floor'"
  176. ></floor-list>
  177. </div>
  178. </div>
  179. </div>
  180. <div class="right">
  181. <div class="box" v-for="(item, index) in statisticsList" :key="index">
  182. <div class="box-center">
  183. <div class="system-main-title">
  184. <h4 class="section-title">{{ item.name }}</h4>
  185. <div class="downright"></div>
  186. </div>
  187. <div class="select">
  188. <Select
  189. width="110"
  190. v-model="item.smsxt"
  191. :isReadOnly="true"
  192. @change="changeClick(item)"
  193. :hideClear="true"
  194. :selectdata="dataSelect"
  195. :placeholder="'请选择'"
  196. />
  197. </div>
  198. </div>
  199. <div class="box-bottom">
  200. <div class="circle canvas-circle">
  201. <canvas
  202. :id="'canvas_' + item.type"
  203. ></canvas>
  204. </div>
  205. <div class="msg">
  206. <div class="msg-item">
  207. <span class="msg-color"></span>
  208. <span class="type">未完成得任务</span>
  209. <span class="num">{{ item.unfinished }}</span>
  210. </div>
  211. <div class="msg-item">
  212. <span class="msg-color"></span>
  213. <span class="type">即将逾期</span>
  214. <span class="num">{{ item.due_num }}</span>
  215. </div>
  216. </div>
  217. </div>
  218. </div>
  219. </div>
  220. </div>
  221. </div>
  222. </template>
  223. <script>
  224. import { getCardList, projectStatistics, rptstatistic } from "@/api/homePage";
  225. import floorMap from "@/components/floorMap/darkColorIndex.vue";
  226. import floorList from "@/components/floorListDark.vue";
  227. import { mapGetters } from "vuex";
  228. import { Legend } from "@/components/Legend/src/legendColor";
  229. import { SCircle } from "./Circle.js";
  230. import moment from "moment";
  231. export default {
  232. components: { floorMap, floorList, Legend },
  233. data() {
  234. return {
  235. systemList: [], //系统数据
  236. plazaId: "",
  237. show: true,
  238. floorInfo: {},
  239. loadName: "",
  240. type: "",
  241. // 右侧统计
  242. statisticsList: [
  243. {
  244. name: "维保",
  245. type: 1,
  246. smsxt: "000",
  247. total: 0, //总任务
  248. due_num: 0, //即将逾期数量
  249. unfinished: 0, //未完成数量
  250. },
  251. {
  252. name: "第三方检测",
  253. type: 2,
  254. smsxt: "000",
  255. total: 0, //总任务
  256. due_num: 0, //即将逾期数量
  257. unfinished: 0, //未完成数量
  258. },
  259. {
  260. name: "专维",
  261. type: 0,
  262. smsxt: "000",
  263. total: 0, //总任务
  264. due_num: 0, //即将逾期数量
  265. unfinished: 0, //未完成数量
  266. },
  267. ],
  268. recordList: [
  269. // 更新记录数组
  270. { cnt: 0, objtype: 4, typeName: "重要维修", persent: "0" },
  271. { cnt: 0, objtype: 1, typeName: "重要维保", persent: "0" },
  272. { cnt: 0, objtype: 5, typeName: "其他事项", persent: "0" },
  273. { cnt: 0, objtype: 3, typeName: "综合事项", persent: "0" },
  274. ],
  275. recordTotal: 0, //更新总数
  276. backrecordLength: 0, // 更新数据对应得得数量
  277. dataSelect: [
  278. { id: "000", name: "全部" },
  279. { id: "1003", name: "消防系统" },
  280. { id: "1001", name: "供电系统" },
  281. { id: "1002", name: "暖通系统" },
  282. { id: "1006", name: "电梯系统" },
  283. { id: "1005", name: "给排水" },
  284. { id: "1004", name: "弱电系统" },
  285. { id: "1007", name: "燃气系统" },
  286. { id: "1008", name: "土建装饰" },
  287. ],
  288. canvasCircle:0 , //圆的半径
  289. };
  290. },
  291. computed: {
  292. ...mapGetters(["floorsArr", "floorObj"]),
  293. },
  294. methods: {
  295. // 点击下拉框选择
  296. changeClick(statisticItem, data) {
  297. this.projectStatistics(
  298. statisticItem.type,
  299. statisticItem.smsxt,
  300. statisticItem.type == 1
  301. ? moment().format("YYYYMM")
  302. : moment().format("YYYY")
  303. ).then((res) => {
  304. const TYPE = statisticItem.type; // 类型
  305. const circle = new SCircle(`canvas_${TYPE}`,this.canvasCircle*0.8);
  306. let circle_basename = null;
  307. statisticItem.type == 1 ? circle_basename = "本月总任务" :circle_basename = "本年总任务"
  308. circle.baseName = circle_basename
  309. // 总数
  310. let total = 0;
  311. // 即将预期
  312. let due_num = 0;
  313. // 未完成任务
  314. let unfinished = 0;
  315. // 累计统计
  316. res.data.forEach((item) => {
  317. total = total + item.total;
  318. due_num = due_num + item.due_num;
  319. unfinished = unfinished + item.unfinished;
  320. });
  321. // 赋值
  322. Object.assign(statisticItem, {
  323. total,
  324. due_num,
  325. unfinished,
  326. });
  327. circle.persentTransform(total, due_num, unfinished);
  328. circle.setText(total);
  329. });
  330. },
  331. expandRestItems(item, index) {
  332. this.systemList.forEach((eq) => {
  333. if (eq.smsxt !== item.smsxt) {
  334. eq.expand = false;
  335. }
  336. eq.selected = false;
  337. });
  338. item.selected = true;
  339. item.expand = !item.expand;
  340. },
  341. imgSrc(code) {
  342. return require("../../assets/images/icons/" + code + ".png");
  343. },
  344. itemStyle(option) {
  345. let num = 0;
  346. if (option.assetTypeList) {
  347. option.assetTypeList.forEach((item) => {
  348. if (typeof item.is_exception_num === "number") {
  349. num += item.is_exception_num;
  350. }
  351. });
  352. }
  353. if (option.rptGlsmsStatisticsList) {
  354. option.rptGlsmsStatisticsList.forEach((option) => {
  355. if (typeof option.due_num === "number") {
  356. num += option.due_num;
  357. }
  358. });
  359. }
  360. if (num > 0) {
  361. return {
  362. display: "block",
  363. };
  364. } else {
  365. return {
  366. display: "none",
  367. };
  368. }
  369. },
  370. /**
  371. * @Description 获取集团 中心 区域 项目 数据树数据
  372. * @method param ccode 管理分区编码 集团首页必填
  373. * @method param level 1集团 2中心 3区域 0广场 集团首页必填
  374. * @method param plazaId 广场id 如果是广场则此参数必填 其他情况下非必填
  375. */
  376. getSystemList() {
  377. let params = {
  378. getParams: {
  379. plazaId: this.plazaId,
  380. },
  381. };
  382. return new Promise((resolve, reject) => {
  383. getCardList(params).then((res) => {
  384. if (res.result == "success") {
  385. let result = res.data;
  386. if (result && Array.isArray(result)) {
  387. result.forEach((item) => {
  388. let list = item.assetTypeList;
  389. if (list) {
  390. if (list.length > 3) {
  391. item.hasArrow = true;
  392. item.assetTypeList = list.splice(0, 3);
  393. item.restAssetTypeList = list;
  394. item.showColor = list.some((item) => {
  395. return item.is_exception_num > 0;
  396. });
  397. } else {
  398. item.hasArrow = false;
  399. item.restAssetTypeList = [];
  400. }
  401. }
  402. });
  403. res.data.forEach((item) => {
  404. item.selected = false;
  405. item.expand = false;
  406. });
  407. res.data[0].selected = true;
  408. this.currentSelectedSys = res.data[0];
  409. this.currentSysId = res.data[0].smsxt;
  410. this.systemList = res.data;
  411. resolve(res);
  412. }
  413. }
  414. });
  415. });
  416. },
  417. emitFloor(item) {
  418. this.floorInfo = item;
  419. this.$refs.floorMap.init(this.floorInfo.gname);
  420. this.init();
  421. },
  422. additionalColl() {
  423. this.show = !this.show;
  424. },
  425. init() {
  426. this.loadName = `楼层功能-${this.floorInfo.code}`;
  427. if (this.floorsArr.length > 0 && this.$cookie.get("currentFloorId")) {
  428. this.floorInfo = this.floorsArr.find((item) => {
  429. return this.$cookie.get("currentFloorId") == item.seq;
  430. });
  431. } else {
  432. }
  433. },
  434. // 点击跳转
  435. navToInnerPage (item, equip) {
  436. this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, equipId: equip.category_code, module:'core'}})
  437. },
  438. /**
  439. * 项目首页右侧统计
  440. *
  441. * type 统计类型 0:专维 1:维保任务 2:第三方视图 //必填
  442. * system=1001//所属专业 (选填) //不填则默认全部专业(系统)
  443. * time 时间
  444. */
  445. projectStatistics(type, smsxt, time) {
  446. let params = null;
  447. if (smsxt == "000") {
  448. params = {
  449. getParams: {
  450. plazaId: this.plazaId,
  451. type: type, // 统计类型 0:专维 1:维保任务 2:第三方视图 //必填
  452. statisticsDate: time, //统计时间 type=0或type=2时:格式:yyyy / type=1时:格式:yyyyMM //必填
  453. },
  454. };
  455. } else {
  456. params = {
  457. getParams: {
  458. plazaId: this.plazaId,
  459. type: type, // 统计类型 0:专维 1:维保任务 2:第三方视图 //必填
  460. statisticsDate: time, //统计时间 type=0或type=2时:格式:yyyy / type=1时:格式:yyyyMM //必填
  461. smsxt: smsxt, //所属专业 (选填) //不填则默认全部专业(系统)
  462. },
  463. };
  464. }
  465. return projectStatistics(params);
  466. },
  467. // 广场统计说明书更新记录数量
  468. rptstatistic(startTime, endTime) {
  469. const params = {
  470. getParams: {
  471. plazaId: this.plazaId,
  472. changeDateStartDate: startTime, // 统计类型 0:专维 1:维保任务 2:第三方视图 //必填
  473. changeDateEndDate: endTime, //统计时间 type=0或type=2时:格式:yyyy / type=1时:格式:yyyyMM //必填
  474. },
  475. };
  476. rptstatistic(params).then((res) => {
  477. if (res.data.total && res.data.objcnt) {
  478. res.data.objcnt.forEach((obj) => {
  479. this.recordList.forEach((recorditem) => {
  480. if (obj.objtype == recorditem.objtype) {
  481. recorditem.cnt = obj.cnt;
  482. recorditem.persent =
  483. Math.ceil((obj.cnt / res.data.total) * 100) + "%";
  484. }
  485. });
  486. });
  487. this.backrecordLength = res.data.objcnt.length;
  488. this.recordTotal = res.data.total;
  489. } else {
  490. this.backrecordLength = 0;
  491. this.recordTotal = 0;
  492. }
  493. });
  494. },
  495. // 获取右侧统计数据
  496. getRightstatic() {
  497. // 对右侧数据做遍历
  498. this.statisticsList.forEach((statisticItem) => {
  499. const TYPE = statisticItem.type; // 类型
  500. const Dom = document.getElementById(`canvas_${TYPE}`);
  501. const BoxDom = document.getElementsByClassName('canvas-circle')[0];
  502. this.canvasCircle = 0
  503. if(BoxDom.offsetHeight>BoxDom.offsetWidth){
  504. this.canvasCircle = BoxDom.offsetWidth / 2;
  505. }else{
  506. this.canvasCircle = BoxDom.offsetHeight / 2;
  507. }
  508. // 设置Dom得width\height
  509. Dom.height = this.canvasCircle*2;
  510. Dom.width = this.canvasCircle*2;
  511. this.projectStatistics(
  512. statisticItem.type,
  513. statisticItem.system,
  514. statisticItem.type == 1
  515. ? moment().format("YYYYMM")
  516. : moment().format("YYYY")
  517. ).then((res) => {
  518. let circle_basename = null
  519. statisticItem.type == 1 ? circle_basename = "本月总任务" :circle_basename = "本年总任务"
  520. const circle = new SCircle(`canvas_${TYPE}`,this.canvasCircle*0.8);
  521. circle.baseName = circle_basename
  522. // 总数
  523. let total = 0;
  524. // 即将预期
  525. let due_num = 0;
  526. // 未完成任务
  527. let unfinished = 0;
  528. // 累计统计
  529. res.data.forEach((item) => {
  530. total = total + item.total;
  531. due_num = due_num + item.due_num;
  532. unfinished = unfinished + item.unfinished;
  533. });
  534. // 赋值
  535. Object.assign(statisticItem, {
  536. total,
  537. due_num,
  538. unfinished,
  539. });
  540. circle.persentTransform(total, due_num, unfinished);
  541. circle.setText(total);
  542. });
  543. });
  544. },
  545. },
  546. created() {
  547. let plazaId = localStorage.getItem("PLAZAID");
  548. if (plazaId) {
  549. this.plazaId = plazaId;
  550. }
  551. this.getSystemList();
  552. },
  553. mounted() {
  554. this.init();
  555. // 获取右侧数据
  556. this.getRightstatic();
  557. // 获取说明书更新记录
  558. // 获取说明书更新记录
  559. const endTime = moment().add(1, "days").format("YYYYMMDD000000");
  560. const startTime = moment().subtract(29, "days").format("YYYYMMDD000000");
  561. this.rptstatistic(startTime, endTime);
  562. this.$refs.floorMap.init(this.floorInfo.gname);
  563. },
  564. };
  565. </script>
  566. <style lang="less" scoped>
  567. .homepage-darkcolor {
  568. width: 100%;
  569. height: 100%;
  570. background: #0c102c;
  571. color: #fff;
  572. .homepage {
  573. width: 100%;
  574. height: 100%;
  575. padding: 56px 16px 40px 16px;
  576. box-sizing: border-box;
  577. display: flex;
  578. .system-main-title {
  579. width: 152px;
  580. height: 40px;
  581. background: rgba(22, 73, 206, 0.36);
  582. line-height: 40px;
  583. margin-bottom: 12px;
  584. font-size: 18px;
  585. color: #95bfff;
  586. position: relative;
  587. h4 {
  588. color: #fff;
  589. margin-left: 18px;
  590. }
  591. .downright {
  592. position: absolute;
  593. width: 0;
  594. height: 0;
  595. border-left: 20px solid transparent;
  596. border-bottom: 48px solid #0c102c;
  597. right: 0px;
  598. top: 0;
  599. }
  600. }
  601. .left {
  602. width: 30.05%;
  603. height: 100%;
  604. box-sizing: border-box;
  605. background: radial-gradient(#20284f 20%, transparent 20%) 0 0;
  606. background-color: transparent;
  607. background-size: 8px 8px;
  608. border: 10px solid;
  609. border-image: url("../../assets/images/border.png") 14;
  610. .system-list {
  611. height: ~"calc(100% - 44px)";
  612. overflow-y: auto;
  613. ul {
  614. li.system-item {
  615. position: relative;
  616. display: flex;
  617. justify-content: flex-start;
  618. align-items: stretch;
  619. width: 100%;
  620. margin-bottom: 6px;
  621. box-sizing: border-box;
  622. border: 1px solid#0C102C;
  623. border-radius: 4px;
  624. transition: 0.5s;
  625. background: rgba(13, 29, 66, 0.6);
  626. cursor: pointer;
  627. .system-name {
  628. position: absolute;
  629. top: 0;
  630. bottom: 0;
  631. display: flex;
  632. flex-direction: column;
  633. align-items: center;
  634. justify-content: center;
  635. flex-shrink: 1;
  636. flex-grow: 1;
  637. width: 18%;
  638. height: auto;
  639. img {
  640. width: 32px;
  641. height: 32px;
  642. margin-bottom: 6px;
  643. }
  644. span {
  645. color: white;
  646. font-size: 14px;
  647. font-weight: bolder;
  648. }
  649. }
  650. .system-equipments-container {
  651. position: relative;
  652. width: 88%;
  653. padding: 10px;
  654. margin-left: 18%;
  655. .more {
  656. position: absolute;
  657. display: flex;
  658. justify-content: center;
  659. align-items: center;
  660. width: 14px;
  661. height: 14px;
  662. right: 8px;
  663. top: 50%;
  664. border-radius: 7px;
  665. cursor: pointer;
  666. transform: rotate(0);
  667. transform-origin: center;
  668. z-index: 100;
  669. transform: translateY(-7px);
  670. img {
  671. width: 14px;
  672. height: 14px;
  673. }
  674. }
  675. .system-equipments {
  676. display: flex;
  677. align-items: center;
  678. .number {
  679. width: 30%;
  680. margin-right: 1%;
  681. background: rgba(56, 94, 204, 0.22);
  682. border-radius: 2px;
  683. padding: 14px 0 10px 4px;
  684. color: #ffffff;
  685. .title {
  686. display: inline-block;
  687. position: relative;
  688. line-height: 1;
  689. p {
  690. display: inline-block;
  691. position: relative;
  692. color: #fff;
  693. font-size: 14px;
  694. line-height: 20px;
  695. white-space: nowrap;
  696. text-overflow: ellipsis;
  697. overflow: hidden;
  698. }
  699. span {
  700. position: absolute;
  701. top: -10px;
  702. right: -20px;
  703. padding: 2px 4px;
  704. border-radius: 9px;
  705. font-size: 12px;
  706. color: #ffffff;
  707. background: #f54e45;
  708. }
  709. }
  710. p {
  711. span:first-child {
  712. color: #ffffff;
  713. font-size: 18px;
  714. font-weight: bold;
  715. }
  716. .amount {
  717. font-size: bold;
  718. }
  719. }
  720. }
  721. }
  722. }
  723. }
  724. li.selected {
  725. /deep/ .p-select-header {
  726. background: #cccccc !important;
  727. }
  728. }
  729. li:hover {
  730. border-color: #e4e5e7;
  731. box-shadow: 0 2px 10px 0px rgba(195, 199, 203, 0.4);
  732. }
  733. li:nth-of-type(1),
  734. li:nth-of-type(5) {
  735. .system-name {
  736. background: linear-gradient(
  737. 133deg,
  738. rgba(64, 204, 202, 0.3) 0%,
  739. rgba(108, 194, 226, 0.3) 100%
  740. );
  741. border-radius: 6px 0px 0px 6px;
  742. }
  743. }
  744. li:nth-of-type(2),
  745. li:nth-of-type(6) {
  746. .system-name {
  747. background: linear-gradient(
  748. 133deg,
  749. rgba(57, 152, 219, 0.3) 0%,
  750. rgba(112, 187, 239, 0.3),
  751. 100%
  752. );
  753. border-radius: 6px 0px 0px 6px;
  754. }
  755. }
  756. li:nth-of-type(3),
  757. li:nth-of-type(7) {
  758. .system-name {
  759. background: linear-gradient(
  760. 133deg,
  761. rgba(174, 48, 118, 0.3) 0%,
  762. rgba(213, 83, 135, 0.3) 100%
  763. );
  764. border-radius: 6px 0px 0px 6px;
  765. }
  766. }
  767. li:nth-of-type(4),
  768. li:nth-of-type(8) {
  769. .system-name {
  770. background: linear-gradient(
  771. 133deg,
  772. rgba(240, 84, 59, 0.3) 0%,
  773. rgba(226, 133, 108, 0.3) 100%
  774. );
  775. border-radius: 6px 0px 0px 6px;
  776. }
  777. }
  778. }
  779. }
  780. }
  781. .center {
  782. flex: 1;
  783. height: 100%;
  784. padding: 0 20px;
  785. position: relative;
  786. .update-record {
  787. width: 100%;
  788. height: 196px;
  789. background: radial-gradient(#20284f 20%, transparent 20%) 0 0;
  790. background-color: transparent;
  791. background-size: 8px 8px;
  792. border: 10px solid;
  793. border-image: url("../../assets/images/border.png") 14;
  794. .progress {
  795. display: flex;
  796. align-items: center;
  797. .progress-box {
  798. flex: 1;
  799. height: 100%;
  800. .progress-list {
  801. height: 12px;
  802. background: #ccc;
  803. border-radius: 6px 6px;
  804. display: flex;
  805. margin-right: 30px;
  806. overflow: hidden;
  807. .progress-item {
  808. height: 12px;
  809. border-right: 6px #0c102c solid;
  810. overflow: hidden;
  811. }
  812. .progress-item:nth-of-type(1) {
  813. background: #0a8fef;
  814. }
  815. .progress-item:nth-of-type(2) {
  816. background: #2bc58b;
  817. }
  818. .progress-item:nth-of-type(3) {
  819. background: #fd9039;
  820. }
  821. .progress-item:nth-of-type(4) {
  822. background: #c348fd;
  823. }
  824. .progress-box-bottom {
  825. border-right: 0px;
  826. }
  827. }
  828. .progress-legend {
  829. width: 100%;
  830. display: flex;
  831. margin-top: 28px;
  832. .legend-item {
  833. margin-right: 30px;
  834. display: flex;
  835. align-items: center;
  836. .legend-color {
  837. display: block;
  838. width: 10px;
  839. height: 10px;
  840. border-radius: 50% 50%;
  841. background: #fd9039;
  842. margin-right: 10px;
  843. }
  844. .title {
  845. margin-right: 10px;
  846. }
  847. }
  848. .legend-item:nth-of-type(1) {
  849. .legend-color {
  850. background: #0a8fef;
  851. }
  852. }
  853. .legend-item:nth-of-type(2) {
  854. .legend-color {
  855. background: #2bc58b;
  856. }
  857. }
  858. .legend-item:nth-of-type(3) {
  859. .legend-color {
  860. background: #fd9039;
  861. }
  862. }
  863. .legend-item:nth-of-type(4) {
  864. .legend-color {
  865. background: #c348fd;
  866. }
  867. }
  868. }
  869. }
  870. .number {
  871. width: 140px;
  872. height: 100%;
  873. color: #c3c7cb;
  874. padding: 20px;
  875. display: flex;
  876. flex-direction: column;
  877. justify-content: center;
  878. .nu {
  879. font-size: 30px;
  880. font-weight: bold;
  881. color: #ffffff;
  882. margin: 0 auto;
  883. }
  884. span {
  885. font-size: 16px;
  886. color: #c3c7cb;
  887. margin: 0 auto;
  888. }
  889. }
  890. }
  891. }
  892. .feng-map {
  893. width: 100%;
  894. height: calc(~"100% - 200px");
  895. position: relative;
  896. .lcgn-title {
  897. position: absolute;
  898. z-index: 2;
  899. display: block;
  900. top: 30px;
  901. left: 30px;
  902. width: 140px;
  903. height: 32px;
  904. background: linear-gradient(
  905. 270deg,
  906. rgba(199, 217, 234, 0) 0%,
  907. rgba(199, 217, 234, 1) 100%
  908. );
  909. box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
  910. color: #025baa;
  911. font-size: 16px;
  912. &::before {
  913. width: 2px;
  914. height: 16px;
  915. background: rgba(2, 91, 170, 1);
  916. display: inline-block;
  917. content: "";
  918. margin-right: 10px;
  919. margin-top: 8px;
  920. }
  921. .span1 {
  922. position: absolute;
  923. top: 3px;
  924. }
  925. }
  926. .legend-boxs {
  927. position: absolute;
  928. z-index: 9;
  929. right: 32px;
  930. top: 50px;
  931. }
  932. }
  933. }
  934. .right {
  935. width: 21.2%;
  936. height: 100%;
  937. padding-left: 10px;
  938. box-sizing: border-box;
  939. .box {
  940. width: 100%;
  941. height: ~"calc((100% - 16px) / 3)";
  942. background: radial-gradient(#20284f 20%, transparent 20%) 0 0;
  943. background-color: transparent;
  944. background-size: 8px 8px;
  945. border: 10px solid;
  946. border-image: url("../../assets/images/border.png") 14;
  947. margin-bottom: 20px;
  948. box-sizing: border-box;
  949. .box-center {
  950. display: flex;
  951. justify-content: space-between;
  952. .select {
  953. width: 110px;
  954. height: 36px;
  955. /deep/ .p-select-header {
  956. background: rgba(22, 73, 206, 0.36) !important;
  957. color: #fff !important;
  958. }
  959. }
  960. }
  961. .box-bottom {
  962. // padding-top: 36px;
  963. box-sizing: border-box;
  964. display: flex;
  965. position: relative;
  966. align-items: center;
  967. height:calc(100% - 52px);
  968. .circle {
  969. width: 140px;
  970. height: 100%;
  971. display: flex;
  972. align-items: center;
  973. }
  974. .msg {
  975. flex: 1;
  976. padding: 0 0 0 30px;
  977. box-sizing: border-box;
  978. .msg-item:nth-of-type(1) {
  979. display: flex;
  980. align-items: center;
  981. margin-top: 16px;
  982. .msg-color {
  983. display: block;
  984. width: 10px;
  985. height: 10px;
  986. border-radius: 10px 10px;
  987. background: #fd933c;
  988. margin-right: 10px;
  989. }
  990. .type {
  991. margin: 0 6px 0 4px;
  992. }
  993. }
  994. .msg-item:nth-of-type(2) {
  995. display: flex;
  996. align-items: center;
  997. margin-top: 16px;
  998. .msg-color {
  999. display: block;
  1000. width: 10px;
  1001. height: 10px;
  1002. border-radius: 10px 10px;
  1003. background: #cf233d;
  1004. margin-right: 10px;
  1005. }
  1006. .type {
  1007. margin: 0 6px 0 4px;
  1008. }
  1009. }
  1010. }
  1011. }
  1012. }
  1013. }
  1014. }
  1015. }
  1016. /deep/ .p-select-option-box {
  1017. background: rgba(22, 73, 206, 0.36) !important;
  1018. .p-select-option-menu {
  1019. background: rgba(22, 73, 206, 0.36) !important;
  1020. }
  1021. }
  1022. </style>