datacenter.vue 61 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514
  1. <!--信息中心-->
  2. <template>
  3. <div class="visual-con">
  4. <!--头部-->
  5. <vheader></vheader>
  6. <!--主体-->
  7. <div class="visual-body">
  8. <!-- 左侧 -->
  9. <div class="leftbar w-10" ref="left" style="width:12rem !important;height: 80vh;overflow-y: hidden;">
  10. <div class="forthis">
  11. <dv-border-box-13
  12. backgroundColor="rgba(12, 19, 38, .90)"
  13. style="padding-bottom: 1rem;height: 80vh;"
  14. >
  15. <img
  16. src="../assets/images/integrated/light.png"
  17. style="width: 100%; margin-top: 0.4rem"
  18. />
  19. <div class="sj-search" v-show="showSearch">
  20. <el-input
  21. v-model="searchName"
  22. placeholder="请输入名称"
  23. @keyup.enter.native="searchByName()"
  24. clearable
  25. size="small"
  26. prefix-icon="el-icon-search"
  27. />
  28. </div>
  29. <div class="i-list-con" style="height: 71vh;">
  30. <div class="d-l-con-icon">
  31. <div
  32. class="icon-con"
  33. :class="{ on: iconCurrentIndex == item.resourceTable }"
  34. v-for="(item, index) in resourcesList"
  35. v-on:click="fireControlViewPoint(item.type, searchName)"
  36. >
  37. <div
  38. class="iconfont icon icon-normal"
  39. :class="item.icon"
  40. :style="'background:' + item.bg"
  41. ></div>
  42. <div class="icon-text">
  43. <h6>{{ item.num }}</h6>
  44. <h5>{{ item.name }}</h5>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </dv-border-box-13>
  50. </div>
  51. </div>
  52. <!-- 地图 -->
  53. <supermap
  54. ref="supermap"
  55. style="width: 100%; height: 100vh"
  56. @sewageOutletClick="sewageOutletClick"
  57. ></supermap>
  58. <!-- <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
  59. <!-- </button>-->
  60. <!-- 右侧 -->
  61. <div class="rightbar" ref="right" v-if="showSearch == true">
  62. <div class="forthis">
  63. <dv-border-box-13
  64. backgroundColor="rgba(12, 19, 38, .90)"
  65. style="padding-bottom: 1rem"
  66. >
  67. <img
  68. src="../assets/images/integrated/light.png"
  69. style="width: 100%; margin-top: 0.4rem"
  70. />
  71. <div class="this-title">
  72. <span>数据分布</span>
  73. <dv-decoration-3
  74. style="width: 150px; height: 15px; margin-right: 1rem"
  75. />
  76. </div>
  77. <div class="i-list-con h-73">
  78. <div class="overflow-y" style="height: 39vh">
  79. <div
  80. class="d-l-con"
  81. :class="{ on: listCurrentIndex == item.deptId }"
  82. v-for="(item, index) in deptGroupList"
  83. v-on:click="indentleftByDeptIdSetMarkers(item.deptId)"
  84. >
  85. <div class="d-l-l-text">
  86. <i class="i-small"></i>
  87. <h4>{{ item.deptName }}</h4>
  88. </div>
  89. <div class="d-l-l-count">{{ item.count }}</div>
  90. </div>
  91. </div>
  92. <div class="overflow-y" style="height: 34vh">
  93. <div id="data-chart" style="width: 100%; height: 34vh"></div>
  94. </div>
  95. </div>
  96. </dv-border-box-13>
  97. </div>
  98. </div>
  99. <vBottomMenu ref="bottomMenu"></vBottomMenu>
  100. </div>
  101. <eventLocation ref="eventLocation"></eventLocation>
  102. <TVWall ref="TVWall"></TVWall>
  103. </div>
  104. </template>
  105. <script>
  106. import {
  107. getResource,
  108. fireControlViewList,
  109. getResourcePoint,
  110. fireControlViewPoint,
  111. getResourcePointByDeptId,
  112. getPointByDeptId,
  113. } from "@/api/datacenter";
  114. import supermap from "@/components/supermap-2.5d"; //超图
  115. import vheader from "@/components/v-header.vue"; //一体化共用头部
  116. import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
  117. import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
  118. import TVWall from "@/components/TVWall.vue"; //电视墙弹窗
  119. import { getIconBg } from "@/api/components/sookaMapIcon";
  120. import {getUserProfile} from "@/api/system/user"; //资源底色控制文件
  121. // import echarts from 'echarts'
  122. let echarts = require("echarts");
  123. export default {
  124. components: {
  125. supermap,
  126. vheader,
  127. vBottomMenu,
  128. eventLocation,
  129. TVWall,
  130. },
  131. created() {
  132. /** ----------------------------------底部按钮公用组件开始------------------------------------- */
  133. window.showDialog = this.showDialog;
  134. window.choseLayerSwitching = this.choseLayerSwitching;
  135. window.choseLayerSwitchingList = this.choseLayerSwitchingList;
  136. /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  137. },
  138. mounted() {
  139. // 初始化地图数据
  140. this.getSuperMapUrl();
  141. setTimeout(() => {
  142. // this.getResource()
  143. this.fireControlViewList();
  144. }, 2000)
  145. this.bottomMenuList(); //获取底部公共组件消息和任务
  146. },
  147. data() {
  148. return {
  149. // 搜索框
  150. showSearch: false,
  151. // 搜索名称
  152. searchName: undefined,
  153. // 搜索类型
  154. searchType: undefined,
  155. iconCurrentIndex: "",
  156. listCurrentIndex: "",
  157. markersList: [],
  158. iframeBoo: true,
  159. open: false,
  160. iframeVue: null,
  161. activeName: "info",
  162. radio: "1",
  163. //类型
  164. resourceTable: "",
  165. //左侧资源
  166. resourcesList: [],
  167. //右侧资源
  168. deptGroupList: [],
  169. source: [],
  170. };
  171. },
  172. watch: {
  173. // // 根据名称筛选资源点位
  174. // searchName(searchName) {
  175. // // alert(val)
  176. // this.fireControlViewPoint(this.searchType, searchName);
  177. // },
  178. },
  179. methods: {
  180. //初始化地图数据
  181. getSuperMapUrl(){
  182. getUserProfile().then(response => {
  183. let mapDeptId=response.mapDeptId
  184. let num = 0;
  185. if (mapDeptId == "365") {
  186. num = 0;
  187. } else if (mapDeptId == "369") {
  188. num = 1;
  189. } else if (mapDeptId == "371") {
  190. num = 2;
  191. } else if (mapDeptId == "373") {
  192. num = 3;
  193. } else if (mapDeptId == "372") {
  194. num = 4;
  195. } else if (mapDeptId == "370") {
  196. num = 5;
  197. }
  198. this.$refs.supermap.removeAllviewer(num, -1);
  199. });
  200. },
  201. // 根据名称筛选资源点位
  202. searchByName() {
  203. this.$modal.msgSuccess("正在查询,请稍后...");
  204. this.fireControlViewPoint(this.searchType, this.searchName);
  205. },
  206. /** ----------------------------------底部按钮公用组件开始------------------------------------- */
  207. bottomMenuList() {
  208. this.$refs.bottomMenu.selectTaskList(); //获取任务列表
  209. this.$refs.bottomMenu.selectMessageList(); //获取消息列表
  210. },
  211. showDialog(click) {
  212. if (click == "eventLocation") {
  213. this.$refs.eventLocation.showEventLocation();
  214. this.$refs.bottomMenu.showMeasure = false;
  215. this.$refs.bottomMenu.showChild = false;
  216. } else if (click == "editableLayers") {
  217. this.$refs.bottomMenu.showChild = false;
  218. if (!this.$refs.bottomMenu.showMeasure) {
  219. this.$refs.bottomMenu.showMeasure = true;
  220. } else {
  221. this.$refs.bottomMenu.showMeasure = false;
  222. }
  223. } else if (click == "layerSwitching") {
  224. this.$refs.bottomMenu.showMeasure = false;
  225. if (!this.$refs.bottomMenu.showChild) {
  226. this.$refs.bottomMenu.showChild = true;
  227. } else {
  228. this.$refs.bottomMenu.showChild = false;
  229. }
  230. } else if (click == "TVWall") {
  231. this.$refs.TVWall.showTVWall();
  232. this.$refs.bottomMenu.showMeasure = false;
  233. this.$refs.bottomMenu.showChild = false;
  234. }
  235. },
  236. //选择图层
  237. choseLayerSwitching(url, isClear) {
  238. this.$refs.supermap.layerSwitching(url, isClear);
  239. },
  240. //选择图层(传递数组)
  241. choseLayerSwitchingList(urlList) {
  242. this.$refs.supermap.layerSwitchingList(urlList);
  243. },
  244. /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  245. //数据分布chart
  246. dataChat() {
  247. // 基于准备好的dom,初始化echarts实例
  248. let myChart = echarts.init(document.getElementById("data-chart"));
  249. // 绘制图表
  250. const dfColor = ["#92E1FF", "#0097FB", "#30ECA6", "#FFC227", "#FF4848"];
  251. myChart.setOption({
  252. dataset: {
  253. source: this.source,
  254. },
  255. tooltip: {
  256. trigger: "item",
  257. },
  258. dataZoom: [
  259. {
  260. show: this.source.length > 8 ? true : false,
  261. // show: true,
  262. type: "slider",
  263. yAxisIndex: 0,
  264. left: 0,
  265. start: 0,
  266. end: this.source.length > 8 ? 8 : 100,
  267. width: 15,
  268. },
  269. ],
  270. grid: {
  271. top: "5%",
  272. left: "12%",
  273. // right: "4%",
  274. bottom: "-15%",
  275. width: "75%",
  276. containLabel: true,
  277. },
  278. xAxis: {
  279. show: false,
  280. type: "value",
  281. },
  282. yAxis: {
  283. type: "category", // 不设置类目轴,抽离的dataset数据展示不出来
  284. inverse: true,
  285. axisLabel: {
  286. show: true,
  287. textStyle: {
  288. color: "#5deaff",
  289. fontSize: "12",
  290. },
  291. },
  292. splitLine: {
  293. show: false,
  294. },
  295. axisTick: {
  296. show: false,
  297. },
  298. axisLine: {
  299. show: false,
  300. },
  301. },
  302. series: [
  303. {
  304. type: "bar",
  305. animationCurve: "easeOutBack",
  306. barWidth: 5,
  307. label: {
  308. show: true,
  309. position: "right",
  310. offset: [0, 0],
  311. color: "#88dfd5",
  312. // fontSize: "12",
  313. style: {
  314. fill: "#fff",
  315. },
  316. },
  317. backgroundBar: {
  318. show: true,
  319. style: {
  320. fill: "rgba(97,152,255,0.20)",
  321. },
  322. },
  323. barStyle: {
  324. stroke: "rgba(41,244,236,1)",
  325. },
  326. gradient: {
  327. color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
  328. },
  329. itemStyle: {
  330. label: {
  331. show: true,
  332. },
  333. labelLine: {
  334. show: false,
  335. },
  336. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  337. {
  338. offset: 0,
  339. color: "rgba(41,244,236,0)",
  340. },
  341. {
  342. offset: 1,
  343. color: "rgba(41,244,236,.5)",
  344. },
  345. ]),
  346. borderColor: "#a2f9f7",
  347. shadowBlur: 16,
  348. shadowColor: "#a2f9f7",
  349. },
  350. },
  351. ],
  352. });
  353. },
  354. // 弹层方法
  355. showEventInfo1() {
  356. this.eventInfoVisible1 = true;
  357. },
  358. showEventInfo2() {
  359. this.eventInfoVisible2 = true;
  360. },
  361. fireControlViewList() {
  362. let that = this;
  363. fireControlViewList().then(function (res) {
  364. for (let i = 1; i < res.data.length; i++) {
  365. that.resourcesList.push(res.data[i]);
  366. }
  367. //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
  368. that.resourcesList.forEach(function (data, index) {
  369. let icon =
  370. "sj" +
  371. "-" +
  372. "icon" +
  373. "-" +
  374. data.type.replaceAll("_", "-").replaceAll("@", "-");
  375. console.log("icon_" + (index + 1) + "=", icon);
  376. that.$set(that.resourcesList[index], "icon", icon);
  377. //每个图标对应固定颜色
  378. that.$set(that.resourcesList[index], "bg", getIconBg(icon));
  379. // if(index < 5){
  380. // // that.fireControlViewPoint(data.type, 'undefined');
  381. // that.fireControlViewPoint(data.type, '所有');
  382. // }
  383. });
  384. //数据自动落点开始
  385. let maxCount = 100; //落点数超过这个数的资源不落点
  386. let list = res.data;
  387. let counts = [];
  388. let points = [];
  389. let types = [];
  390. for (let i = 0; i < list.length; i++) {
  391. //获取符合要求的类型及数量
  392. if (list[i].num <= maxCount) {
  393. counts.push(list[i].num);
  394. points.push({
  395. type: list[i].type,
  396. count: list[i].num,
  397. });
  398. }
  399. }
  400. for (let i = 0; i < points.length; i++) {
  401. if (points[i].count == Math.max(...counts)) {
  402. types.push(points[i].type);
  403. let countsTemp = [];
  404. for (let j = 0; j < counts.length; j++) {
  405. if (counts[j] != Math.max(...counts)) {
  406. countsTemp.push(counts[j]);
  407. }
  408. }
  409. counts = countsTemp;
  410. break;
  411. }
  412. }
  413. for (let i = 0; i < points.length; i++) {
  414. if (points[i].count == Math.max(...counts)) {
  415. types.push(points[i].type);
  416. break;
  417. }
  418. }
  419. for (let i = 0; i < types.length; i++) {
  420. that.fireControlViewPoint(types[i], "所有");
  421. }
  422. //数据自动落点结束
  423. });
  424. },
  425. /* getResource() {
  426. let that = this
  427. //获取左侧菜单列表
  428. getResource().then(res => {
  429. that.resourcesList = res.data
  430. //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
  431. res.data.forEach(function(data, index) {
  432. that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.icon.split('_').slice(-1))
  433. })
  434. })
  435. },*/
  436. fireControlViewPoint(resourceTable, name) {
  437. // 搜索框
  438. // if(name == 'undefined' && this.showSearch == false){
  439. // if(name == '所有' && this.showSearch == false){
  440. if (name == "所有") {
  441. name = undefined;
  442. } else {
  443. this.showSearch = true;
  444. }
  445. // console.log("name=", name = "111111111235464")
  446. console.log("name=", name);
  447. console.log("this.showSearch=", this.showSearch);
  448. // 搜索类型
  449. this.searchType = resourceTable;
  450. let that = this;
  451. that.resourceTable = resourceTable;
  452. that.markersList = [];
  453. that.source = [];
  454. fireControlViewPoint(resourceTable, name).then((res) => {
  455. let pointList = res.data.pointList;
  456. that.deptGroupList = res.data.deptList;
  457. if (res.data.deptList != null && res.data.deptList.length > 0) {
  458. for (let i = 0; i < res.data.deptList.length; i++) {
  459. let aa = [
  460. res.data.deptList[i].deptName,
  461. res.data.deptList[i].count,
  462. ];
  463. that.source.push(aa);
  464. }
  465. }
  466. if (res.data.pointList != null && res.data.pointList.length > 0) {
  467. for (let i = 0; i < res.data.pointList.length; i++) {
  468. let markersMap = {
  469. lng: res.data.pointList[i].longitude,
  470. lat: res.data.pointList[i].latitude,
  471. icon: "marker",
  472. bindPopupHtml: "",
  473. click: "",
  474. name: i,
  475. keepBindPopup: false,
  476. isAggregation: false,
  477. };
  478. that.markersList.push(
  479. this.getMarkersMap(
  480. resourceTable,
  481. markersMap,
  482. res.data.pointList[i]
  483. )
  484. );
  485. // that.markersList.push(markersMap)
  486. }
  487. }
  488. if (this.showSearch == true) {
  489. this.dataChat();
  490. }
  491. that.$refs.supermap.clearM(false);
  492. that.$refs.supermap.setMarkers(that.markersList);
  493. });
  494. },
  495. getMarkersMap(resourceTable, markersMap, item) {
  496. if (resourceTable == "centerdata_t_firecontrol_basic_linkage_force") {
  497. //基本联动力量
  498. markersMap.icon =
  499. "sj-icon-map-centerdata-t-firecontrol-basic-linkage-force";
  500. markersMap.lng = item.longitude;
  501. markersMap.lat = item.latitude;
  502. markersMap.click = "sewageOutletClick";
  503. markersMap.parameter = item;
  504. markersMap.bindPopupHtml =
  505. '<div class="map-tip">' +
  506. "<span>" +
  507. ' <div class="d-l-con">' +
  508. ' <div class="d-l-l-text">' +
  509. " <h4>经纬度:" +
  510. (item.longitude ? item.longitude : "") +
  511. "," +
  512. (item.latitude ? item.latitude : "") +
  513. "</h4>" +
  514. " </div>" +
  515. " </div>" +
  516. " </span>" +
  517. "<span>" +
  518. ' <div class="d-l-con">' +
  519. ' <div class="d-l-l-text">' +
  520. " <h4>单位名称:" +
  521. (item.company ? item.company : "") +
  522. "</h4>" +
  523. " </div>" +
  524. " </div>" +
  525. " </span>" +
  526. "</div>";
  527. } else if (resourceTable == "centerdata_t_firecontrol_fire_force") {
  528. //消防力量
  529. markersMap.icon = "sj-icon-map-centerdata-t-firecontrol-fire-force";
  530. markersMap.lng = item.longitude;
  531. markersMap.lat = item.latitude;
  532. markersMap.click = "sewageOutletClick";
  533. markersMap.parameter = item;
  534. markersMap.bindPopupHtml =
  535. '<div class="map-tip">' +
  536. "<span>" +
  537. ' <div class="d-l-con">' +
  538. ' <div class="d-l-l-text">' +
  539. " <h4>经纬度:" +
  540. (item.longitude ? item.longitude : "") +
  541. "," +
  542. (item.latitude ? item.latitude : "") +
  543. "</h4>" +
  544. " </div>" +
  545. " </div>" +
  546. " </span>" +
  547. "<span>" +
  548. ' <div class="d-l-con">' +
  549. ' <div class="d-l-l-text">' +
  550. " <h4>地址:" +
  551. (item.address ? item.address : "") +
  552. "</h4>" +
  553. " </div>" +
  554. " </div>" +
  555. " </span>" +
  556. "<span>" +
  557. ' <div class="d-l-con">' +
  558. ' <div class="d-l-l-text">' +
  559. " <h4>负责人:" +
  560. (item.principal ? item.principal : "") +
  561. "</h4>" +
  562. " </div>" +
  563. " </div>" +
  564. " </span>" +
  565. "<span>" +
  566. ' <div class="d-l-con">' +
  567. ' <div class="d-l-l-text">' +
  568. " <h4>联系电话:" +
  569. (item.contact ? item.contact : "") +
  570. "</h4>" +
  571. " </div>" +
  572. " </div>" +
  573. " </span></div>";
  574. } else if (resourceTable == "centerdata_t_forest_waterintake") {
  575. //取水口
  576. markersMap.icon = "sj-icon-map-centerdata-t-forest-waterintake";
  577. markersMap.lng = item.longitude;
  578. markersMap.lat = item.latitude;
  579. markersMap.click = "sewageOutletClick";
  580. markersMap.parameter = item;
  581. markersMap.bindPopupHtml =
  582. '<div class="map-tip">' +
  583. "<span>" +
  584. ' <div class="d-l-con">' +
  585. ' <div class="d-l-l-text">' +
  586. " <h4>经纬度:" +
  587. (item.longitude ? item.longitude : "") +
  588. "," +
  589. (item.latitude ? item.latitude : "") +
  590. "</h4>" +
  591. " </div>" +
  592. " </div>" +
  593. " </span>" +
  594. "<span>" +
  595. ' <div class="d-l-con">' +
  596. ' <div class="d-l-l-text">' +
  597. " <h4>取水口名称:" +
  598. (item.name ? item.name : "") +
  599. "</h4>" +
  600. " </div>" +
  601. " </div>" +
  602. " </span>" +
  603. "<span>" +
  604. ' <div class="d-l-con">' +
  605. ' <div class="d-l-l-text">' +
  606. " <h4>负责人:" +
  607. (item.contacts ? item.contacts : "") +
  608. "</h4>" +
  609. " </div>" +
  610. " </div>" +
  611. " </span>" +
  612. (item.phone
  613. ? "<span>" +
  614. ' <div class="d-l-con">' +
  615. ' <div class="d-l-l-text">' +
  616. " <h4>联系电话:" +
  617. item.phone +
  618. "</h4>" +
  619. " </div>" +
  620. " </div>" +
  621. " </span></div>"
  622. : "");
  623. } else if (resourceTable == "centerdata_t_forest_watercrane") {
  624. //水鹤
  625. markersMap.icon = "sj-icon-map-centerdata-t-forest-watercrane";
  626. markersMap.lng = item.longitude;
  627. markersMap.lat = item.latitude;
  628. markersMap.click = "sewageOutletClick";
  629. markersMap.parameter = item;
  630. markersMap.bindPopupHtml =
  631. '<div class="map-tip">' +
  632. "<span>" +
  633. ' <div class="d-l-con">' +
  634. ' <div class="d-l-l-text">' +
  635. " <h4>经纬度:" +
  636. (item.longitude ? item.longitude : "") +
  637. "," +
  638. (item.latitude ? item.latitude : "") +
  639. "</h4>" +
  640. " </div>" +
  641. " </div>" +
  642. " </span>" +
  643. "<span>" +
  644. ' <div class="d-l-con">' +
  645. ' <div class="d-l-l-text">' +
  646. " <h4>水鹤名称:" +
  647. (item.name ? item.name : "") +
  648. "</h4>" +
  649. " </div>" +
  650. " </div>" +
  651. " </span>" +
  652. "<span>" +
  653. ' <div class="d-l-con">' +
  654. ' <div class="d-l-l-text">' +
  655. " <h4>负责人:" +
  656. (item.contacts ? item.contacts : "") +
  657. "</h4>" +
  658. " </div>" +
  659. " </div>" +
  660. " </span>" +
  661. "<span>" +
  662. ' <div class="d-l-con">' +
  663. ' <div class="d-l-l-text">' +
  664. " <h4>联系电话:" +
  665. (item.phone ? item.phone : "") +
  666. "</h4>" +
  667. " </div>" +
  668. " </div>" +
  669. " </span></div>";
  670. } else if (
  671. resourceTable == "centerdata_t_forest_firehydrant@1" ||
  672. resourceTable == "centerdata_t_forest_firehydrant@2" ||
  673. resourceTable == "centerdata_t_forest_firehydrant@3"
  674. ) {
  675. //消火栓
  676. // markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-foam-liquid'
  677. let icon =
  678. "sj-icon-map-centerdata-t-forest-firehydrant-" +
  679. resourceTable.slice(-1);
  680. // sj-icon-map-centerdata-t-forest-firehydrant-1
  681. console.log("icon=", icon);
  682. markersMap.icon = icon;
  683. markersMap.lng = item.longitude;
  684. markersMap.lat = item.latitude;
  685. markersMap.click = "sewageOutletClick";
  686. markersMap.parameter = item;
  687. markersMap.bindPopupHtml =
  688. '<div class="map-tip">' +
  689. "<span>" +
  690. ' <div class="d-l-con">' +
  691. ' <div class="d-l-l-text">' +
  692. " <h4>经纬度:" +
  693. (item.longitude ? item.longitude : "") +
  694. "," +
  695. (item.latitude ? item.latitude : "") +
  696. "</h4>" +
  697. " </div>" +
  698. " </div>" +
  699. " </span>" +
  700. "<span>" +
  701. ' <div class="d-l-con">' +
  702. ' <div class="d-l-l-text">' +
  703. " <h4>消火栓名称:" +
  704. (item.name ? item.name : "") +
  705. "</h4>" +
  706. " </div>" +
  707. " </div>" +
  708. " </span>" +
  709. "<span>" +
  710. ' <div class="d-l-con">' +
  711. ' <div class="d-l-l-text">' +
  712. " <h4>地址:" +
  713. (item.firehydrant_address ? item.firehydrant_address : "") +
  714. "</h4>" +
  715. " </div>" +
  716. " </div>" +
  717. " </span>" +
  718. "<span>" +
  719. ' <div class="d-l-con">' +
  720. ' <div class="d-l-l-text">' +
  721. " <h4>负责人:" +
  722. (item.contacts ? item.contacts : "") +
  723. "</h4>" +
  724. " </div>" +
  725. " </div>" +
  726. " </span>" +
  727. "<span>" +
  728. ' <div class="d-l-con">' +
  729. ' <div class="d-l-l-text">' +
  730. " <h4>联系电话:" +
  731. (item.phone ? item.phone : "") +
  732. "</h4>" +
  733. " </div>" +
  734. " </div>" +
  735. " </span></div>";
  736. } else if (resourceTable == "centerdata_t_firecontrol_fire_key_places") {
  737. //重点场所
  738. markersMap.icon =
  739. "sj-icon-map-centerdata-t-firecontrol-fire-key-places";
  740. markersMap.lng = item.longitude;
  741. markersMap.lat = item.latitude;
  742. markersMap.click = "sewageOutletClick";
  743. markersMap.parameter = item;
  744. markersMap.bindPopupHtml =
  745. '<div class="map-tip">' +
  746. "<span>" +
  747. ' <div class="d-l-con">' +
  748. ' <div class="d-l-l-text">' +
  749. " <h4>经纬度:" +
  750. (item.longitude ? item.longitude : "") +
  751. "," +
  752. (item.latitude ? item.latitude : "") +
  753. "</h4>" +
  754. " </div>" +
  755. " </div>" +
  756. " </span>" +
  757. "<span>" +
  758. ' <div class="d-l-con">' +
  759. ' <div class="d-l-l-text">' +
  760. " <h4>重点场所名称:" +
  761. (item.name ? item.name : "") +
  762. "</h4>" +
  763. " </div>" +
  764. " </div>" +
  765. " </span>" +
  766. "<span>" +
  767. ' <div class="d-l-con">' +
  768. ' <div class="d-l-l-text">' +
  769. " <h4>负责人:" +
  770. (item.person ? item.person : "") +
  771. "</h4>" +
  772. " </div>" +
  773. " </div>" +
  774. " </span>" +
  775. "<span>" +
  776. ' <div class="d-l-con">' +
  777. ' <div class="d-l-l-text">' +
  778. " <h4>联系电话:" +
  779. (item.phone ? item.phone : "") +
  780. "</h4>" +
  781. " </div>" +
  782. " </div>" +
  783. " </span></div>";
  784. } else if (
  785. resourceTable == "centerdata_t_firecontrol_fire_pressure_sensor"
  786. ) {
  787. //压力传感器
  788. markersMap.icon =
  789. "sj-icon-map-centerdata-t-firecontrol-fire-pressure-sensor";
  790. markersMap.lng = item.longitude;
  791. markersMap.lat = item.latitude;
  792. markersMap.click = "sewageOutletClick";
  793. markersMap.parameter = item;
  794. markersMap.bindPopupHtml =
  795. '<div class="map-tip">' +
  796. "<span>" +
  797. ' <div class="d-l-con">' +
  798. ' <div class="d-l-l-text">' +
  799. " <h4>经纬度:" +
  800. (item.longitude ? item.longitude : "") +
  801. "," +
  802. (item.latitude ? item.latitude : "") +
  803. "</h4>" +
  804. " </div>" +
  805. " </div>" +
  806. " </span>" +
  807. "<span>" +
  808. ' <div class="d-l-con">' +
  809. ' <div class="d-l-l-text">' +
  810. " <h4>压力传感器名称:" +
  811. (item.name ? item.name : "") +
  812. "</h4>" +
  813. " </div>" +
  814. " </div>" +
  815. " </span>" +
  816. "<span>" +
  817. ' <div class="d-l-con">' +
  818. ' <div class="d-l-l-text">' +
  819. " <h4>编号:" +
  820. (item.number ? item.number : "") +
  821. "</h4>" +
  822. " </div>" +
  823. " </div>" +
  824. " </span>" +
  825. "<span>" +
  826. ' <div class="d-l-con">' +
  827. ' <div class="d-l-l-text">' +
  828. " <h4>参数:" +
  829. (item.parameters ? item.parameters : "") +
  830. "</h4>" +
  831. " </div>" +
  832. " </div>" +
  833. " </span></div>";
  834. } else if (resourceTable == "centerdata_t_firecontrol_foam_liquid") {
  835. //泡沫液
  836. markersMap.icon = "sj-icon-map-centerdata-t-firecontrol-foam-liquid";
  837. markersMap.lng = item.longitude;
  838. markersMap.lat = item.latitude;
  839. markersMap.click = "sewageOutletClick";
  840. markersMap.parameter = item;
  841. markersMap.bindPopupHtml =
  842. '<div class="map-tip">' +
  843. "<span>" +
  844. ' <div class="d-l-con">' +
  845. ' <div class="d-l-l-text">' +
  846. " <h4>经纬度:" +
  847. (item.longitude ? item.longitude : "") +
  848. "," +
  849. (item.latitude ? item.latitude : "") +
  850. "</h4>" +
  851. " </div>" +
  852. " </div>" +
  853. " </span>" +
  854. "<span>" +
  855. ' <div class="d-l-con">' +
  856. ' <div class="d-l-l-text">' +
  857. " <h4>单位名称:" +
  858. (item.company ? item.company : "") +
  859. "</h4>" +
  860. " </div>" +
  861. " </div>" +
  862. " </span>" +
  863. "<span>" +
  864. ' <div class="d-l-con">' +
  865. ' <div class="d-l-l-text">' +
  866. " <h4>联系人:" +
  867. (item.contacts ? item.contacts : "") +
  868. "</h4>" +
  869. " </div>" +
  870. " </div>" +
  871. " </span>" +
  872. "<span>" +
  873. ' <div class="d-l-con">' +
  874. ' <div class="d-l-l-text">' +
  875. " <h4>联系电话:" +
  876. (item.contacts_phone ? item.contacts_phone : "") +
  877. "</h4>" +
  878. " </div>" +
  879. " </div>" +
  880. " </span></div>";
  881. } else if (resourceTable == "centerdata_t_firecontrol_fulltime_station") {
  882. //专职站
  883. markersMap.icon =
  884. "sj-icon-map-centerdata-t-firecontrol-fulltime-station";
  885. markersMap.lng = item.longitude;
  886. markersMap.lat = item.latitude;
  887. markersMap.click = "sewageOutletClick";
  888. markersMap.parameter = item;
  889. markersMap.bindPopupHtml =
  890. '<div class="map-tip">' +
  891. "<span>" +
  892. ' <div class="d-l-con">' +
  893. ' <div class="d-l-l-text">' +
  894. " <h4>经纬度:" +
  895. (item.longitude ? item.longitude : "") +
  896. "," +
  897. (item.latitude ? item.latitude : "") +
  898. "</h4>" +
  899. " </div>" +
  900. " </div>" +
  901. " </span>" +
  902. "<span>" +
  903. ' <div class="d-l-con">' +
  904. ' <div class="d-l-l-text">' +
  905. " <h4>地址:" +
  906. (item.address ? item.address : "") +
  907. "</h4>" +
  908. " </div>" +
  909. " </div>" +
  910. " </span>" +
  911. "<span>" +
  912. ' <div class="d-l-con">' +
  913. ' <div class="d-l-l-text">' +
  914. " <h4>负责人:" +
  915. (item.principal ? item.principal : "") +
  916. "</h4>" +
  917. " </div>" +
  918. " </div>" +
  919. " </span>" +
  920. "<span>" +
  921. ' <div class="d-l-con">' +
  922. ' <div class="d-l-l-text">' +
  923. " <h4>电话:" +
  924. (item.contacts_phone ? item.contacts_phone : "") +
  925. "</h4>" +
  926. " </div>" +
  927. " </div>" +
  928. " </span>" +
  929. "</div>";
  930. } else if (
  931. resourceTable == "centerdata_t_firecontrol_other_linkage_force"
  932. ) {
  933. //其他联动力量
  934. markersMap.icon =
  935. "sj-icon-map-centerdata-t-firecontrol-other-linkage-force";
  936. markersMap.lng = item.longitude;
  937. markersMap.lat = item.latitude;
  938. markersMap.click = "sewageOutletClick";
  939. markersMap.parameter = item;
  940. markersMap.bindPopupHtml =
  941. '<div class="map-tip">' +
  942. "<span>" +
  943. ' <div class="d-l-con">' +
  944. ' <div class="d-l-l-text">' +
  945. " <h4>经纬度:" +
  946. (item.longitude ? item.longitude : "") +
  947. "," +
  948. (item.latitude ? item.latitude : "") +
  949. "</h4>" +
  950. " </div>" +
  951. " </div>" +
  952. " </span>" +
  953. "<span>" +
  954. ' <div class="d-l-con">' +
  955. ' <div class="d-l-l-text">' +
  956. " <h4>单位名称:" +
  957. (item.company ? item.company : "") +
  958. "</h4>" +
  959. " </div>" +
  960. " </div>" +
  961. " </span>" +
  962. "<span>" +
  963. ' <div class="d-l-con">' +
  964. ' <div class="d-l-l-text">' +
  965. " <h4>单位电话:" +
  966. (item.company_phone ? item.company_phone : "") +
  967. "</h4>" +
  968. " </div>" +
  969. " </div>" +
  970. " </span>" +
  971. "<span>" +
  972. ' <div class="d-l-con">' +
  973. ' <div class="d-l-l-text">' +
  974. " <h4>联系人:" +
  975. (item.contacts ? item.contacts : "") +
  976. "</h4>" +
  977. " </div>" +
  978. " </div>" +
  979. " </span>" +
  980. "<span>" +
  981. ' <div class="d-l-con">' +
  982. ' <div class="d-l-l-text">' +
  983. " <h4>联系电话:" +
  984. (item.contacts_phone ? item.contacts_phone : "") +
  985. "</h4>" +
  986. " </div>" +
  987. " </div>" +
  988. " </span></div>";
  989. }
  990. return markersMap;
  991. },
  992. sewageOutletClick(data) {
  993. console.log(data);
  994. const params = Object.assign({});
  995. params.longitude = data.longitude;
  996. params.latitude = data.latitude;
  997. const treeLabels = [
  998. {
  999. id: null,
  1000. labelCode: "999",
  1001. labelName: "电视墙",
  1002. cameraType: null,
  1003. parentLabelCode: "",
  1004. },
  1005. ];
  1006. const labelChannels = [];
  1007. for (let i in data.cameraList) {
  1008. treeLabels.push({
  1009. id: null,
  1010. labelCode: data.cameraList[i].cameraCode,
  1011. labelName: data.cameraList[i].cameraName,
  1012. cameraType: data.cameraList[i].cameraType,
  1013. parentLabelCode: "999",
  1014. });
  1015. labelChannels.push({
  1016. labelCode: data.cameraList[i].cameraCode,
  1017. channelDates: [
  1018. {
  1019. channelCode: data.cameraList[i].cameraCode,
  1020. channelName: data.cameraList[i].cameraName,
  1021. channelSn: null,
  1022. cameraType: data.cameraList[i].cameraType,
  1023. online: "1",
  1024. cameraCode: "1",
  1025. },
  1026. ],
  1027. });
  1028. }
  1029. const dianshiqiang = [
  1030. {
  1031. switchTab: "2",
  1032. treeLabels: treeLabels,
  1033. labelChannels: labelChannels,
  1034. },
  1035. ];
  1036. if (data.cameraList.length > 0) {
  1037. this.$refs.TVWall.showTVWall1(
  1038. data.longitude,
  1039. data.latitude,
  1040. dianshiqiang
  1041. );
  1042. }
  1043. },
  1044. indentleftSetMarkers(resourceTable) {
  1045. this.iconCurrentIndex = resourceTable;
  1046. let that = this;
  1047. that.resourceTable = resourceTable;
  1048. that.markersList = [];
  1049. that.source = [];
  1050. //点击左侧地图落点
  1051. getResourcePoint(resourceTable).then((res) => {
  1052. that.deptGroupList = res.data.deptGroupList;
  1053. if (
  1054. res.data.deptGroupList != null &&
  1055. res.data.deptGroupList.length > 0
  1056. ) {
  1057. for (let i = 0; i < res.data.deptGroupList.length; i++) {
  1058. let aa = [
  1059. res.data.deptGroupList[i].deptName,
  1060. res.data.deptGroupList[i].count,
  1061. ];
  1062. that.source.push(aa);
  1063. }
  1064. }
  1065. if (res.data.resourceList != null && res.data.resourceList.length > 0) {
  1066. for (let i = 0; i < res.data.resourceList.length; i++) {
  1067. let markersMap = {
  1068. lng: 124.59,
  1069. lat: 43.02,
  1070. icon: "marker",
  1071. name: i,
  1072. bindPopupHtml: "",
  1073. click: "",
  1074. keepBindPopup: false,
  1075. isAggregation: false,
  1076. };
  1077. // if (resourceTable == 'centerdata_t_firecontrol_basic_linkage_force') { //基本联动力量
  1078. // markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-basic-linkage-force'
  1079. // markersMap.lng = res.data.resourceList[i].longitude
  1080. // markersMap.lat = res.data.resourceList[i].latitude
  1081. // markersMap.bindPopupHtml = '<div class="map-tip">' +
  1082. // '<span>' +
  1083. // ' <div class="d-l-con">' +
  1084. // ' <div class="d-l-l-text">' +
  1085. // ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
  1086. // .data.resourceList[i].latitude + '</h4>' +
  1087. // ' </div>' +
  1088. // ' </div>' +
  1089. // ' </span>' +
  1090. // '<span>' +
  1091. // ' <div class="d-l-con">' +
  1092. // ' <div class="d-l-l-text">' +
  1093. // ' <h4>单位名称:' + res.data.resourceList[i].company +
  1094. // '</h4>' +
  1095. // ' </div>' +
  1096. // ' </div>' +
  1097. // ' </span>' +
  1098. // '</div>'
  1099. // } else if (resourceTable == 'centerdata_t_firecontrol_fire_force') { //消防力量
  1100. // markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-fire-force'
  1101. // markersMap.lng = res.data.resourceList[i].longitude
  1102. // markersMap.lat = res.data.resourceList[i].latitude
  1103. // markersMap.bindPopupHtml = '<div class="map-tip">' +
  1104. // '<span>' +
  1105. // ' <div class="d-l-con">' +
  1106. // ' <div class="d-l-l-text">' +
  1107. // ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
  1108. // .data.resourceList[i].latitude + '</h4>' +
  1109. // ' </div>' +
  1110. // ' </div>' +
  1111. // ' </span>' +
  1112. // '<span>' +
  1113. // ' <div class="d-l-con">' +
  1114. // ' <div class="d-l-l-text">' +
  1115. // ' <h4>地址:' + res.data.resourceList[i].address + '</h4>' +
  1116. // ' </div>' +
  1117. // ' </div>' +
  1118. // ' </span>' +
  1119. // '<span>' +
  1120. // ' <div class="d-l-con">' +
  1121. // ' <div class="d-l-l-text">' +
  1122. // ' <h4>负责人:' + res.data.resourceList[i].principal + '</h4>' +
  1123. // ' </div>' +
  1124. // ' </div>' +
  1125. // ' </span>' +
  1126. // '<span>' +
  1127. // ' <div class="d-l-con">' +
  1128. // ' <div class="d-l-l-text">' +
  1129. // ' <h4>联系电话:' + res.data.resourceList[i].contact + '</h4>' +
  1130. // ' </div>' +
  1131. // ' </div>' +
  1132. // ' </span></div>'
  1133. // } else if (resourceTable == 'centerdata_t_firecontrol_foam_liquid') { //泡沫液
  1134. // markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-foam-liquid'
  1135. // markersMap.lng = res.data.resourceList[i].longitude
  1136. // markersMap.lat = res.data.resourceList[i].latitude
  1137. // markersMap.bindPopupHtml = '<div class="map-tip">' +
  1138. // '<span>' +
  1139. // ' <div class="d-l-con">' +
  1140. // ' <div class="d-l-l-text">' +
  1141. // ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
  1142. // .data.resourceList[i].latitude + '</h4>' +
  1143. // ' </div>' +
  1144. // ' </div>' +
  1145. // ' </span>' +
  1146. // '<span>' +
  1147. // ' <div class="d-l-con">' +
  1148. // ' <div class="d-l-l-text">' +
  1149. // ' <h4>单位名称:' + res.data.resourceList[i].company +
  1150. // '</h4>' +
  1151. // ' </div>' +
  1152. // ' </div>' +
  1153. // ' </span>' +
  1154. // '<span>' +
  1155. // ' <div class="d-l-con">' +
  1156. // ' <div class="d-l-l-text">' +
  1157. // ' <h4>联系人:' + res.data.resourceList[i].contacts +
  1158. // '</h4>' +
  1159. // ' </div>' +
  1160. // ' </div>' +
  1161. // ' </span>' +
  1162. // '<span>' +
  1163. // ' <div class="d-l-con">' +
  1164. // ' <div class="d-l-l-text">' +
  1165. // ' <h4>联系电话:' + res.data.resourceList[i].contactsPhone + '</h4>' +
  1166. // ' </div>' +
  1167. // ' </div>' +
  1168. // ' </span></div>'
  1169. // } else if (resourceTable == 'centerdata_t_firecontrol_fulltime_station') { //专职站
  1170. // markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-fulltime-station'
  1171. // markersMap.lng = res.data.resourceList[i].longitude
  1172. // markersMap.lat = res.data.resourceList[i].latitude
  1173. // markersMap.bindPopupHtml = '<div class="map-tip">' +
  1174. // '<span>' +
  1175. // ' <div class="d-l-con">' +
  1176. // ' <div class="d-l-l-text">' +
  1177. // ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
  1178. // .data.resourceList[i].latitude + '</h4>' +
  1179. // ' </div>' +
  1180. // ' </div>' +
  1181. // ' </span>' +
  1182. // '<span>' +
  1183. // ' <div class="d-l-con">' +
  1184. // ' <div class="d-l-l-text">' +
  1185. // ' <h4>地址:' + res.data.resourceList[i].address +
  1186. // '</h4>' +
  1187. // ' </div>' +
  1188. // ' </div>' +
  1189. // ' </span>' +
  1190. // '<span>' +
  1191. // ' <div class="d-l-con">' +
  1192. // ' <div class="d-l-l-text">' +
  1193. // ' <h4>负责人:' + res.data.resourceList[i].principal + '</h4>' +
  1194. // ' </div>' +
  1195. // ' </div>' +
  1196. // ' </span>' +
  1197. // '<span>' +
  1198. // ' <div class="d-l-con">' +
  1199. // ' <div class="d-l-l-text">' +
  1200. // ' <h4>电话:' + res.data.resourceList[i].contactsPhone + '</h4>' +
  1201. // ' </div>' +
  1202. // ' </div>' +
  1203. // ' </span>' +
  1204. // '</div>'
  1205. // } else if (resourceTable == 'centerdata_t_firecontrol_other_linkage_force') { //其他联动力量
  1206. // markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-other-linkage-force'
  1207. // markersMap.lng = res.data.resourceList[i].longitude
  1208. // markersMap.lat = res.data.resourceList[i].latitude
  1209. // markersMap.bindPopupHtml = '<div class="map-tip">' +
  1210. // '<span>' +
  1211. // ' <div class="d-l-con">' +
  1212. // ' <div class="d-l-l-text">' +
  1213. // ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
  1214. // .data.resourceList[i].latitude + '</h4>' +
  1215. // ' </div>' +
  1216. // ' </div>' +
  1217. // ' </span>' +
  1218. // '<span>' +
  1219. // ' <div class="d-l-con">' +
  1220. // ' <div class="d-l-l-text">' +
  1221. // ' <h4>单位名称:' + res.data.resourceList[i].company +
  1222. // '</h4>' +
  1223. // ' </div>' +
  1224. // ' </div>' +
  1225. // ' </span>' +
  1226. // '<span>' +
  1227. // ' <div class="d-l-con">' +
  1228. // ' <div class="d-l-l-text">' +
  1229. // ' <h4>单位电话:' + res.data.resourceList[i].companyPhone +
  1230. // '</h4>' +
  1231. // ' </div>' +
  1232. // ' </div>' +
  1233. // ' </span>' +
  1234. // '<span>' +
  1235. // ' <div class="d-l-con">' +
  1236. // ' <div class="d-l-l-text">' +
  1237. // ' <h4>联系人:' + res.data.resourceList[i].contacts +
  1238. // '</h4>' +
  1239. // ' </div>' +
  1240. // ' </div>' +
  1241. // ' </span>' +
  1242. // '<span>' +
  1243. // ' <div class="d-l-con">' +
  1244. // ' <div class="d-l-l-text">' +
  1245. // ' <h4>联系电话:' + res.data.resourceList[i].contactsPhone +
  1246. // '</h4>' +
  1247. // ' </div>' +
  1248. // ' </div>' +
  1249. // ' </span></div>'
  1250. // }
  1251. that.markersList.push(markersMap);
  1252. }
  1253. }
  1254. this.dataChat();
  1255. that.$refs.supermap.clearM();
  1256. that.$refs.supermap.setMarkers(that.markersList);
  1257. });
  1258. },
  1259. indentleftByDeptIdSetMarkers(deptId) {
  1260. this.listCurrentIndex = deptId;
  1261. let that = this;
  1262. //点击左侧地图落点
  1263. getPointByDeptId(that.resourceTable, deptId).then((res) => {
  1264. that.markersList = [];
  1265. if (res.data != null && res.data.length > 0) {
  1266. for (let i = 0; i < res.data.length; i++) {
  1267. let markersMap = {
  1268. lng: res.data[i].longitude,
  1269. lat: res.data[i].latitude,
  1270. icon: "marker",
  1271. bindPopupHtml: "",
  1272. click: "",
  1273. name: i,
  1274. keepBindPopup: false,
  1275. isAggregation: false,
  1276. };
  1277. console.log("resourceTable=", that.resourceTable);
  1278. console.log("res.data[i]=", res.data[i]);
  1279. // if (that.resourceTable == 'centerdata_t_firecontrol_basic_linkage_force') { //基本联动力量
  1280. // markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-basic-linkage-force'
  1281. // markersMap.lng = res.data[i].longitude
  1282. // markersMap.lat = res.data[i].latitude
  1283. // markersMap.bindPopupHtml = '<div class="map-tip">' +
  1284. // '<span>' +
  1285. // ' <div class="d-l-con">' +
  1286. // ' <div class="d-l-l-text">' +
  1287. // ' <h4>经纬度:' + res.data[i].longitude + ',' + res
  1288. // .data[i].latitude + '</h4>' +
  1289. // ' </div>' +
  1290. // ' </div>' +
  1291. // ' </span>' +
  1292. // '<span>' +
  1293. // ' <div class="d-l-con">' +
  1294. // ' <div class="d-l-l-text">' +
  1295. // ' <h4>单位名称:' + res.data[i].company +
  1296. // '</h4>' +
  1297. // ' </div>' +
  1298. // ' </div>' +
  1299. // ' </span>' +
  1300. // '</div>'
  1301. // } else if (that.resourceTable == 'centerdata_t_firecontrol_fire_force') { //消防力量
  1302. // markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-fire-force'
  1303. // markersMap.lng = res.data[i].longitude
  1304. // markersMap.lat = res.data[i].latitude
  1305. // markersMap.bindPopupHtml = '<div class="map-tip">' +
  1306. // '<span>' +
  1307. // ' <div class="d-l-con">' +
  1308. // ' <div class="d-l-l-text">' +
  1309. // ' <h4>经纬度:' + res.data[i].longitude + ',' + res
  1310. // .data[i].latitude + '</h4>' +
  1311. // ' </div>' +
  1312. // ' </div>' +
  1313. // ' </span>' +
  1314. // '<span>' +
  1315. // ' <div class="d-l-con">' +
  1316. // ' <div class="d-l-l-text">' +
  1317. // ' <h4>地址:' + res.data[i].address + '</h4>' +
  1318. // ' </div>' +
  1319. // ' </div>' +
  1320. // ' </span>' +
  1321. // '<span>' +
  1322. // ' <div class="d-l-con">' +
  1323. // ' <div class="d-l-l-text">' +
  1324. // ' <h4>负责人:' + res.data[i].principal + '</h4>' +
  1325. // ' </div>' +
  1326. // ' </div>' +
  1327. // ' </span>' +
  1328. // '<span>' +
  1329. // ' <div class="d-l-con">' +
  1330. // ' <div class="d-l-l-text">' +
  1331. // ' <h4>联系电话:' + res.data[i].contact + '</h4>' +
  1332. // ' </div>' +
  1333. // ' </div>' +
  1334. // ' </span></div>'
  1335. // } else if (that.resourceTable == 'centerdata_t_forest_waterintake') { //取水口
  1336. // // markersMap.icon = 'sj-icon-centerdata-t-forest-waterintake'
  1337. // // markersMap.icon = 'sj-icon-map-centerdata-t-forest-waterintake'
  1338. // markersMap.lng = res.data[i].longitude
  1339. // markersMap.lat = res.data[i].latitude
  1340. // markersMap.bindPopupHtml = '<div class="map-tip">' +
  1341. // '<span>' +
  1342. // ' <div class="d-l-con">' +
  1343. // ' <div class="d-l-l-text">' +
  1344. // ' <h4>经纬度:' + res.data[i].longitude + ',' + res
  1345. // .data[i].latitude + '</h4>' +
  1346. // ' </div>' +
  1347. // ' </div>' +
  1348. // ' </span>' +
  1349. // '<span>' +
  1350. // ' <div class="d-l-con">' +
  1351. // ' <div class="d-l-l-text">' +
  1352. // ' <h4>取水口名称:' + res.data[i].name + '</h4>' +
  1353. // ' </div>' +
  1354. // ' </div>' +
  1355. // ' </span>' +
  1356. // '<span>' +
  1357. // ' <div class="d-l-con">' +
  1358. // ' <div class="d-l-l-text">' +
  1359. // ' <h4>负责人:' + res.data[i].contacts + '</h4>' +
  1360. // ' </div>' +
  1361. // ' </div>' +
  1362. // ' </span>' +
  1363. // '<span>' +
  1364. // ' <div class="d-l-con">' +
  1365. // ' <div class="d-l-l-text">' +
  1366. // ' <h4>联系电话:' + res.data[i].phone + '</h4>' +
  1367. // ' </div>' +
  1368. // ' </div>' +
  1369. // ' </span></div>'
  1370. // } else if (that.resourceTable == 'centerdata_t_firecontrol_foam_liquid') { //泡沫液
  1371. // markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-foam-liquid'
  1372. // markersMap.lng = res.data[i].longitude
  1373. // markersMap.lat = res.data[i].latitude
  1374. // markersMap.bindPopupHtml = '<div class="map-tip">' +
  1375. // '<span>' +
  1376. // ' <div class="d-l-con">' +
  1377. // ' <div class="d-l-l-text">' +
  1378. // ' <h4>经纬度:' + res.data[i].longitude + ',' + res
  1379. // .data[i].latitude + '</h4>' +
  1380. // ' </div>' +
  1381. // ' </div>' +
  1382. // ' </span>' +
  1383. // '<span>' +
  1384. // ' <div class="d-l-con">' +
  1385. // ' <div class="d-l-l-text">' +
  1386. // ' <h4>单位名称:' + res.data[i].company +
  1387. // '</h4>' +
  1388. // ' </div>' +
  1389. // ' </div>' +
  1390. // ' </span>' +
  1391. // '<span>' +
  1392. // ' <div class="d-l-con">' +
  1393. // ' <div class="d-l-l-text">' +
  1394. // ' <h4>联系人:' + res.data[i].contacts +
  1395. // '</h4>' +
  1396. // ' </div>' +
  1397. // ' </div>' +
  1398. // ' </span>' +
  1399. // '<span>' +
  1400. // ' <div class="d-l-con">' +
  1401. // ' <div class="d-l-l-text">' +
  1402. // ' <h4>联系电话:' + res.data[i].contactsPhone + '</h4>' +
  1403. // ' </div>' +
  1404. // ' </div>' +
  1405. // ' </span></div>'
  1406. // } else if (that.resourceTable == 'centerdata_t_firecontrol_fulltime_station') { //专职站
  1407. // markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-fulltime-station'
  1408. // markersMap.lng = res.data[i].longitude
  1409. // markersMap.lat = res.data[i].latitude
  1410. // markersMap.bindPopupHtml = '<div class="map-tip">' +
  1411. // '<span>' +
  1412. // ' <div class="d-l-con">' +
  1413. // ' <div class="d-l-l-text">' +
  1414. // ' <h4>经纬度:' + res.data[i].longitude + ',' + res
  1415. // .data[i].latitude + '</h4>' +
  1416. // ' </div>' +
  1417. // ' </div>' +
  1418. // ' </span>' +
  1419. // '<span>' +
  1420. // ' <div class="d-l-con">' +
  1421. // ' <div class="d-l-l-text">' +
  1422. // ' <h4>地址:' + res.data[i].address +
  1423. // '</h4>' +
  1424. // ' </div>' +
  1425. // ' </div>' +
  1426. // ' </span>' +
  1427. // '<span>' +
  1428. // ' <div class="d-l-con">' +
  1429. // ' <div class="d-l-l-text">' +
  1430. // ' <h4>负责人:' + res.data[i].principal + '</h4>' +
  1431. // ' </div>' +
  1432. // ' </div>' +
  1433. // ' </span>' +
  1434. // '<span>' +
  1435. // ' <div class="d-l-con">' +
  1436. // ' <div class="d-l-l-text">' +
  1437. // ' <h4>电话:' + res.data[i].contactsPhone + '</h4>' +
  1438. // ' </div>' +
  1439. // ' </div>' +
  1440. // ' </span>' +
  1441. // '</div>'
  1442. // } else if (that.resourceTable == 'centerdata_t_firecontrol_other_linkage_force') { //其他联动力量
  1443. // markersMap.icon = 'sj-icon-map-centerdata-t-firecontrol-other-linkage-force'
  1444. // markersMap.lng = res.data[i].longitude
  1445. // markersMap.lat = res.data[i].latitude
  1446. // markersMap.bindPopupHtml = '<div class="map-tip">' +
  1447. // '<span>' +
  1448. // ' <div class="d-l-con">' +
  1449. // ' <div class="d-l-l-text">' +
  1450. // ' <h4>经纬度:' + res.data[i].longitude + ',' + res
  1451. // .data[i].latitude + '</h4>' +
  1452. // ' </div>' +
  1453. // ' </div>' +
  1454. // ' </span>' +
  1455. // '<span>' +
  1456. // ' <div class="d-l-con">' +
  1457. // ' <div class="d-l-l-text">' +
  1458. // ' <h4>单位名称:' + res.data[i].company +
  1459. // '</h4>' +
  1460. // ' </div>' +
  1461. // ' </div>' +
  1462. // ' </span>' +
  1463. // '<span>' +
  1464. // ' <div class="d-l-con">' +
  1465. // ' <div class="d-l-l-text">' +
  1466. // ' <h4>单位电话:' + res.data[i].companyPhone +
  1467. // '</h4>' +
  1468. // ' </div>' +
  1469. // ' </div>' +
  1470. // ' </span>' +
  1471. // '<span>' +
  1472. // ' <div class="d-l-con">' +
  1473. // ' <div class="d-l-l-text">' +
  1474. // ' <h4>联系人:' + res.data[i].contacts +
  1475. // '</h4>' +
  1476. // ' </div>' +
  1477. // ' </div>' +
  1478. // ' </span>' +
  1479. // '<span>' +
  1480. // ' <div class="d-l-con">' +
  1481. // ' <div class="d-l-l-text">' +
  1482. // ' <h4>联系电话:' + res.data[i].contactsPhone +
  1483. // '</h4>' +
  1484. // ' </div>' +
  1485. // ' </div>' +
  1486. // ' </span></div>'
  1487. // }
  1488. that.markersList.push(
  1489. this.getMarkersMap(that.resourceTable, markersMap, res.data[i])
  1490. );
  1491. // that.markersList.push(markersMap)
  1492. }
  1493. }
  1494. that.$refs.supermap.clearM();
  1495. that.$refs.supermap.setMarkers(that.markersList);
  1496. });
  1497. },
  1498. },
  1499. };
  1500. </script>
  1501. <style rel="stylesheet/scss" lang="scss" scoped>
  1502. @import "@/assets/styles/base.scss";
  1503. </style>