vBottomMenu.vue 35 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246
  1. <template>
  2. <div class="btm-box">
  3. <img class="light" src="../assets/images/integrated/btm-light.png" />
  4. <div class="btm-left" :class="btmTipIndent">
  5. <div class="btm-left-tip">
  6. <div class="btm-left-block btm-left-state-c1"></div>
  7. 新上报
  8. </div>
  9. <div class="btm-left-tip">
  10. <div class="btm-left-block btm-left-state-c2"></div>
  11. 催办
  12. </div>
  13. <div class="btm-left-tip">
  14. <div class="btm-left-block btm-left-state-c3"></div>
  15. 已签收
  16. </div>
  17. <!-- div class="btm-left-tip">
  18. <div class="btm-left-block btm-left-state-c4"></div>
  19. 联动
  20. </div> -->
  21. <div class="btm-left-tip">
  22. <div class="btm-left-block btm-left-state-c5"></div>
  23. 办结
  24. </div>
  25. <div class="btm-left-tip">
  26. <div class="btm-left-block btm-left-state-c6"></div>
  27. 归档
  28. </div>
  29. <div class="btm-legend" @click="btmIndent">
  30. <span>图例</span>
  31. <i class="el-icon-caret-right" v-if="this.btmTipIndent !== 'btm-tip-to-right'"></i>
  32. <i class="el-icon-caret-left" v-if="this.btmTipIndent == 'btm-tip-to-right'"></i>
  33. </div>
  34. </div>
  35. <div class="bottom-menu-normal">
  36. <div v-for="(fastMenu,index) in fastMenu" :key="index" class="btm-m-con">
  37. <a><i :class="fastMenu.icon" @click.stop="showDialog(fastMenu.click)"></i><a
  38. @click.stop="showDialog(fastMenu.click)">{{ fastMenu.name }}</a>
  39. <div v-if="showChild && fastMenu.click == 'layerSwitching'" class="nav-child">
  40. <el-button type="primary"
  41. @click.stop="choseLayerSwitching('http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiedong_lunkuo',true)"
  42. class="nav-child-btn" plain>铁东
  43. </el-button>
  44. <el-button type="primary"
  45. @click.stop="choseLayerSwitching('http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiexi_lunkuo',true)"
  46. class="nav-child-btn" plain>铁西
  47. </el-button>
  48. <!-- <el-button type="danger" icon="el-icon-close" style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
  49. @click.stop="closeChild"></el-button> -->
  50. </div>
  51. <!-- 林斑 -->
  52. <div v-show="showBanChild && fastMenu.click == 'forestban'" class="nav-child">
  53. <div class="forestban">
  54. <div class="forestban-con">
  55. <!-- <el-input-->
  56. <!-- placeholder="输入关键字进行过滤"-->
  57. <!-- v-model="filterbanText">-->
  58. <!-- </el-input>-->
  59. <el-tree :data="deptOptionsLiandong" ref="banDept" node-key="id" :check-strictly="true"
  60. :filter-node-method="filterbanNode" @click :accordion="true" empty-text="加载中,请稍候"
  61. :props="defaultProps"></el-tree>
  62. </div>
  63. <div class="forestban-right">
  64. <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchFB">
  65. </el-input>
  66. <el-checkbox-group v-model="banCheckList" @change="handleCheckedCitiesChangeBan">
  67. <el-checkbox v-for="(fastMenu,index) in filterbanList"
  68. label="http://218.27.1.154:8090/iserver/services/map-sipingshi/rest/maps/tiedong_lunkuo">
  69. 铁东
  70. </el-checkbox>
  71. </el-checkbox-group>
  72. </div>
  73. <el-button type="danger" icon="el-icon-close"
  74. style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
  75. @click.stop="closeBanChild"></el-button>
  76. </div>
  77. </div>
  78. <!-- 林场 -->
  79. <div v-show="showChangChild && fastMenu.click == 'forestchang'" class="nav-child">
  80. <div class="forestban">
  81. <div class="forestban-con">
  82. <!-- <el-input-->
  83. <!-- placeholder="输入关键字进行过滤"-->
  84. <!-- v-model="filterchangText">-->
  85. <!-- </el-input>-->
  86. <el-tree :data="deptOptionsLiandong" ref="changDept" node-key="id"
  87. :check-strictly="true" :filter-node-method="filterchangNode"
  88. @node-click="handlechangNodeClick" :accordion="true" empty-text="加载中,请稍候"
  89. :props="defaultProps"></el-tree>
  90. </div>
  91. <div class="forestban-right">
  92. <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="filterchang"
  93. @change="searchFilterchang(filterchang)">
  94. </el-input>
  95. <el-checkbox-group v-model="changCheckList" @change="handleCheckedCitiesChangeChang">
  96. <el-checkbox v-for="(item,index) in filterchangList" :label="item.farmAddress">
  97. {{ item.farmName }}
  98. </el-checkbox>
  99. </el-checkbox-group>
  100. </div>
  101. <el-button type="danger" icon="el-icon-close"
  102. style="position: absolute;right: 0;top: 0;width: 1rem;height: 1rem;padding:0;"
  103. @click.stop="closeChangChild"></el-button>
  104. </div>
  105. </div>
  106. </a>
  107. </div>
  108. </div>
  109. <div class="btm-right">
  110. <el-popover placement="top" trigger="click">
  111. <div class="btm-r-pop-info">
  112. <div class="btm-r-pop-info-box" v-for="(item,index) in taskList">
  113. <div class="btm-r-pop-info-tit">
  114. <h3>{{ item.taskSourceValue }}</h3>
  115. </div>
  116. <div class="btm-r-pop-info-con">
  117. <div class="btm-r-pop-info-list">
  118. <div class="btm-r-pop-info-list-name">标题</div>
  119. <div class="btm-r-pop-info-list-text">{{ item.taskTitle }}</div>
  120. </div>
  121. <div class="btm-r-pop-info-list">
  122. <div class="btm-r-pop-info-list-name">发起人</div>
  123. <div class="btm-r-pop-info-list-text">{{ item.sendPersonName }}</div>
  124. </div>
  125. <div class="btm-r-pop-info-list">
  126. <div class="btm-r-pop-info-list-name">发起时间</div>
  127. <div class="btm-r-pop-info-list-text">{{ item.taskSendTime }}</div>
  128. </div>
  129. <div class="btm-r-pop-info-list">
  130. <div class="btm-r-pop-info-list-name">关联事件</div>
  131. <div class="btm-r-pop-info-list-text">{{ item.eventName }}</div>
  132. </div>
  133. <div class="btm-r-pop-info-list">
  134. <div class="btm-r-pop-info-list-name">催办状态</div>
  135. <div class="btm-r-pop-info-list-text" style="color: red" v-if="item.isUrged==1">
  136. 任务催办中,请及时处理!!</div>
  137. <div class="btm-r-pop-info-list-text" v-else>正常</div>
  138. </div>
  139. </div>
  140. <div class="btm-r-pop-info-btm">
  141. <el-link type="success" @click="showEventDialog( item.eventCode )">查看详情</el-link>
  142. <div class="btm-r-pop-info-btm-btn">
  143. <el-button type="danger" @click="selectTaskDtpts(item.taskId,item.eventCode,'jj')">拒绝
  144. </el-button>
  145. <el-button type="primary" @click="selectTaskDtpts(item.taskId,item.eventCode,'lq')">领取
  146. </el-button>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. <el-badge :value="taskCount" slot="reference">
  152. <el-button size="small" icon="el-icon-bank-card">任务</el-button>
  153. </el-badge>
  154. </el-popover>
  155. <el-popover placement="top" trigger="click">
  156. <div class="btm-r-pop-info">
  157. <div class="btm-r-pop-info-box" v-for="(item,index) in messageList">
  158. <div class="btm-r-pop-info-con">
  159. <div class="btm-r-pop-info-list">
  160. <div class="btm-r-pop-info-list-name">{{item.title}}</div>
  161. <div class="btm-r-pop-info-list-text">{{item.content}}</div>
  162. </div>
  163. </div>
  164. <div class="btm-r-pop-info-btm">
  165. <el-link type="success" @click="selectMessageById(item.id)">标记已读</el-link>
  166. </div>
  167. </div>
  168. </div>
  169. <el-badge :value="messageCount" slot="reference">
  170. <el-button size="small" icon="el-icon-chat-line-round">消息</el-button>
  171. </el-badge>
  172. </el-popover>
  173. <!-- 警报铃 必须放在这,放在别处不好使 -->
  174. <div class="bell" v-if="eventWarn" @click="updateAlertFalse">
  175. <div class="dot"></div>
  176. <div class="pulse"></div>
  177. <div class="pulse-big"></div>
  178. </div>
  179. <!--<el-badge type="primary">-->
  180. <!--<el-button size="small" icon="el-icon-bell" @click="updateAlertFalse">警报</el-button>-->
  181. <!--</el-badge>-->
  182. <el-badge type="warning">
  183. <el-button size="small" icon="el-icon-refresh-right" @click="refresh">刷新</el-button>
  184. </el-badge>
  185. </div>
  186. <!-- 事件详情弹层 -->
  187. <el-dialog title="事件详情" :visible.sync="eventDialog" v-if="eventDialog" customClass="customWidth" append-to-body
  188. @close="cancelEventShow()">
  189. <div class="dia-event-info">
  190. <el-row>
  191. <!-- 左侧 -->
  192. <el-col :span="18" class="dia-left">
  193. <div ref="imageTofile" style="height: 75vh;">
  194. <!-- 应急预案 -->
  195. <div class="dia-left-top">
  196. <div class="dia-left-top-tit">应急预案</div>
  197. <div class="dia-left-top-carousel">
  198. <el-carousel height="30px" direction="vertical" :interval="2000">
  199. <el-carousel-item v-if="visuForestCloudYuAnBo!=null">
  200. <a
  201. :href="visuForestCloudYuAnBo.fileUrl">{{ visuForestCloudYuAnBo.reserveName }}</a>
  202. </el-carousel-item>
  203. <el-carousel-item v-else>
  204. <a href="#">未选预案</a>
  205. </el-carousel-item>
  206. </el-carousel>
  207. </div>
  208. </div>
  209. <!-- 应急预案end -->
  210. <!-- 地图 -->
  211. <supermapTaskDialog ref="supermapTaskDialog" style="position: absolute; top:0;left: 0;"
  212. :mapDiv="'taskDialogSuperMap'"
  213. :mapSite="{zoom:12,doubleClickZoom:false,dragging:false,scrollWheelZoom:false}"
  214. :codes="['9fa5']" :isSideBySide="false" :isdynamicPlotting="false" />
  215. <!-- 地图end -->
  216. </div>
  217. </el-col>
  218. <!-- 左侧end -->
  219. <!-- 右侧 -->
  220. <el-col :span="6" class="dia-right">
  221. <div class="e-right">
  222. <div class="forthis1-1">
  223. <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']"
  224. style="padding-bottom:1rem ;">
  225. <div class="i-list-con">
  226. <div class="this-con">
  227. <div class="z-info-list" style="margin-top: 0;">
  228. <el-timeline>
  229. <el-timeline-item color="#2bacf7" :timestamp="item.createTime"
  230. placement="top" v-for="(item,index) in eventLogList">
  231. <el-card style="width: 40vh">
  232. <div class="z-info-list-con">
  233. <div class="user-and-time flex-d">
  234. <span>{{ item.createName }}</span>
  235. <span
  236. v-if="eventLogList.length - 1 == index&&address!=null&&address!=''"><i
  237. class="el-icon-location"></i>
  238. {{ address }}</span>
  239. <span v-else></span>
  240. </div>
  241. <div class="z-info">
  242. <div class="this-con-list-info">
  243. {{ item.logContent }}
  244. </div>
  245. <div>
  246. <router-link to="#"
  247. @click.native="clickFile(itemfile.fileUrl,itemfile.fileName,itemfile.fileType)"
  248. v-for="(itemfile,indexfile) in item.fileVOs">
  249. <el-image :src="itemfile.fileUrl"
  250. v-if="itemfile.fileType=='image'"
  251. :preview-src-list="assetTypeAnImage(item.fileVOs)"
  252. style="width:3rem; height:3rem;margin: 2px;"
  253. :title="itemfile.fileName">
  254. </el-image>
  255. <img v-else-if="itemfile.fileType=='video'"
  256. style="width:3rem; height:3rem;margin: 2px;"
  257. :src="require('@/assets/fileTypeImage/mp4.png')"
  258. :title="itemfile.fileName">
  259. </img>
  260. <img v-else-if="itemfile.fileType=='word'"
  261. style="width:3rem; height:3rem;margin: 2px;"
  262. :src="require('@/assets/fileTypeImage/word.png')"
  263. :title="itemfile.fileName">
  264. </img>
  265. <img v-else-if="itemfile.fileType=='excel'"
  266. style="width:3rem; height:3rem;margin: 2px;"
  267. :src="require('@/assets/fileTypeImage/excel.png')"
  268. :title="itemfile.fileName">
  269. </img>
  270. <img v-else
  271. style="width:3rem; height:3rem;margin: 2px;"
  272. :src="require('@/assets/fileTypeImage/file.png')"
  273. :title="itemfile.fileName">
  274. </img>
  275. </router-link>
  276. </div>
  277. </div>
  278. </div>
  279. </el-card>
  280. </el-timeline-item>
  281. </el-timeline>
  282. </div>
  283. </div>
  284. </div>
  285. </dv-border-box-7>
  286. </div>
  287. <!-- <div class="forthis">-->
  288. <!-- <dv-border-box-7 backgroundColor="#040b1f" :color="['#25335d', '#5baffd']">-->
  289. <!-- <div class="i-list-con">-->
  290. <!-- <div class="this-con h-25 no-padding">-->
  291. <!-- <div class="z-info-list" style="margin-top: 0;">-->
  292. <!-- <div class="z-info-btm-grp">-->
  293. <!-- <div class="z-info-btm-grp-top">-->
  294. <!-- <div class="z-info-btm-grp-left">-->
  295. <!-- &lt;!&ndash; <el-button size="small" icon="el-icon-s-flag">责任制&ndash;&gt;-->
  296. <!-- &lt;!&ndash; </el-button>&ndash;&gt;-->
  297. <!-- <el-button size="small" icon="el-icon-upload" @click="showEventLogUpload()">上传-->
  298. <!-- </el-button>-->
  299. <!-- <el-button size="small" icon="el-icon-download" @click="toImage()">保存-->
  300. <!-- </el-button>-->
  301. <!-- </div>-->
  302. <!-- <div class="z-info-btm-grp-right">-->
  303. <!-- <el-button size="small" icon="el-icon-mic">会议-->
  304. <!-- </el-button>-->
  305. <!-- </div>-->
  306. <!-- </div>-->
  307. <!-- </div>-->
  308. <!-- </div>-->
  309. <!-- </div>-->
  310. <!-- </div>-->
  311. <!-- </dv-border-box-7>-->
  312. <!-- </div>-->
  313. </div>
  314. </el-col>
  315. <!-- 左侧end -->
  316. </el-row>
  317. </div>
  318. </el-dialog>
  319. <!-- 任务选择领取部门弹层 -->
  320. <el-dialog title="选择部门" :visible.sync="showDeptConfirm" v-if="showDeptConfirm" width="30%" append-to-body
  321. @close="cancelEventConfirm()">
  322. <el-form label-width="80px">
  323. <el-form-item label="选择部门">
  324. <el-select v-model="deptName" multiple placeholder="请选择部门" class="m-r-1rem" @change="setValue">
  325. <el-option v-for="item in deptOptions" :key="item.taskDeptId" :label="item.taskDeptName"
  326. :value="{value:item.taskDeptId,label:item.taskDeptName}">
  327. <!--:disabled="item.eventStatus=='未处理' ? false:true"-->
  328. </el-option>
  329. </el-select>
  330. </el-form-item>
  331. <el-button size="mini" type="primary" v-if="taskStatusButton=='lq'"
  332. @click="receiveTask(taskId,eventCode)">领取
  333. </el-button>
  334. <el-button size="mini" type="primary" v-if="taskStatusButton=='jj'"
  335. @click="refusedTask(taskId,eventCode)">拒绝
  336. </el-button>
  337. </el-form>
  338. </el-dialog>
  339. <!-- 图片,视频预览 -->
  340. <el-dialog title="视频预览" :visible.sync="showTcPlayer" width="40%" append-to-body>
  341. <TcPlayer ref="TcPlayer" :playVideo="playVideo" :widthHeigt="[100,100]"></TcPlayer>
  342. </el-dialog>
  343. </div>
  344. </template>
  345. <script>
  346. import {
  347. selectTaskBO,
  348. getEventDetail,
  349. selectTaskDtpts,
  350. receiveTask,
  351. refusedTask,
  352. selectMessageCount,
  353. selectMessageList,
  354. selectMessageById
  355. } from '@/api/forest'
  356. import {
  357. selectFarmByDeptId
  358. } from '@/api/vBottomMenu'
  359. import {
  360. treeselectAll as deptTreeselect
  361. } from '@/api/system/dept'
  362. import supermapTaskDialog from '@/components/supermap' //超图
  363. import TcPlayer from '@/components/TcPlayer' //视频预览
  364. import Cookies from 'js-cookie';
  365. export default {
  366. components: {
  367. supermapTaskDialog,
  368. TcPlayer
  369. },
  370. watch: {
  371. filterbanText(val) {
  372. alert(val)
  373. console.log(this.$refs)
  374. this.$refs.banDept.filter(val)
  375. },
  376. filterchangText(val) {
  377. alert(val)
  378. console.log(this.$refs)
  379. this.$refs.changDept.filter(val)
  380. }
  381. },
  382. data() {
  383. return {
  384. playVideo: '', //视频预览地址
  385. showTcPlayer: false, //视频预览弹窗
  386. filterbanText: '',
  387. filterchangText: '',
  388. filterbanList: [],
  389. filterchangList: [],
  390. filterchangListAll: [],
  391. eventId: null,
  392. eventCode: null,
  393. longitude: null,
  394. latitude: null,
  395. eventLogList: [], //事件详情日志
  396. eventDialog: false, //事件详情弹层
  397. taskStatusButton: null, //任务按钮
  398. visuForestCloudYuAnBo: null,
  399. address: null, //事件上报地址
  400. taskId: null, //任务ID
  401. showDeptConfirm: false, //任务领取选择部门弹窗
  402. deptOptions: [], //任务领取部门列表
  403. centerTaskTaskDepts: [], //任务领取部门
  404. deptName: [], //任务领取部门
  405. taskCount: 0, //任务数量
  406. taskList: 0, //任务列表
  407. messageCount: 0, //消息数量
  408. messageList: 0, //消息列表
  409. btmTipIndent: '', //图例收起弹出
  410. eventLocationVisible: false,
  411. showChild: false,
  412. showBanChild: false, //林斑
  413. showChangChild: false, //林场
  414. fastMenu: [{
  415. name: '事件定位',
  416. icon: 'iconfont sj-icon-sjdw',
  417. click: 'eventLocation'
  418. },
  419. {
  420. name: '图层切换',
  421. icon: 'iconfont sj-icon-tcqh',
  422. click: 'layerSwitching'
  423. },
  424. {
  425. name: '测量工具',
  426. icon: 'iconfont sj-icon-clgj',
  427. click: 'editableLayers'
  428. },
  429. {
  430. name: '林班',
  431. icon: 'iconfont sj-icon-lbzy',
  432. click: 'forestban'
  433. },
  434. {
  435. name: '林场',
  436. icon: 'iconfont sj-icon-lczy',
  437. click: 'forestchang'
  438. },
  439. {
  440. name: '电视墙',
  441. icon: 'el-icon-s-grid',
  442. click: 'TVWall'
  443. }
  444. ],
  445. deptOptionsLiandong: [],
  446. data: [{
  447. label: '一级 1',
  448. children: [{
  449. label: '二级 1-1',
  450. children: [{
  451. label: '三级 1-1-1'
  452. }]
  453. }]
  454. }, {
  455. label: '一级 2',
  456. children: [{
  457. label: '二级 2-1',
  458. children: [{
  459. label: '三级 2-1-1'
  460. }]
  461. }, {
  462. label: '二级 2-2',
  463. children: [{
  464. label: '三级 2-2-1'
  465. }]
  466. }]
  467. }, {
  468. label: '一级 3',
  469. children: [{
  470. label: '二级 3-1',
  471. children: [{
  472. label: '三级 3-1-1'
  473. }]
  474. }, {
  475. label: '二级 3-2',
  476. children: [{
  477. label: '三级 3-2-1'
  478. }]
  479. }]
  480. }],
  481. defaultProps: {
  482. children: 'children',
  483. label: 'label'
  484. },
  485. banCheckList: [], //林班
  486. changCheckList: [], //林场
  487. searchFB: '',
  488. filterchang: '', //林场搜索
  489. btmCurrent: '',
  490. eventWarn: false, //webSocket事件问题警报标记
  491. }
  492. },
  493. created() {
  494. /** 查询部门树结构 */
  495. deptTreeselect().then(response => {
  496. this.deptOptionsLiandong = response.data
  497. })
  498. /** 获取任务 */
  499. this.selectTaskList()
  500. /** 获取消息列表 */
  501. this.selectMessageList();
  502. },
  503. methods: {
  504. filterbanNode(value, data) {
  505. //树搜索
  506. if (!value) return true
  507. return data.label.indexOf(value) !== -1
  508. },
  509. filterchangNode(value, data) {
  510. //树搜索
  511. if (!value) return true
  512. return data.label.indexOf(value) !== -1
  513. },
  514. handlechangNodeClick(node, data, value) {
  515. //获取林场列表
  516. this.filterchang = ''
  517. selectFarmByDeptId({
  518. deptId: node.id
  519. }).then(res => {
  520. this.filterchangList = res.data
  521. this.filterchangListAll = res.data
  522. })
  523. },
  524. // 返回图片列表
  525. assetTypeAnImage(filePath) {
  526. let imageList = []
  527. if (filePath != null && filePath.length > 0) {
  528. for (let i = 0; i < filePath.length; i++) {
  529. if (filePath[i].fileType == 'image') {
  530. imageList.push(filePath[i].fileUrl)
  531. }
  532. }
  533. }
  534. return imageList
  535. },
  536. clickFile(fileUrl, fileName, fileType) {
  537. if (fileType == 'image') {
  538. return
  539. } else if (fileType == 'video') {
  540. this.showTcPlayer = true
  541. setTimeout(() => {
  542. this.playVideo = fileUrl
  543. }, 500)
  544. } else {
  545. let a = document.createElement('a')
  546. a.download = fileName
  547. a.href = fileUrl
  548. a.target = '_blank'
  549. a.click()
  550. }
  551. },
  552. setValue(event) {
  553. this.centerTaskTaskDepts = []
  554. //签收选择部门
  555. if (event != null && event.length > 0) {
  556. for (let i = 0; i < event.length; i++) {
  557. if (event[i].label != undefined && event[i].value != undefined) {
  558. this.centerTaskTaskDepts.push({
  559. taskDeptId: event[i].value,
  560. taskDeptName: event[i].label
  561. })
  562. }
  563. }
  564. }
  565. },
  566. receiveTask(taskId, eventCode) {
  567. let param = {
  568. taskId: taskId,
  569. eventCode: eventCode,
  570. centerTaskTaskDepts: this.centerTaskTaskDepts
  571. }
  572. receiveTask(param).then(res => {
  573. //任务领取
  574. if (res.code == 200) {
  575. this.$message.success(`任务领取成功!`)
  576. this.deptOptions = []
  577. this.deptName = []
  578. this.centerTaskTaskDepts = []
  579. //刷新任务列表
  580. this.selectTaskList()
  581. this.showDeptConfirm = false
  582. }
  583. })
  584. },
  585. refusedTask(taskId, eventCode) {
  586. let param = {
  587. taskId: taskId,
  588. eventCode: eventCode,
  589. centerTaskTaskDepts: this.centerTaskTaskDepts
  590. }
  591. refusedTask(param).then(res => {
  592. //任务拒绝
  593. if (res.code == 200) {
  594. this.$message.success(`任务拒绝成功!`)
  595. this.deptOptions = []
  596. this.deptName = []
  597. this.centerTaskTaskDepts = []
  598. //刷新任务列表
  599. this.selectTaskList()
  600. this.showDeptConfirm = false
  601. }
  602. })
  603. },
  604. selectTaskDtpts(taskId, eventCode, state) {
  605. this.taskId = taskId
  606. this.eventCode = eventCode
  607. selectTaskDtpts({
  608. taskId: taskId
  609. }).then(res => {
  610. //任务领取部门列表
  611. if (res.code == 200) {
  612. this.deptOptions = res.data
  613. this.taskStatusButton = state
  614. this.showDeptConfirm = true
  615. }
  616. })
  617. },
  618. cancelEventShow() {
  619. console.log('关闭事件弹窗')
  620. this.eventCode = null
  621. this.eventLogList = []
  622. },
  623. cancelEventConfirm() {
  624. console.log('关闭任务选择部门')
  625. this.eventCode = null
  626. this.deptOptions = []
  627. this.deptName = []
  628. this.centerTaskTaskDepts = []
  629. },
  630. showEventDialog(eventCode) {
  631. this.eventCode = eventCode
  632. let that = this
  633. //获取事件详情
  634. getEventDetail({
  635. eventCode: eventCode
  636. }).then(res => {
  637. this.eventDialog = true
  638. this.eventLogList = res.data.eventlog
  639. this.visuForestCloudYuAnBo = res.data.visuForestCloudYuAnBo //应急预案
  640. this.address = res.data.catalogue.address
  641. this.eventType = res.data.catalogue.eventType
  642. this.eventId = res.data.catalogue.id
  643. this.longitude = res.data.catalogue.longitude
  644. this.latitude = res.data.catalogue.latitude
  645. let markersMap = {
  646. lng: 124.59,
  647. lat: 43.02,
  648. icon: 'marker',
  649. bindPopupHtml: '',
  650. click: '',
  651. parameter: '',
  652. keepBindPopup: false,
  653. isAggregation: false,
  654. radius: 0
  655. }
  656. if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data.catalogue
  657. .urgeCount == 0) {
  658. markersMap.icon = 'sj-icon-map-xinshangbao'
  659. }
  660. if (res.data.catalogue.eventStatusValue == 'forest_event_status_1' && res.data.catalogue
  661. .urgeCount > 0) {
  662. markersMap.icon = 'sj-icon-map-cuiban'
  663. } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_2') {
  664. markersMap.icon = 'sj-icon-map-qianshou'
  665. } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_5') {
  666. markersMap.icon = 'sj-icon-map-banjie'
  667. } else if (res.data.catalogue.eventStatusValue == 'forest_event_status_6') {
  668. markersMap.icon = 'sj-icon-map-guidang'
  669. }
  670. markersMap.lng = res.data.catalogue.longitude
  671. markersMap.lat = res.data.catalogue.latitude
  672. if (res.data.eventdetail != null && res.data.eventdetail.length > 0 && res.data.eventdetail[0]
  673. .fireRadius != null && res.data.eventdetail[0].fireRadius != '' && res.data.eventdetail[0]
  674. .fireRadius > 0) {
  675. markersMap.radius = res.data.eventdetail[0].fireRadius
  676. }
  677. setTimeout(() => {
  678. // that.$refs.supermapTaskDialog.dynamicPlotting()//弹出动态绘制窗口,防止截图位置改变
  679. that.$refs.supermapTaskDialog.clearM(false)
  680. that.$refs.supermapTaskDialog.setMarkersRadius([markersMap])
  681. that.$refs.supermapTaskDialog.dropLocation(res.data.catalogue.latitude, res.data
  682. .catalogue.longitude)
  683. }, 1000)
  684. })
  685. },
  686. selectTaskList: async function() {
  687. //获取任务列表
  688. selectTaskBO().then(res => {
  689. this.taskList = res.data
  690. this.taskCount = res.data.length
  691. })
  692. },
  693. selectMessageById(id) {
  694. selectMessageById(id).then(response => {
  695. /** 获取消息列表 */
  696. this.selectMessageList();
  697. });
  698. },
  699. /** 获取消息列表 */
  700. selectMessageList(){
  701. selectMessageList(Cookies.get("userId")).then(response => {
  702. this.messageList = response.data
  703. this.messageCount = res.data.length
  704. });
  705. },
  706. handleCheckedCitiesChangeBan(value) {
  707. this.choseLayerSwitchingList(this.banCheckList)
  708. },
  709. handleCheckedCitiesChangeChang(value) {
  710. this.choseLayerSwitchingList(this.changCheckList)
  711. },
  712. refresh() {
  713. window.location.reload()
  714. },
  715. showDialog(click) {
  716. window.showDialog(click)
  717. },
  718. choseLayerSwitching(url, isClear) {
  719. window.choseLayerSwitching(url, isClear)
  720. },
  721. choseLayerSwitchingList(urlList) { //选择图层(传递数组)
  722. window.choseLayerSwitchingList(urlList)
  723. },
  724. forestban() {
  725. window.forestban()
  726. console.log('林班')
  727. },
  728. forestchang() {
  729. window.forestchang()
  730. console.log('林场')
  731. },
  732. closeBanChild() {
  733. this.banCheckList = []
  734. this.showBanChild = false
  735. },
  736. closeChangChild() {
  737. this.changCheckList = []
  738. this.showChangChild = false
  739. },
  740. //图例收起弹出
  741. btmIndent() {
  742. if (this.btmTipIndent == '') {
  743. this.btmTipIndent = 'btm-tip-to-right'
  744. } else if (this.btmTipIndent == 'btm-tip-to-right') {
  745. this.btmTipIndent = ''
  746. }
  747. },
  748. searchFilterchang(filterchang) {
  749. //林场列表搜索
  750. let searchFilterchangnew = []
  751. if (filterchang != null && filterchang != '') {
  752. for (var i = 0; i < this.filterchangListAll.length; i++) {
  753. if (this.filterchangListAll[i].farmName.indexOf(filterchang) > -1) {
  754. searchFilterchangnew.push(this.filterchangListAll[i])
  755. }
  756. }
  757. this.filterchangList = searchFilterchangnew
  758. } else {
  759. this.filterchangList = this.filterchangListAll
  760. }
  761. },
  762. //标记警报
  763. updateAlert() {
  764. this.eventWarn = true;
  765. },
  766. updateAlertFalse(){
  767. this.eventWarn = false;
  768. this.$emit('stopAudio');
  769. }
  770. }
  771. }
  772. </script>
  773. <style rel="stylesheet/scss" lang="scss" scoped>
  774. @import '@/assets/styles/base.scss';
  775. .dotClass {
  776. width: 10px;
  777. height: 10px;
  778. border-radius: 50%;
  779. display: block;
  780. margin: -5px;
  781. }
  782. .redClass {
  783. background-color: red;
  784. width: 10px;
  785. height: 10px;
  786. border-radius: 50%;
  787. display: block;
  788. }
  789. .btm-box {
  790. width: 100%;
  791. height: auto;
  792. background: linear-gradient($btmMemu);
  793. position: absolute;
  794. z-index: 999;
  795. bottom: 0;
  796. height: 2.5rem;
  797. display: flex;
  798. align-items: center;
  799. z-index: 9999;
  800. .light {
  801. position: absolute;
  802. top: -.5rem;
  803. }
  804. .btm-left {
  805. position: absolute;
  806. font-size: .7rem;
  807. height: 2rem;
  808. line-height: 2rem;
  809. border: 1px $searchBorder;
  810. border-left: none;
  811. color: $inBlue;
  812. display: flex;
  813. -webkit-transform: translateX(-21rem) !important;
  814. transform: translateX(-21rem) !important;
  815. transition: all 0.5s ease-in-out !important;
  816. .btm-legend {
  817. height: 2rem;
  818. text-align: center;
  819. color: $inBlue;
  820. padding: 0 .5rem;
  821. cursor: pointer;
  822. }
  823. .btm-legend:hover {
  824. background-color: $tipHover;
  825. color: $white;
  826. }
  827. .btm-left-tip {
  828. display: flex;
  829. align-items: center;
  830. margin: 0 .5rem;
  831. .btm-left-block {
  832. width: 1rem;
  833. height: 1rem;
  834. margin-right: .3rem;
  835. border-radius: .2rem;
  836. }
  837. .btm-left-state-c1 {
  838. background-color: $eventStateColor-xsb;
  839. }
  840. .btm-left-state-c2 {
  841. background-color: $eventStateColor-cb;
  842. }
  843. .btm-left-state-c3 {
  844. background-color: $eventStateColor-yqs;
  845. }
  846. .btm-left-state-c4 {
  847. background-color: $eventStateColor-ld;
  848. }
  849. .btm-left-state-c5 {
  850. background-color: $eventStateColor-bj;
  851. }
  852. .btm-left-state-c6 {
  853. background-color: $eventStateColor-tb;
  854. }
  855. }
  856. }
  857. .btm-tip-to-right {
  858. -webkit-transform: translateX(0) !important;
  859. transform: translateX(0) !important;
  860. transition: all 0.5s ease-in-out !important;
  861. }
  862. .bottom-menu-normal {
  863. max-width: 70%;
  864. padding: 0 3rem;
  865. position: absolute;
  866. left: 50%;
  867. transform: translateX(-50%);
  868. bottom: 0;
  869. z-index: 999;
  870. border-radius: 5px;
  871. display: flex;
  872. justify-content: center;
  873. align-items: center;
  874. // background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
  875. // background-size: cover;
  876. .btm-m-con {
  877. position: relative;
  878. color: $inBlue;
  879. font-size: .5rem;
  880. padding: .6rem 1rem;
  881. display: flex;
  882. align-items: center;
  883. justify-content: center;
  884. -webkit-transform: translateY(0);
  885. transform: translateY(0);
  886. transition: all 0.2s ease-in-out;
  887. cursor: pointer;
  888. white-space: nowrap;
  889. i {
  890. font-size: 1rem;
  891. color: $inBlue;
  892. text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
  893. margin-right: 0.2rem;
  894. }
  895. .nav-child {
  896. text-shadow: none !important;
  897. position: absolute;
  898. bottom: 3rem;
  899. border: 1px solid saddlebrown;
  900. padding: .5rem;
  901. -moz-border-radius-topleft: 0;
  902. -moz-border-radius-bottomright: 0;
  903. background-color: $barBgc;
  904. box-shadow: $barShadow;
  905. border: 1px $barBorder;
  906. left: 50%;
  907. transform: translateX(-50%);
  908. color: $inBlue;
  909. .nav-child-btn {
  910. padding: .2rem;
  911. }
  912. .forestban {
  913. display: flex;
  914. .forestban-con {
  915. width: 20rem;
  916. height: 20rem;
  917. overflow-y: scroll;
  918. border: 1px solid rgba(51, 70, 127, 0.7);
  919. }
  920. .forestban-right {
  921. width: 10rem;
  922. height: 20rem;
  923. overflow-y: scroll;
  924. padding: 0 1rem;
  925. .el-checkbox-group {
  926. display: flex;
  927. flex-direction: column;
  928. label {
  929. padding: .4rem 0;
  930. }
  931. .el-checkbox {
  932. color: $white;
  933. }
  934. }
  935. }
  936. }
  937. }
  938. }
  939. .btm-m-con:hover,
  940. .on {
  941. text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
  942. -webkit-transform: translateX(0.2rem);
  943. transform: translateX(0.2rem);
  944. transition: all 0.2s ease-in-out;
  945. .nav-child {
  946. text-shadow: none !important;
  947. }
  948. i {
  949. color: $inBlueHover;
  950. text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
  951. }
  952. }
  953. }
  954. .btm-right {
  955. position: absolute;
  956. font-size: .7rem;
  957. height: 2rem;
  958. display: flex;
  959. right: 1rem;
  960. align-items: center;
  961. .el-badge {
  962. display: flex !important;
  963. margin-left: 1.5rem;
  964. button {
  965. padding: 0 .3rem;
  966. height: 1.5rem;
  967. background-color: #112543;
  968. color: $inBlue;
  969. border: 1px $searchBorder;
  970. }
  971. }
  972. .el-badge:hover {
  973. -webkit-transform: translateX(0.1rem);
  974. transform: translateX(0.1rem);
  975. transition: all 0.2s ease-in-out;
  976. button {
  977. text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
  978. }
  979. }
  980. }
  981. }
  982. .btm-r-pop-info {
  983. display: flex;
  984. width: 35rem;
  985. flex-direction: column;
  986. max-height: 85vh;
  987. min-height: fit-content;
  988. overflow-y: scroll;
  989. padding: 1rem;
  990. .btm-r-pop-info-box:hover {
  991. box-shadow: $shadowListHover;
  992. color: $inBlue;
  993. border: 1px $countBorder;
  994. }
  995. .btm-r-pop-info-box {
  996. width: 100%;
  997. display: flex;
  998. flex-direction: column;
  999. background-color: $deepBG;
  1000. padding: .5rem;
  1001. border-radius: .5rem;
  1002. color: $inBlue;
  1003. border: 1px $searchBorder;
  1004. margin-bottom: 1rem;
  1005. .btm-r-pop-info-tit {
  1006. display: flex;
  1007. padding: .5rem;
  1008. h3 {
  1009. font-weight: bolder;
  1010. }
  1011. }
  1012. .btm-r-pop-info-con {
  1013. padding: .5rem;
  1014. display: flex;
  1015. flex-direction: column;
  1016. border-top: 1px $searchBorder;
  1017. border-bottom: 1px $searchBorder;
  1018. .btm-r-pop-info-list {
  1019. display: flex;
  1020. padding: .3rem 0;
  1021. .btm-r-pop-info-list-name {
  1022. width: 3.6rem;
  1023. text-align: right;
  1024. margin-right: 1rem;
  1025. }
  1026. .btm-r-pop-info-list-text {}
  1027. }
  1028. }
  1029. .btm-r-pop-info-btm {
  1030. padding: .5rem;
  1031. display: flex;
  1032. justify-content: space-between;
  1033. .btm-r-pop-info-btm-btn {
  1034. button {
  1035. padding: .5rem;
  1036. }
  1037. }
  1038. }
  1039. }
  1040. }
  1041. //警铃
  1042. .fire-tip {
  1043. text-align: center;
  1044. width: 100%;
  1045. font-size: 44px;
  1046. color: #ff0000;
  1047. text-shadow: 0 0 1px #ffffff;
  1048. }
  1049. .fire-address {
  1050. text-align: center;
  1051. width: 100%;
  1052. font-size: 14px;
  1053. color: rgba(255, 255, 255, 0.8);
  1054. margin-top: 44px;
  1055. }
  1056. .fire-handle {
  1057. display: block;
  1058. text-align: center;
  1059. background: #00BFF0;
  1060. color: #ffffff;
  1061. border-radius: 20px;
  1062. font-size: 14px;
  1063. width: 80px;
  1064. height: 40px;
  1065. line-height: 40px;
  1066. margin: 24px auto;
  1067. text-decoration: none
  1068. }
  1069. .fire-handle:hover {
  1070. background: #06a2ca;
  1071. }
  1072. .bell {
  1073. position: absolute;
  1074. right: 10px;
  1075. bottom:-20px;
  1076. width: 100%;
  1077. height: 320px;
  1078. z-index: 999;
  1079. }
  1080. .bell canvas {
  1081. display: block;
  1082. position: absolute;
  1083. left: 0;
  1084. top: -9px;
  1085. }
  1086. /* 保持大小不变的小圆圈 */
  1087. .dot {
  1088. position: absolute;
  1089. width: 96px;
  1090. height: 96px;
  1091. left: 160px;
  1092. top: 160px;
  1093. background: url('../assets/images/bell.gif') no-repeat;
  1094. // background: url(.) no-repeat;
  1095. background-size: 100%;
  1096. z-index: 200;
  1097. }
  1098. /* 产生动画(向外扩散变大)的圆圈 */
  1099. .pulse,
  1100. .pulse-big {
  1101. position: absolute;
  1102. width: 420px;
  1103. height: 420px;
  1104. border: 2px solid #EF2D02;
  1105. background: rgba(239, 45, 2, 0.8);
  1106. border-radius: 50%;
  1107. z-index: 100;
  1108. opacity: 0;
  1109. }
  1110. .pulse {
  1111. background: rgba(239, 45, 2, 0.6) !important;
  1112. -webkit-animation: warn 0.9s ease-out;
  1113. -moz-animation: warn 0.9s ease-out;
  1114. animation: warn 0.9s ease-out;
  1115. -webkit-animation-iteration-count: infinite;
  1116. -moz-animation-iteration-count: infinite;
  1117. animation-iteration-count: infinite;
  1118. box-shadow: 1px 1px 30px #EF2D02;
  1119. }
  1120. .pulse-big {
  1121. background: rgba(239, 45, 2, 0.6) !important;
  1122. -webkit-animation: warn1 0.9s ease-out;
  1123. -moz-animation: warn1 0.9s ease-out;
  1124. animation: warn1 0.9s ease-out;
  1125. -webkit-animation-iteration-count: infinite;
  1126. -moz-animation-iteration-count: infinite;
  1127. animation-iteration-count: infinite;
  1128. box-shadow: 1px 1px 30px #EF2D02;
  1129. }
  1130. @keyframes warn {
  1131. 0% {
  1132. -moz-transform: scale(0);
  1133. transform: scale(0);
  1134. opacity: 1;
  1135. }
  1136. 100% {
  1137. -moz-transform: scale(1);
  1138. transform: scale(1);
  1139. opacity: 0;
  1140. }
  1141. }
  1142. @keyframes warn1 {
  1143. 0% {
  1144. -o-transform: scale(0);
  1145. transform: scale(0);
  1146. opacity: 1;
  1147. }
  1148. 100% {
  1149. -o-transform: scale(0.6);
  1150. transform: scale(0.6);
  1151. opacity: 0;
  1152. }
  1153. }
  1154. </style>