infotrack2.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941
  1. <template>
  2. <div class="track-info">
  3. <div class="form-info">
  4. <div class="work-flow">
  5. <div class="work-flow-line"></div>
  6. <div
  7. :class="['work-flow-item', item.name == statu(form) ? 'active' : '']"
  8. v-for="(item, i) in svgarr"
  9. :key="i"
  10. >
  11. <div class="work-flow-icon-item">
  12. <div class="work-flow-icon-o"></div>
  13. <div class="work-flow-icon-i"></div>
  14. <span class="svg-icon">
  15. <SvgIcon :svgid="item.svg"></SvgIcon>
  16. </span>
  17. </div>
  18. <div class="work-flow-text">{{ item.name }}</div>
  19. </div>
  20. </div>
  21. <div class="form-body">
  22. <el-form ref="form" :model="form" label-width="120px">
  23. <el-row>
  24. <el-col :span="12">
  25. <el-form-item label="风场:">
  26. <el-input
  27. v-model="form.wpName"
  28. placeholder="风场名称"
  29. readonly
  30. ></el-input>
  31. </el-form-item>
  32. </el-col>
  33. <el-col :span="12">
  34. <el-form-item label="风机:">
  35. <el-input
  36. v-model="form.wtId"
  37. placeholder="风机名称"
  38. readonly
  39. ></el-input>
  40. </el-form-item>
  41. </el-col>
  42. </el-row>
  43. <el-row>
  44. <el-col :span="12">
  45. <el-form-item label="推荐检修时间:">
  46. <el-input
  47. v-model="form.tjss"
  48. placeholder="推荐检修时间"
  49. readonly
  50. ></el-input>
  51. <!-- <el-date-picker v-model="form.tjjxsj" type="datetime" placeholder="推荐检修时间" popper-class="date-select"></el-date-picker> -->
  52. </el-form-item>
  53. </el-col>
  54. <el-col :span="12">
  55. <el-form-item label="预计检修风速:">
  56. <el-input
  57. v-model="form.tjfs"
  58. placeholder="预计检修风速"
  59. readonly
  60. ></el-input>
  61. </el-form-item>
  62. </el-col>
  63. </el-row>
  64. <el-row>
  65. <el-col :span="24">
  66. <el-form-item label="推荐理由:">
  67. <el-input
  68. type="textarea"
  69. resize="none"
  70. :rows="3"
  71. v-model="form.description"
  72. placeholder="推荐理由"
  73. readonly
  74. ></el-input>
  75. </el-form-item>
  76. </el-col>
  77. </el-row>
  78. <el-row>
  79. <el-col :span="12">
  80. <el-form-item label="下单时间:">
  81. <el-input
  82. v-model="form.prodtdepttime"
  83. placeholder="下单时间"
  84. readonly
  85. ></el-input>
  86. </el-form-item>
  87. </el-col>
  88. <el-col :span="12">
  89. <el-form-item label="主要负责人:">
  90. <el-input
  91. v-model="form.workleader"
  92. placeholder="主要负责人"
  93. readonly
  94. ></el-input>
  95. </el-form-item>
  96. </el-col>
  97. </el-row>
  98. <el-row>
  99. <el-col :span="12">
  100. <el-form-item label="出发时间:">
  101. <el-input
  102. v-model="form.departuretime"
  103. placeholder="出发时间"
  104. readonly
  105. ></el-input>
  106. </el-form-item>
  107. </el-col>
  108. <el-col :span="12">
  109. <el-form-item label="到达时间:">
  110. <el-input
  111. v-model="form.arrivaltime"
  112. placeholder="到达时间"
  113. readonly
  114. ></el-input>
  115. </el-form-item>
  116. </el-col>
  117. </el-row>
  118. <el-row>
  119. <el-col :span="24">
  120. <el-form-item label="排查方法:">
  121. <el-input
  122. type="textarea"
  123. resize="none"
  124. :rows="3"
  125. v-model="form.gzpc"
  126. placeholder="排查方法"
  127. readonly
  128. ></el-input>
  129. </el-form-item>
  130. </el-col>
  131. </el-row>
  132. <el-row>
  133. <el-col :span="24">
  134. <el-form-item label="处理方法:">
  135. <el-input
  136. type="textarea"
  137. resize="none"
  138. :rows="3"
  139. v-model="form.repairedcomment"
  140. placeholder="处理方法"
  141. readonly
  142. ></el-input>
  143. </el-form-item>
  144. </el-col>
  145. </el-row>
  146. <el-row>
  147. <el-col :span="12">
  148. <el-form-item label="消缺时间:">
  149. <el-input
  150. v-model="form.repairedtime"
  151. placeholder="消缺时间"
  152. readonly
  153. ></el-input>
  154. </el-form-item>
  155. </el-col>
  156. <el-col :span="12">
  157. <el-form-item label="故障时长:">
  158. <el-input
  159. v-model="form.degradebugtype"
  160. placeholder="故障时长"
  161. readonly
  162. ></el-input>
  163. </el-form-item>
  164. </el-col>
  165. </el-row>
  166. <el-row>
  167. <el-col :span="12">
  168. <el-form-item label="验收人:">
  169. <el-input
  170. v-model="form.checkdeptlabornum"
  171. placeholder="验收人"
  172. readonly
  173. ></el-input>
  174. </el-form-item>
  175. </el-col>
  176. <el-col :span="12">
  177. <el-form-item label="验收时间:">
  178. <el-input
  179. v-model="form.checktime"
  180. placeholder="验收时间"
  181. readonly
  182. ></el-input>
  183. </el-form-item>
  184. </el-col>
  185. </el-row>
  186. <el-row>
  187. <el-col :span="24">
  188. <el-form-item label="验收意见:">
  189. <el-input
  190. type="textarea"
  191. resize="none"
  192. :rows="3"
  193. v-model="form.checkdeptopinion"
  194. placeholder="验收意见"
  195. readonly
  196. ></el-input>
  197. </el-form-item>
  198. </el-col>
  199. </el-row>
  200. </el-form>
  201. </div>
  202. </div>
  203. <div class="evaluate">
  204. <div class="white">评价</div>
  205. <div
  206. class="evaluate-item"
  207. :class="form.rwfpsc > form.rwfppjsc ? ' warColor' : ''"
  208. >
  209. <div class="evaluate-label">任务分配时长</div>
  210. <el-input
  211. v-model="form.rwfpsc"
  212. style="width: 62px; text-align: center"
  213. placeholder=""
  214. readonly
  215. ></el-input>
  216. <div class="evaluate-unit">min</div>
  217. </div>
  218. <div class="evaluate-item">
  219. <div class="evaluate-label">任务分配平均时长</div>
  220. <el-input
  221. v-model="form.rwfppjsc"
  222. style="width: 62px; text-align: center"
  223. placeholder=""
  224. readonly
  225. ></el-input>
  226. <div class="evaluate-unit">min</div>
  227. </div>
  228. <div
  229. class="evaluate-item"
  230. :class="form.ddxcsc > form.ddxcpjsc ? ' warColor' : ''"
  231. >
  232. <div class="evaluate-label">到达现场时长</div>
  233. <el-input
  234. v-model="form.ddxcsc"
  235. style="width: 62px; text-align: center"
  236. placeholder=""
  237. readonly
  238. ></el-input>
  239. <div class="evaluate-unit">min</div>
  240. </div>
  241. <div class="evaluate-item">
  242. <div class="evaluate-label">到达现场平均时长</div>
  243. <el-input
  244. v-model="form.ddxcpjsc"
  245. style="width: 62px; text-align: center"
  246. placeholder=""
  247. readonly
  248. ></el-input>
  249. <div class="evaluate-unit">min</div>
  250. </div>
  251. <div
  252. class="evaluate-item"
  253. :class="form.qxclsc > form.qxclpjsc ? ' warColor' : ''"
  254. >
  255. <div class="evaluate-label">缺陷处理时长</div>
  256. <el-input
  257. v-model="form.qxclsc"
  258. style="width: 62px; text-align: center"
  259. placeholder=""
  260. readonly
  261. ></el-input>
  262. <div class="evaluate-unit">min</div>
  263. </div>
  264. <div class="evaluate-item">
  265. <div class="evaluate-label">缺陷处理平均时长</div>
  266. <el-input
  267. v-model="form.qxclpjsc"
  268. style="width: 62px; text-align: center"
  269. placeholder=""
  270. readonly
  271. ></el-input>
  272. <div class="evaluate-unit">min</div>
  273. </div>
  274. <div
  275. class="evaluate-item"
  276. :class="form.yssc > form.yspjsc ? ' warColor' : ''"
  277. >
  278. <div class="evaluate-label">验收时长</div>
  279. <el-input
  280. v-model="form.yssc"
  281. style="width: 62px; text-align: center"
  282. placeholder=""
  283. readonly
  284. ></el-input>
  285. <div class="evaluate-unit">min</div>
  286. </div>
  287. <div class="evaluate-item">
  288. <div class="evaluate-label">验收平均时长</div>
  289. <el-input
  290. v-model="form.yspjsc"
  291. style="width: 62px; text-align: center"
  292. placeholder=""
  293. readonly
  294. ></el-input>
  295. <div class="evaluate-unit">min</div>
  296. </div>
  297. </div>
  298. <div class="tabs">
  299. <div class="tab-box">
  300. <div
  301. class="tab-item"
  302. v-for="(tab, index) of tabs"
  303. :key="index"
  304. :class="{ active: activeTab == index }"
  305. @click="selectTab(tab, index)"
  306. >
  307. <span
  308. class="svg-icon svg-icon-md"
  309. :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'"
  310. >
  311. <SvgIcon :svgid="tab.icon"></SvgIcon>
  312. </span>
  313. <span>{{ tab.text }}</span>
  314. </div>
  315. </div>
  316. </div>
  317. <defect-elimination-tracking
  318. ref="det"
  319. :show="false"
  320. :formdata="formdata"
  321. ></defect-elimination-tracking>
  322. <div class="dialog-box">
  323. <el-dialog
  324. title="消缺历史"
  325. v-model="dialogVisible"
  326. width="1200px"
  327. height="800px"
  328. custom-class="modal"
  329. :close-on-click-modal="false"
  330. >
  331. <div class="diamain">
  332. <div class="left">
  333. <el-tree
  334. :data="data"
  335. :props="defaultProps"
  336. node-key="id"
  337. :default-expand-all="true"
  338. custom-class="modal"
  339. @node-click="handleNodeClick"
  340. ></el-tree>
  341. </div>
  342. <div class="right">
  343. <div class="table-box">
  344. <ComTable :data="tableData" height="700px"></ComTable>
  345. </div>
  346. </div>
  347. </div>
  348. </el-dialog>
  349. </div>
  350. <el-dialog
  351. title="查看监控视频"
  352. v-model="videoBoxShow"
  353. width="80%"
  354. height="800px"
  355. custom-class="modal"
  356. :close-on-click-modal="true"
  357. :destroy-on-close="true"
  358. >
  359. <iframe
  360. class="videoBoxiframe"
  361. width="100%"
  362. height="600px"
  363. src="http://localhost:8081?token=stream-1"
  364. ></iframe>
  365. </el-dialog>
  366. <el-dialog
  367. title="GIS地貌"
  368. v-model="gisBoxShow"
  369. top="100px"
  370. width="95%"
  371. custom-class="modal gisBox"
  372. :close-on-click-modal="true"
  373. >
  374. <iframe
  375. width="100%"
  376. height="100%"
  377. src="http://10.155.32.4:8070/gisweb/ditujiankang.html?LAT=106.23507&LNG=38.48989&userid=1500"
  378. sryle="width:100%;height:100%;"
  379. ></iframe>
  380. </el-dialog>
  381. </div>
  382. </template>
  383. <script>
  384. import ComTable from "@com/coms/table/table.vue";
  385. import SvgIcon from "@com/coms/icon/svg-icon.vue";
  386. import DefectEliminationTracking from "../HealthControl/defect-elimination-tracking.vue"; //手环监控
  387. import $ from "jquery";
  388. export default {
  389. components: {
  390. SvgIcon,
  391. ComTable,
  392. DefectEliminationTracking,
  393. },
  394. props: {
  395. formdata: Object,
  396. },
  397. data() {
  398. return {
  399. gisBoxShow: false,
  400. videoBoxShow: false,
  401. location: "",
  402. tableData: {
  403. column: [
  404. {
  405. name: "消缺描述",
  406. field: "xqms",
  407. is_light: false,
  408. },
  409. {
  410. name: "消缺人员",
  411. field: "xqry",
  412. is_light: false,
  413. },
  414. {
  415. name: "消缺时间",
  416. field: "xqsj",
  417. is_light: false,
  418. },
  419. {
  420. name: "更换部件",
  421. field: "ghbj",
  422. is_light: false,
  423. },
  424. {
  425. name: "更换原因",
  426. field: "ghyy",
  427. is_light: false,
  428. },
  429. {
  430. name: "更换数量",
  431. field: "ghsl",
  432. is_light: false,
  433. },
  434. ],
  435. data: [],
  436. },
  437. data: [
  438. {
  439. label: "一级 1",
  440. children: [
  441. {
  442. label: "二级 1-1",
  443. children: [
  444. {
  445. label: "三级 1-1-1",
  446. },
  447. ],
  448. },
  449. ],
  450. },
  451. {
  452. label: "一级 2",
  453. children: [
  454. {
  455. label: "二级 2-1",
  456. children: [
  457. {
  458. label: "三级 2-1-1",
  459. },
  460. ],
  461. },
  462. {
  463. label: "二级 2-2",
  464. children: [
  465. {
  466. label: "三级 2-2-1",
  467. },
  468. ],
  469. },
  470. ],
  471. },
  472. {
  473. label: "一级 3",
  474. children: [
  475. {
  476. label: "二级 3-1",
  477. children: [
  478. {
  479. label: "三级 3-1-1",
  480. },
  481. ],
  482. },
  483. {
  484. label: "二级 3-2",
  485. children: [
  486. {
  487. label: "三级 3-2-1",
  488. },
  489. ],
  490. },
  491. ],
  492. },
  493. ],
  494. defaultProps: {
  495. children: "children",
  496. label: "label",
  497. },
  498. dialogVisible: false,
  499. tabs: [
  500. {
  501. icon: "svg-gis",
  502. text: "GIS地貌",
  503. },
  504. {
  505. icon: "svg-jkp",
  506. text: "手环监控",
  507. },
  508. {
  509. icon: "svg-jk",
  510. text: "监控视频",
  511. },
  512. {
  513. icon: "svg-jk",
  514. text: "消缺历史",
  515. },
  516. ],
  517. activeTab: 0,
  518. svgarr: [
  519. {
  520. svg: "svg-qx-warn",
  521. name: "流程未启动",
  522. },
  523. {
  524. svg: "svg-qx-down",
  525. name: "消缺单已下达",
  526. },
  527. {
  528. svg: "svg-qx-hour-hand",
  529. name: "消缺单处理中",
  530. },
  531. {
  532. svg: "svg-对",
  533. name: "消缺完成",
  534. },
  535. {
  536. svg: "svg-qx-flag",
  537. name: "消缺验收",
  538. },
  539. ],
  540. form: {
  541. wtId: "",
  542. wpId: "",
  543. wpName: "",
  544. tjyy: "",
  545. tjss: null,
  546. tjfs: null,
  547. bugnum: null,
  548. workgroup1: null,
  549. findlabornum: null,
  550. reportlabornum: null,
  551. description: null,
  552. departuretime: null,
  553. arrivaltime: null,
  554. prodtdeptopinion: null,
  555. workleader: null,
  556. repairedtime: null,
  557. repairedcomment: null,
  558. unresolvedbug: null,
  559. checktime: null,
  560. degradebugtype: null,
  561. repairdeptbugtype1: null,
  562. checkdeptlabornum: null,
  563. status: null,
  564. gzpc: null,
  565. gzjx: null,
  566. prodtdepttime: null,
  567. checkdeptopinion: null,
  568. },
  569. videoConfigHost: "10.155.32.4:9984", // 视频 host
  570. // videoConfigHost: 'localhost:9984', // 视频 host
  571. videoConfigToken: "stream-1", // 视频 token
  572. videoConfigStreamprofile: "Profile_1", // 视频流文件
  573. videoPlayer: null, // 视频播放实例
  574. };
  575. },
  576. created() {
  577. this.setData();
  578. },
  579. updated() {
  580. this.setData();
  581. },
  582. onmounted() {
  583. this.cancelPlay();
  584. },
  585. // 函数
  586. methods: {
  587. setData() {
  588. this.form = this.formdata;
  589. this.form.tjss = this.form.tjss
  590. ? new Date(this.form.tjss).formatDate("yyyy-MM-dd hh:mm:ss")
  591. : null;
  592. this.form.prodtdepttime = this.form.prodtdepttime
  593. ? new Date(this.form.prodtdepttime).formatDate("yyyy-MM-dd hh:mm:ss")
  594. : null;
  595. this.form.departuretime = this.form.departuretime
  596. ? new Date(this.form.departuretime).formatDate("yyyy-MM-dd hh:mm:ss")
  597. : null;
  598. this.form.arrivaltime = this.form.arrivaltime
  599. ? new Date(this.form.arrivaltime).formatDate("yyyy-MM-dd hh:mm:ss")
  600. : null;
  601. this.form.repairedtime = this.form.repairedtime
  602. ? new Date(this.form.repairedtime).formatDate("yyyy-MM-dd hh:mm:ss")
  603. : null;
  604. this.form.checktime = this.form.checktime
  605. ? new Date(this.form.checktime).formatDate("yyyy-MM-dd hh:mm:ss")
  606. : null;
  607. },
  608. handleNodeClick(data) {
  609. this.location = data.id;
  610. this.searchTab(data.id);
  611. },
  612. DateformatDate(val) {
  613. return new Date(val).formatDate("yyyy-MM-dd hh:mm:ss");
  614. },
  615. showDet() {
  616. this.$refs.det.show();
  617. },
  618. statu(data) {
  619. if (null != data.checktime) {
  620. return "消缺验收";
  621. } else if (
  622. "等待运行验收" == data.status ||
  623. data.status == "集控中心修改检修时间" ||
  624. null != data.repairedtime
  625. ) {
  626. return "消缺完成";
  627. } else if (null != data.departuretime || null != data.arrivaltime) {
  628. return "消缺单处理中";
  629. } else if (
  630. "风机工作票已批准" == data.status ||
  631. data.status == "开风机工作票"
  632. ) {
  633. return "消缺单已下达";
  634. } else if (
  635. null == data.status ||
  636. data.status == "流程未启动" ||
  637. data.status == "流程未启用"
  638. ) {
  639. return "流程未启动";
  640. } else {
  641. return "流程未启动";
  642. }
  643. },
  644. async searchH() {
  645. const { data } = await this.API.requestData({
  646. method: "POST",
  647. subUrl: "/recommen/findLocationTreeByWtId",
  648. data: {
  649. wtId: this.form.wtId,
  650. },
  651. });
  652. this.dialogVisible = true;
  653. this.data = data.data;
  654. this.location = data.data[0].id;
  655. this.searchTab();
  656. },
  657. async searchTab() {
  658. const { data } = await this.API.requestData({
  659. method: "POST",
  660. subUrl: "/recommen/findWobugeqByLocation",
  661. data: {
  662. tablepar: {
  663. pageNum: 1,
  664. pageSize: 10,
  665. },
  666. location: this.location,
  667. },
  668. });
  669. this.tableData.data = data.data;
  670. },
  671. showVideoBox() {
  672. this.videoBoxShow = true;
  673. },
  674. selectTab: function (tab, index) {
  675. this.activeTab = index;
  676. if (index === 0) {
  677. this.gisBoxShow = true;
  678. } else if (index == 1) {
  679. this.showDet();
  680. } else if (index === 2) {
  681. this.showVideoBox();
  682. }
  683. if (tab.text == "消缺历史") {
  684. this.searchH();
  685. }
  686. },
  687. },
  688. };
  689. </script>
  690. <style lang="less">
  691. .diamain {
  692. width: 100%;
  693. height: 700px;
  694. overflow: hidden;
  695. display: flex;
  696. justify-content: space-between;
  697. .left {
  698. width: 30%;
  699. height: 100%;
  700. background: rgba(96, 103, 105, 0.2);
  701. overflow-y: auto;
  702. }
  703. .right {
  704. width: 68%;
  705. }
  706. }
  707. .track-info {
  708. display: flex;
  709. .form-info {
  710. flex: 0 0 720px;
  711. .work-flow {
  712. height: 132px;
  713. width: 100%;
  714. background: fade(@gray, 20);
  715. margin-bottom: 8px;
  716. padding: 26px 69px;
  717. display: flex;
  718. position: relative;
  719. .work-flow-line {
  720. position: absolute;
  721. width: 600px;
  722. height: 4px;
  723. left: calc(50% - 300px);
  724. top: calc(50% - 11px);
  725. background: @green;
  726. }
  727. .work-flow-item {
  728. flex: 1;
  729. display: flex;
  730. flex-direction: column;
  731. align-items: center;
  732. justify-content: center;
  733. &.active {
  734. .work-flow-icon-item {
  735. .work-flow-icon-o {
  736. border: 1px solid @green;
  737. opacity: 0.4;
  738. }
  739. .work-flow-icon-i {
  740. border: 2px solid @green;
  741. background: linear-gradient(
  742. to bottom,
  743. #1f2b2b 0%,
  744. #1f2b2b 20%,
  745. @green 100%
  746. );
  747. }
  748. .svg-icon {
  749. svg {
  750. use {
  751. fill: @green;
  752. }
  753. }
  754. }
  755. }
  756. .work-flow-text {
  757. color: @green;
  758. }
  759. }
  760. .work-flow-icon-item {
  761. width: 60px;
  762. height: 60px;
  763. position: relative;
  764. .work-flow-icon-o {
  765. position: absolute;
  766. top: 0;
  767. left: 0;
  768. width: 60px;
  769. height: 60px;
  770. border-radius: 50%;
  771. border: 1px solid #b3bdc0;
  772. opacity: 0.4;
  773. }
  774. .work-flow-icon-m {
  775. position: absolute;
  776. top: 1px;
  777. left: 1px;
  778. width: 59px;
  779. height: 59px;
  780. border-radius: 50%;
  781. border: 4px solid #212b2b;
  782. }
  783. .work-flow-icon-i {
  784. position: absolute;
  785. top: 5px;
  786. left: 5px;
  787. width: 50px;
  788. height: 50px;
  789. border-radius: 50%;
  790. border: 2px solid #606769;
  791. background: linear-gradient(
  792. to bottom,
  793. #1f2b2b 0%,
  794. #1f2b2b 20%,
  795. #606769 100%
  796. );
  797. }
  798. .svg-icon {
  799. position: absolute;
  800. width: 26px;
  801. height: 26px;
  802. top: calc(50% - 10px);
  803. left: calc(50% - 13px);
  804. svg {
  805. width: 26px;
  806. height: 26px;
  807. use {
  808. fill: @gray-l;
  809. }
  810. }
  811. }
  812. }
  813. .work-flow-text {
  814. color: @gray-l;
  815. margin-top: 8px;
  816. font-size: @fontsize-s;
  817. }
  818. }
  819. }
  820. }
  821. .evaluate {
  822. flex: 0 0 240px;
  823. margin-left: 30px;
  824. .evaluate-item {
  825. display: flex;
  826. justify-content: space-between;
  827. align-items: center;
  828. margin-top: 8px;
  829. .el-input__inner {
  830. text-align: center;
  831. }
  832. .evaluate-label {
  833. width: 120px;
  834. text-align: right;
  835. }
  836. .evaluate-label,
  837. .evaluate-unit {
  838. font-size: @fontsize;
  839. color: @gray-l;
  840. }
  841. .input-number {
  842. display: inline-block;
  843. width: 62px;
  844. margin: 0 16px;
  845. }
  846. }
  847. }
  848. .tabs {
  849. flex: 0 0 200px;
  850. height: 619px;
  851. margin-left: 20px;
  852. border-left: 1px solid #53626833;
  853. .tab-box {
  854. margin: 1.852vh 2.778vh;
  855. display: inline-block;
  856. z-index: 2;
  857. position: relative;
  858. margin: 26px 0 0 20px;
  859. .tab-item {
  860. display: flex;
  861. align-items: center; // justify-content: center;
  862. font-size: @fontsize-l;
  863. cursor: pointer; // width: 120px;
  864. padding: 8px;
  865. margin-bottom: 16px;
  866. &.active {
  867. color: @green;
  868. position: relative;
  869. background-image: @greenLinearTop;
  870. &::after {
  871. content: "";
  872. position: absolute;
  873. width: 100%;
  874. height: 5px;
  875. border: 1px solid @green;
  876. border-top: 0;
  877. left: 0;
  878. bottom: 0;
  879. box-sizing: border-box;
  880. }
  881. }
  882. .svg-icon {
  883. margin-right: 16px;
  884. }
  885. }
  886. }
  887. }
  888. }
  889. .videoPlayer {
  890. width: 100%;
  891. height: 100%;
  892. object-fit: contain;
  893. cursor: pointer;
  894. }
  895. </style>
  896. <style lang="less">
  897. .evaluate {
  898. .evaluate-item {
  899. .el-input__inner {
  900. padding: 0 15px;
  901. text-align: center;
  902. }
  903. }
  904. .evaluate-item.warColor {
  905. .el-input__inner {
  906. color: #f25656;
  907. }
  908. }
  909. }
  910. .gisBox {
  911. .el-dialog__body {
  912. height: 800px;
  913. }
  914. }
  915. .videoBoxiframe {
  916. border: none;
  917. overflow: hidden;
  918. }
  919. </style>