index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
  1. <template>
  2. <section class="mainbox">
  3. <!-- topBox start -->
  4. <div class="topBox">
  5. <div class="column statisSec">
  6. <statis-top
  7. :falarmCount="alarmCount"
  8. :fpersonalCount="personalCount"
  9. :fsiteCount="siteCount"
  10. :fepLoad="epLoad"
  11. ></statis-top>
  12. <statis-bottom :fhtAnalogData="htAnalogData"></statis-bottom>
  13. </div>
  14. <div class="column mapBox" style="position: relative">
  15. <map-static-top :fsiteCount="siteCount"></map-static-top>
  16. <div id="pickerBox">
  17. <input
  18. id="pickerInput"
  19. placeholder="输入关键字选取站点"
  20. v-model="name"
  21. @keyup.enter="siteList_api({ name: this.name })"
  22. />
  23. <i
  24. class="el-icon-search"
  25. @click="siteList_api({ name: this.name })"
  26. ></i>
  27. <div id="poiInfo"></div>
  28. </div>
  29. <div class="panel-footer"></div>
  30. <div
  31. class="map panel"
  32. id="mapF"
  33. style="height: 100%; z-index: 1; width: 100%"
  34. ></div>
  35. </div>
  36. <div class="column">
  37. <div class="panel deviceSum">
  38. <h2>设备运行状态</h2>
  39. <div class="filterSec" style="top: 0.7rem">
  40. <el-date-picker
  41. v-model="dDefaultTime"
  42. type="datetimerange"
  43. range-separator="~"
  44. start-placeholder="开始日期"
  45. end-placeholder="结束日期"
  46. @change="deviceTypeCount_api()"
  47. >
  48. </el-date-picker>
  49. </div>
  50. <pie-chart
  51. :fdeviceTypeCount="deviceTypeCount"
  52. v-if="this.deviceTypeCount"
  53. ></pie-chart>
  54. <div class="panel-footer"></div>
  55. </div>
  56. <div class="panel line1 operStatus">
  57. <h2>负载率</h2>
  58. <triangle-chart
  59. :frtAnalogData="rtAnalogData"
  60. v-if="this.rtAnalogData.heavyLoad"
  61. ></triangle-chart>
  62. <div class="panel-footer"></div>
  63. </div>
  64. </div>
  65. </div>
  66. <!-- topBox end -->
  67. <!-- bottomBox start -->
  68. <div class="bottomBox">
  69. <div class="column">
  70. <div class="panel currentUsage" style="height: 100%">
  71. <h2>总能耗</h2>
  72. <div class="filterSec">
  73. <select name="" id="" v-model="dayType">
  74. <option value="0">当日用量趋势</option>
  75. <option value="1">当月用量趋势</option>
  76. </select>
  77. <!-- <img src="../../assets/images/markIcon.png" alt=""> -->
  78. </div>
  79. <bar-chart
  80. :feptrendIco="eptrendIco"
  81. v-if="this.eptrendIco[0]"
  82. ></bar-chart>
  83. <div class="panel-footer"></div>
  84. </div>
  85. </div>
  86. <div class="column">
  87. <div class="panel currentUsage" style="height: 100%">
  88. <h2>运维管理</h2>
  89. <div class="filterSec">
  90. <el-date-picker
  91. v-model="fDefaultTime"
  92. type="datetimerange"
  93. range-separator="~"
  94. start-placeholder="开始日期"
  95. end-placeholder="结束日期"
  96. @change="trendIcoCount_api()"
  97. >
  98. </el-date-picker>
  99. </div>
  100. <line-chart
  101. :ftrendIcoCount="trendIcoCount"
  102. v-if="this.trendIcoCount[0]"
  103. ></line-chart>
  104. <div class="panel-footer"></div>
  105. </div>
  106. </div>
  107. </div>
  108. <!-- bottomBox end -->
  109. </section>
  110. </template>
  111. <script>
  112. import statisTop from "./components/statisTop";
  113. import statisBottom from "./components/statisBottom";
  114. import pieChart from "./components/pieChart";
  115. import barChart from "./components/barChart";
  116. import lineChart from "./components/lineChart";
  117. import mapStaticTop from "./components/mapStaticTop";
  118. import triangleChart from "./components/triangleChart";
  119. import markIconPath from "../../assets/images/markIcon.png";
  120. // 地图
  121. import AMap from "AMap";
  122. // import AMapUI from "AMapUI";
  123. import api from "@/api/home/home.js";
  124. export default {
  125. name: "index",
  126. components: {
  127. statisTop,
  128. statisBottom,
  129. pieChart,
  130. barChart,
  131. lineChart,
  132. mapStaticTop,
  133. triangleChart,
  134. },
  135. data() {
  136. return {
  137. dDefaultTime: this.$store.state.se_defaultTime,
  138. // fDefaultTime: [
  139. // new Date("2021-6-23 00:00:00"),
  140. // new Date("2021-7-12 00:00:00"),
  141. // ],
  142. fDefaultTime: this.$store.state.th_defaultTime,
  143. map: null,
  144. alarmCount: {},
  145. personalCount: {},
  146. siteCount: {},
  147. deviceTypeCount: {},
  148. trendIcoCount: [],
  149. rtAnalogData: {},
  150. htAnalogData: {},
  151. dayType: 1,
  152. eptrendIco: {},
  153. eptrendIcoMonth: {},
  154. epLoad: "",
  155. siteOne: {},
  156. name: "",
  157. };
  158. },
  159. watch: {
  160. dayType(val) {
  161. if (val == 0) {
  162. this.eptrendIco_api();
  163. } else {
  164. this.eptrendIcoMonth_api();
  165. }
  166. },
  167. },
  168. created() {},
  169. mounted() {
  170. this.alarmCount_api();
  171. this.personalCount_api();
  172. this.epLoad_api();
  173. this.siteCount_api();
  174. this.deviceTypeCount_api();
  175. this.trendIcoCount_api();
  176. this.rtAnalogData_api();
  177. this.siteList_api();
  178. this.htAnalogData_api();
  179. // this.eptrendIco_api();
  180. this.eptrendIcoMonth_api();
  181. },
  182. methods: {
  183. // searchSite(){
  184. // this.siteList_api({"name":this.name});
  185. // },
  186. //告警总数数据对接
  187. alarmCount_api() {
  188. api.alarmCount_api().then((requset) => {
  189. this.alarmCount = requset.data;
  190. });
  191. },
  192. //运维人员
  193. personalCount_api() {
  194. api.personalCount_api().then((requset) => {
  195. this.personalCount = requset.data;
  196. });
  197. },
  198. //总实时负荷
  199. epLoad_api() {
  200. api.epLoad_api().then((requset) => {
  201. this.epLoad = requset.data;
  202. });
  203. },
  204. //站点总数
  205. siteCount_api() {
  206. api.siteCount_api().then((requset) => {
  207. this.siteCount = requset.data;
  208. });
  209. },
  210. //设备数量echarts饼图
  211. deviceTypeCount_api() {
  212. var _this = this;
  213. _this.$store.commit("TimeAll_function", this.dDefaultTime);
  214. var time = _this.$store.state.Time_Data;
  215. api
  216. .deviceTypeCount_api({
  217. startTime: time[0],
  218. endTime: time[1],
  219. })
  220. .then((requset) => {
  221. this.deviceTypeCount = requset.data;
  222. });
  223. },
  224. //故障抢修echarts折线图
  225. trendIcoCount_api() {
  226. var _this = this;
  227. _this.$store.commit("TimeAll_function", this.fDefaultTime);
  228. var time = _this.$store.state.Time_Data;
  229. api
  230. .trendIco_api({
  231. startTime: time[0],
  232. endTime: time[1],
  233. })
  234. .then((requset) => {
  235. this.$store.state.trendIcoCount = requset.data;
  236. this.trendIcoCount = requset.data;
  237. });
  238. },
  239. //重载运行echarts锥形图
  240. rtAnalogData_api() {
  241. api.rtAnalogData_api().then((requset) => {
  242. this.rtAnalogData = requset.data;
  243. });
  244. },
  245. //地图撒点
  246. siteList_api(query = {}) {
  247. api.siteList_api(query).then((requset) => {
  248. this.siteList = requset.data;
  249. this.initMap();
  250. });
  251. },
  252. //地图撒点
  253. // 日月年用电量
  254. htAnalogData_api() {
  255. api.htAnalogData_api().then((requset) => {
  256. this.htAnalogData = requset.data;
  257. });
  258. },
  259. // 今日昨日用电量趋势
  260. eptrendIco_api() {
  261. api.eptrendIco_api().then((requset) => {
  262. this.eptrendIco = requset.data;
  263. // console.log("this.eptrendIco");
  264. // console.log(this.eptrendIco[0].name);
  265. });
  266. },
  267. // 今日昨日用电量趋势
  268. eptrendIcoMonth_api() {
  269. api.eptrendIcoMonth_api().then((requset) => {
  270. this.eptrendIco = requset.data;
  271. console.log("this.eptrendIco");
  272. // console.log(this.eptrendIco);
  273. });
  274. },
  275. Overview() {
  276. // this.$router.push({ path: "/Overview" }); //, query: { title: title }
  277. },
  278. async initMap() {
  279. this.map = await new AMap.Map("mapF", {
  280. mapStyle: "amap://styles/blue", //设置地图的显示样式
  281. resizeEnable: true,
  282. zoom: 13,
  283. zooms: [3, 16],
  284. // features: [] //清空背景道路等
  285. });
  286. // this.initMapUi();
  287. var con = `<div class="siteModelBox" >
  288. <h2>
  289. {siteName}
  290. </h2>
  291. <div >
  292. <div class="siteDetailInfo" >
  293. <div class="infoLine">
  294. <span>站点状态:</span>
  295. <p>{status}</p>
  296. </div>
  297. <div class="infoLine">
  298. <span>设备总数:</span>
  299. <p>{deviceCount}</p >
  300. </div>
  301. <div class="infoLine">
  302. <span>告警数:</span>
  303. <p>{alarmPowerCount}</p >
  304. </div>
  305. <div class="infoLine">
  306. <span>监控类型:</span>
  307. <p>{deviceType}</p >
  308. </div>
  309. <div class="infoLine">
  310. <span>电话:</span>
  311. <p>{phone}</p >
  312. </div>
  313. <div class="infoLine">
  314. <span>地址:</span>
  315. <p>{siteAddress}</p >
  316. </div>
  317. </div>
  318. </div>
  319. </div>`;
  320. var dataList = this.siteList;
  321. dataList.forEach(function (item) {
  322. let conNew = con;
  323. // console.log(item.siteAddress);
  324. conNew = conNew.replace(/{siteAddress}/g, item.siteAddress);
  325. conNew = conNew.replace(/{phone}/g, item.phone);
  326. conNew = conNew.replace(/{siteName}/g, item.siteName);
  327. item.content = conNew;
  328. });
  329. this.addMarker(dataList, "water");
  330. },
  331. addMarker(lnglats) {
  332. // 创建标点和点击事件
  333. let markers = lnglats.map((val, ind) => {
  334. let marker = new AMap.Marker({
  335. position: new AMap.LngLat(val.longitude, val.latitude),
  336. icon: markIconPath,
  337. // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
  338. zIndex: 9,
  339. extData: {
  340. id: ind + 1,
  341. },
  342. });
  343. marker.on("mouseover", async () => {
  344. // console.log([val.latitude, val.longitude], null, val);
  345. await api.siteOne_api({ siteId: val.id }).then((requset) => {
  346. this.siteOne = requset.data;
  347. });
  348. if (this.siteOne) {
  349. val.content = val.content.replace(
  350. /{alarmPowerCount}/g,
  351. this.siteOne.alarmPowerCount ? this.siteOne.alarmPowerCount : "0"
  352. );
  353. val.content = val.content.replace(
  354. /{status}/g,
  355. this.siteOne.status ? this.siteOne.status : "-"
  356. );
  357. val.content = val.content.replace(
  358. /{deviceCount}/g,
  359. this.siteOne.deviceCount ? this.siteOne.deviceCount : "0"
  360. );
  361. val.content = val.content.replace(
  362. /{deviceType}/g,
  363. this.siteOne.deviceType ? this.siteOne.deviceType : "-"
  364. );
  365. }
  366. await this.addMarkerInfo(
  367. [val.longitude, val.latitude],
  368. val.content,
  369. val
  370. );
  371. });
  372. marker.on("mouseout", async () => {
  373. this.map.clearInfoWindow();
  374. });
  375. marker.on("click", async () => {
  376. localStorage.clear();
  377. this.$router.push({ path: "/Overview" });
  378. this.$store.commit("increment", val.id);
  379. localStorage.setItem("Overview", [val.id, val.siteName]);
  380. });
  381. return marker;
  382. });
  383. this.map.add(new AMap.OverlayGroup(markers));
  384. this.map.setFitView(); // 根据所有点自适应
  385. },
  386. // 添加标点
  387. addMarkerInfo(position, content, value = "") {
  388. value;
  389. // console.log("value");
  390. // console.log(value);
  391. this.map.clearInfoWindow();
  392. var infoWindow = new AMap.InfoWindow({
  393. isCustom: true, //使用自定义窗体
  394. closeWhenClickMap: true,
  395. content: content,
  396. offset: new AMap.Pixel(16, -30),
  397. });
  398. infoWindow.open(this.map, position);
  399. },
  400. poiPickerReady(poiPicker) {
  401. // console.log(poiPicker);
  402. var marker = new AMap.Marker();
  403. var infoWindow = new AMap.InfoWindow({
  404. offset: new AMap.Pixel(0, -20),
  405. });
  406. //选取了某个POI
  407. poiPicker.on("poiPicked", (poiResult) => {
  408. var source = poiResult.source,
  409. poi = poiResult.item,
  410. info = {
  411. source: source,
  412. id: poi.id,
  413. name: poi.name,
  414. location: poi.location.toString(),
  415. address: poi.address,
  416. };
  417. marker.setMap(this.map);
  418. infoWindow.setMap(this.map);
  419. marker.setPosition(poi.location);
  420. infoWindow.setPosition(poi.location);
  421. infoWindow.setContent(
  422. "POI信息: <pre>" + JSON.stringify(info, null, 2) + "</pre>"
  423. );
  424. // infoWindow.open(this.map, marker.getPosition());
  425. this.map.setCenter(marker.getPosition());
  426. });
  427. poiPicker.onCityReady(() => {
  428. // poiPicker.suggest("美食");
  429. });
  430. },
  431. // initMapUi() {
  432. // AMapUI.load(["ui/misc/PoiPicker"], (PoiPicker) => {
  433. // // console.log(PoiPicker);
  434. // let poiPickers = new PoiPicker({
  435. // input: "pickerInput",
  436. // });
  437. // this.poiPickerReady(poiPickers);
  438. // });
  439. // },
  440. },
  441. };
  442. </script>
  443. <style lang="scss">
  444. #pickerBox {
  445. position: absolute;
  446. z-index: 9;
  447. top: 0.15rem;
  448. right: 0.15rem;
  449. width: 3rem;
  450. height: 0.425rem;
  451. font-size: 0.15rem;
  452. }
  453. .el-icon-search {
  454. position: absolute;
  455. right: 0.1375rem;
  456. top: 0.1rem;
  457. font-size: 0.2125rem;
  458. color: #00f4fd;
  459. cursor: pointer;
  460. }
  461. #pickerInput {
  462. width: 3rem;
  463. line-height: 0.425rem;
  464. padding: 0 0.125rem;
  465. outline: none;
  466. border: 1px solid #00f4fd;
  467. border-radius: 18px;
  468. background: rgba(0, 0, 0, 0);
  469. color: #fff;
  470. }
  471. #poiInfo {
  472. background: #fff;
  473. }
  474. </style>