datacenter.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819
  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">
  20. <el-input
  21. v-model="searchName"
  22. placeholder="请输入名称"
  23. @keyup.enter.native="searchByName()"
  24. size="small"
  25. prefix-icon="el-icon-search"
  26. />
  27. </div>
  28. <div class="i-list-con" style="height: 71vh;">
  29. <div class="d-l-con-icon">
  30. <div
  31. class="icon-con"
  32. :class="{ on: iconCurrentIndex == item.type }"
  33. v-for="(item, index) in resourcesList"
  34. v-on:click="fireControlViewPoint(item.type, searchName)"
  35. >
  36. <div
  37. class="iconfont icon icon-normal"
  38. :class="item.icon"
  39. :style="'background:' + item.bg"
  40. ></div>
  41. <div class="icon-text">
  42. <h6>{{ item.num }}</h6>
  43. <h5>{{ item.name }}</h5>
  44. </div>
  45. </div>
  46. </div>
  47. </div>
  48. </dv-border-box-13>
  49. </div>
  50. </div>
  51. <!-- 地图 -->
  52. <supermap
  53. ref="supermap"
  54. style="width: 100%; height: 100vh"
  55. @sewageOutletClick="sewageOutletClick"
  56. ></supermap>
  57. <!-- <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
  58. <!-- </button>-->
  59. <!-- 右侧 -->
  60. <div class="rightbar" ref="right" v-if="showSearch == true">
  61. <div class="forthis">
  62. <dv-border-box-13
  63. backgroundColor="rgba(12, 19, 38, .90)"
  64. style="padding-bottom: 1rem"
  65. >
  66. <img
  67. src="../assets/images/integrated/light.png"
  68. style="width: 100%; margin-top: 0.4rem"
  69. />
  70. <div class="this-title">
  71. <span>数据分布</span>
  72. <dv-decoration-3
  73. style="width: 150px; height: 15px; margin-right: 1rem"
  74. />
  75. </div>
  76. <div class="i-list-con h-73">
  77. <div class="overflow-y" style="height: 39vh">
  78. <div
  79. class="d-l-con"
  80. :class="{ on: listCurrentIndex == item.deptId }"
  81. v-for="(item, index) in deptGroupList"
  82. v-on:click="indentleftByDeptIdSetMarkers(item.deptId)"
  83. >
  84. <div class="d-l-l-text">
  85. <i class="i-small"></i>
  86. <h4>{{ item.deptName }}</h4>
  87. </div>
  88. <div class="d-l-l-count">{{ item.count }}</div>
  89. </div>
  90. </div>
  91. <div class="overflow-y" style="height: 34vh">
  92. <div id="data-chart" style="width: 100%; height: 34vh"></div>
  93. </div>
  94. </div>
  95. </dv-border-box-13>
  96. </div>
  97. </div>
  98. <vBottomMenu ref="bottomMenu"></vBottomMenu>
  99. </div>
  100. <eventLocation ref="eventLocation"></eventLocation>
  101. <!--<TVWall ref="TVWall"></TVWall>-->
  102. <TVWalls ref="TVWalls"></TVWalls>
  103. </div>
  104. </template>
  105. <script>
  106. import {
  107. getResourceDetail,
  108. fireControlViewList,
  109. fireControlViewPoint,
  110. } from "@/api/datacenter";
  111. import supermap from "@/components/supermap-2.5d"; //超图
  112. import vheader from "@/components/v-header.vue"; //一体化共用头部
  113. import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
  114. import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
  115. import TVWall from "@/components/TVWall.vue"; //电视墙弹窗
  116. import TVWalls from "@/components/TVWalls.vue"; //电视墙弹窗
  117. import { getIconBg } from "@/api/components/sookaMapIcon";
  118. import {getUserProfile} from "@/api/system/user";
  119. import { Button } from '@/dahua/TVWalllib/iview' //资源底色控制文件
  120. // import echarts from 'echarts'
  121. let echarts = require("echarts");
  122. export default {
  123. components: {
  124. Button,
  125. supermap,
  126. vheader,
  127. vBottomMenu,
  128. eventLocation,
  129. TVWall,
  130. TVWalls,
  131. },
  132. created() {
  133. /** ----------------------------------底部按钮公用组件开始------------------------------------- */
  134. window.showDialog = this.showDialog;
  135. window.choseLayerSwitching = this.choseLayerSwitching;
  136. window.choseLayerSwitchingList = this.choseLayerSwitchingList;
  137. /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  138. },
  139. mounted() {
  140. // 初始化地图数据
  141. this.getSuperMapUrl();
  142. setTimeout(() => {
  143. this.fireControlViewList();
  144. }, 2000)
  145. this.bottomMenuList(); //获取底部公共组件消息和任务
  146. },
  147. data() {
  148. return {
  149. // 搜索框
  150. showSearch: true,
  151. // 搜索名称
  152. searchName: "",
  153. // 搜索类型
  154. iconCurrentIndex: "",
  155. listCurrentIndex: "",
  156. markersList: [],
  157. iframeBoo: true,
  158. open: false,
  159. iframeVue: null,
  160. activeName: "info",
  161. radio: "1",
  162. //类型
  163. resourceTable: "",
  164. //左侧资源
  165. resourcesList: [],
  166. //右侧资源
  167. deptGroupList: [],
  168. source: [],
  169. };
  170. },
  171. watch: {
  172. },
  173. methods: {
  174. //初始化地图数据
  175. getSuperMapUrl(){
  176. getUserProfile().then(response => {
  177. let mapDeptId=response.mapDeptId
  178. let num = 0;
  179. if (mapDeptId == "365") {
  180. num = 0;
  181. } else if (mapDeptId == "369") {
  182. num = 1;
  183. } else if (mapDeptId == "371") {
  184. num = 2;
  185. } else if (mapDeptId == "373") {
  186. num = 3;
  187. } else if (mapDeptId == "372") {
  188. num = 4;
  189. } else if (mapDeptId == "370") {
  190. num = 5;
  191. }
  192. this.$refs.supermap.removeAllviewer(num, -1);
  193. });
  194. },
  195. // 根据名称筛选资源点位
  196. searchByName() {
  197. this.$modal.msgSuccess("正在查询,请稍后...");
  198. this.fireControlViewPoint(this.resourceTable, this.searchName,"search");
  199. },
  200. /** ----------------------------------底部按钮公用组件开始------------------------------------- */
  201. bottomMenuList() {
  202. this.$refs.bottomMenu.selectTaskList(); //获取任务列表
  203. this.$refs.bottomMenu.selectMessageList(); //获取消息列表
  204. },
  205. showDialog(click) {
  206. if (click == "eventLocation") {
  207. this.$refs.eventLocation.showEventLocation();
  208. this.$refs.bottomMenu.showMeasure = false;
  209. this.$refs.bottomMenu.showChild = false;
  210. } else if (click == "editableLayers") {
  211. this.$refs.bottomMenu.showChild = false;
  212. if (!this.$refs.bottomMenu.showMeasure) {
  213. this.$refs.bottomMenu.showMeasure = true;
  214. } else {
  215. this.$refs.bottomMenu.showMeasure = false;
  216. }
  217. } else if (click == "layerSwitching") {
  218. this.$refs.bottomMenu.showMeasure = false;
  219. if (!this.$refs.bottomMenu.showChild) {
  220. this.$refs.bottomMenu.showChild = true;
  221. } else {
  222. this.$refs.bottomMenu.showChild = false;
  223. }
  224. } else if (click == "TVWall") {
  225. this.$refs.TVWall.showTVWall();
  226. this.$refs.bottomMenu.showMeasure = false;
  227. this.$refs.bottomMenu.showChild = false;
  228. }
  229. },
  230. //选择图层
  231. choseLayerSwitching(url, isClear) {
  232. this.$refs.supermap.layerSwitching(url, isClear);
  233. },
  234. //选择图层(传递数组)
  235. choseLayerSwitchingList(urlList) {
  236. this.$refs.supermap.layerSwitchingList(urlList);
  237. },
  238. /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  239. //数据分布chart
  240. dataChat() {
  241. // 基于准备好的dom,初始化echarts实例
  242. let myChart = echarts.init(document.getElementById("data-chart"));
  243. // 绘制图表
  244. const dfColor = ["#92E1FF", "#0097FB", "#30ECA6", "#FFC227", "#FF4848"];
  245. myChart.setOption({
  246. dataset: {
  247. source: this.source,
  248. },
  249. tooltip: {
  250. trigger: "item",
  251. },
  252. dataZoom: [
  253. {
  254. show: this.source.length > 8 ? true : false,
  255. // show: true,
  256. type: "slider",
  257. yAxisIndex: 0,
  258. left: 0,
  259. start: 0,
  260. end: this.source.length > 8 ? 8 : 100,
  261. width: 15,
  262. },
  263. ],
  264. grid: {
  265. top: "5%",
  266. left: "12%",
  267. // right: "4%",
  268. bottom: "-15%",
  269. width: "75%",
  270. containLabel: true,
  271. },
  272. xAxis: {
  273. show: false,
  274. type: "value",
  275. },
  276. yAxis: {
  277. type: "category", // 不设置类目轴,抽离的dataset数据展示不出来
  278. inverse: true,
  279. axisLabel: {
  280. show: true,
  281. textStyle: {
  282. color: "#5deaff",
  283. fontSize: "12",
  284. },
  285. },
  286. splitLine: {
  287. show: false,
  288. },
  289. axisTick: {
  290. show: false,
  291. },
  292. axisLine: {
  293. show: false,
  294. },
  295. },
  296. series: [
  297. {
  298. type: "bar",
  299. animationCurve: "easeOutBack",
  300. barWidth: 5,
  301. label: {
  302. show: true,
  303. position: "right",
  304. offset: [0, 0],
  305. color: "#88dfd5",
  306. // fontSize: "12",
  307. style: {
  308. fill: "#fff",
  309. },
  310. },
  311. backgroundBar: {
  312. show: true,
  313. style: {
  314. fill: "rgba(97,152,255,0.20)",
  315. },
  316. },
  317. barStyle: {
  318. stroke: "rgba(41,244,236,1)",
  319. },
  320. gradient: {
  321. color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
  322. },
  323. itemStyle: {
  324. label: {
  325. show: true,
  326. },
  327. labelLine: {
  328. show: false,
  329. },
  330. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  331. {
  332. offset: 0,
  333. color: "rgba(41,244,236,0)",
  334. },
  335. {
  336. offset: 1,
  337. color: "rgba(41,244,236,.5)",
  338. },
  339. ]),
  340. borderColor: "#a2f9f7",
  341. shadowBlur: 16,
  342. shadowColor: "#a2f9f7",
  343. },
  344. },
  345. ],
  346. });
  347. },
  348. fireControlViewList() {
  349. let that = this;
  350. fireControlViewList("ziyuan").then(function (res) {
  351. for (let i = 0; i < res.data.length; i++) {
  352. if(res.data[i].type !='centerdata_t_forest_fireteam'){
  353. that.resourcesList.push(res.data[i]);
  354. }
  355. }
  356. //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
  357. that.resourcesList.forEach(function (data, index) {
  358. let icon =
  359. "sj" +
  360. "-" +
  361. "icon" +
  362. "-" +
  363. data.type.replaceAll("_", "-").replaceAll("@", "-");
  364. console.log("icon_" + (index + 1) + "=", icon);
  365. that.$set(that.resourcesList[index], "icon", icon);
  366. //每个图标对应固定颜色
  367. that.$set(that.resourcesList[index], "bg", getIconBg(icon));
  368. });
  369. that.fireControlViewPoint("ziyuan", "");
  370. });
  371. },
  372. fireControlViewPoint(resourceTable, name, search) {
  373. if(resourceTable == this.resourceTable && search != "search"){
  374. resourceTable = "ziyuan"
  375. }
  376. this.iconCurrentIndex = resourceTable;
  377. // 搜索框
  378. if (name == "" || name == null || name == undefined) {
  379. name = "";
  380. } else {
  381. this.showSearch = true;
  382. }
  383. console.log("name=", name);
  384. console.log("this.showSearch=", this.showSearch);
  385. let that = this;
  386. that.resourceTable = resourceTable;
  387. that.markersList = [];
  388. that.source = [];
  389. fireControlViewPoint(resourceTable, name,"").then((res) => {
  390. let pointList = res.data.pointList;
  391. that.deptGroupList = res.data.deptList;
  392. if (res.data.deptList != null && res.data.deptList.length > 0) {
  393. for (let i = 0; i < res.data.deptList.length; i++) {
  394. let aa = [
  395. res.data.deptList[i].deptName,
  396. res.data.deptList[i].count,
  397. ];
  398. that.source.push(aa);
  399. }
  400. }
  401. if (res.data.pointList != null && res.data.pointList.length > 0) {
  402. for (let i = 0; i < res.data.pointList.length; i++) {
  403. if(res.data.pointList[i].indexName != 'centerdata_t_forest_fireteam'){
  404. let markersMap = {
  405. lng: res.data.pointList[i].longitude,
  406. lat: res.data.pointList[i].latitude,
  407. icon: "marker",
  408. bindPopupHtml: "",
  409. click: "",
  410. name: i,
  411. keepBindPopup: false,
  412. isAggregation: false,
  413. };
  414. that.markersList.push(
  415. this.getMarkersMap(
  416. resourceTable == "ziyuan" ? res.data.pointList[i].indexName:resourceTable,
  417. markersMap,
  418. res.data.pointList[i]
  419. )
  420. );
  421. }
  422. }
  423. }
  424. if (this.showSearch == true) {
  425. this.dataChat();
  426. }
  427. that.$refs.supermap.clearM(false);
  428. that.$refs.supermap.setMarkers(that.markersList);
  429. });
  430. },
  431. getMarkersMap(resourceTable, markersMap, item) {
  432. markersMap.click = "sewageOutletClick";
  433. markersMap.parameter = item;
  434. if (resourceTable == 'centerdata_t_resources_illegal_construction') { //违建信息
  435. markersMap.icon = 'sj-icon-map-centerdata-t-resources-illegal-constructionon'
  436. markersMap.lng = (item.longitude ? item.longitude : "")
  437. markersMap.lat = (item.latitude ? item.latitude : "")
  438. markersMap.bindPopupHtml = '<div class="map-tip">' +
  439. '<span>' +
  440. ' <div class="d-l-con">' +
  441. ' <div class="d-l-l-text">' +
  442. ' <h4>经纬度:' + (item.longitude ? item.longitude : "") + ',' + (item.latitude ? item
  443. .latitude : "") + '</h4>' +
  444. ' </div>' +
  445. ' </div>' +
  446. ' </span>' +
  447. '<span>' +
  448. ' <div class="d-l-con">' +
  449. ' <div class="d-l-l-text">' +
  450. ' <h4>名称:' + (item.name ? item.name : "") +
  451. '</h4>' +
  452. ' </div>' +
  453. ' </div>' +
  454. ' </span>' +
  455. '<span>' +
  456. ' <div class="d-l-con">' +
  457. ' <div class="d-l-l-text">' +
  458. ' <h4>违建处理负责人:' + (item.person ? item.person : "") +
  459. '</h4>' +
  460. ' </div>' +
  461. ' </div>' +
  462. ' </span>' +
  463. '<span>' +
  464. ' <div class="d-l-con">' +
  465. ' <div class="d-l-l-text">' +
  466. ' <h4>联系方式:' + (item.phone ? item.phone : "") +
  467. '</h4>' +
  468. ' </div>' +
  469. ' </div>' +
  470. ' </span></div>'
  471. }
  472. else if (resourceTable == 'centerdata_t_resources_deposit') { //矿产资源
  473. markersMap.icon = 'sj-icon-map-centerdata-t-resources-deposit'
  474. markersMap.lng = (item.longitude ? item.longitude : "")
  475. markersMap.lat = (item.latitude ? item.latitude : "")
  476. markersMap.bindPopupHtml = '<div class="map-tip">' +
  477. '<span>' +
  478. ' <div class="d-l-con">' +
  479. ' <div class="d-l-l-text">' +
  480. ' <h4>经纬度:' + (item.longitude ? item.longitude : "") + ',' + (item.latitude ? item
  481. .latitude : "") + '</h4>' +
  482. ' </div>' +
  483. ' </div>' +
  484. ' </span>' +
  485. '<span>' +
  486. ' <div class="d-l-con">' +
  487. ' <div class="d-l-l-text">' +
  488. ' <h4>名称:' + (item.name ? item.name : "") + '</h4>' +
  489. ' </div>' +
  490. ' </div>' +
  491. ' </span>' +
  492. '<span>' +
  493. ' <div class="d-l-con">' +
  494. ' <div class="d-l-l-text">' +
  495. ' <h4>联系人:' + (item.person ? item.person : "") + '</h4>' +
  496. ' </div>' +
  497. ' </div>' +
  498. ' </span>' +
  499. '<span>' +
  500. ' <div class="d-l-con">' +
  501. ' <div class="d-l-l-text">' +
  502. ' <h4>电话:' + (item.phone ? item.phone : "") + '</h4>' +
  503. ' </div>' +
  504. ' </div>' +
  505. ' </span></div>'
  506. }
  507. else if (resourceTable == 'centerdata_t_resources_forest') { //森林资源管理信息
  508. markersMap.icon = 'sj-icon-map-centerdata-t-forest-landing'
  509. markersMap.lng = (item.longitude ? item.longitude : "")
  510. markersMap.lat = (item.latitude ? item.latitude : "")
  511. markersMap.bindPopupHtml = '<div class="map-tip">' +
  512. '<span>' +
  513. ' <div class="d-l-con">' +
  514. ' <div class="d-l-l-text">' +
  515. ' <h4>经纬度:' + (item.longitude ? item.longitude : "") + ',' + (item.latitude ? item
  516. .latitude : "") + '</h4>' +
  517. ' </div>' +
  518. ' </div>' +
  519. ' </span>' +
  520. '<span>' +
  521. ' <div class="d-l-con">' +
  522. ' <div class="d-l-l-text">' +
  523. ' <h4>名称:' + (item.name ? item.name : "") +
  524. '</h4>' +
  525. ' </div>' +
  526. ' </div>' +
  527. ' </span>' +
  528. '<span>' +
  529. ' <div class="d-l-con">' +
  530. ' <div class="d-l-l-text">' +
  531. ' <h4>占地范围:' + (item.zdfw ? item.zdfw : "") +
  532. '</h4>' +
  533. ' </div>' +
  534. ' </div>' +
  535. ' </span>' +
  536. '<span>' +
  537. ' <div class="d-l-con">' +
  538. ' <div class="d-l-l-text">' +
  539. ' <h4>占地面积(万公顷):' + (item.landArea ? item.landArea : "") + '</h4>' +
  540. ' </div>' +
  541. ' </div>' +
  542. ' </span></div>'
  543. }
  544. else if (resourceTable == 'centerdata_t_resources_geologic_hazard') { //地质灾害易发区
  545. markersMap.icon = 'sj-icon-map-centerdata-t-resources-geologic-hazard'
  546. markersMap.lng = (item.longitude ? item.longitude : "")
  547. markersMap.lat = (item.latitude ? item.latitude : "")
  548. markersMap.bindPopupHtml = '<div class="map-tip">' +
  549. '<span>' +
  550. ' <div class="d-l-con">' +
  551. ' <div class="d-l-l-text">' +
  552. ' <h4>经纬度:' + (item.longitude ? item.longitude : "") + ',' + (item.latitude ? item
  553. .latitude : "") + '</h4>' +
  554. ' </div>' +
  555. ' </div>' +
  556. ' </span>' +
  557. '<span>' +
  558. ' <div class="d-l-con">' +
  559. ' <div class="d-l-l-text">' +
  560. ' <h4>名称:' + (item.name ? item.name : "") +
  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>联系人:' + (item.person ? item.person : "") +
  569. '</h4>' +
  570. ' </div>' +
  571. ' </div>' +
  572. ' </span>' +
  573. '<span>' +
  574. ' <div class="d-l-con">' +
  575. ' <div class="d-l-l-text">' +
  576. ' <h4>电话:' + (item.phone ? item.phone : "") + '</h4>' +
  577. ' </div>' +
  578. ' </div>' +
  579. ' </span></div>'
  580. }
  581. else if (resourceTable == 'centerdata_t_resources_hydroenergy') { //水能资源
  582. markersMap.icon = 'sj-icon-map-centerdata-t-forest-checkpoint'
  583. markersMap.lng = (item.longitude ? item.longitude : "")
  584. markersMap.lat = (item.latitude ? item.latitude : "")
  585. markersMap.bindPopupHtml = '<div class="map-tip">' +
  586. '<span>' +
  587. ' <div class="d-l-con">' +
  588. ' <div class="d-l-l-text">' +
  589. ' <h4>经纬度:' + (item.longitude ? item.longitude : "") + ',' + (item.latitude ? item
  590. .latitude : "") + '</h4>' +
  591. ' </div>' +
  592. ' </div>' +
  593. ' </span>' +
  594. '<span>' +
  595. ' <div class="d-l-con">' +
  596. ' <div class="d-l-l-text">' +
  597. ' <h4>名称:' + (item.name ? item.name : "") +
  598. '</h4>' +
  599. ' </div>' +
  600. ' </div>' +
  601. ' </span>' +
  602. '<span>' +
  603. ' <div class="d-l-con">' +
  604. ' <div class="d-l-l-text">' +
  605. ' <h4>联系人:' + (item.person ? item.person : "") +
  606. '</h4>' +
  607. ' </div>' +
  608. ' </div>' +
  609. ' </span>' +
  610. '<span>' +
  611. ' <div class="d-l-con">' +
  612. ' <div class="d-l-l-text">' +
  613. ' <h4>位置:' + (item.address ? item.address : "") +
  614. '</h4>' +
  615. ' </div>' +
  616. ' </div>' +
  617. ' </span>' +
  618. '<span>' +
  619. ' <div class="d-l-con">' +
  620. ' <div class="d-l-l-text">' +
  621. ' <h4>电话:' + (item.phone ? item.phone : "") +
  622. '</h4>' +
  623. ' </div>' +
  624. ' </div>' +
  625. ' </span></div>'
  626. }
  627. else if (resourceTable == 'centerdata_t_resources_land') { //土地资源管理信息
  628. markersMap.icon = 'sj-icon-map-centerdata-t-forest-waterintake'
  629. markersMap.lng = (item.longitude ? item.longitude : "")
  630. markersMap.lat = (item.latitude ? item.latitude : "")
  631. markersMap.bindPopupHtml = '<div class="map-tip">' +
  632. '<span>' +
  633. ' <div class="d-l-con">' +
  634. ' <div class="d-l-l-text">' +
  635. ' <h4>经纬度:' + (item.longitude ? item.longitude : "") + ',' + (item.latitude ? item
  636. .latitude : "") + '</h4>' +
  637. ' </div>' +
  638. ' </div>' +
  639. ' </span>' +
  640. '<span>' +
  641. ' <div class="d-l-con">' +
  642. ' <div class="d-l-l-text">' +
  643. ' <h4>名称:' + (item.name ? item.name : "") +
  644. '</h4>'
  645. ' </div>' +
  646. ' </div>' +
  647. ' </span>' +
  648. '<span>' +
  649. ' <div class="d-l-con">' +
  650. ' <div class="d-l-l-text">' +
  651. ' <h4>占地面积(万公顷):' + (item.landArea ? item.landArea : "") +
  652. '</h4>' +
  653. ' </div>' +
  654. ' </div>' +
  655. ' </span></div>'
  656. }
  657. return markersMap;
  658. },
  659. sewageOutletClick(data) {
  660. console.log("data=", data);
  661. const params = Object.assign({});
  662. params.longitude = data.longitude;
  663. params.latitude = data.latitude;
  664. const treeLabels = [
  665. {
  666. id: null,
  667. labelCode: "999",
  668. labelName: "电视墙",
  669. cameraType: null,
  670. parentLabelCode: "",
  671. },
  672. ];
  673. const labelChannels = [];
  674. const id = data.id;
  675. const type = data.indexName;
  676. // alert(type+"="+id)
  677. // alert(data.indexName)
  678. // getResourceDetail("centerdata_t_resources_illegal_construction", id).then(res => {
  679. getResourceDetail(type, id).then(res => {
  680. console.log("getResourceDetail=", res)
  681. // for (let i in data.cameraList) {
  682. data.cameraList = res.data.cameras;
  683. for (let i in data.cameraList) {
  684. treeLabels.push({
  685. id: null,
  686. labelCode: data.cameraList[i].cameraCode,
  687. labelName: data.cameraList[i].cameraName,
  688. cameraType: data.cameraList[i].cameraType,
  689. parentLabelCode: "999",
  690. });
  691. labelChannels.push({
  692. labelCode: data.cameraList[i].cameraCode,
  693. channelDates: [
  694. {
  695. channelCode: data.cameraList[i].cameraCode,
  696. channelName: data.cameraList[i].cameraName,
  697. channelSn: null,
  698. cameraType: data.cameraList[i].cameraType,
  699. online: "1",
  700. cameraCode: "1",
  701. },
  702. ],
  703. });
  704. }
  705. const dianshiqiang = [
  706. {
  707. switchTab: "2",
  708. treeLabels: treeLabels,
  709. labelChannels: labelChannels,
  710. },
  711. ];
  712. if (data.cameraList.length > 0) {
  713. // this.$refs.TVWall.showTVWall1(
  714. // data.longitude,
  715. // data.latitude,
  716. // dianshiqiang
  717. // );
  718. this.$refs.TVWalls.showTVWall(
  719. dianshiqiang,
  720. {
  721. longitude: data.longitude,
  722. latitude: data.latitude,
  723. },
  724. {
  725. "修改人":"MC",
  726. "修改人":"MC",
  727. "修改人":"MC",
  728. "修改人":"MC",
  729. "修改人":"MC"
  730. },
  731. res.data.detail // item
  732. );
  733. }
  734. });
  735. /*for (let i in data.cameraList) {
  736. treeLabels.push({
  737. id: null,
  738. labelCode: data.cameraList[i].cameraCode,
  739. labelName: data.cameraList[i].cameraName,
  740. cameraType: data.cameraList[i].cameraType,
  741. parentLabelCode: "999",
  742. });
  743. labelChannels.push({
  744. labelCode: data.cameraList[i].cameraCode,
  745. channelDates: [
  746. {
  747. channelCode: data.cameraList[i].cameraCode,
  748. channelName: data.cameraList[i].cameraName,
  749. channelSn: null,
  750. cameraType: data.cameraList[i].cameraType,
  751. online: "1",
  752. cameraCode: "1",
  753. },
  754. ],
  755. });
  756. }
  757. const dianshiqiang = [
  758. {
  759. switchTab: "2",
  760. treeLabels: treeLabels,
  761. labelChannels: labelChannels,
  762. },
  763. ];
  764. // if (data.cameraList.length > 0) {
  765. if (data.longitude != "" && data.latitude != "") {
  766. // this.$refs.TVWall.showTVWall1(
  767. this.$refs.TVWalls.showTVWall(
  768. data.longitude,
  769. data.latitude,
  770. dianshiqiang
  771. );
  772. }*/
  773. },
  774. indentleftByDeptIdSetMarkers(deptId) {
  775. this.listCurrentIndex = deptId;
  776. let that = this;
  777. //点击左侧地图落点
  778. fireControlViewPoint(that.resourceTable,that.searchName, deptId).then((res) => {
  779. that.markersList = [];
  780. if (res.data != null && res.data.pointList.length>0) {
  781. for (let i = 0; i < res.data.pointList.length; i++) {
  782. let markersMap = {
  783. lng: res.data.pointList[i].longitude,
  784. lat: res.data.pointList[i].latitude,
  785. icon: "marker",
  786. bindPopupHtml: "",
  787. click: "",
  788. name: i,
  789. keepBindPopup: false,
  790. isAggregation: false,
  791. };
  792. console.log("resourceTable=", that.resourceTable);
  793. console.log("res.data[i]=", res.data.pointList[i]);
  794. that.markersList.push(
  795. that.getMarkersMap(
  796. that.resourceTable == "ziyuan" ? res.data.pointList[i].indexName:that.resourceTable,
  797. markersMap, res.data.pointList[i])
  798. );
  799. }
  800. }
  801. that.$refs.supermap.clearM();
  802. that.$refs.supermap.setMarkers(that.markersList);
  803. });
  804. },
  805. },
  806. };
  807. </script>
  808. <style rel="stylesheet/scss" lang="scss" scoped>
  809. @import "@/assets/styles/base.scss";
  810. </style>