Newer
Older
operation_web / src / components / site / previewOfSiteStatus.vue
@raoxianxuan raoxianxuan on 1 Feb 2021 106 KB gis
  1. <template>
  2. <div id="previewOfSiteStatus">
  3. <div id="previewOfSiteStatusMaps">
  4. <div ref="rootmap" id="earthmap" class="earthmap">
  5. <img
  6. src="./../../../static/img/fw_btn.png"
  7. alt
  8. class="fwStyle"
  9. @click="fwClick"
  10. />
  11. </div>
  12. <div id="popup" class="popup"></div>
  13.  
  14. <!-- <div id="previewOfSiteStatusTop">
  15. <div class="previewOfSiteStatusTopC">
  16. <img
  17. src="./../../../static/img/previewOfSiteStatus7.png"
  18. alt
  19. class="previewOfSiteStatusTopimg"
  20. />
  21. <div class="previewOfSiteStatusTopCFont">
  22. <span class="previewOfSiteStatusTopCData">{{ TopData1 }}</span>
  23. <span class="previewOfSiteStatusTopCMS">设备总数</span>
  24. </div>
  25. </div>
  26. <div class="previewOfSiteStatusTopC">
  27. <img
  28. src="./../../../static/img/previewOfSiteStatus8.png"
  29. alt
  30. class="previewOfSiteStatusTopimg"
  31. />
  32. <div class="previewOfSiteStatusTopCFont">
  33. <span class="previewOfSiteStatusTopCData">{{ TopData2 }}</span>
  34. <span class="previewOfSiteStatusTopCMS">当前在线数</span>
  35. </div>
  36. </div>
  37. <div class="previewOfSiteStatusTopC">
  38. <img
  39. src="./../../../static/img/previewOfSiteStatus9.png"
  40. alt
  41. class="previewOfSiteStatusTopimg"
  42. />
  43. <div class="previewOfSiteStatusTopCFont">
  44. <span class="previewOfSiteStatusTopCData">{{ TopData3 }}</span>
  45. <span class="previewOfSiteStatusTopCMS">在线率</span>
  46. </div>
  47. </div>
  48. </div> -->
  49. <div class="boxmain">
  50. <!-- 项目选择 -->
  51. <div id="previewOfSiteStatusLeftTop">
  52. <div class="previewOfSiteStatusTitle">
  53. <img
  54. src="./../../../static/img/previewOfSiteStatus1.png"
  55. alt
  56. class="previewOfSiteStatusTitleImg"
  57. />
  58. <span class="previewOfSiteStatusTitleFont">项目选择</span>
  59. </div>
  60. <div class="previewOfSiteStatusCentent">
  61. <!-- 项目选择下拉框 -->
  62. <div class="previewTOP">
  63. <template>
  64. <el-select
  65. class="selectWidth"
  66. v-model="ChecksplatformCodeTest"
  67. filterable
  68. placeholder="全部项目"
  69. @change="ListClick"
  70. size="medium"
  71. clearable
  72. >
  73. <el-option
  74. v-for="(item, index) in ProjectList"
  75. :key="index"
  76. :label="item.groupName"
  77. :value="index"
  78. >
  79. </el-option>
  80. </el-select>
  81. </template>
  82. </div>
  83. <!-- 项目选择历史搜索记录(最多十条) -->
  84. <div class="previewButton">
  85. <h5 class="text">历史搜索</h5>
  86. <div class="previewHistory">
  87. <span
  88. class="previewtext"
  89. v-for="(item, index) in historyList"
  90. :key="index"
  91. @click="HistoryClick(item)"
  92. >
  93. {{ item }}
  94. </span>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. <!-- 平台站点数量及状态统计 -->
  100. <div id="previewOfSiteStatusLeftcenter">
  101. <div class="previewOfSiteStatusTitle">
  102. <img
  103. src="./../../../static/img/previewOfSiteStatus2.png"
  104. alt
  105. class="previewOfSiteStatusTitleImg"
  106. />
  107. <span class="previewOfSiteStatusTitleFont">站点统计</span>
  108. <div class="previewOfSiteStatusTitleBTN">
  109. <span
  110. v-for="(item, index) in namelist"
  111. :key="index"
  112. @click="allpreview(index, item, $event)"
  113. :class="{ select: item.select }"
  114. >{{ item.name }}</span
  115. >
  116. </div>
  117. </div>
  118. <div class="previewOfSiteStatusCentent">
  119. <div id="previewOfSiteStatusCentent2_1">
  120. <p class="previewOfSiteStatusCentent2P">平台站点(个)</p>
  121. <div class="previewOfSiteStatusCentent2C">
  122. <div class="previewOfSiteStatusCentent2CList">
  123. <countTo
  124. :startVal="Site.SAll"
  125. :endVal="Site.EAll"
  126. :duration="2000"
  127. class="previewOfSiteStatusCentent2CListData"
  128. ></countTo>
  129. <!-- </div> -->
  130. <div class="previewOfSiteStatusCentent2CListFont">
  131. <img
  132. src="./../../../static/img/previewOfSiteStatus10.png"
  133. alt
  134. class="previewOfSiteStatusCentent2CListFontImg"
  135. />
  136. <span class="previewOfSiteStatusCentent2CListFonts"
  137. >总数</span
  138. >
  139. </div>
  140. </div>
  141. <div class="previewOfSiteStatusCentent2CList">
  142. <countTo
  143. :startVal="Site.SOn"
  144. :endVal="Site.EOn"
  145. :duration="2000"
  146. class="previewOfSiteStatusCentent2CListData"
  147. ></countTo>
  148. <div class="previewOfSiteStatusCentent2CListFont">
  149. <img
  150. src="./../../../static/img/previewOfSiteStatus11.png"
  151. alt
  152. class="previewOfSiteStatusCentent2CListFontImg"
  153. />
  154. <span class="previewOfSiteStatusCentent2CListFonts"
  155. >在线</span
  156. >
  157. </div>
  158. </div>
  159. <div class="previewOfSiteStatusCentent2CList">
  160. <countTo
  161. :startVal="Site.SOff"
  162. :endVal="Site.EOff"
  163. :duration="2000"
  164. class="previewOfSiteStatusCentent2CListData"
  165. ></countTo>
  166. <div class="previewOfSiteStatusCentent2CListFont">
  167. <img
  168. src="./../../../static/img/previewOfSiteStatus12.png"
  169. alt
  170. class="previewOfSiteStatusCentent2CListFontImg"
  171. />
  172. <span class="previewOfSiteStatusCentent2CListFonts"
  173. >离线</span
  174. >
  175. </div>
  176. </div>
  177. </div>
  178. </div>
  179. <!-- <div id="previewOfSiteStatusCentent2_2">
  180. <p class="previewOfSiteStatusCentent2P">项目进度(条)</p>
  181. <div class="previewOfSiteStatusCentent2C">
  182. <div class="previewOfSiteStatusCentent2CList">
  183. <countTo
  184. :startVal="Project.SAll"
  185. :endVal="Project.EAll"
  186. :duration="2000"
  187. class="previewOfSiteStatusCentent2CListData"
  188. ></countTo>
  189. <div class="previewOfSiteStatusCentent2CListFont">
  190. <img
  191. src="./../../../static/img/previewOfSiteStatus10.png"
  192. alt
  193. class="previewOfSiteStatusCentent2CListFontImg"
  194. />
  195. <span class="previewOfSiteStatusCentent2CListFonts"
  196. >总数</span
  197. >
  198. </div>
  199. </div>
  200. <div class="previewOfSiteStatusCentent2CList">
  201. <countTo
  202. :startVal="Project.SOn"
  203. :endVal="Project.EOn"
  204. :duration="2000"
  205. class="previewOfSiteStatusCentent2CListData"
  206. ></countTo>
  207. <div class="previewOfSiteStatusCentent2CListFont">
  208. <img
  209. src="./../../../static/img/previewOfSiteStatus11.png"
  210. alt
  211. class="previewOfSiteStatusCentent2CListFontImg"
  212. />
  213. <span class="previewOfSiteStatusCentent2CListFonts"
  214. >已完成</span
  215. >
  216. </div>
  217. </div>
  218. <div class="previewOfSiteStatusCentent2CList">
  219. <countTo
  220. :startVal="Project.SOff"
  221. :endVal="Project.EOff"
  222. :duration="2000"
  223. class="previewOfSiteStatusCentent2CListData"
  224. ></countTo>
  225. <div class="previewOfSiteStatusCentent2CListFont">
  226. <img
  227. src="./../../../static/img/previewOfSiteStatus12.png"
  228. alt
  229. class="previewOfSiteStatusCentent2CListFontImg"
  230. />
  231. <span class="previewOfSiteStatusCentent2CListFonts"
  232. >未完成</span
  233. >
  234. </div>
  235. </div>
  236. </div>
  237. </div> -->
  238. </div>
  239. </div>
  240. <!-- 项目站点覆盖排名 -->
  241. <div id="previewOfSiteStatusLeftBottom">
  242. <div class="previewOfSiteStatusTitle">
  243. <img
  244. src="./../../../static/img/previewOfSiteStatus3.png"
  245. alt
  246. class="previewOfSiteStatusTitleImg"
  247. />
  248. <span class="previewOfSiteStatusTitleFont">项目站点覆盖排名</span>
  249. </div>
  250. <div class="previewOfSiteStatusCentent">
  251. <ul id="previewOfSiteStatusCentent3">
  252. <li
  253. class="previewOfSiteStatusCentent3Li"
  254. v-for="(item, index) in Region"
  255. :key="index"
  256. style="cursor: pointer;"
  257. >
  258. <span
  259. class="previewOfSiteStatusCentent3LiName"
  260. :title="item.RegionName"
  261. >{{ item.RegionName }}</span
  262. >
  263. <div class="previewOfSiteStatusCentent3LiCharts">
  264. <div
  265. class="previewOfSiteStatusCentent3LiCharts2"
  266. :style="'width:' + item.RegionJD + '%;'"
  267. ></div>
  268. </div>
  269. <span class="previewOfSiteStatusCentent3LiData">
  270. {{ item.RegionNum }}
  271. <span class="previewOfSiteStatusCentent3LiDW"></span>
  272. </span>
  273. </li>
  274. </ul>
  275. </div>
  276. </div>
  277. </div>
  278. <div class="boxmainR">
  279. <!-- 项目设备总览 -->
  280. <div id="previewOfSiteStatusRightTop">
  281. <div class="previewOfSiteStatusTitle">
  282. <img
  283. src="./../../../static/img/previewOfSiteStatus4.png"
  284. alt
  285. class="previewOfSiteStatusTitleImg"
  286. />
  287. <span class="previewOfSiteStatusTitleFont">项目设备总览</span>
  288. </div>
  289. <div class="previewOfSiteStatusCentent">
  290. <div id="previewOfSiteStatusCentent4">
  291. <div id="previewOfSiteStatusCentent4eCharts"></div>
  292. <div id="previewOfSiteStatusCentent4Font">
  293. <div id="previewOfSiteStatusCentent4Font1">
  294. <p class="previewOfSiteStatusCentent4Font1P1">
  295. {{ XianYou }}
  296. </p>
  297. <p class="previewOfSiteStatusCentent4Font1P2">
  298. <span class="previewOfSiteStatusCentent4Font1P2S"></span>
  299. 现有设备
  300. </p>
  301. </div>
  302. <div id="previewOfSiteStatusCentent4Font2">
  303. <p class="previewOfSiteStatusCentent4Font2P1">{{ DaJian }}</p>
  304. <p class="previewOfSiteStatusCentent4Font2P2">
  305. <span class="previewOfSiteStatusCentent4Font2P2S"></span>
  306. 搭建设备
  307. </p>
  308. </div>
  309. </div>
  310. </div>
  311. </div>
  312. </div>
  313. <div id="previewOfSiteStatusRightcenter">
  314. <div class="previewOfSiteStatusTitle">
  315. <img
  316. src="./../../../static/img/previewOfSiteStatus5.png"
  317. alt
  318. class="previewOfSiteStatusTitleImg"
  319. />
  320. <span class="previewOfSiteStatusTitleFont">项目设备环比增长</span>
  321. </div>
  322. <div class="previewOfSiteStatusCentent">
  323. <div id="previewOfSiteStatusCentent5"></div>
  324. </div>
  325. </div>
  326. <div id="previewOfSiteStatusRightBottom">
  327. <div class="previewOfSiteStatusTitle">
  328. <img
  329. src="./../../../static/img/previewOfSiteStatus6.png"
  330. alt
  331. class="previewOfSiteStatusTitleImg"
  332. />
  333. <span class="previewOfSiteStatusTitleFont">站点实时报警</span>
  334. </div>
  335. <div class="previewOfSiteStatusCentent">
  336. <div id="previewOfSiteStatusCentent6">
  337. <div id="GisRightCententBox2UL">
  338. <span v-if="NoBaoJingData" class="NoBaoJing">暂无报警数据</span>
  339. <div
  340. class="GIsRightWaringList"
  341. v-for="(item, index) in WaringList"
  342. :key="index"
  343. @mouseover="mouseOver(index)"
  344. @mouseleave="mouseLeave(index)"
  345. >
  346. <el-tooltip
  347. ref="tooltip"
  348. class="item"
  349. effect="dark"
  350. :content="
  351. `${item.factorsName}${item.warnTypeDesc},${item.warnTypeDesc}值为:${item.warnValue}`
  352. "
  353. placement="top"
  354. >
  355. <div>
  356. <span class="GIsRightWaringListNo">{{
  357. item.createTime
  358. }}</span>
  359. <span class="GIsRightWaringListName">{{
  360. item.siteName
  361. }}</span>
  362. <span
  363. class="GIsRightWaringListType"
  364. :class="[item.warnType == 2 ? 'red' : 'Yellow']"
  365. >{{ item.warnTypeDesc }}</span
  366. >
  367. </div>
  368. </el-tooltip>
  369. </div>
  370. </div>
  371. </div>
  372. </div>
  373. <!-- <div id="previewOfSiteStatusCentent6">
  374. <div id="GisRightCententBox2UL">
  375. <span v-if="NoBaoJingData" class="NoBaoJing">暂无报警数据</span>
  376. </div>
  377. </div> -->
  378. </div>
  379. </div>
  380.  
  381. <!-- 弹出层 -->
  382. <el-dialog
  383. class="page-dialog-site"
  384. title="历史数据表格"
  385. :visible.sync="dialogVisible"
  386. width="60%"
  387. :append-to-body="true"
  388. >
  389. <div id="NFSHistoryData">
  390. <div id="TimeBoxs">
  391. <span class="timeTM">时间:</span>
  392. <el-date-picker
  393. v-model="TimeBoxValue"
  394. type="daterange"
  395. :picker-options="pickerOptions"
  396. range-separator="至"
  397. start-placeholder="开始日期"
  398. end-placeholder="结束日期"
  399. align="right"
  400. value-format="yyyy-MM-dd"
  401. @change="TimeBoxChange"
  402. ></el-date-picker>
  403. <img
  404. src="../../../static/img/NFShouSuo.png"
  405. alt
  406. class="ButtonImgs"
  407. @click="Search()"
  408. />
  409. </div>
  410. <div id="NFSHistoryData2">
  411. <el-tabs v-model="HistoryBox" @tab-click="HistoryHandleClick">
  412. <el-tab-pane label="表格展示" name="DateGrid" class="timeTM">
  413. <el-table
  414. :data="HistoryTableData"
  415. style="width: 100%; height: calc(100% - 45px)"
  416. v-loading="loading3"
  417. element-loading-text="拼命加载中"
  418. element-loading-spinner="el-icon-loading"
  419. element-loading-background="rgba(255, 255, 255, 0.3)"
  420. >
  421. <template v-for="(col, index) in NFSNowDataTableHead">
  422. <el-table-column
  423. :prop="col.field"
  424. :label="col.title"
  425. :key="index"
  426. show-overflow-tooltip
  427. :render-header="labelHead"
  428. ></el-table-column>
  429. </template>
  430. </el-table>
  431. <el-pagination
  432. @size-change="HistorySizeChange"
  433. @current-change="HistoryCurrentChange"
  434. :current-page="HistoryPage"
  435. :page-sizes="[10, 20, 50, 100]"
  436. :page-size="HistorySize"
  437. layout="total, sizes, prev, pager, next, jumper"
  438. :total="DatagridDataLength"
  439. :hide-on-single-page="HRPageHide"
  440. style="margin-top: 10px"
  441. ></el-pagination>
  442. </el-tab-pane>
  443. <el-tab-pane label="图形展示" name="Charts" class="timeTM">
  444. <div id="YinziSelect">
  445. 上因子:
  446. <el-select
  447. v-model="SiteYinzi"
  448. placeholder="请选择"
  449. @change="YinZiUp"
  450. >
  451. <el-option
  452. v-for="item in SiteYinziAll"
  453. :key="item.codeAscii"
  454. :label="item.codeProperty"
  455. :value="item.codeAscii"
  456. ></el-option> </el-select
  457. >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下因子:
  458. <el-select
  459. v-model="SiteYinzi2"
  460. placeholder="请选择"
  461. @change="YinZiDown"
  462. >
  463. <el-option
  464. v-for="item in SiteYinziAll2"
  465. :key="item.codeAscii"
  466. :label="item.codeProperty"
  467. :value="item.codeAscii"
  468. ></el-option>
  469. </el-select>
  470. </div>
  471. <div id="HistoryEchart"></div>
  472. </el-tab-pane>
  473. </el-tabs>
  474. </div>
  475. </div>
  476. </el-dialog>
  477. </div>
  478. </div>
  479. </template>
  480. <script>
  481. import { message } from "./../../util/item";
  482. import countTo from "vue-count-to"; //引入数字滚动插件
  483. import { Polygon, LineString } from "ol/geom";
  484. import { Map, View, Feature } from "ol";
  485. import "ol/ol.css";
  486. import XYZ from "ol/source/XYZ";
  487. import * as layer from "ol/layer.js";
  488. import * as source from "ol/source.js";
  489. import * as geom from "ol/geom.js";
  490. import * as style from "ol/style.js";
  491. import Overlay from "ol/Overlay.js";
  492. import TileLayer from "ol/layer/Tile";
  493. import { fromLonLat } from "ol/proj";
  494.  
  495. import SourceVector from "ol/source/Vector";
  496. import LayerVector from "ol/layer/Vector";
  497. import Cluster from "ol/source/Cluster";
  498. import Style from "ol/style/Style";
  499. import Fill from "ol/style/Fill";
  500. import Text from "ol/style/Text";
  501. import Circle from "ol/style/Circle";
  502. import GeoJSON from "ol/format/GeoJSON";
  503. import Stroke from "ol/style/Stroke";
  504. import Draw from "ol/interaction/Draw";
  505. import dragzoom from "ol/interaction/DragZoom";
  506.  
  507. import Icon from "ol/style/Icon";
  508. import Select from "ol/interaction/Select";
  509. import Modify from "ol/interaction/Modify";
  510. import FormatWKT from "ol/format/WKT";
  511. import { ScaleLine, ZoomSlider, ZoomToExtent, Zoom } from "ol/control";
  512. export default {
  513. name: "previewOfSiteStatus",
  514. components: { countTo }, //加载数字滚动插件
  515. props: {
  516. flag: {
  517. type: Boolean,
  518. default() {
  519. return false;
  520. }
  521. }
  522. },
  523. data: function() {
  524. return {
  525. TimeBoxValue: [
  526. this.moment()
  527. .subtract("days", 3)
  528. .format("YYYY-MM-DD"),
  529. this.moment().format("YYYY-MM-DD")
  530. ], //起止日期
  531. pickerOptions: {
  532. shortcuts: [
  533. {
  534. text: "最近三天",
  535. onClick(picker) {
  536. const end = new Date();
  537. const start = new Date();
  538. start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
  539. picker.$emit("pick", [start, end]);
  540. }
  541. },
  542. {
  543. text: "最近一周",
  544. onClick(picker) {
  545. const end = new Date();
  546. const start = new Date();
  547. start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  548. picker.$emit("pick", [start, end]);
  549. }
  550. },
  551. {
  552. text: "最近一个月",
  553. onClick(picker) {
  554. const end = new Date();
  555. const start = new Date();
  556. start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  557. picker.$emit("pick", [start, end]);
  558. }
  559. }
  560. ]
  561. }, //时间框的快捷选项
  562. HistoryBox: "DateGrid", //tabs的默认展示未第一个 表格展示
  563. HistoryTableData: [], //历史数据表格数据
  564. HistoryPage: 1, //内页分页默认显示页
  565. DatagridDataLength: 0, //内页分页上显示的数据总条数
  566. HistorySize: 10, //内页分页上显示的每页的条数
  567. HRPageHide: this.DatagridDataLength > 10 ? false : true, //内页分页默认不显示 当页数大于1 的时候在显示
  568. SiteYinzi: "", //上因子
  569. SiteYinzi2: "", //下因子
  570. SiteYinziZn: "", //上因子中文名
  571. SiteYinzi2ZN: "", //下因子中文名
  572. SiteYinziAll: [], //上因子渲染数据
  573. SiteYinziAll2: [], //下因子渲染数据
  574. myChart: {}, //echarts的配置项
  575. ChartsX: "", //X轴数据
  576. ChartsUp: "", //上因子图形数据
  577. ChartsDown: "", //下因子图形数据
  578. //↓↓↓↓↓↓↓↓↓↓页面渲染逻辑以及增加页面流畅的辅助性功能↓↓↓↓↓↓↓↓↓↓
  579. FirstOn: true, //进来页面未点击历史图形的时候为true, 点击历史图形后为false,避免因子与图形接口多次渲染导致页面卡顿。
  580. DateisChange: false, //当时间段的时间进行变换后,切换tab时应该重新请求数据,否则不用数据刷新,默认时间未改动为false。
  581. YinZiChange: true, //判断因子是否改变过,如果改变过则重新请求echarts数据。
  582. loading: false,
  583. loading2: false,
  584. loading3: false,
  585. NFSNowDataTableHead: [], //实时数据表格表头数据
  586. //当前项目code
  587. currentPlatformCode: "",
  588. //当前站点name
  589. currentSiteName: "",
  590. //当前站点code
  591. currentSiteNo: "",
  592. //显示当前站点下的信息
  593. dialogVisible: false, //控制弹框的显隐
  594.  
  595. // ////////////
  596. /////////////
  597. //////////////
  598. menu_overlay: null,
  599. currentZoom: 5,
  600. switchStatusData: this.flag, // 重新定义数据
  601. timer: {}, //定时器
  602. // 顶部中间汇总A
  603. TopData1: "1866",
  604. TopData2: "933",
  605. TopData3: "50" + "%",
  606. // 顶部中间汇总B
  607. // 项目选择A
  608. ProjectList: [
  609. {
  610. exceptionState: 0,
  611. exceptionStatePercentage: "",
  612. groupName: "全部项目",
  613. groupNo: "",
  614. offLine: 0,
  615. offLinePercentage: 0,
  616. total: 0,
  617. totalPercentage: 0
  618. }
  619. ],
  620. dynamic: 0,
  621. ChecksplatformCode: "", //选取的平台的编号
  622. platformtype: "", //选取的站点统计类型
  623. ChecksplatformCodeTest: "全部项目", //选取的默认文字
  624. historyList: [],
  625. // 项目选择B
  626. // 平台站点数量及状态统计A
  627. Site: {
  628. // 初始值
  629. SAll: 0,
  630. SOn: 0,
  631. SOff: 0,
  632. // 实时值
  633. EAll: 0,
  634. EOn: 0,
  635. EOff: 0
  636. },
  637. Project: {
  638. // 初始值
  639. SAll: 0,
  640. SOn: 0,
  641. SOff: 0,
  642. // 实时值
  643. EAll: 0,
  644. EOn: 0,
  645. EOff: 0
  646. },
  647. // 平台站点数量及状态统计B
  648. // 项目站点覆盖排名A
  649. Region: [
  650. // { //数据格式
  651. // RegionName: "苏州",
  652. // RegionJD: "90",
  653. // RegionNum: "8600"
  654. // ShortName: "苏州"
  655. // }
  656. ],
  657. // 项目站点覆盖排名B
  658. // 项目设备总览A
  659. myChart: {},
  660. XianYou: "", //现有设备总数
  661. DaJian: "", //搭建设备总数
  662. // 项目设备总览B
  663. // 项目设备环比增长A
  664. myChart2: {},
  665. // 项目设备环比增长B
  666. // 站点实时报警A
  667. WaringList: [],
  668. NoBaoJingData: true, //有无报警数据,有就为false
  669. // 站点实时报警B
  670. map: "",
  671. namelist: [
  672. { name: "全部", platform: "", type: "", select: true },
  673. { name: "合同", platform: "", type: "0", select: false },
  674. { name: "临测", platform: "", type: "1", select: false }
  675. ]
  676. };
  677. },
  678. methods: {
  679. //计算中心点
  680. getCenterFromArray(clusterData) {
  681. var north = -90;
  682. var south = 90;
  683. var east = -180;
  684. var west = 180;
  685. var cell;
  686. for (var i = 0; i < clusterData.length; i++) {
  687. cell = clusterData[i];
  688. if (cell.lat && cell.lon) {
  689. //计算边框,用于切换项目定位中心点
  690. north = Math.max(parseFloat(cell.lat), north);
  691. south = Math.min(parseFloat(cell.lat), south);
  692. east = Math.max(parseFloat(cell.lon), east);
  693. west = Math.min(parseFloat(cell.lon), west);
  694. }
  695. }
  696.  
  697. return [(east + west) / 2, (north + south) / 2];
  698. },
  699. //复位功能
  700. fwClick() {
  701. this.map.getView().setCenter([114, 30]);
  702. this.map.getView().setZoom(5);
  703. },
  704.  
  705. //根据当前项目后台坐标计算出的中心飞行到指定城市
  706. flyToCity() {
  707. console.log("经纬度最大边框是:" + this.north);
  708. console.log("经纬度最大边框是:" + this.south);
  709. console.log("经纬度最大边框是:" + this.east);
  710. console.log("经纬度最大边框是:" + this.west);
  711. this.map
  712. .getView()
  713. .setCenter([
  714. (this.east + this.west) / 2,
  715. (this.north + this.south) / 2
  716. ]);
  717. this.map.getView().setZoom(10);
  718. },
  719. //项目图层切换
  720. initPointToMap(projectNo) {
  721. this.$http
  722. .post(this.nozzle.listStationBase, {
  723. data: {
  724. platformCode: projectNo
  725. }
  726. })
  727. .then(response => {
  728. console.log(response);
  729. if (response.data.code === 1) {
  730. this.showCluster(response.data.data);
  731. }
  732. });
  733. },
  734. //点击历史数据
  735. historyData(stCode) {
  736. console.log(stCode);
  737. this.currentSiteNo = stCode;
  738. this.dialogVisible = true;
  739. setTimeout(() => {
  740. // this.LoadGridTitleData();
  741. this.loadDataGridData();
  742. }, 0);
  743. },
  744. // 获取所有平台
  745. LoadAllProject() {
  746. this.$http
  747. .post(
  748. this.nozzle.userGroupRelaGetGroups +
  749. "?&pageNo=" +
  750. 1 +
  751. "&typeStr=" +
  752. "&pageSize=" +
  753. 999
  754. )
  755. .then(response => {
  756. // console.log(response);
  757. if (response.status === 200) {
  758. var qwe = response.data.data === "" ? [] : response.data.data;
  759. this.ProjectList = this.ProjectList.concat(qwe);
  760. } else {
  761. message(response);
  762. }
  763. })
  764. .catch(response => {
  765. message(response);
  766. });
  767. },
  768. // 根据平台渲染站点统计
  769. loadSiteNumForOroject() {
  770. // console.log(this.platformtype, this.ChecksplatformCode);
  771.  
  772. this.$http
  773. .post(this.nozzle.getSiteNum, {
  774. data: { platform: this.ChecksplatformCode, type: this.platformtype }
  775. })
  776. .then(response => {
  777. if (response.status === 200) {
  778. // 将当前数据设置成数字滚动的初始值
  779. this.Site.SAll = this.Site.EAll;
  780. this.Site.SOn = this.Site.EOn;
  781. this.Site.SOff = this.Site.EOff;
  782. this.Project.SAll = this.Project.EAll;
  783. this.Project.SOn = this.Project.EOn;
  784. this.Project.SOff = this.Project.EOff;
  785. // 将新数据设置成数字滚动的结束值 也就是展示值
  786. this.Site.EAll = response.data.data.all;
  787. this.Site.EOn = response.data.data.online;
  788. this.Site.EOff = response.data.data.offline;
  789. // this.Project.EAll = response.data.data.projectcount;
  790. // this.Project.EOn = response.data.data.completed;
  791. // this.Project.EOff = response.data.data.noncompleted;
  792. } else {
  793. message(response);
  794. }
  795. })
  796. .catch(response => {
  797. message(response);
  798. });
  799. },
  800. // 单击显示平台站点
  801. allpreview(index, item, event) {
  802. // console.log(index, platform, event.target);
  803. this.namelist.forEach(item => {
  804. item.select = false;
  805. });
  806. this.namelist[index].select = true;
  807.  
  808. // console.log(this.platformtype, this.ChecksplatformCode);
  809. this.platformtype = item.type;
  810.  
  811. this.$http
  812. .post(this.nozzle.getSiteNum, {
  813. data: { platform: this.ChecksplatformCode, type: this.platformtype }
  814. })
  815. .then(response => {
  816. if (response.status === 200) {
  817. // 将当前数据设置成数字滚动的初始值
  818. this.Site.SAll = this.Site.EAll;
  819. this.Site.SOn = this.Site.EOn;
  820. this.Site.SOff = this.Site.EOff;
  821. this.Project.SAll = this.Project.EAll;
  822. this.Project.SOn = this.Project.EOn;
  823. this.Project.SOff = this.Project.EOff;
  824. // 将新数据设置成数字滚动的结束值 也就是展示值
  825. this.Site.EAll = response.data.data.all;
  826. this.Site.EOn = response.data.data.online;
  827. this.Site.EOff = response.data.data.offline;
  828. // this.Project.EAll = response.data.data.projectcount;
  829. // this.Project.EOn = response.data.data.completed;
  830. // this.Project.EOff = response.data.data.noncompleted;
  831. } else {
  832. message(response);
  833. }
  834. })
  835. .catch(response => {
  836. message(response);
  837. });
  838. },
  839. // 加载项目站点覆盖排名
  840. loadQuyuPaiMing() {
  841. this.$http
  842. .post(this.nozzle.sysPlatformGetAllSiteCount)
  843. .then(response => {
  844. if (response.data.code === 1) {
  845. this.Region = response.data.data;
  846. } else {
  847. message(response);
  848. }
  849. })
  850. .catch(response => {
  851. message(response);
  852. });
  853. },
  854. // 加载 项目设备总览
  855. loadQuyuShebei() {
  856. this.$http
  857. .post(this.nozzle.platEquipmentGetEquipStatistics, {
  858. data: {
  859. platform: this.ChecksplatformCode
  860. }
  861. })
  862. .then(response => {
  863. if (response.data.code === 200) {
  864. this.loadRegionEcharts(
  865. response.data.data.title,
  866. response.data.data.exiting,
  867. response.data.data.tobebuilt
  868. );
  869. this.XianYou = response.data.data.exitingsum;
  870. this.DaJian = response.data.data.tobebuiltsum;
  871. } else {
  872. message(response);
  873. }
  874. })
  875. .catch(response => {
  876. message(response);
  877. });
  878. },
  879. // 加载 项目设备环比增长
  880. loadQuYuSheBeiHuanBi() {
  881. this.$http
  882. .post(this.nozzle.sysPlatformGetSiteStateStatistics, {
  883. data: {
  884. platform: this.ChecksplatformCode
  885. }
  886. })
  887. .then(response => {
  888. if (response.data.code === 200) {
  889. this.loadRegionEcharts2(
  890. response.data.data.xdata,
  891. response.data.data.offline,
  892. response.data.data.warn,
  893. response.data.data.malfunction,
  894. response.data.data.alarm
  895. );
  896. } else {
  897. message(response);
  898. }
  899. })
  900. .catch(response => {
  901. message(response);
  902. });
  903. },
  904. // 加载 站点实时报警信息
  905. loadSiteBaoJing() {
  906. this.NoBaoJingData = true;
  907. this.WaringList = [];
  908. this.$http
  909. .post(this.nozzle.warnLogListWarnLog, {
  910. current: 1,
  911. size: 99,
  912. data: {
  913. platForm: this.ChecksplatformCode,
  914. endTime: "",
  915. startTime: "",
  916. siteName: ""
  917. }
  918. })
  919. .then(response => {
  920. if (response.data.code === 200) {
  921. if (response.data.data.total > 0) {
  922. // 没有数据 显示暂无数据的提示
  923. this.NoBaoJingData = false;
  924. }
  925. this.WaringList = response.data.data.records;
  926. } else {
  927. message(response);
  928. }
  929. })
  930. .catch(response => {
  931. message(response);
  932. });
  933. },
  934. // 点击项目ZZJ
  935. ListClick(index) {
  936. this.ChecksplatformCode = this.ProjectList[index]["groupNo"];
  937. //刷新联动地图上的点位按照项目实际的个数
  938. console.log(this.ChecksplatformCode)
  939. this.initPointToMap(this.ChecksplatformCode)
  940. if(this.ProjectList[index]["areaCode"]&&this.ProjectList[index]["groupNo"]!="")
  941. this.gotoProgramArea(this.ProjectList[index]["areaCode"])
  942. else
  943. {
  944. this.fwClick()
  945. if (this.vectorSourceArea) {
  946. this.vectorSourceArea.clear();
  947. }
  948. }
  949.  
  950. // 限制数组的长度不超过10个
  951. // console.log(this.historyList.length);
  952. // console.log(this.ProjectList[index]["groupName"]);
  953. var gname = this.ProjectList[index]["groupName"];
  954. if (this.historyList.length >= 10 && this.historyList.includes(gname)) {
  955. } else if (this.historyList.length >= 10) {
  956. this.historyList.pop();
  957. }
  958. this.historyList = this.selectTag(
  959. this.historyList,
  960. this.ProjectList[index]["groupName"]
  961. );
  962.  
  963. this.setItem(this.historyList);
  964.  
  965. // 根据平台渲染站点数量统计及状态统计
  966. this.loadSiteNumForOroject();
  967. // 根据平台渲染项目设备总览
  968. this.loadQuyuShebei();
  969. // 根据平台渲染项目设备环比增长
  970. this.loadQuYuSheBeiHuanBi();
  971. // 根据平台渲染站点实时报警信息
  972. this.loadSiteBaoJing();
  973. // 返回出项目的坐标以及缩放等级************************************************************************************************GIS调用
  974. if (
  975. this.ProjectList[index].latitude != null &&
  976. this.ProjectList[index].longitude != null &&
  977. this.ProjectList[index].zoomLevel != null
  978. ) {
  979. let MapPoint = new esri.geometry.Point(
  980. this.ProjectList[index].longitude,
  981. this.ProjectList[index].latitude,
  982. new esri.SpatialReference({
  983. wkid: 4326
  984. })
  985. );
  986. this.map.centerAndZoom(MapPoint, this.ProjectList[index].zoomLevel);
  987. }
  988. },
  989. // 点击历史搜索的文字
  990. HistoryClick(item) {
  991. this.ChecksplatformCodeTest = item;
  992. this.ProjectList.forEach(item1 => {
  993. if (item1["groupName"] == item) {
  994. this.ChecksplatformCode = item1["groupNo"];
  995. //地图联动响应的项目
  996. this.initPointToMap(this.ChecksplatformCode)
  997. if(item1["areaCode"]&&item1["groupNo"]!="")
  998. this.gotoProgramArea(item1["areaCode"])
  999. else
  1000. {
  1001. this.fwClick()
  1002. if (this.vectorSourceArea) {
  1003. this.vectorSourceArea.clear();
  1004. }
  1005. }
  1006. // 根据平台渲染站点数量统计及状态统计
  1007. this.loadSiteNumForOroject();
  1008. // 根据平台渲染项目设备总览
  1009. this.loadQuyuShebei();
  1010. // 根据平台渲染项目设备环比增长
  1011. this.loadQuYuSheBeiHuanBi();
  1012. // 根据平台渲染站点实时报警信息
  1013. this.loadSiteBaoJing();
  1014. // 返回出项目的坐标以及缩放等级**************************GIS调用
  1015. if (
  1016. item1.latitude != null &&
  1017. item1.longitude != null &&
  1018. item1.zoomLevel != null
  1019. ) {
  1020. let MapPoint = new esri.geometry.Point(
  1021. item1.longitude,
  1022. item1.latitude,
  1023. new esri.SpatialReference({
  1024. wkid: 4326
  1025. })
  1026. );
  1027. this.map.centerAndZoom(MapPoint, item1.zoomLevel);
  1028. }
  1029. }
  1030. });
  1031. },
  1032. // 本地存储ZZJ
  1033. setItem(arr) {
  1034. window.sessionStorage.setItem("HISTORYLIST", JSON.stringify(arr));
  1035. },
  1036. // 本地取值ZZJ
  1037. getItem() {
  1038. if (!JSON.parse(window.sessionStorage.getItem("HISTORYLIST"))) {
  1039. return null;
  1040. }
  1041. this.historyList = JSON.parse(
  1042. window.sessionStorage.getItem("HISTORYLIST")
  1043. );
  1044. },
  1045. // 对历史搜索数组去重判断
  1046. selectTag(row, id) {
  1047. row.includes(id) ? row : row.unshift(id);
  1048. return row;
  1049. },
  1050. // 加载项目设备总览的ecahrts
  1051. loadRegionEcharts(SheBeiLeiXing, XianYouData, DaJianData) {
  1052. // 基于准备好的dom,初始化echarts实例
  1053. this.myChart = this.$echarts.init(
  1054. document.getElementById("previewOfSiteStatusCentent4eCharts")
  1055. );
  1056. // 绘制图表
  1057. this.myChart.clear();
  1058. this.myChart.setOption({
  1059. color: ["red"],
  1060. tooltip: {
  1061. trigger: "axis"
  1062. },
  1063. legend: {
  1064. x: "center",
  1065. data: ["现有设备", "搭建设备"],
  1066. show: false
  1067. },
  1068. radar: [
  1069. {
  1070. indicator: SheBeiLeiXing,
  1071. radius: 70,
  1072. shape: "circle",
  1073. name: {
  1074. formatter: "{value}",
  1075. textStyle: {
  1076. color: "red"
  1077. }
  1078. }
  1079. }
  1080. ],
  1081. series: [
  1082. {
  1083. type: "radar",
  1084. itemStyle: { normal: { areaStyle: { type: "default" } } },
  1085. tooltip: {
  1086. trigger: "item"
  1087. },
  1088. data: [
  1089. {
  1090. name: "现有设备",
  1091. value: XianYouData,
  1092. areaStyle: {
  1093. normal: {
  1094. color: "rgb(255, 217, 0)"
  1095. }
  1096. },
  1097. itemStyle: {
  1098. normal: {
  1099. color: "rgb(255, 217, 0)",
  1100. lineStyle: {
  1101. color: "rgb(255, 217, 0)"
  1102. },
  1103. areaStyle: {
  1104. type: "default"
  1105. }
  1106. }
  1107. }
  1108. },
  1109. {
  1110. name: "搭建设备",
  1111. value: DaJianData,
  1112. areaStyle: {
  1113. normal: {
  1114. color: "rgb(0, 119, 254)" // 选择项目颜色
  1115. }
  1116. },
  1117. itemStyle: {
  1118. normal: {
  1119. color: "rgb(0, 119, 254)",
  1120. lineStyle: {
  1121. color: "rgb(0, 119, 254)"
  1122. },
  1123. areaStyle: {
  1124. type: "default"
  1125. }
  1126. }
  1127. }
  1128. }
  1129. ]
  1130. }
  1131. ]
  1132. });
  1133. },
  1134. // 加载项目设备环比增长的ecahrts
  1135. loadRegionEcharts2(XData, V1, V2, V3, V4) {
  1136. // 基于准备好的dom,初始化echarts实例
  1137. this.myChart2 = this.$echarts.init(
  1138. document.getElementById("previewOfSiteStatusCentent5")
  1139. ); // 绘制图表
  1140. this.myChart2.clear();
  1141. this.myChart2.setOption({
  1142. color: [
  1143. "rgb(140,143,146)",
  1144. "rgb(255,214,0)",
  1145. "rgb(229,132,12)",
  1146. "rgb(211,22,22)"
  1147. ],
  1148. tooltip: {
  1149. trigger: "axis"
  1150. },
  1151. legend: {
  1152. data: ["离线数量", "预警数量", "故障数量", "报警数量"],
  1153. textStyle: {
  1154. //图例文字的样式
  1155. color: "rgb(0, 119, 254)",
  1156. fontSize: 12
  1157. }
  1158. },
  1159. grid: {
  1160. left: "3%",
  1161. right: "6%",
  1162. bottom: "3%",
  1163. containLabel: true
  1164. },
  1165. xAxis: {
  1166. type: "category",
  1167. boundaryGap: false,
  1168. data: XData,
  1169. axisLabel: {
  1170. formatter: "{value}",
  1171. textStyle: {
  1172. //改变刻度字体样式
  1173. color: "rgb(0, 119, 254)"
  1174. },
  1175. fontSize: 12 //字体大小
  1176. },
  1177. splitLine: {
  1178. show: false
  1179. }
  1180. },
  1181. yAxis: {
  1182. type: "value",
  1183. axisLabel: {
  1184. formatter: "{value}",
  1185. textStyle: {
  1186. //改变刻度字体样式
  1187. color: "rgb(0, 119, 254)"
  1188. },
  1189. fontSize: 12 //字体大小
  1190. },
  1191. splitLine: {
  1192. show: false
  1193. }
  1194. },
  1195. series: [
  1196. {
  1197. name: "离线数量",
  1198. type: "line",
  1199. data: V1,
  1200. smooth: true,
  1201. symbol: "none" //取消折点圆圈
  1202. },
  1203. {
  1204. name: "预警数量",
  1205. type: "line",
  1206. data: V2,
  1207. smooth: true,
  1208. symbol: "none" //取消折点圆圈
  1209. },
  1210. {
  1211. name: "故障数量",
  1212. type: "line",
  1213. data: V3,
  1214. smooth: true,
  1215. symbol: "none" //取消折点圆圈
  1216. },
  1217. {
  1218. name: "报警数量",
  1219. type: "line",
  1220. data: V4,
  1221. smooth: true,
  1222. symbol: "none" //取消折点圆圈
  1223. }
  1224. ]
  1225. });
  1226. },
  1227. // 预警报警信息滚动
  1228. ScrollUp() {
  1229. var box = document.getElementById("previewOfSiteStatusCentent6");
  1230. var con1 = document.getElementById("GisRightCententBox2UL");
  1231. if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) {
  1232. box.scrollTop = 0;
  1233. } else {
  1234. box.scrollTop++;
  1235. }
  1236. },
  1237. //鼠标移入事件
  1238. mouseOver(index) {
  1239. if (this.timer) {
  1240. clearInterval(this.timer);
  1241. this.$refs.tooltip[index].handleShowPopper();
  1242. }
  1243. },
  1244. //鼠标移出事件
  1245. mouseLeave(index) {
  1246. this.$refs.tooltip[index].handleClosePopper();
  1247. this.timer = setInterval(this.ScrollUp, 100);
  1248. },
  1249. //按照项目选择去联动地图
  1250. initPointToMap1(projectNo) {
  1251. let _this = this;
  1252. loadModules([
  1253. "dojo/parser",
  1254. "dojo/ready",
  1255. "dojo/_base/array",
  1256. "esri/Color",
  1257. "dojo/dom-style",
  1258. "dojo/query",
  1259.  
  1260. "esri/map",
  1261. "esri/dijit/InfoWindow",
  1262. "esri/request",
  1263. "esri/graphic",
  1264. "esri/geometry/Extent",
  1265.  
  1266. "esri/symbols/SimpleMarkerSymbol",
  1267. "esri/symbols/SimpleFillSymbol",
  1268. "esri/symbols/PictureMarkerSymbol",
  1269. "esri/renderers/ClassBreaksRenderer",
  1270.  
  1271. "esri/layers/GraphicsLayer",
  1272. "esri/SpatialReference",
  1273. "esri/dijit/PopupTemplate",
  1274. "esri/geometry/Point",
  1275. "esri/geometry/webMercatorUtils",
  1276. "esri/layers/ArcGISTiledMapServiceLayer",
  1277. "extras/ClusterLayer",
  1278.  
  1279. "dijit/layout/BorderContainer",
  1280. "dijit/layout/ContentPane",
  1281.  
  1282. "dojo/domReady!"
  1283. ])
  1284. .then(
  1285. ([
  1286. parser,
  1287. ready,
  1288. arrayUtils,
  1289. Color,
  1290. domStyle,
  1291. query,
  1292. Map,
  1293. InfoWindow,
  1294. esriRequest,
  1295. Graphic,
  1296. Extent,
  1297. SimpleMarkerSymbol,
  1298. SimpleFillSymbol,
  1299. PictureMarkerSymbol,
  1300. ClassBreaksRenderer,
  1301. GraphicsLayer,
  1302. SpatialReference,
  1303. PopupTemplate,
  1304. Point,
  1305. webMercatorUtils,
  1306. ArcGISTiledMapServiceLayer,
  1307. ClusterLayer
  1308. ]) => {
  1309. _this.$http
  1310. .post(_this.nozzle.listStationBase, {
  1311. data: {
  1312. platformCode: projectNo
  1313. }
  1314. })
  1315. .then(response => {
  1316. console.log(response);
  1317. if (response.data.code === 1) {
  1318. let picBaseUrl =
  1319. "https://static.arcgis.com/images/Symbols/Shapes/";
  1320. let photoInfo = {};
  1321. var imagealone = {};
  1322. let position = {};
  1323.  
  1324. //第一步清空
  1325. _this.map.graphics.clear();
  1326.  
  1327. if (this.graphicsLayerByMarker) {
  1328. _this.map.removeLayer(this.graphicsLayerByMarker);
  1329. }
  1330. this.graphicsLayerByMarker = new GraphicsLayer(); //点
  1331.  
  1332. let wgs = new SpatialReference({
  1333. wkid: 4326
  1334. });
  1335. //第一步先初始化好点图层graphicsLayerByMarker
  1336. var Marker_point;
  1337. let markerPng;
  1338.  
  1339. var marksymbol = new PictureMarkerSymbol(
  1340. picBaseUrl + "BluePin1LargeB.png",
  1341. 32,
  1342. 32
  1343. ).setOffset(0, 15);
  1344.  
  1345. for (var k = 0; k < response.data.data.length; k++) {
  1346. if (
  1347. response.data.data[k].lon &&
  1348. response.data.data[k].lon != "0"
  1349. ) {
  1350. Marker_point = new Point(
  1351. parseFloat(response.data.data[k].lon),
  1352. parseFloat(response.data.data[k].lat),
  1353. wgs
  1354. );
  1355. var attr = {
  1356. stCode: response.data.data[k].stCode,
  1357. stName: response.data.data[k].stName,
  1358. mapPoint: Marker_point
  1359. };
  1360. markerPng = new Graphic(Marker_point, marksymbol, attr);
  1361. this.graphicsLayerByMarker.add(markerPng);
  1362. }
  1363. }
  1364.  
  1365. //初始化结束
  1366.  
  1367. photoInfo.data = arrayUtils.map(response.data.data, function(
  1368. p
  1369. ) {
  1370. /* if(p.lon!=null){
  1371. } */
  1372. let latlng = new Point(
  1373. parseFloat(p.lon),
  1374. parseFloat(p.lat),
  1375. wgs
  1376. );
  1377. let webMercator = webMercatorUtils.geographicToWebMercator(
  1378. latlng
  1379. );
  1380. let attributes = {
  1381. stName: p.stName,
  1382. stCode: p.stCode
  1383. };
  1384. return {
  1385. x: webMercator.x,
  1386. y: webMercator.y,
  1387. attributes: attributes
  1388. };
  1389. });
  1390.  
  1391. let popupTemplate = new PopupTemplate({
  1392. title: "",
  1393. fieldInfos: [
  1394. {
  1395. fieldName: "stName",
  1396. label: "名称:",
  1397. visible: true
  1398. },
  1399. {
  1400. fieldName: "stCode",
  1401. label: "编号:",
  1402. visible: true
  1403. }
  1404. ]
  1405. });
  1406. if (this.clusterLayer) {
  1407. _this.map.removeLayer(this.clusterLayer);
  1408. }
  1409. this.clusterLayer = new ClusterLayer({
  1410. data: photoInfo.data,
  1411. distance: 100,
  1412. id: "clusters" + projectNo,
  1413. labelColor: "#fff",
  1414. labelOffset: 10,
  1415. resolution: _this.map.extent.getWidth() / _this.map.width,
  1416. singleColor: "#888",
  1417. singleTemplate: popupTemplate
  1418. });
  1419. let defaultSym = new SimpleMarkerSymbol().setSize(4);
  1420. let renderer = new ClassBreaksRenderer(
  1421. defaultSym,
  1422. "clusterCount"
  1423. );
  1424.  
  1425. let blue = new PictureMarkerSymbol(
  1426. picBaseUrl + "BluePin1LargeB.png",
  1427. 32,
  1428. 32
  1429. ).setOffset(0, 15);
  1430. let green = new PictureMarkerSymbol(
  1431. picBaseUrl + "GreenPin1LargeB.png",
  1432. 64,
  1433. 64
  1434. ).setOffset(0, 15);
  1435. let red = new PictureMarkerSymbol(
  1436. picBaseUrl + "RedPin1LargeB.png",
  1437. 72,
  1438. 72
  1439. ).setOffset(0, 15);
  1440. renderer.addBreak(0, 2, blue);
  1441. renderer.addBreak(2, 200, green);
  1442. renderer.addBreak(200, 1001, red);
  1443.  
  1444. this.clusterLayer.setRenderer(renderer);
  1445. _this.map.addLayer(this.clusterLayer);
  1446. //聚簇图层按级别控制开关
  1447.  
  1448. _this.map.on("update-end", () => {
  1449. console.log("当前级别是:" + _this.map.getLevel());
  1450. //隐藏聚簇图层
  1451. if (_this.map.getLevel() > 9) {
  1452. if (this.clusterLayer)
  1453. _this.map.removeLayer(this.clusterLayer);
  1454. _this.map.addLayer(this.graphicsLayerByMarker);
  1455. } else {
  1456. if (this.graphicsLayerByMarker)
  1457. _this.map.removeLayer(this.graphicsLayerByMarker);
  1458. _this.map.addLayer(this.clusterLayer);
  1459. }
  1460. });
  1461.  
  1462. //点击单个图标事件
  1463. this.graphicsLayerByMarker.on("click", res => {
  1464. console.log(res.graphic.attributes.mapPoint);
  1465. console.log(res.graphic.attributes.stCode);
  1466. console.log(res.graphic.attributes.stName);
  1467. _this.$http
  1468. .post(_this.nozzle.getTempData, {
  1469. data: {
  1470. stCode: res.graphic.attributes.stCode
  1471. }
  1472. })
  1473. .then(resP => {
  1474. let textContent =
  1475. "<table style='width: 330px;'><tr><td>名称</td><td>" +
  1476. res.graphic.attributes.stName +
  1477. "</td></tr>";
  1478. for (let item in resP.data.data) {
  1479. textContent += "<tr>";
  1480. for (let arr in resP.data.data[item]) {
  1481. textContent +=
  1482. "<td>" + resP.data.data[item][arr] + "</td>";
  1483. }
  1484. textContent += "</tr>";
  1485. }
  1486. textContent +=
  1487. "<tr><td style='text-align: right' colspan='2'><a href ='javascript:void(0)' style='color:dodgerblue' onclick=''>历时数据</a></td></tr></table>";
  1488. _this.map.infoWindow.setTitle("详细信息");
  1489. _this.map.infoWindow.setContent(textContent);
  1490.  
  1491. _this.map.infoWindow.show(
  1492. res.graphic.attributes.mapPoint,
  1493. esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT
  1494. );
  1495. });
  1496. });
  1497.  
  1498. //聚簇图层按地图级别控制开关
  1499. this.clusterLayer.on("click", function(res) {
  1500. if (res.graphic._graphicsLayer._singles.length == 0) {
  1501. return;
  1502. }
  1503. let d = res;
  1504. _this.$http
  1505. .post(_this.nozzle.getTempData, {
  1506. data: {
  1507. stCode:
  1508. d.graphic._graphicsLayer._singles[0].attributes
  1509. .stCode
  1510. }
  1511. })
  1512. .then(resP => {
  1513. let textContent =
  1514. "<table style='width: 330px;'><tr><td>名称</td><td>" +
  1515. d.graphic._graphicsLayer._singles[0].attributes
  1516. .stName +
  1517. "</td></tr>";
  1518. for (let item in resP.data.data) {
  1519. textContent += "<tr>";
  1520. for (let arr in resP.data.data[item]) {
  1521. textContent +=
  1522. "<td>" + resP.data.data[item][arr] + "</td>";
  1523. }
  1524. textContent += "</tr>";
  1525. }
  1526. textContent +=
  1527. "<tr><td style='text-align: right' colspan='2'><a href ='javascript:void(0)' style='color:dodgerblue' onclick=''>历时数据</a></td></tr></table>";
  1528. _this.map.infoWindow.setTitle("详细信息");
  1529. _this.map.infoWindow.setContent(textContent);
  1530.  
  1531. _this.map.infoWindow.show(
  1532. d.mapPoint,
  1533. esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT
  1534. );
  1535. });
  1536. });
  1537. } else {
  1538. message(response);
  1539. }
  1540. })
  1541. .catch(response => {
  1542. message(response);
  1543. });
  1544. }
  1545. )
  1546. .catch(err => {
  1547. // handle any script or module loading errors
  1548. // console.error(err);
  1549. });
  1550. },
  1551. gotoProgramArea(areaCode) {
  1552. //初始化项目行政区域边框
  1553. // Create layer
  1554. if (this.vectorSourceArea) {
  1555. this.vectorSourceArea.clear();
  1556. }
  1557.  
  1558. /* let response = await fetch(
  1559. "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json"
  1560. );
  1561.  
  1562. let dataJson = await response.json(); */
  1563. this.$http
  1564. .get(this.nozzle.queueadmin+"/"+areaCode+".json")
  1565. .then(response => {
  1566. console.log(response)
  1567. let dataJson = response.data.features[0];
  1568. console.log(dataJson)
  1569.  
  1570. let areaFeature = new GeoJSON().readFeatures(dataJson);
  1571.  
  1572. this.vectorSourceArea = new SourceVector({
  1573. features: areaFeature
  1574. });
  1575.  
  1576. this.vectorArea = new LayerVector({
  1577. renderMode: "image",
  1578. maxResolution: 2,
  1579. zIndex: 2,
  1580. source: this.vectorSourceArea,
  1581. style: feature => {
  1582. return new Style({
  1583. stroke: new Stroke({
  1584. color: "#8A2BE2",
  1585. lineCap: "butt",
  1586. width: 3
  1587. })
  1588. });
  1589. }
  1590. });
  1591. this.map.addLayer(this.vectorArea);
  1592.  
  1593. //定位过去
  1594. //开始根据routeFeature定位
  1595. /* console.log(areaFeature[0].getGeometry().getExtent())
  1596. console.log(areaFeature[0].geometryChangeKey_.target.extent_) */
  1597. var extent = areaFeature[0].getGeometry().getExtent();
  1598. this.map.getView().fit(extent, this.map.getSize());
  1599. })
  1600. },
  1601. gotoProgramArea1(areaCode) {
  1602. //初始化项目行政区域边框
  1603. // Create layer
  1604. if (this.vectorSourceArea) {
  1605. this.vectorSourceArea.clear();
  1606. }
  1607.  
  1608. /* let response = await fetch(
  1609. "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json"
  1610. );
  1611.  
  1612. let dataJson = await response.json(); */
  1613. this.$http
  1614. .get(this.nozzle.queueadmin+"/"+areaCode+".json")
  1615. .then(response => {
  1616. console.log(response)
  1617. let dataJson = response.data.features[0];
  1618. console.log(dataJson)
  1619.  
  1620. let areaFeature = new GeoJSON().readFeatures(dataJson);
  1621.  
  1622. this.vectorSourceArea = new SourceVector({
  1623. features: areaFeature
  1624. });
  1625.  
  1626. this.vectorArea = new LayerVector({
  1627. renderMode: "image",
  1628. maxResolution: 2,
  1629. zIndex: 2,
  1630. source: this.vectorSourceArea,
  1631. style: feature => {
  1632. return new Style({
  1633. stroke: new Stroke({
  1634. color: "#8A2BE2",
  1635. lineCap: "butt",
  1636. width: 3
  1637. })
  1638. });
  1639. }
  1640. });
  1641. this.map.addLayer(this.vectorArea);
  1642.  
  1643. //定位过去
  1644. //开始根据routeFeature定位
  1645. /* console.log(areaFeature[0].getGeometry().getExtent())
  1646. console.log(areaFeature[0].geometryChangeKey_.target.extent_) */
  1647. var extent = areaFeature[0].getGeometry().getExtent();
  1648. this.map.getView().fit(extent, this.map.getSize());
  1649. })
  1650. },
  1651. //显示cluster聚簇界面
  1652. showCluster(clusterData) {
  1653. //初始化kkLayer
  1654. if (this.source) {
  1655. this.source.clear();
  1656. }
  1657. this.source = new SourceVector({});
  1658.  
  1659. //初始化kkLayer
  1660. if (this.vectorSource) {
  1661. this.vectorSource.clear();
  1662. }
  1663. this.vectorSource = new SourceVector({
  1664. wrapX: false
  1665. });
  1666.  
  1667. this.vector = new LayerVector({
  1668. source: this.vectorSource,
  1669. style: feature => {
  1670. return this.getStyleOfCar(feature);
  1671. }
  1672. });
  1673.  
  1674. var cell,
  1675. resultwkt = "";
  1676. var feature;
  1677. var keydataStruct;
  1678. this.north = -90;
  1679. this.south = 90;
  1680. this.east = -180;
  1681. this.west = 180;
  1682.  
  1683. for (var i = 0; i < clusterData.length; i++) {
  1684. cell = clusterData[i];
  1685. if (cell.lon != null && cell.lat != null) {
  1686. resultwkt = "POINT(" + cell.lon + " " + cell.lat + ")";
  1687. }
  1688. feature = new FormatWKT().readFeature(resultwkt);
  1689. //站点属性记录
  1690. feature.lon = cell.lon;
  1691. feature.lat = cell.lat;
  1692. feature.stName = cell.stName;
  1693. feature.stCode = cell.stCode;
  1694. //加入ol.feautre几何属性
  1695. feature.wkt = resultwkt;
  1696. //无聚簇类型图层也添加一遍
  1697. this.vectorSource.addFeature(feature);
  1698.  
  1699. this.source.addFeature(feature);
  1700. //计算边框,用于切换项目定位中心点
  1701. this.north = Math.max(parseFloat(cell.lat), this.north);
  1702. this.south = Math.min(parseFloat(cell.lat), this.south);
  1703. this.east = Math.max(parseFloat(cell.lon), this.east);
  1704. this.west = Math.min(parseFloat(cell.lon), this.west);
  1705. }
  1706.  
  1707. this.clusterSource = new Cluster({
  1708. distance: 40,
  1709. source: this.source
  1710. });
  1711. var styleCache = {};
  1712.  
  1713. this.layer = new LayerVector({
  1714. source: this.clusterSource,
  1715. //source: this.source,
  1716. style: feature => {
  1717. var size = feature.get("features").length;
  1718. var currentFeature = feature.get("features");
  1719. if (size > 200) {
  1720. return new Style({
  1721. text: new Text({
  1722. text: size.toString(),
  1723. font: "bold 12px 微软雅黑",
  1724. fill: new Fill({
  1725. color: "#8A2BE2"
  1726. }),
  1727. textAlign: "center"
  1728. //textBaseline: "top"
  1729. }),
  1730. image: new Icon({
  1731. src:
  1732. "https://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png"
  1733. })
  1734. /* image: new Circle({
  1735. radius: 18,
  1736. stroke: new Stroke({
  1737. color: "#fff"
  1738. }),
  1739. fill: new Fill({
  1740. color: "#3399CC"
  1741. })
  1742. }) */
  1743. });
  1744. } else if (size > 2) {
  1745. return new Style({
  1746. text: new Text({
  1747. text: size.toString(),
  1748. font: "bold 12px 微软雅黑",
  1749. fill: new Fill({
  1750. color: "green"
  1751. }),
  1752. textAlign: "center"
  1753. //textBaseline: "top"
  1754. }),
  1755. image: new Icon({
  1756. src:
  1757. "https://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png"
  1758. })
  1759. /* image: new Circle({
  1760. radius: 18,
  1761. stroke: new Stroke({
  1762. color: "#fff"
  1763. }),
  1764. fill: new Fill({
  1765. color: "#3399CC"
  1766. })
  1767. }) */
  1768. });
  1769. } else {
  1770. return this.getStyleOfCar(currentFeature[0]);
  1771. }
  1772. }
  1773. });
  1774. //飞行到指定的城市项目中心点
  1775. // this.flyToCity()
  1776. //?要判断currentZoom加哪一个
  1777. if (this.currentZoom >= 8) this.map.addLayer(this.vector);
  1778. else this.map.addLayer(this.layer);
  1779.  
  1780. },
  1781.  
  1782. getStyleOfCar(feature) {
  1783. return new Style({
  1784. image: new Icon({
  1785. src:
  1786. "https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png"
  1787. })
  1788. });
  1789. },
  1790. createOlMap() {
  1791. /* let picBaseUrl ="https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png";
  1792. let blue =picBaseUrl + "BluePin1LargeB.png"
  1793. let green = picBaseUrl + "GreenPin1LargeB.png"
  1794. let red = picBaseUrl + "RedPin1LargeB.png"
  1795. */
  1796.  
  1797. //加载地图自定义图标
  1798. var view = new View({
  1799. projection: "EPSG:4326", //使用这个坐标系
  1800. center: [114, 30],
  1801. zoom: 5,
  1802. maxZoom: 19
  1803. });
  1804.  
  1805. var mapcontainer = this.$refs.rootmap;
  1806.  
  1807. /* this.arcgiswhiteMap= new XYZ({
  1808. url:
  1809. "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer/tile/{z}/{y}/{x}"
  1810. })
  1811.  
  1812. this.arcgisMap=new XYZ({
  1813. url:
  1814. "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
  1815. }) */
  1816. this.arcgiswhiteMap = new XYZ({
  1817. url:
  1818. "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
  1819. });
  1820.  
  1821. this.arcgisMap = new XYZ({
  1822. /* url:
  1823. "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}" */
  1824. url:
  1825. "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
  1826. });
  1827.  
  1828. this.map = new Map({
  1829. target: mapcontainer,
  1830. layers: [
  1831. new TileLayer({
  1832. source: this.arcgisMap
  1833. })
  1834. ],
  1835. view: view
  1836. });
  1837.  
  1838. //添加面板
  1839. this.menu_overlay = new Overlay({
  1840. element: document.getElementById("popup"),
  1841. positioning: "center-left",
  1842. offset: [20, 0]
  1843. });
  1844. this.menu_overlay.setVisible(false);
  1845. this.map.addOverlay(this.menu_overlay);
  1846.  
  1847. this.REFSFunctionToGis(!this.switchStatusData);
  1848. //定义无聚簇的layer
  1849. /* this.vectorSource = new SourceVector({
  1850. //features: this.Features
  1851. wrapX: false,
  1852. });
  1853. this.vector = new LayerVector({
  1854. source: this.vectorSource,
  1855. style: feature => {
  1856. return this.getStyleOfCar(feature);
  1857. }
  1858. }); */
  1859.  
  1860. // this.map.addLayer(this.vector);
  1861.  
  1862. this.$http
  1863. .post(this.nozzle.listStationBase, {
  1864. data: {
  1865. /* platformCode:projectNo */
  1866. }
  1867. })
  1868. .then(response => {
  1869. console.log(response)
  1870. if (response.data.code === 1) {
  1871. this.showCluster(response.data.data);
  1872. }
  1873. })
  1874.  
  1875. //鼠标监听
  1876. //鼠标点击事件
  1877. this.map.on("click", e => {
  1878. if (this.menu_overlay && this.menu_overlay != "")
  1879. this.menu_overlay.setPosition(undefined);
  1880. var pixel = this.map.getEventPixel(e.originalEvent);
  1881. var feature = this.map.forEachFeatureAtPixel(pixel, function(
  1882. feature,
  1883. layer
  1884. ) {
  1885. return feature;
  1886. });
  1887. if (feature) {
  1888. //捕捉到要素后,进行后续操作,如弹出要素信息
  1889. // this.addPopupContent(e.coordinate, feature.values_.features);
  1890. if (
  1891. !!feature.get("features") &&
  1892. typeof feature.get("features") != "undefined"
  1893. ) {
  1894. if (feature.get("features").length == 1) {
  1895. /* console.log("点击了单个点"+e.coordinate) */
  1896. var cell = feature.values_.features[0];
  1897. this.showOlPanel(cell);
  1898. }
  1899. //点击的是聚簇图标,展示统计信息
  1900. else {
  1901. /* console.log("点击了聚簇"+e.coordinate) */
  1902. var centerthis = this.getCenterFromArray(
  1903. feature.values_.features
  1904. );
  1905.  
  1906. this.map.getView().setCenter([centerthis[0], centerthis[1]]);
  1907. this.map.getView().setZoom(12);
  1908. }
  1909. } else {
  1910. //点击的是vector图层的feature
  1911. console.log(feature);
  1912. //开始展示属性
  1913. this.showOlPanel(feature);
  1914. }
  1915. }
  1916. });
  1917. //鼠标移动事件
  1918. this.map.on("pointermove", function(evt) {
  1919. if (evt.map.hasFeatureAtPixel(evt.pixel)) {
  1920. evt.map.getTargetElement().style.cursor = "pointer";
  1921. } else {
  1922. evt.map.getTargetElement().style.cursor = "";
  1923. }
  1924. });
  1925. //鼠标移动事件
  1926. this.map.on("moveend", evt => {
  1927. var zoom = this.map.getView().getZoom();
  1928.  
  1929. if (zoom >= 8 && this.currentZoom < 8) {
  1930. /* if(this.map.getView().getZoom()>10) */
  1931. this.map.removeLayer(this.layer);
  1932. this.map.addLayer(this.vector);
  1933. //添加行政边框
  1934. if (this.vectorArea) {
  1935. this.vectorArea.setVisible(true)
  1936. }
  1937. } else if (zoom < 8 && this.currentZoom >= 8) {
  1938. this.map.removeLayer(this.vector);
  1939. this.map.addLayer(this.layer);
  1940. //清除行政边框
  1941. if (this.vectorArea) {
  1942. this.vectorArea.setVisible(false)
  1943. }
  1944. } else {
  1945. }
  1946. this.currentZoom = zoom;
  1947. });
  1948. },
  1949. closepopup() {
  1950. if (this.menu_overlay && this.menu_overlay != "")
  1951. this.menu_overlay.setPosition(undefined);
  1952. },
  1953. //openlayer属性框
  1954. showOlPanel(feature) {
  1955. this.$http
  1956. .post(this.nozzle.getTempData, {
  1957. data: {
  1958. stCode: feature.stCode
  1959. }
  1960. })
  1961. .then(resP => {
  1962. console.log(resP);
  1963. //开始展示属性字段
  1964. let textContent = "";
  1965. let closeDOM =
  1966. "<a style='color:#fff;position: absolute;top: 2px;right: 8px;cursor: pointer;' class='ol-popup-closer' onclick='closepopup()' >X</a>";
  1967.  
  1968. textContent =
  1969. "<div style='color: #fff !important;font-size: 17px;font-weight: bold;margin-left: 9px;'>" +
  1970. "详细信息" +
  1971. "</div> <a style='color:#fff;position: absolute;top: 2px;right: 8px;cursor: pointer;' class='ol-popup-closer' onclick='closepopup()' >X</a></br> ";
  1972. textContent +=
  1973. "<div style='border-top: 1px solid #3F586F !important;border: none;margin-top: 6px;margin-bottom: 6px;'></div>";
  1974.  
  1975. //添加html拼接---缩放至
  1976. textContent +=
  1977. `<div style='color: #fff;position:absolute;font-size:15px;line-height:33px;margin-left: 22px;margin-top: -44px;width:69px;cursor: pointer;text-decoration:underline' onclick='historyData("` +
  1978. feature.stCode +
  1979. `")'>` +
  1980. "历史数据" +
  1981. "</div>";
  1982.  
  1983. textContent +=
  1984. '<div style="width:260px;height:33px;color: #fff;line-height:33px;">' +
  1985. '<div style="font-size:14px;line-height:33px; margin-left: 22px;margin-top: 5px;position: absolute;">' +
  1986. "名称" +
  1987. "</div>" +
  1988. '<div style="font-size:14px;line-height:33px;margin-top: 5px;position: absolute;margin-left: 179px;">' +
  1989. feature.stName +
  1990. "</div>" +
  1991. "</div>";
  1992.  
  1993. let data = {};
  1994. let currentData = resP.data.data;
  1995. for (let kx = 0; kx < currentData.length; kx++) {
  1996. data[currentData[kx].name] = currentData[kx].value;
  1997. }
  1998. console.log(data);
  1999.  
  2000. textContent += '<div style="width:300px;">';
  2001. for (let key in data) {
  2002. textContent +=
  2003. '<div style="width:260px;height:33px;color: #fff;">' +
  2004. '<div style="font-size:14px;line-height:33px; margin-left: 11px;margin-top: 5px;position: absolute;">' +
  2005. key +
  2006. "</div>" +
  2007. '<div style="font-size:14px;line-height:33px;margin-top: 5px;position: absolute;margin-left: 179px;">' +
  2008. data[key] +
  2009. "</div>" +
  2010. "</div>";
  2011. }
  2012. textContent += "</div>";
  2013.  
  2014. textContent = closeDOM + textContent;
  2015.  
  2016. textContent +=
  2017. "<div style='bottom: 50%;left: -4px;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 10px solid #3364bd;width: 0; height: 0; position: absolute;transform: translate(-50%, 0);'></div>";
  2018. //提取公共方法,放缩地图、显示属性等
  2019. document.getElementById("popup").innerHTML = textContent;
  2020.  
  2021. this.menu_overlay.setPosition([feature.lon, feature.lat]);
  2022.  
  2023. this.map.getView().setCenter([feature.lon, feature.lat]);
  2024. });
  2025. },
  2026. //初始化地图
  2027. createMap(projectNo) {
  2028. let _this = this;
  2029. loadModules([
  2030. "dojo/parser",
  2031. "dojo/ready",
  2032. "dojo/_base/array",
  2033. "esri/Color",
  2034. "dojo/dom-style",
  2035. "dojo/query",
  2036.  
  2037. "esri/map",
  2038. "esri/dijit/InfoWindow",
  2039. "esri/request",
  2040. "esri/graphic",
  2041. "esri/geometry/Extent",
  2042.  
  2043. "esri/symbols/SimpleMarkerSymbol",
  2044. "esri/symbols/SimpleFillSymbol",
  2045. "esri/symbols/PictureMarkerSymbol",
  2046. "esri/renderers/ClassBreaksRenderer",
  2047.  
  2048. "esri/layers/GraphicsLayer",
  2049. "esri/SpatialReference",
  2050. "esri/dijit/PopupTemplate",
  2051. "esri/geometry/Point",
  2052. "esri/geometry/webMercatorUtils",
  2053. "esri/layers/ArcGISTiledMapServiceLayer",
  2054. "extras/ClusterLayer",
  2055.  
  2056. "dijit/layout/BorderContainer",
  2057. "dijit/layout/ContentPane",
  2058.  
  2059. "dojo/domReady!"
  2060. ])
  2061. .then(
  2062. ([
  2063. parser,
  2064. ready,
  2065. arrayUtils,
  2066. Color,
  2067. domStyle,
  2068. query,
  2069. Map,
  2070. InfoWindow,
  2071. esriRequest,
  2072. Graphic,
  2073. Extent,
  2074. SimpleMarkerSymbol,
  2075. SimpleFillSymbol,
  2076. PictureMarkerSymbol,
  2077. ClassBreaksRenderer,
  2078. GraphicsLayer,
  2079. SpatialReference,
  2080. PopupTemplate,
  2081. Point,
  2082. webMercatorUtils,
  2083. ArcGISTiledMapServiceLayer,
  2084. ClusterLayer
  2085. ]) => {
  2086. // create map with the given options at a DOM node w/ id 'mapNode'
  2087. _this.map = new Map("previewOfSiteStatusMaps", {
  2088. center: [114, 30],
  2089. zoom: 5,
  2090. logo: false,
  2091. slider: false,
  2092. maxZoom: 15
  2093. });
  2094.  
  2095. this.arcgiswhiteMap = new ArcGISTiledMapServiceLayer(
  2096. //"http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
  2097. "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer"
  2098. );
  2099. _this.map.addLayer(this.arcgiswhiteMap);
  2100. /* this.arcgiswhiteMap.hide() */
  2101. this.arcgisMap = new ArcGISTiledMapServiceLayer(
  2102. /* "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer" */
  2103. "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
  2104. );
  2105. _this.map.addLayer(this.arcgisMap);
  2106. // console.log("zzzzzzzzzzz " + this.switchStatusData);
  2107. this.REFSFunctionToGis(!this.switchStatusData);
  2108. /* _this.map.on("zoom-end", function() {
  2109. });
  2110.  
  2111. _this.map.on("click", function(e) {
  2112. }); */
  2113. _this.map.on("load", function() {
  2114. _this.$http
  2115. .post(_this.nozzle.listStationBase, {
  2116. data: {
  2117. platformCode: projectNo
  2118. }
  2119. })
  2120. .then(response => {
  2121. console.log(response);
  2122. if (response.data.code === 1) {
  2123. let picBaseUrl =
  2124. "https://static.arcgis.com/images/Symbols/Shapes/";
  2125. let photoInfo = {};
  2126. var imagealone = {};
  2127. let position = {};
  2128. if (this.graphicsLayerByMarker)
  2129. this.graphicsLayerByMarker.clear();
  2130. this.graphicsLayerByMarker = new GraphicsLayer(); //点
  2131.  
  2132. let wgs = new SpatialReference({
  2133. wkid: 4326
  2134. });
  2135. //第一步先初始化好点图层graphicsLayerByMarker
  2136. var Marker_point;
  2137. let markerPng;
  2138.  
  2139. var marksymbol = new PictureMarkerSymbol(
  2140. picBaseUrl + "BluePin1LargeB.png",
  2141. 32,
  2142. 32
  2143. ).setOffset(0, 15);
  2144.  
  2145. for (var k = 0; k < response.data.data.length; k++) {
  2146. if (
  2147. response.data.data[k].lon &&
  2148. response.data.data[k].lon != "0"
  2149. ) {
  2150. Marker_point = new Point(
  2151. parseFloat(response.data.data[k].lon),
  2152. parseFloat(response.data.data[k].lat),
  2153. wgs
  2154. );
  2155. var attr = {
  2156. stCode: response.data.data[k].stCode,
  2157. stName: response.data.data[k].stName,
  2158. mapPoint: Marker_point
  2159. };
  2160. markerPng = new Graphic(Marker_point, marksymbol, attr);
  2161. this.graphicsLayerByMarker.add(markerPng);
  2162. }
  2163. }
  2164.  
  2165. //初始化结束
  2166.  
  2167. photoInfo.data = arrayUtils.map(
  2168. response.data.data,
  2169. function(p) {
  2170. /* if(p.lon!=null){
  2171. } */
  2172. let latlng = new Point(
  2173. parseFloat(p.lon),
  2174. parseFloat(p.lat),
  2175. wgs
  2176. );
  2177. let webMercator = webMercatorUtils.geographicToWebMercator(
  2178. latlng
  2179. );
  2180. let attributes = {
  2181. stName: p.stName,
  2182. stCode: p.stCode
  2183. };
  2184. return {
  2185. x: webMercator.x,
  2186. y: webMercator.y,
  2187. attributes: attributes
  2188. };
  2189. }
  2190. );
  2191.  
  2192. let popupTemplate = new PopupTemplate({
  2193. title: "",
  2194. fieldInfos: [
  2195. {
  2196. fieldName: "stName",
  2197. label: "名称:",
  2198. visible: true
  2199. },
  2200. {
  2201. fieldName: "stCode",
  2202. label: "编号:",
  2203. visible: true
  2204. }
  2205. ]
  2206. });
  2207. if (this.clusterLayer) this.clusterLayer.clear();
  2208. this.clusterLayer = new ClusterLayer({
  2209. data: photoInfo.data,
  2210. distance: 100,
  2211. id: "clusters",
  2212. labelColor: "#fff",
  2213. labelOffset: 10,
  2214. resolution: _this.map.extent.getWidth() / _this.map.width,
  2215. singleColor: "#888",
  2216. singleTemplate: popupTemplate
  2217. });
  2218. let defaultSym = new SimpleMarkerSymbol().setSize(4);
  2219. let renderer = new ClassBreaksRenderer(
  2220. defaultSym,
  2221. "clusterCount"
  2222. );
  2223.  
  2224. let blue = new PictureMarkerSymbol(
  2225. picBaseUrl + "BluePin1LargeB.png",
  2226. 32,
  2227. 32
  2228. ).setOffset(0, 15);
  2229. let green = new PictureMarkerSymbol(
  2230. picBaseUrl + "GreenPin1LargeB.png",
  2231. 64,
  2232. 64
  2233. ).setOffset(0, 15);
  2234. let red = new PictureMarkerSymbol(
  2235. picBaseUrl + "RedPin1LargeB.png",
  2236. 72,
  2237. 72
  2238. ).setOffset(0, 15);
  2239. renderer.addBreak(0, 2, blue);
  2240. renderer.addBreak(2, 200, green);
  2241. renderer.addBreak(200, 1001, red);
  2242.  
  2243. this.clusterLayer.setRenderer(renderer);
  2244. _this.map.addLayer(this.clusterLayer);
  2245. //聚簇图层按级别控制开关
  2246.  
  2247. _this.map.on("update-end", () => {
  2248. console.log("当前级别是:" + _this.map.getLevel());
  2249. //隐藏聚簇图层
  2250. if (_this.map.getLevel() > 9) {
  2251. if (this.clusterLayer)
  2252. _this.map.removeLayer(this.clusterLayer);
  2253. _this.map.addLayer(this.graphicsLayerByMarker);
  2254. } else {
  2255. if (this.graphicsLayerByMarker)
  2256. _this.map.removeLayer(this.graphicsLayerByMarker);
  2257. _this.map.addLayer(this.clusterLayer);
  2258. }
  2259.  
  2260. _this.map.on("update-end", () => {
  2261. console.log("当前级别是:" + _this.map.getLevel());
  2262. //隐藏聚簇图层
  2263. if (_this.map.getLevel() > 9) {
  2264. if (clusterLayer) _this.map.removeLayer(clusterLayer);
  2265. _this.map.addLayer(graphicsLayerByMarker);
  2266. } else {
  2267. if (graphicsLayerByMarker)
  2268. _this.map.removeLayer(graphicsLayerByMarker);
  2269. _this.map.addLayer(clusterLayer);
  2270. }
  2271. });
  2272.  
  2273. //点击单个图标事件
  2274. this.graphicsLayerByMarker.on("click", res => {
  2275. console.log(res.graphic.attributes.mapPoint);
  2276. console.log(res.graphic.attributes.stCode);
  2277. console.log(res.graphic.attributes.stName);
  2278. _this.$http
  2279. .post(_this.nozzle.getTempData, {
  2280. data: {
  2281. stCode: res.graphic.attributes.stCode
  2282. }
  2283. })
  2284. .then(resP => {
  2285. let textContent =
  2286. "<table style='width: 330px;'><tr><td>名称</td><td>" +
  2287. res.graphic.attributes.stName +
  2288. "</td></tr>";
  2289. for (let item in resP.data.data) {
  2290. textContent += "<tr>";
  2291. for (let arr in resP.data.data[item]) {
  2292. textContent +=
  2293. "<td>" + resP.data.data[item][arr] + "</td>";
  2294. }
  2295. textContent += "</tr>";
  2296. }
  2297. textContent +=
  2298. "<tr><td style='text-align: right' colspan='2'><a href ='javascript:void(0)' style='color:dodgerblue' onclick=''>历时数据</a></td></tr></table>";
  2299. _this.map.infoWindow.setTitle("详细信息");
  2300. _this.map.infoWindow.setContent(textContent);
  2301.  
  2302. _this.map.infoWindow.show(
  2303. res.graphic.attributes.mapPoint,
  2304. esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT
  2305. );
  2306. });
  2307. });
  2308. });
  2309.  
  2310. //聚簇图层按地图级别控制开关
  2311. this.clusterLayer.on("click", function(res) {
  2312. if (res.graphic._graphicsLayer._singles.length == 0) {
  2313. return;
  2314. }
  2315. let d = res;
  2316. _this.$http
  2317. .post(_this.nozzle.getTempData, {
  2318. data: {
  2319. stCode:
  2320. d.graphic._graphicsLayer._singles[0].attributes
  2321. .stCode
  2322. }
  2323. })
  2324. .then(resP => {
  2325. let textContent =
  2326. "<table style='width: 330px;'><tr><td>名称</td><td>" +
  2327. d.graphic._graphicsLayer._singles[0].attributes
  2328. .stName +
  2329. "</td></tr>";
  2330. for (let item in resP.data.data) {
  2331. textContent += "<tr>";
  2332. for (let arr in resP.data.data[item]) {
  2333. textContent +=
  2334. "<td>" + resP.data.data[item][arr] + "</td>";
  2335. }
  2336. textContent += "</tr>";
  2337. }
  2338. textContent +=
  2339. "<tr><td style='text-align: right' colspan='2'><a href ='javascript:void(0)' style='color:dodgerblue' onclick=''>历时数据</a></td></tr></table>";
  2340. _this.map.infoWindow.setTitle("详细信息");
  2341. _this.map.infoWindow.setContent(textContent);
  2342.  
  2343. _this.map.infoWindow.show(
  2344. d.mapPoint,
  2345. esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT
  2346. );
  2347. });
  2348. });
  2349. } else {
  2350. message(response);
  2351. }
  2352. })
  2353. .catch(response => {
  2354. message(response);
  2355. });
  2356. });
  2357. }
  2358. )
  2359. .catch(err => {
  2360. // handle any script or module loading errors
  2361. // console.error(err);
  2362. });
  2363. },
  2364.  
  2365. // 给与gis的方法调动dome
  2366. REFSFunctionToGis(type) {
  2367. if (!type) {
  2368. //加载黑色arcgis午夜蓝图
  2369. let baseLayer = this.map.getLayers().item(0);
  2370. baseLayer.setSource(this.arcgisMap);
  2371. } else {
  2372. //加载蓝色底图
  2373. let baseLayer = this.map.getLayers().item(0);
  2374. baseLayer.setSource(this.arcgiswhiteMap);
  2375. }
  2376. },
  2377.  
  2378. // /////////////////////////////////////////////////////////////////////////////////////////////////////////////
  2379. // /////////////////////////////////////////////////////////////////////////////////////////////////////////////
  2380. // /////////////////////////////////////////////////////////////////////////////////////////////////////////////
  2381. // /////////////////////////////////////////////////////////////////////////////////////////////////////////////
  2382. // 时间选择的change
  2383. TimeBoxChange() {
  2384. // 时间改动了,需要调整其状态
  2385. this.DateisChange = true;
  2386. },
  2387.  
  2388. // 根据站点编号查询站点的表头数据
  2389. LoadGridTitleData() {
  2390. // 加载历史数据/在表头前面加载
  2391. setTimeout(() => {
  2392. this.loadDataGridData();
  2393. }, 0);
  2394.  
  2395. this.$http
  2396. .get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`)
  2397. .then(response => {
  2398. // 加载表头
  2399. var headobj = response.data.data;
  2400. // console.log(headobj);
  2401. console.log(11111, this.HistoryTableData);
  2402. // let arr = [];
  2403. this.NFSNowDataTableHead = headobj.filter((item, index, obj) => {
  2404. for (let k in this.HistoryTableData[0]) {
  2405. if (item.field === k) {
  2406. return item;
  2407. }
  2408. }
  2409. });
  2410. // console.log(8888, arr);
  2411. console.log(22222222, this.NFSNowDataTableHead);
  2412. })
  2413. .catch(response => {
  2414. message(response);
  2415. });
  2416. },
  2417.  
  2418. //tabs的点击事件
  2419. HistoryHandleClick(tab, event) {
  2420. if (tab.index == 1) {
  2421. // 渲染echarts的因子下拉框
  2422. if (this.FirstOn) {
  2423. // 仅仅第一次进来历史图形的页面时,需要加载因子列表
  2424. this.loadSiteYinZiData();
  2425. this.FirstOn = false;
  2426. }
  2427. if (this.DateisChange) {
  2428. // 调用函数渲染数据
  2429. this.loadEchartsData();
  2430. }
  2431. } else {
  2432. // 渲染datagrid
  2433. if (this.DateisChange) {
  2434. // 渲染站点历史数据表格
  2435. this.loadDataGridData();
  2436. }
  2437. }
  2438. },
  2439. //分页
  2440. // 主页分页
  2441. handleSizeChange(val) {
  2442. // console.log(`当前页: ${val}`);
  2443. this.ALLpageSize = val;
  2444. this.loadFZData();
  2445.  
  2446. // console.log(`每页 ${val} 条`);
  2447. },
  2448. handleCurrentChange(val) {
  2449. // console.log(`当前页: ${val}`);
  2450. this.ALLpageNum = val;
  2451. this.loadFZData();
  2452. },
  2453. HistorySizeChange(val) {
  2454. // 内页改变每页的条数
  2455. this.HistorySize = val;
  2456. this.loadDataGridData();
  2457. },
  2458. HistoryCurrentChange(val) {
  2459. //内页改变页数
  2460. this.HistoryPage = val;
  2461. this.loadDataGridData();
  2462. },
  2463. // 历史表格数据请求
  2464. loadDataGridData() {
  2465. this.loading3 = true;
  2466. this.$http
  2467. .get(
  2468. this.nozzle.dataSelectSiteSiteManHistoryDataMongoBySerial +
  2469. "?dName=" +
  2470. this.currentSiteNo +
  2471. "&rows=" +
  2472. this.HistorySize +
  2473. "&page=" +
  2474. this.HistoryPage +
  2475. "&startTime=" +
  2476. this.TimeBoxValue[0] +
  2477. "&endTime=" +
  2478. this.TimeBoxValue[1]
  2479. )
  2480. .then(response => {
  2481. this.loading3 = false;
  2482. // console.log(response.data.rows);
  2483. this.HistoryTableData = response.data.rows;
  2484. // console.log(1111111, this.HistoryTableData);
  2485. this.DatagridDataLength = response.data.total;
  2486. this.$http
  2487. .get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`)
  2488. .then(response => {
  2489. // 加载表头
  2490. var headobj = response.data.data;
  2491. // console.log(headobj);
  2492. console.log(11111, this.HistoryTableData);
  2493. // let arr = [];
  2494. this.NFSNowDataTableHead = headobj.filter((item, index, obj) => {
  2495. for (let k in this.HistoryTableData[0]) {
  2496. if (item.field === k) {
  2497. return item;
  2498. }
  2499. }
  2500. });
  2501. // console.log(8888, arr);
  2502. console.log(22222222, this.NFSNowDataTableHead);
  2503. })
  2504. .catch(response => {
  2505. message(response);
  2506. });
  2507. })
  2508. .catch(response => {
  2509. message(response);
  2510. this.loading3 = false;
  2511. });
  2512. },
  2513. //获取站点分配的所有因子
  2514. loadSiteYinZiData() {
  2515. this.$http
  2516. .get(
  2517. this.nozzle.dataSelectSitePropertyList +
  2518. "?siteNo=" +
  2519. this.currentSiteNo
  2520. )
  2521. .then(response => {
  2522. var SleVal = response.data;
  2523. // 给数据添加一个空值
  2524. SleVal.unshift({
  2525. codeAscii: "",
  2526. codeProperty: "请选择因子"
  2527. });
  2528. // 初始值清空
  2529. this.SiteYinzi = "";
  2530. this.SiteYinzi2 = "";
  2531. // 根据数据长度来判断是否多于两个因子
  2532. if (SleVal.length > 1) {
  2533. this.SiteYinziAll = SleVal;
  2534. this.SiteYinzi = SleVal[1].codeAscii;
  2535. this.SiteYinziAll2 = SleVal;
  2536. this.SiteYinzi2 = SleVal[2].codeAscii;
  2537. this.SiteYinziZn = SleVal[1].codeProperty;
  2538. this.SiteYinzi2Zn = SleVal[2].codeProperty;
  2539. this.loadEchartsData();
  2540. } else if (SleVal.length == 1) {
  2541. this.SiteYinziAll = SleVal;
  2542. this.SiteYinzi = SleVal[1].codeAscii;
  2543. this.SiteYinziAll2 = SleVal;
  2544. this.SiteYinzi2 = SleVal[0].codeAscii;
  2545. this.SiteYinziZn = SleVal[1].codeProperty;
  2546. this.SiteYinzi2Zn = SleVal[0].codeProperty;
  2547. this.loadEchartsData();
  2548. } else {
  2549. this.SiteYinziAll = SleVal;
  2550. this.SiteYinzi = SleVal[0].codeAscii;
  2551. this.SiteYinziAll2 = SleVal;
  2552. this.SiteYinzi2 = SleVal[0].codeAscii;
  2553. this.SiteYinziZn = SleVal[0].codeProperty;
  2554. this.SiteYinzi2Zn = SleVal[0].codeProperty;
  2555. this.$message({
  2556. showClose: true,
  2557. message: "该站点下无分配因子",
  2558. type: "warning"
  2559. });
  2560. }
  2561. });
  2562. },
  2563. // 上因子change事件
  2564. YinZiUp(SiteYinzi) {
  2565. this.YinZiChange = true;
  2566. this.SiteYinzi = SiteYinzi;
  2567. for (var i = 0; i < this.SiteYinziAll.length; i++) {
  2568. if (this.SiteYinziAll[i].codeAscii == this.SiteYinzi) {
  2569. this.SiteYinziZn = this.SiteYinziAll[i].codeProperty;
  2570. return false;
  2571. }
  2572. }
  2573. },
  2574. // 下因子change事件
  2575. YinZiDown(SiteYinzi2) {
  2576. this.YinZiChange = true;
  2577. this.SiteYinzi2 = SiteYinzi2;
  2578. for (var i = 0; i < this.SiteYinziAll2.length; i++) {
  2579. if (this.SiteYinziAll2[i].codeAscii == this.SiteYinzi2) {
  2580. this.SiteYinzi2Zn = this.SiteYinziAll2[i].codeProperty;
  2581. return false;
  2582. }
  2583. }
  2584. },
  2585. // 获取echarts数据
  2586. loadEchartsData() {
  2587. if (this.DateisChange || this.YinZiChange) {
  2588. this.YinZiChange = false;
  2589. this.DateisChange = false;
  2590. // 时间改变过或者因子有变化,请求新数据渲染
  2591. this.$http
  2592. .get(
  2593. this.nozzle.dataSiteDataEchat +
  2594. "?dName=" +
  2595. this.currentSiteNo +
  2596. "&up=" +
  2597. this.SiteYinzi +
  2598. "&down=" +
  2599. this.SiteYinzi2 +
  2600. "&startTime=" +
  2601. this.TimeBoxValue[0] +
  2602. "&endTime=" +
  2603. this.TimeBoxValue[1]
  2604. )
  2605. .then(response => {
  2606. if (response.data.tt.length > 0) {
  2607. this.ChartsX = response.data.tt;
  2608. this.ChartsUp = response.data.up;
  2609. this.ChartsDown = response.data.down;
  2610. this.$nextTick(function() {
  2611. this.loadEcharts();
  2612. });
  2613. } else {
  2614. this.$message({
  2615. showClose: true,
  2616. message: "无数据",
  2617. type: "warning"
  2618. });
  2619. }
  2620. })
  2621. .catch(response => {
  2622. this.$message({
  2623. showClose: true,
  2624. message: "无数据",
  2625. type: "warning"
  2626. });
  2627. });
  2628. } else {
  2629. // 时间未改变且因子也没变化,只需要重新绘制
  2630. this.$nextTick(function() {
  2631. this.loadEcharts();
  2632. });
  2633. }
  2634. },
  2635. //渲染echarts
  2636. loadEcharts() {
  2637. // 基于准备好的dom,初始化echarts实例
  2638. this.myChart = this.$echarts.init(
  2639. document.getElementById("HistoryEchart")
  2640. );
  2641.  
  2642. // 绘制图表
  2643. this.myChart.clear();
  2644. this.myChart.setOption({
  2645. color: ["#3398DB", "red"],
  2646. tooltip: {
  2647. trigger: "axis",
  2648. axisPointer: {
  2649. type: "cross",
  2650. crossStyle: {
  2651. color: "#3398DB"
  2652. }
  2653. }
  2654. },
  2655. toolbox: {
  2656. feature: {
  2657. magicType: { show: true, type: ["line", "bar"] }
  2658. }
  2659. },
  2660. legend: {
  2661. data: [this.SiteYinziZn, this.SiteYinzi2Zn],
  2662. textStyle: {
  2663. color: "#3398DB" //字体颜色
  2664. }
  2665. },
  2666. xAxis: [
  2667. {
  2668. type: "category",
  2669. data: this.ChartsX,
  2670. axisPointer: {
  2671. type: "shadow"
  2672. },
  2673. axisLabel: {
  2674. show: true,
  2675. textStyle: {
  2676. color: "#3398DB" //这里用参数代替了
  2677. }
  2678. },
  2679. axisLine: {
  2680. lineStyle: {
  2681. color: "#3398DB" // 颜色
  2682. }
  2683. }
  2684. }
  2685. ],
  2686. yAxis: [
  2687. {
  2688. type: "value",
  2689. name: this.SiteYinziZn,
  2690. axisLabel: {
  2691. show: true,
  2692. textStyle: {
  2693. color: "#3398DB" //这里用参数代替了
  2694. }
  2695. },
  2696. axisLine: {
  2697. lineStyle: {
  2698. color: "#3398DB" // 颜色
  2699. }
  2700. }
  2701. },
  2702. {
  2703. type: "value",
  2704. name: this.SiteYinzi2Zn,
  2705. axisLabel: {
  2706. show: true,
  2707. textStyle: {
  2708. color: "#3398DB" //这里用参数代替了
  2709. }
  2710. },
  2711. axisLine: {
  2712. lineStyle: {
  2713. color: "#3398DB" // 颜色
  2714. }
  2715. }
  2716. }
  2717. ],
  2718. series: [
  2719. {
  2720. name: this.SiteYinziZn,
  2721. type: "line",
  2722. data: this.ChartsUp
  2723. },
  2724. {
  2725. name: this.SiteYinzi2Zn,
  2726. type: "line",
  2727. yAxisIndex: 1,
  2728. data: this.ChartsDown
  2729. }
  2730. ]
  2731. });
  2732. },
  2733. HistorySizeChange(val) {
  2734. // 内页改变每页的条数
  2735. this.HistorySize = val;
  2736. this.loadDataGridData();
  2737. },
  2738. HistoryCurrentChange(val) {
  2739. //内页改变页数
  2740. this.HistoryPage = val;
  2741. this.loadDataGridData();
  2742. },
  2743. // 点击详情里面历史搜索
  2744. Search() {
  2745. if (this.HistoryBox == "Charts") {
  2746. this.loadEchartsData();
  2747. } else {
  2748. this.loadDataGridData();
  2749. }
  2750. },
  2751. labelHead(h, { column, index }) {
  2752. let l = column.label.length;
  2753. let f = 16; //每个字大小,其实是每个字的比例值,大概会比字体大小差不多大一点,
  2754. column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素,这里minWidth只是一个比例值,不是真正的长度 //然后将列标题放在一个div块中,注意块的宽度一定要100%,否则表格显示不完全
  2755.  
  2756. return h("div", { class: "table-head", style: { width: "100%" } }, [
  2757. column.label
  2758. ]);
  2759. }
  2760. },
  2761. computed: {
  2762. switchStatus: function() {
  2763. return this.flag; // 直接监听props里的status状态
  2764. }
  2765. },
  2766. created() {
  2767. window.closepopup = this.closepopup;
  2768. window.historyData = this.historyData;
  2769. },
  2770. mounted: function() {
  2771. // 根据平台渲染站点数量统计及状态统计
  2772. this.loadSiteNumForOroject();
  2773. // 根据平台渲染项目设备总览
  2774. this.loadQuyuShebei();
  2775. // 根据平台渲染项目设备环比增长
  2776. this.loadQuYuSheBeiHuanBi();
  2777. // 根据平台渲染站点实时报警信息
  2778. this.loadSiteBaoJing();
  2779. // 返回出项目的坐标以及缩放等级**************************GIS调用
  2780.  
  2781. // 默认加载所有的平台
  2782. this.LoadAllProject();
  2783. this.createOlMap();
  2784. /* this.createMap(""); */
  2785. // 默认展示 全部 的请求
  2786. // this.ListClick(0, { platformCode: "" });
  2787. // 默认加载项目站点覆盖排名
  2788. this.loadQuyuPaiMing();
  2789.  
  2790. this.$nextTick(function() {
  2791. this.timer = setInterval(this.ScrollUp, 100);
  2792. });
  2793. // 默认从本地session srotage里面读取历史搜索记录ZZJ
  2794. this.getItem();
  2795. },
  2796. destroyed: function() {
  2797. clearInterval(this.timer);
  2798. }
  2799. };
  2800. </script>
  2801. <style scoped>
  2802. .select {
  2803. color: #fff;
  2804. background: rgb(0, 119, 254);
  2805. }
  2806.  
  2807. .selectWidth {
  2808. width: 3.2rem;
  2809. }
  2810. #previewOfSiteStatusMaps {
  2811. width: 100%;
  2812. height: 100%;
  2813. position: relative;
  2814. }
  2815. #popup {
  2816. background: url(./../../../static/img/tc_bg_img.png);
  2817. background-size: cover;
  2818. width: 460px;
  2819. z-index: 99999;
  2820. position: relative;
  2821. }
  2822. .earthmap {
  2823. width: 100%;
  2824. height: 100%;
  2825. }
  2826. .fwStyle {
  2827. position: relative;
  2828. top: 42px;
  2829. right: 446px;
  2830. z-index: 99;
  2831. cursor: pointer;
  2832. }
  2833.  
  2834. .bubble {
  2835. width: 200px;
  2836. height: 50px;
  2837. border: 5px solid gray;
  2838. position: relative;
  2839. }
  2840. .common {
  2841. width: 0;
  2842. height: 0;
  2843. position: absolute; /* 使用绝对定位 */
  2844. left: 50%;
  2845. transform: translate(-50%, 0); /* 水平居中 */
  2846. }
  2847.  
  2848. .triangle {
  2849. bottom: 101px;
  2850. left: -4px;
  2851. border-top: 10px solid transparent;
  2852.  
  2853. border-bottom: 10px solid transparent;
  2854. border-right: 10px solid #3364bd;
  2855. }
  2856. .cover {
  2857. bottom: -13px;
  2858. border-top: 20px solid gray;
  2859. border-right: 20px solid transparent;
  2860. border-left: 20px solid transparent;
  2861. }
  2862. #previewOfSiteStatusLeftTop {
  2863. /* position: absolute; */
  2864. /* left: 0; */
  2865. width: 350px;
  2866. height: 290px;
  2867. /* top: 0px; */
  2868. background: rgba(0, 0, 0, 0.5);
  2869. z-index: 100;
  2870. }
  2871. #previewOfSiteStatusLeftcenter {
  2872. position: relative;
  2873. /* left: 0; */
  2874. width: 350px;
  2875. height: 220px;
  2876. margin-top: 15px;
  2877. /* top: 305px; */
  2878. background: rgba(0, 0, 0, 0.5);
  2879. z-index: 100;
  2880. }
  2881. #previewOfSiteStatusLeftBottom {
  2882. /* position: absolute; */
  2883. /* left: 0; */
  2884. width: 350px;
  2885. height: 290px;
  2886. margin-top: 15px;
  2887. /* top: 610px; */
  2888. background: rgba(0, 0, 0, 0.5);
  2889. z-index: 100;
  2890. }
  2891. #previewOfSiteStatusRightTop {
  2892. /* position: absolute; */
  2893. /* right: 0; */
  2894. width: 350px;
  2895. height: 290px;
  2896. /* top: 0px; */
  2897. background: rgba(0, 0, 0, 0.5);
  2898. z-index: 100;
  2899. }
  2900. #previewOfSiteStatusRightcenter {
  2901. /* position: absolute; */
  2902. /* right: 0; */
  2903. width: 350px;
  2904. height: 220px;
  2905. /* top: 305px; */
  2906. margin-top: 15px;
  2907. background: rgba(0, 0, 0, 0.5);
  2908. z-index: 100;
  2909. }
  2910. #previewOfSiteStatusRightBottom {
  2911. /* position: absolute; */
  2912. /* right: 0; */
  2913. width: 350px;
  2914. height: 290px;
  2915. /* top: 540px; */
  2916. margin-top: 15px;
  2917. background: rgba(0, 0, 0, 0.5);
  2918. z-index: 100;
  2919. }
  2920. .previewOfSiteStatusTitle {
  2921. width: 100%;
  2922. height: 40px;
  2923. line-height: 40px;
  2924. text-align: left;
  2925. padding-left: 10px;
  2926. box-sizing: border-box;
  2927. background: var(--preSiteTitle);
  2928. }
  2929. .previewOfSiteStatusTitleImg {
  2930. width: 28px;
  2931. height: 28px;
  2932. vertical-align: middle;
  2933. }
  2934. .previewOfSiteStatusTitleFont {
  2935. color: rgb(0, 119, 254);
  2936. vertical-align: middle;
  2937. }
  2938. .previewOfSiteStatusTitleBTN {
  2939. position: absolute;
  2940. top: 8px;
  2941. color: var(--eldatebefore);
  2942. right: 20px;
  2943. border: 1px solid var(--eldatebefore);
  2944. height: 26px;
  2945. line-height: 26px;
  2946. }
  2947. .previewOfSiteStatusTitleBTN span {
  2948. float: left;
  2949. font-size: 12px;
  2950. padding: 0 10px;
  2951. cursor: pointer;
  2952. height: 100%;
  2953. border-right: 1px solid var(--eldatebefore);
  2954. }
  2955. .previewOfSiteStatusTitleBTN span:nth-child(3) {
  2956. border-right: none;
  2957. }
  2958. #previewOfSiteStatusTop {
  2959. position: absolute;
  2960. top: 0;
  2961. left: 350px;
  2962. width: calc(100% - 700px);
  2963. height: 80px;
  2964. /* background-image: linear-gradient(rgb(11, 20, 29), rgba(11, 20, 29, 0.2)); */
  2965. text-align: center;
  2966. z-index: 99;
  2967. }
  2968. .previewOfSiteStatusTopC {
  2969. display: inline-block;
  2970. height: 50px;
  2971. width: 180px;
  2972. padding: 15px;
  2973. }
  2974. .previewOfSiteStatusTopimg {
  2975. width: 40px;
  2976. height: 40px;
  2977. float: left;
  2978. margin-top: 7px;
  2979. }
  2980. .previewOfSiteStatusTopCFont {
  2981. float: left;
  2982. height: 50px;
  2983. width: 140px;
  2984. padding-left: 10px;
  2985. box-sizing: border-box;
  2986. line-height: 0px;
  2987. }
  2988. .previewOfSiteStatusTopCData {
  2989. width: 100%;
  2990. height: 35px;
  2991. line-height: 35px;
  2992. display: inline-block;
  2993. text-align: left;
  2994. color: var(--preTopDatatxt);
  2995. font-size: 20px;
  2996. }
  2997. .previewOfSiteStatusTopCMS {
  2998. width: 100%;
  2999. height: 15px;
  3000. line-height: 15px;
  3001. display: inline-block;
  3002. text-align: left;
  3003. font-size: 12px;
  3004. color: white;
  3005. }
  3006. .previewOfSiteStatusCentent {
  3007. width: 100%;
  3008. height: calc(100% - 40px);
  3009. background: var(--preSiteCentent);
  3010. overflow: hidden;
  3011. }
  3012. .previewOfSiteStatusCentent .previewButton {
  3013. padding-top: 0.05rem;
  3014. }
  3015. .previewOfSiteStatusCentent .previewButton .text {
  3016. text-align: left;
  3017. color: var(--white);
  3018. }
  3019. .previewButton .previewHistory {
  3020. display: flex;
  3021. flex-wrap: wrap;
  3022. /* width: 100%; */
  3023. margin: 0 3%;
  3024. justify-content: space-between;
  3025. }
  3026. .previewButton .previewHistory .previewtext {
  3027. cursor: pointer;
  3028. width: 48%;
  3029. /* height: 0.213333rem; */
  3030. margin-top: 0.1125rem;
  3031. /* margin-left: 2%; */
  3032. /* line-height: 0.213333rem; */
  3033. line-height: 24px;
  3034. /* font-size: 0.093333rem; */
  3035. font-size: 12px;
  3036. text-align: center;
  3037. border: 1px solid var(--eldatebefore);
  3038. color: #fff;
  3039. background: var(--pretextbg);
  3040. overflow: hidden;
  3041. text-overflow: ellipsis;
  3042. white-space: nowrap;
  3043. }
  3044. /* .previewButton .previewHistory .previewtext:nth-child(2n) {
  3045. /* margin-left: 0.08rem; */
  3046. /* margin-right: 2%; */
  3047. /* } */
  3048. */
  3049. /* 项目选择A */
  3050. #previewOfSiteStatusCentent1 {
  3051. width: 100%;
  3052. height: calc(100% - 5px);
  3053. overflow: auto;
  3054. margin: 0;
  3055. padding-top: 10px;
  3056. box-sizing: border-box;
  3057. }
  3058. .previewOfSiteStatusCentent1Li {
  3059. width: auto;
  3060. height: 32px;
  3061. line-height: 26px;
  3062. border: 1px solid rgb(0, 119, 254);
  3063. float: left;
  3064. padding: 3px 18px;
  3065. color: rgb(0, 119, 254);
  3066. margin: 5px 10px;
  3067. text-overflow: ellipsis;
  3068. white-space: nowrap;
  3069. overflow: hidden;
  3070. font-size: 14px;
  3071. box-sizing: border-box;
  3072. }
  3073. .selectPreviewOfSiteStatusCentent1Li {
  3074. border: 1px solid rgb(255, 217, 0);
  3075. color: rgb(255, 217, 0);
  3076. }
  3077. /* 项目选择B */
  3078. /* 平台站点数量及状态统计A */
  3079. #previewOfSiteStatusCentent2_1,
  3080. #previewOfSiteStatusCentent2_2 {
  3081. width: 100%;
  3082. height: 50%;
  3083. float: left;
  3084. }
  3085. .previewOfSiteStatusCentent2P {
  3086. color: rgb(0, 119, 254);
  3087. float: left;
  3088. height: 24px;
  3089. line-height: 24px;
  3090. padding-left: 15px;
  3091. font-size: 14px;
  3092. margin-top: 20px;
  3093. font-size: 16px;
  3094. }
  3095. .previewOfSiteStatusCentent2C {
  3096. width: 100%;
  3097. height: 80px;
  3098. float: left;
  3099. }
  3100. .previewOfSiteStatusCentent2CList {
  3101. height: 100%;
  3102. width: 33.3%;
  3103. float: left;
  3104. }
  3105. .previewOfSiteStatusCentent2CListData {
  3106. width: 100%;
  3107. text-align: center;
  3108. height: 40px;
  3109. line-height: 40px;
  3110. float: left;
  3111. color: var(--preTopDatatxt);
  3112. font-size: 24px;
  3113. }
  3114. .previewOfSiteStatusCentent2CListFont {
  3115. width: 100px;
  3116. text-align: center;
  3117. height: 20px;
  3118. line-height: 20px;
  3119. float: left;
  3120. }
  3121. .previewOfSiteStatusCentent2CListFontImg {
  3122. width: 18px;
  3123. height: 18px;
  3124. vertical-align: middle;
  3125. }
  3126. .previewOfSiteStatusCentent2CListFonts {
  3127. color: rgb(0, 119, 254);
  3128. vertical-align: middle;
  3129. font-size: 15px;
  3130. }
  3131. /* 平台站点数量及状态统计B */
  3132. /* 项目站点覆盖排名A */
  3133. #previewOfSiteStatusCentent3 {
  3134. width: 100%;
  3135. height: 100%;
  3136. overflow: auto;
  3137. }
  3138. .previewOfSiteStatusCentent3Li {
  3139. display: flex;
  3140. width: 100%;
  3141. height: 40px;
  3142. line-height: 0;
  3143. /* background: rgba(47, 53, 77, 0.5); */
  3144. }
  3145. .previewOfSiteStatusCentent3LiName {
  3146. width: 90px;
  3147. color: var(--white);
  3148. text-align: left;
  3149. height: 40px;
  3150. line-height: 40px;
  3151. font-size: 14px;
  3152. text-overflow: ellipsis;
  3153. white-space: nowrap;
  3154. overflow: hidden;
  3155. box-sizing: border-box;
  3156. padding-left: 5px;
  3157. }
  3158. .previewOfSiteStatusCentent3LiCharts {
  3159. height: 12px;
  3160. border: 1px solid rgb(0, 119, 254);
  3161. -webkit-box-sizing: border-box;
  3162. box-sizing: border-box;
  3163. flex: 1;
  3164. margin-top: 14px;
  3165. margin-left: 5px;
  3166. position: relative;
  3167. }
  3168. .previewOfSiteStatusCentent3LiCharts2 {
  3169. position: absolute;
  3170. top: 0;
  3171. left: 0;
  3172. background: url("./../../../static/img/JDT.png") repeat-x;
  3173. height: 10px;
  3174. }
  3175. .previewOfSiteStatusCentent3LiData {
  3176. width: 70px;
  3177. color: var(--preTopDatatxt);
  3178. height: 40px;
  3179. line-height: 40px;
  3180. margin-left: 5px;
  3181. white-space: nowrap;
  3182. }
  3183. .previewOfSiteStatusCentent3LiDW {
  3184. color: rgb(0, 119, 254);
  3185. }
  3186. /* 项目站点覆盖排名B */
  3187. /* 项目设备总览A */
  3188. #previewOfSiteStatusCentent4 {
  3189. width: 100%;
  3190. height: 100%;
  3191. }
  3192. #previewOfSiteStatusCentent4eCharts {
  3193. width: 250px;
  3194. height: 250px;
  3195. float: left;
  3196. }
  3197. #previewOfSiteStatusCentent4Font {
  3198. width: 100px;
  3199. height: 100%;
  3200. float: left;
  3201. }
  3202. #previewOfSiteStatusCentent4Font1 {
  3203. width: 100%;
  3204. height: 50%;
  3205. float: left;
  3206. padding-top: 75px;
  3207. box-sizing: border-box;
  3208. }
  3209. #previewOfSiteStatusCentent4Font2 {
  3210. width: 100%;
  3211. height: 50%;
  3212. float: left;
  3213. padding-top: 5px;
  3214. box-sizing: border-box;
  3215. }
  3216. .previewOfSiteStatusCentent4Font1P1 {
  3217. float: left;
  3218. width: 100%;
  3219. height: 24px;
  3220. line-height: 24px;
  3221. color: rgb(255, 217, 0);
  3222. }
  3223. .previewOfSiteStatusCentent4Font1P2 {
  3224. float: left;
  3225. width: 100%;
  3226. height: 24px;
  3227. line-height: 24px;
  3228. color: var(--white);
  3229. vertical-align: middle;
  3230. }
  3231. .previewOfSiteStatusCentent4Font1P2S {
  3232. float: left;
  3233. width: 16px;
  3234. height: 16px;
  3235. border-radius: 10px;
  3236. background: rgb(255, 217, 0);
  3237. vertical-align: middle;
  3238. }
  3239. .previewOfSiteStatusCentent4Font2P1 {
  3240. float: left;
  3241. width: 100%;
  3242. height: 24px;
  3243. line-height: 24px;
  3244. color: rgb(0, 119, 254);
  3245. }
  3246. .previewOfSiteStatusCentent4Font2P2 {
  3247. float: left;
  3248. width: 100%;
  3249. height: 24px;
  3250. line-height: 24px;
  3251. color: var(--white);
  3252. vertical-align: middle;
  3253. }
  3254. .previewOfSiteStatusCentent4Font2P2S {
  3255. float: left;
  3256. width: 16px;
  3257. height: 16px;
  3258. border-radius: 10px;
  3259. background: rgb(0, 119, 254);
  3260. vertical-align: middle;
  3261. }
  3262. /* 项目设备总览B */
  3263. /* 项目设备环比增长A */
  3264. #previewOfSiteStatusCentent5 {
  3265. width: 100%;
  3266. height: 100%;
  3267. }
  3268. /* 项目设备环比增长B */
  3269. /* 站点实时报警A */
  3270. #previewOfSiteStatusCentent6 {
  3271. width: 100%;
  3272. height: 100%;
  3273. /* background: rgba(7, 13, 19, 0.38); */
  3274. overflow: auto;
  3275. }
  3276. #GisRightCententBox2UL {
  3277. width: 100%;
  3278. height: auto;
  3279. }
  3280. .GIsRightWaringList {
  3281. width: 100%;
  3282. height: 30px;
  3283. line-height: 30px;
  3284. color: white;
  3285. box-sizing: border-box;
  3286. border-bottom: 1px solid cadetblue;
  3287. }
  3288. .GIsRightWaringList:hover {
  3289. background: rgb(0, 119, 254);
  3290. cursor: pointer;
  3291. }
  3292. .GIsRightWaringListNo {
  3293. width: 40%;
  3294. float: left;
  3295. font-size: 14px;
  3296. color: var(--white);
  3297. }
  3298. .GIsRightWaringListName {
  3299. width: 45%;
  3300. float: left;
  3301. font-size: 14px;
  3302. color: var(--white);
  3303. }
  3304. .GIsRightWaringListType {
  3305. width: 15%;
  3306. float: left;
  3307. font-size: 14px;
  3308. }
  3309. .red {
  3310. color: red;
  3311. }
  3312. .Yellow {
  3313. color: var(--diatitle);
  3314. }
  3315. .NoBaoJing {
  3316. position: relative;
  3317. top: 50px;
  3318. }
  3319. /* 站点实时报警B */
  3320. </style>
  3321. <style>
  3322. .esriPopup .sizer {
  3323. width: 300px;
  3324. }
  3325. /* infowindow相关 */
  3326.  
  3327. .esriPopup .outerPointer,
  3328. .contentPane,
  3329. .actionsPane {
  3330. background-color: rgba(17, 32, 39, 0.8) !important;
  3331. color: #fff !important;
  3332. }
  3333.  
  3334. .esriPopup .titlePane {
  3335. background-color: #112027 !important;
  3336. color: #fff !important;
  3337. opacity: 0.8 !important;
  3338. }
  3339.  
  3340. .esriPopup .contentPane {
  3341. padding: 0px 6px 6px 10px !important;
  3342. }
  3343.  
  3344. .esriPopup .titleButton.close {
  3345. opacity: 1 !important;
  3346. }
  3347.  
  3348. /* .esriPopup .titleButton.closeclose:hover{
  3349. opacity:0!important;
  3350. } */
  3351. .esriViewPopup .headerBox {
  3352. overflow: hidden;
  3353. }
  3354.  
  3355. .esriViewPopup .header {
  3356. color: #fff !important;
  3357. font-size: 14px;
  3358. }
  3359.  
  3360. .esriPopup .titleButton.maximize {
  3361. display: none;
  3362. }
  3363.  
  3364. .esriViewPopup .mainSection .attrTable td,
  3365. td.attrName {
  3366. color: #fff !important;
  3367. font-size: 12px;
  3368. }
  3369.  
  3370. .esriViewPopup .hzLine {
  3371. border-top: 1px solid #3f586f !important;
  3372. }
  3373.  
  3374. .sizer {
  3375. width: 350px !important;
  3376. }
  3377.  
  3378. .esriPopup a {
  3379. color: #fff;
  3380. }
  3381. .actionList {
  3382. display: none;
  3383. }
  3384. .boxmain,
  3385. .boxmainR {
  3386. position: absolute;
  3387. top: 0;
  3388. bottom: 0;
  3389. width: 350px;
  3390. overflow-x: hidden;
  3391. overflow-y: auto;
  3392. z-index: 100;
  3393. }
  3394. .boxmain {
  3395. left: 0;
  3396. }
  3397. .boxmainR {
  3398. right: 0;
  3399. }
  3400.  
  3401. #TimeBoxs {
  3402. position: relative;
  3403. top: 0;
  3404. left: 0;
  3405. }
  3406. .ButtonImgs {
  3407. position: absolute;
  3408. top: 0;
  3409. left: 420px;
  3410. }
  3411. </style>