- <template>
- <div id="previewOfSiteStatus">
- <div id="previewOfSiteStatusMaps">
- <div ref="rootmap" id="earthmap" class="earthmap">
- <img
- src="./../../../static/img/fw_btn.png"
- alt
- class="fwStyle"
- @click="fwClick"
- />
- </div>
- <div id="popup" class="popup"></div>
-
- <!-- <div id="previewOfSiteStatusTop">
- <div class="previewOfSiteStatusTopC">
- <img
- src="./../../../static/img/previewOfSiteStatus7.png"
- alt
- class="previewOfSiteStatusTopimg"
- />
- <div class="previewOfSiteStatusTopCFont">
- <span class="previewOfSiteStatusTopCData">{{ TopData1 }}</span>
- <span class="previewOfSiteStatusTopCMS">设备总数</span>
- </div>
- </div>
- <div class="previewOfSiteStatusTopC">
- <img
- src="./../../../static/img/previewOfSiteStatus8.png"
- alt
- class="previewOfSiteStatusTopimg"
- />
- <div class="previewOfSiteStatusTopCFont">
- <span class="previewOfSiteStatusTopCData">{{ TopData2 }}</span>
- <span class="previewOfSiteStatusTopCMS">当前在线数</span>
- </div>
- </div>
- <div class="previewOfSiteStatusTopC">
- <img
- src="./../../../static/img/previewOfSiteStatus9.png"
- alt
- class="previewOfSiteStatusTopimg"
- />
- <div class="previewOfSiteStatusTopCFont">
- <span class="previewOfSiteStatusTopCData">{{ TopData3 }}</span>
- <span class="previewOfSiteStatusTopCMS">在线率</span>
- </div>
- </div>
- </div> -->
- <div class="boxmain">
- <!-- 项目选择 -->
- <div id="previewOfSiteStatusLeftTop">
- <div class="previewOfSiteStatusTitle">
- <img
- src="./../../../static/img/previewOfSiteStatus1.png"
- alt
- class="previewOfSiteStatusTitleImg"
- />
- <span class="previewOfSiteStatusTitleFont">项目选择</span>
- </div>
- <div class="previewOfSiteStatusCentent">
- <!-- 项目选择下拉框 -->
- <div class="previewTOP">
- <template>
- <el-select
- class="selectWidth"
- v-model="ChecksplatformCodeTest"
- filterable
- placeholder="全部项目"
- @change="ListClick"
- size="medium"
- clearable
- >
- <el-option
- v-for="(item, index) in ProjectList"
- :key="index"
- :label="item.groupName"
- :value="index"
- >
- </el-option>
- </el-select>
- </template>
- </div>
- <!-- 项目选择历史搜索记录(最多十条) -->
- <div class="previewButton">
- <h5 class="text">历史搜索</h5>
- <div class="previewHistory">
- <span
- class="previewtext"
- v-for="(item, index) in historyList"
- :key="index"
- @click="HistoryClick(item)"
- >
- {{ item }}
- </span>
- </div>
- </div>
- </div>
- </div>
- <!-- 平台站点数量及状态统计 -->
- <div id="previewOfSiteStatusLeftcenter">
- <div class="previewOfSiteStatusTitle">
- <img
- src="./../../../static/img/previewOfSiteStatus2.png"
- alt
- class="previewOfSiteStatusTitleImg"
- />
- <span class="previewOfSiteStatusTitleFont">站点统计</span>
- <div class="previewOfSiteStatusTitleBTN">
- <span
- v-for="(item, index) in namelist"
- :key="index"
- @click="allpreview(index, item, $event)"
- :class="{ select: item.select }"
- >{{ item.name }}</span
- >
- </div>
- </div>
- <div class="previewOfSiteStatusCentent">
- <div id="previewOfSiteStatusCentent2_1">
- <p class="previewOfSiteStatusCentent2P">平台站点(个)</p>
- <div class="previewOfSiteStatusCentent2C">
- <div class="previewOfSiteStatusCentent2CList">
- <countTo
- :startVal="Site.SAll"
- :endVal="Site.EAll"
- :duration="2000"
- class="previewOfSiteStatusCentent2CListData"
- ></countTo>
- <!-- </div> -->
- <div class="previewOfSiteStatusCentent2CListFont">
- <img
- src="./../../../static/img/previewOfSiteStatus10.png"
- alt
- class="previewOfSiteStatusCentent2CListFontImg"
- />
- <span class="previewOfSiteStatusCentent2CListFonts"
- >总数</span
- >
- </div>
- </div>
- <div class="previewOfSiteStatusCentent2CList">
- <countTo
- :startVal="Site.SOn"
- :endVal="Site.EOn"
- :duration="2000"
- class="previewOfSiteStatusCentent2CListData"
- ></countTo>
- <div class="previewOfSiteStatusCentent2CListFont">
- <img
- src="./../../../static/img/previewOfSiteStatus11.png"
- alt
- class="previewOfSiteStatusCentent2CListFontImg"
- />
- <span class="previewOfSiteStatusCentent2CListFonts"
- >在线</span
- >
- </div>
- </div>
- <div class="previewOfSiteStatusCentent2CList">
- <countTo
- :startVal="Site.SOff"
- :endVal="Site.EOff"
- :duration="2000"
- class="previewOfSiteStatusCentent2CListData"
- ></countTo>
- <div class="previewOfSiteStatusCentent2CListFont">
- <img
- src="./../../../static/img/previewOfSiteStatus12.png"
- alt
- class="previewOfSiteStatusCentent2CListFontImg"
- />
- <span class="previewOfSiteStatusCentent2CListFonts"
- >离线</span
- >
- </div>
- </div>
- </div>
- </div>
- <!-- <div id="previewOfSiteStatusCentent2_2">
- <p class="previewOfSiteStatusCentent2P">项目进度(条)</p>
- <div class="previewOfSiteStatusCentent2C">
- <div class="previewOfSiteStatusCentent2CList">
- <countTo
- :startVal="Project.SAll"
- :endVal="Project.EAll"
- :duration="2000"
- class="previewOfSiteStatusCentent2CListData"
- ></countTo>
- <div class="previewOfSiteStatusCentent2CListFont">
- <img
- src="./../../../static/img/previewOfSiteStatus10.png"
- alt
- class="previewOfSiteStatusCentent2CListFontImg"
- />
- <span class="previewOfSiteStatusCentent2CListFonts"
- >总数</span
- >
- </div>
- </div>
- <div class="previewOfSiteStatusCentent2CList">
- <countTo
- :startVal="Project.SOn"
- :endVal="Project.EOn"
- :duration="2000"
- class="previewOfSiteStatusCentent2CListData"
- ></countTo>
- <div class="previewOfSiteStatusCentent2CListFont">
- <img
- src="./../../../static/img/previewOfSiteStatus11.png"
- alt
- class="previewOfSiteStatusCentent2CListFontImg"
- />
- <span class="previewOfSiteStatusCentent2CListFonts"
- >已完成</span
- >
- </div>
- </div>
- <div class="previewOfSiteStatusCentent2CList">
- <countTo
- :startVal="Project.SOff"
- :endVal="Project.EOff"
- :duration="2000"
- class="previewOfSiteStatusCentent2CListData"
- ></countTo>
- <div class="previewOfSiteStatusCentent2CListFont">
- <img
- src="./../../../static/img/previewOfSiteStatus12.png"
- alt
- class="previewOfSiteStatusCentent2CListFontImg"
- />
- <span class="previewOfSiteStatusCentent2CListFonts"
- >未完成</span
- >
- </div>
- </div>
- </div>
- </div> -->
- </div>
- </div>
- <!-- 项目站点覆盖排名 -->
- <div id="previewOfSiteStatusLeftBottom">
- <div class="previewOfSiteStatusTitle">
- <img
- src="./../../../static/img/previewOfSiteStatus3.png"
- alt
- class="previewOfSiteStatusTitleImg"
- />
- <span class="previewOfSiteStatusTitleFont">项目站点覆盖排名</span>
- </div>
- <div class="previewOfSiteStatusCentent">
- <ul id="previewOfSiteStatusCentent3">
- <li
- class="previewOfSiteStatusCentent3Li"
- v-for="(item, index) in Region"
- :key="index"
- style="cursor: pointer;"
- >
- <span
- class="previewOfSiteStatusCentent3LiName"
- :title="item.RegionName"
- >{{ item.RegionName }}</span
- >
- <div class="previewOfSiteStatusCentent3LiCharts">
- <div
- class="previewOfSiteStatusCentent3LiCharts2"
- :style="'width:' + item.RegionJD + '%;'"
- ></div>
- </div>
- <span class="previewOfSiteStatusCentent3LiData">
- {{ item.RegionNum }}
- <span class="previewOfSiteStatusCentent3LiDW">个</span>
- </span>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="boxmainR">
- <!-- 项目设备总览 -->
- <div id="previewOfSiteStatusRightTop">
- <div class="previewOfSiteStatusTitle">
- <img
- src="./../../../static/img/previewOfSiteStatus4.png"
- alt
- class="previewOfSiteStatusTitleImg"
- />
- <span class="previewOfSiteStatusTitleFont">项目设备总览</span>
- </div>
- <div class="previewOfSiteStatusCentent">
- <div id="previewOfSiteStatusCentent4">
- <div id="previewOfSiteStatusCentent4eCharts"></div>
- <div id="previewOfSiteStatusCentent4Font">
- <div id="previewOfSiteStatusCentent4Font1">
- <p class="previewOfSiteStatusCentent4Font1P1">
- {{ XianYou }}
- </p>
- <p class="previewOfSiteStatusCentent4Font1P2">
- <span class="previewOfSiteStatusCentent4Font1P2S"></span>
- 现有设备
- </p>
- </div>
- <div id="previewOfSiteStatusCentent4Font2">
- <p class="previewOfSiteStatusCentent4Font2P1">{{ DaJian }}</p>
- <p class="previewOfSiteStatusCentent4Font2P2">
- <span class="previewOfSiteStatusCentent4Font2P2S"></span>
- 搭建设备
- </p>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div id="previewOfSiteStatusRightcenter">
- <div class="previewOfSiteStatusTitle">
- <img
- src="./../../../static/img/previewOfSiteStatus5.png"
- alt
- class="previewOfSiteStatusTitleImg"
- />
- <span class="previewOfSiteStatusTitleFont">项目设备环比增长</span>
- </div>
- <div class="previewOfSiteStatusCentent">
- <div id="previewOfSiteStatusCentent5"></div>
- </div>
- </div>
- <div id="previewOfSiteStatusRightBottom">
- <div class="previewOfSiteStatusTitle">
- <img
- src="./../../../static/img/previewOfSiteStatus6.png"
- alt
- class="previewOfSiteStatusTitleImg"
- />
- <span class="previewOfSiteStatusTitleFont">站点实时报警</span>
- </div>
- <div class="previewOfSiteStatusCentent">
- <div id="previewOfSiteStatusCentent6">
- <div id="GisRightCententBox2UL">
- <span v-if="NoBaoJingData" class="NoBaoJing">暂无报警数据</span>
- <div
- class="GIsRightWaringList"
- v-for="(item, index) in WaringList"
- :key="index"
- @mouseover="mouseOver(index)"
- @mouseleave="mouseLeave(index)"
- >
- <el-tooltip
- ref="tooltip"
- class="item"
- effect="dark"
- :content="
- `${item.factorsName}${item.warnTypeDesc},${item.warnTypeDesc}值为:${item.warnValue}`
- "
- placement="top"
- >
- <div>
- <span class="GIsRightWaringListNo">{{
- item.createTime
- }}</span>
- <span class="GIsRightWaringListName">{{
- item.siteName
- }}</span>
- <span
- class="GIsRightWaringListType"
- :class="[item.warnType == 2 ? 'red' : 'Yellow']"
- >{{ item.warnTypeDesc }}</span
- >
- </div>
- </el-tooltip>
- </div>
- </div>
- </div>
- </div>
- <!-- <div id="previewOfSiteStatusCentent6">
- <div id="GisRightCententBox2UL">
- <span v-if="NoBaoJingData" class="NoBaoJing">暂无报警数据</span>
-
- </div>
- </div> -->
- </div>
- </div>
-
- <!-- 弹出层 -->
- <el-dialog
- class="page-dialog-site"
- title="历史数据表格"
- :visible.sync="dialogVisible"
- width="60%"
- :append-to-body="true"
- >
- <div id="NFSHistoryData">
- <div id="TimeBoxs">
- <span class="timeTM">时间:</span>
- <el-date-picker
- v-model="TimeBoxValue"
- type="daterange"
- :picker-options="pickerOptions"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- align="right"
- value-format="yyyy-MM-dd"
- @change="TimeBoxChange"
- ></el-date-picker>
- <img
- src="../../../static/img/NFShouSuo.png"
- alt
- class="ButtonImgs"
- @click="Search()"
- />
- </div>
- <div id="NFSHistoryData2">
- <el-tabs v-model="HistoryBox" @tab-click="HistoryHandleClick">
- <el-tab-pane label="表格展示" name="DateGrid" class="timeTM">
- <el-table
- :data="HistoryTableData"
- style="width: 100%; height: calc(100% - 45px)"
- v-loading="loading3"
- element-loading-text="拼命加载中"
- element-loading-spinner="el-icon-loading"
- element-loading-background="rgba(255, 255, 255, 0.3)"
- >
- <template v-for="(col, index) in NFSNowDataTableHead">
- <el-table-column
- :prop="col.field"
- :label="col.title"
- :key="index"
- show-overflow-tooltip
- :render-header="labelHead"
- ></el-table-column>
- </template>
- </el-table>
- <el-pagination
- @size-change="HistorySizeChange"
- @current-change="HistoryCurrentChange"
- :current-page="HistoryPage"
- :page-sizes="[10, 20, 50, 100]"
- :page-size="HistorySize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="DatagridDataLength"
- :hide-on-single-page="HRPageHide"
- style="margin-top: 10px"
- ></el-pagination>
- </el-tab-pane>
- <el-tab-pane label="图形展示" name="Charts" class="timeTM">
- <div id="YinziSelect">
- 上因子:
- <el-select
- v-model="SiteYinzi"
- placeholder="请选择"
- @change="YinZiUp"
- >
- <el-option
- v-for="item in SiteYinziAll"
- :key="item.codeAscii"
- :label="item.codeProperty"
- :value="item.codeAscii"
- ></el-option> </el-select
- > 下因子:
- <el-select
- v-model="SiteYinzi2"
- placeholder="请选择"
- @change="YinZiDown"
- >
- <el-option
- v-for="item in SiteYinziAll2"
- :key="item.codeAscii"
- :label="item.codeProperty"
- :value="item.codeAscii"
- ></el-option>
- </el-select>
- </div>
- <div id="HistoryEchart"></div>
- </el-tab-pane>
- </el-tabs>
- </div>
- </div>
- </el-dialog>
- </div>
- </div>
- </template>
- <script>
- import { message } from "./../../util/item";
- import countTo from "vue-count-to"; //引入数字滚动插件
- import { Polygon, LineString } from "ol/geom";
- import { Map, View, Feature } from "ol";
- import "ol/ol.css";
- import XYZ from "ol/source/XYZ";
- import * as layer from "ol/layer.js";
- import * as source from "ol/source.js";
- import * as geom from "ol/geom.js";
- import * as style from "ol/style.js";
- import Overlay from "ol/Overlay.js";
- import TileLayer from "ol/layer/Tile";
- import { fromLonLat } from "ol/proj";
-
- import SourceVector from "ol/source/Vector";
- import LayerVector from "ol/layer/Vector";
- import Cluster from "ol/source/Cluster";
- import Style from "ol/style/Style";
- import Fill from "ol/style/Fill";
- import Text from "ol/style/Text";
- import Circle from "ol/style/Circle";
- import GeoJSON from "ol/format/GeoJSON";
- import Stroke from "ol/style/Stroke";
- import Draw from "ol/interaction/Draw";
- import dragzoom from "ol/interaction/DragZoom";
-
- import Icon from "ol/style/Icon";
- import Select from "ol/interaction/Select";
- import Modify from "ol/interaction/Modify";
- import FormatWKT from "ol/format/WKT";
- import { ScaleLine, ZoomSlider, ZoomToExtent, Zoom } from "ol/control";
- export default {
- name: "previewOfSiteStatus",
- components: { countTo }, //加载数字滚动插件
- props: {
- flag: {
- type: Boolean,
- default() {
- return false;
- }
- }
- },
- data: function() {
- return {
- TimeBoxValue: [
- this.moment()
- .subtract("days", 3)
- .format("YYYY-MM-DD"),
- this.moment().format("YYYY-MM-DD")
- ], //起止日期
- pickerOptions: {
- shortcuts: [
- {
- text: "最近三天",
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
- picker.$emit("pick", [start, end]);
- }
- },
- {
- text: "最近一周",
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
- picker.$emit("pick", [start, end]);
- }
- },
- {
- text: "最近一个月",
- onClick(picker) {
- const end = new Date();
- const start = new Date();
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
- picker.$emit("pick", [start, end]);
- }
- }
- ]
- }, //时间框的快捷选项
- HistoryBox: "DateGrid", //tabs的默认展示未第一个 表格展示
- HistoryTableData: [], //历史数据表格数据
- HistoryPage: 1, //内页分页默认显示页
- DatagridDataLength: 0, //内页分页上显示的数据总条数
- HistorySize: 10, //内页分页上显示的每页的条数
- HRPageHide: this.DatagridDataLength > 10 ? false : true, //内页分页默认不显示 当页数大于1 的时候在显示
- SiteYinzi: "", //上因子
- SiteYinzi2: "", //下因子
- SiteYinziZn: "", //上因子中文名
- SiteYinzi2ZN: "", //下因子中文名
- SiteYinziAll: [], //上因子渲染数据
- SiteYinziAll2: [], //下因子渲染数据
- myChart: {}, //echarts的配置项
- ChartsX: "", //X轴数据
- ChartsUp: "", //上因子图形数据
- ChartsDown: "", //下因子图形数据
- //↓↓↓↓↓↓↓↓↓↓页面渲染逻辑以及增加页面流畅的辅助性功能↓↓↓↓↓↓↓↓↓↓
- FirstOn: true, //进来页面未点击历史图形的时候为true, 点击历史图形后为false,避免因子与图形接口多次渲染导致页面卡顿。
- DateisChange: false, //当时间段的时间进行变换后,切换tab时应该重新请求数据,否则不用数据刷新,默认时间未改动为false。
- YinZiChange: true, //判断因子是否改变过,如果改变过则重新请求echarts数据。
- loading: false,
- loading2: false,
- loading3: false,
- NFSNowDataTableHead: [], //实时数据表格表头数据
- //当前项目code
- currentPlatformCode: "",
- //当前站点name
- currentSiteName: "",
- //当前站点code
- currentSiteNo: "",
- //显示当前站点下的信息
- dialogVisible: false, //控制弹框的显隐
-
- // ////////////
- /////////////
- //////////////
- menu_overlay: null,
- currentZoom: 5,
- switchStatusData: this.flag, // 重新定义数据
- timer: {}, //定时器
- // 顶部中间汇总A
- TopData1: "1866",
- TopData2: "933",
- TopData3: "50" + "%",
- // 顶部中间汇总B
- // 项目选择A
- ProjectList: [
- {
- exceptionState: 0,
- exceptionStatePercentage: "",
- groupName: "全部项目",
- groupNo: "",
- offLine: 0,
- offLinePercentage: 0,
- total: 0,
- totalPercentage: 0
- }
- ],
- dynamic: 0,
- ChecksplatformCode: "", //选取的平台的编号
- platformtype: "", //选取的站点统计类型
- ChecksplatformCodeTest: "全部项目", //选取的默认文字
- historyList: [],
- // 项目选择B
- // 平台站点数量及状态统计A
- Site: {
- // 初始值
- SAll: 0,
- SOn: 0,
- SOff: 0,
- // 实时值
- EAll: 0,
- EOn: 0,
- EOff: 0
- },
- Project: {
- // 初始值
- SAll: 0,
- SOn: 0,
- SOff: 0,
- // 实时值
- EAll: 0,
- EOn: 0,
- EOff: 0
- },
- // 平台站点数量及状态统计B
- // 项目站点覆盖排名A
- Region: [
- // { //数据格式
- // RegionName: "苏州",
- // RegionJD: "90",
- // RegionNum: "8600"
- // ShortName: "苏州"
- // }
- ],
- // 项目站点覆盖排名B
- // 项目设备总览A
- myChart: {},
- XianYou: "", //现有设备总数
- DaJian: "", //搭建设备总数
- // 项目设备总览B
- // 项目设备环比增长A
- myChart2: {},
- // 项目设备环比增长B
- // 站点实时报警A
- WaringList: [],
- NoBaoJingData: true, //有无报警数据,有就为false
- // 站点实时报警B
- map: "",
- namelist: [
- { name: "全部", platform: "", type: "", select: true },
- { name: "合同", platform: "", type: "0", select: false },
- { name: "临测", platform: "", type: "1", select: false }
- ]
- };
- },
- methods: {
-
- //计算中心点
- getCenterFromArray(clusterData) {
- var north = -90;
- var south = 90;
- var east = -180;
- var west = 180;
- var cell;
- for (var i = 0; i < clusterData.length; i++) {
- cell = clusterData[i];
- if (cell.lat && cell.lon) {
- //计算边框,用于切换项目定位中心点
- north = Math.max(parseFloat(cell.lat), north);
- south = Math.min(parseFloat(cell.lat), south);
- east = Math.max(parseFloat(cell.lon), east);
- west = Math.min(parseFloat(cell.lon), west);
- }
- }
-
- return [(east + west) / 2, (north + south) / 2];
- },
- //复位功能
- fwClick() {
- this.map.getView().setCenter([114, 30]);
- this.map.getView().setZoom(5);
- },
-
- //根据当前项目后台坐标计算出的中心飞行到指定城市
- flyToCity() {
- console.log("经纬度最大边框是:" + this.north);
- console.log("经纬度最大边框是:" + this.south);
- console.log("经纬度最大边框是:" + this.east);
- console.log("经纬度最大边框是:" + this.west);
- this.map
- .getView()
- .setCenter([
- (this.east + this.west) / 2,
- (this.north + this.south) / 2
- ]);
- this.map.getView().setZoom(10);
- },
- //项目图层切换
- initPointToMap(projectNo) {
- this.$http
- .post(this.nozzle.listStationBase, {
- data: {
- platformCode: projectNo
- }
- })
- .then(response => {
- console.log(response);
- if (response.data.code === 1) {
- this.showCluster(response.data.data);
- }
- });
- },
- //点击历史数据
- historyData(stCode) {
- console.log(stCode);
- this.currentSiteNo = stCode;
- this.dialogVisible = true;
- setTimeout(() => {
- // this.LoadGridTitleData();
- this.loadDataGridData();
- }, 0);
- },
- // 获取所有平台
- LoadAllProject() {
- this.$http
- .post(
- this.nozzle.userGroupRelaGetGroups +
- "?&pageNo=" +
- 1 +
- "&typeStr=" +
- "&pageSize=" +
- 999
- )
- .then(response => {
- // console.log(response);
- if (response.status === 200) {
- var qwe = response.data.data === "" ? [] : response.data.data;
-
- this.ProjectList = this.ProjectList.concat(qwe);
-
- } else {
- message(response);
- }
- })
- .catch(response => {
- message(response);
- });
- },
- // 根据平台渲染站点统计
- loadSiteNumForOroject() {
- // console.log(this.platformtype, this.ChecksplatformCode);
-
- this.$http
- .post(this.nozzle.getSiteNum, {
- data: { platform: this.ChecksplatformCode, type: this.platformtype }
- })
- .then(response => {
- if (response.status === 200) {
- // 将当前数据设置成数字滚动的初始值
- this.Site.SAll = this.Site.EAll;
- this.Site.SOn = this.Site.EOn;
- this.Site.SOff = this.Site.EOff;
- this.Project.SAll = this.Project.EAll;
- this.Project.SOn = this.Project.EOn;
- this.Project.SOff = this.Project.EOff;
- // 将新数据设置成数字滚动的结束值 也就是展示值
- this.Site.EAll = response.data.data.all;
- this.Site.EOn = response.data.data.online;
- this.Site.EOff = response.data.data.offline;
- // this.Project.EAll = response.data.data.projectcount;
- // this.Project.EOn = response.data.data.completed;
- // this.Project.EOff = response.data.data.noncompleted;
- } else {
- message(response);
- }
- })
- .catch(response => {
- message(response);
- });
- },
- // 单击显示平台站点
- allpreview(index, item, event) {
- // console.log(index, platform, event.target);
- this.namelist.forEach(item => {
- item.select = false;
- });
- this.namelist[index].select = true;
-
- // console.log(this.platformtype, this.ChecksplatformCode);
- this.platformtype = item.type;
-
- this.$http
- .post(this.nozzle.getSiteNum, {
- data: { platform: this.ChecksplatformCode, type: this.platformtype }
- })
- .then(response => {
- if (response.status === 200) {
- // 将当前数据设置成数字滚动的初始值
- this.Site.SAll = this.Site.EAll;
- this.Site.SOn = this.Site.EOn;
- this.Site.SOff = this.Site.EOff;
- this.Project.SAll = this.Project.EAll;
- this.Project.SOn = this.Project.EOn;
- this.Project.SOff = this.Project.EOff;
- // 将新数据设置成数字滚动的结束值 也就是展示值
- this.Site.EAll = response.data.data.all;
- this.Site.EOn = response.data.data.online;
- this.Site.EOff = response.data.data.offline;
- // this.Project.EAll = response.data.data.projectcount;
- // this.Project.EOn = response.data.data.completed;
- // this.Project.EOff = response.data.data.noncompleted;
- } else {
- message(response);
- }
- })
- .catch(response => {
- message(response);
- });
- },
- // 加载项目站点覆盖排名
- loadQuyuPaiMing() {
- this.$http
- .post(this.nozzle.sysPlatformGetAllSiteCount)
- .then(response => {
- if (response.data.code === 1) {
- this.Region = response.data.data;
- } else {
- message(response);
- }
- })
- .catch(response => {
- message(response);
- });
- },
- // 加载 项目设备总览
- loadQuyuShebei() {
- this.$http
- .post(this.nozzle.platEquipmentGetEquipStatistics, {
- data: {
- platform: this.ChecksplatformCode
- }
- })
- .then(response => {
- if (response.data.code === 200) {
- this.loadRegionEcharts(
- response.data.data.title,
- response.data.data.exiting,
- response.data.data.tobebuilt
- );
- this.XianYou = response.data.data.exitingsum;
- this.DaJian = response.data.data.tobebuiltsum;
- } else {
- message(response);
- }
- })
- .catch(response => {
- message(response);
- });
- },
- // 加载 项目设备环比增长
- loadQuYuSheBeiHuanBi() {
- this.$http
- .post(this.nozzle.sysPlatformGetSiteStateStatistics, {
- data: {
- platform: this.ChecksplatformCode
- }
- })
- .then(response => {
- if (response.data.code === 200) {
- this.loadRegionEcharts2(
- response.data.data.xdata,
- response.data.data.offline,
- response.data.data.warn,
- response.data.data.malfunction,
- response.data.data.alarm
- );
- } else {
- message(response);
- }
- })
- .catch(response => {
- message(response);
- });
- },
- // 加载 站点实时报警信息
- loadSiteBaoJing() {
- this.NoBaoJingData = true;
- this.WaringList = [];
- this.$http
- .post(this.nozzle.warnLogListWarnLog, {
- current: 1,
- size: 99,
- data: {
- platForm: this.ChecksplatformCode,
- endTime: "",
- startTime: "",
- siteName: ""
- }
- })
- .then(response => {
- if (response.data.code === 200) {
- if (response.data.data.total > 0) {
- // 没有数据 显示暂无数据的提示
- this.NoBaoJingData = false;
- }
- this.WaringList = response.data.data.records;
- } else {
- message(response);
- }
- })
- .catch(response => {
- message(response);
- });
- },
- // 点击项目ZZJ
- ListClick(index) {
- this.ChecksplatformCode = this.ProjectList[index]["groupNo"];
-
- //刷新联动地图上的点位按照项目实际的个数
- console.log(this.ChecksplatformCode)
- this.initPointToMap(this.ChecksplatformCode)
- if(this.ProjectList[index]["areaCode"]&&this.ProjectList[index]["groupNo"]!="")
- this.gotoProgramArea(this.ProjectList[index]["areaCode"])
- else
- {
- this.fwClick()
- if (this.vectorSourceArea) {
- this.vectorSourceArea.clear();
- }
- }
-
- // 限制数组的长度不超过10个
- // console.log(this.historyList.length);
- // console.log(this.ProjectList[index]["groupName"]);
- var gname = this.ProjectList[index]["groupName"];
- if (this.historyList.length >= 10 && this.historyList.includes(gname)) {
- } else if (this.historyList.length >= 10) {
- this.historyList.pop();
- }
- this.historyList = this.selectTag(
- this.historyList,
- this.ProjectList[index]["groupName"]
- );
-
- this.setItem(this.historyList);
-
- // 根据平台渲染站点数量统计及状态统计
- this.loadSiteNumForOroject();
- // 根据平台渲染项目设备总览
- this.loadQuyuShebei();
- // 根据平台渲染项目设备环比增长
- this.loadQuYuSheBeiHuanBi();
- // 根据平台渲染站点实时报警信息
- this.loadSiteBaoJing();
- // 返回出项目的坐标以及缩放等级************************************************************************************************GIS调用
- if (
- this.ProjectList[index].latitude != null &&
- this.ProjectList[index].longitude != null &&
- this.ProjectList[index].zoomLevel != null
- ) {
- let MapPoint = new esri.geometry.Point(
- this.ProjectList[index].longitude,
- this.ProjectList[index].latitude,
- new esri.SpatialReference({
- wkid: 4326
- })
- );
- this.map.centerAndZoom(MapPoint, this.ProjectList[index].zoomLevel);
- }
- },
- // 点击历史搜索的文字
- HistoryClick(item) {
- this.ChecksplatformCodeTest = item;
- this.ProjectList.forEach(item1 => {
- if (item1["groupName"] == item) {
- this.ChecksplatformCode = item1["groupNo"];
- //地图联动响应的项目
- this.initPointToMap(this.ChecksplatformCode)
- if(item1["areaCode"]&&item1["groupNo"]!="")
- this.gotoProgramArea(item1["areaCode"])
- else
- {
- this.fwClick()
- if (this.vectorSourceArea) {
- this.vectorSourceArea.clear();
- }
- }
- // 根据平台渲染站点数量统计及状态统计
- this.loadSiteNumForOroject();
- // 根据平台渲染项目设备总览
- this.loadQuyuShebei();
- // 根据平台渲染项目设备环比增长
- this.loadQuYuSheBeiHuanBi();
- // 根据平台渲染站点实时报警信息
- this.loadSiteBaoJing();
- // 返回出项目的坐标以及缩放等级**************************GIS调用
- if (
- item1.latitude != null &&
- item1.longitude != null &&
- item1.zoomLevel != null
- ) {
- let MapPoint = new esri.geometry.Point(
- item1.longitude,
- item1.latitude,
- new esri.SpatialReference({
- wkid: 4326
- })
- );
- this.map.centerAndZoom(MapPoint, item1.zoomLevel);
- }
- }
- });
- },
- // 本地存储ZZJ
- setItem(arr) {
- window.sessionStorage.setItem("HISTORYLIST", JSON.stringify(arr));
- },
- // 本地取值ZZJ
- getItem() {
- if (!JSON.parse(window.sessionStorage.getItem("HISTORYLIST"))) {
- return null;
- }
- this.historyList = JSON.parse(
- window.sessionStorage.getItem("HISTORYLIST")
- );
- },
- // 对历史搜索数组去重判断
- selectTag(row, id) {
- row.includes(id) ? row : row.unshift(id);
- return row;
- },
- // 加载项目设备总览的ecahrts
- loadRegionEcharts(SheBeiLeiXing, XianYouData, DaJianData) {
- // 基于准备好的dom,初始化echarts实例
- this.myChart = this.$echarts.init(
- document.getElementById("previewOfSiteStatusCentent4eCharts")
- );
- // 绘制图表
- this.myChart.clear();
- this.myChart.setOption({
- color: ["red"],
- tooltip: {
- trigger: "axis"
- },
- legend: {
- x: "center",
- data: ["现有设备", "搭建设备"],
- show: false
- },
- radar: [
- {
- indicator: SheBeiLeiXing,
- radius: 70,
- shape: "circle",
- name: {
- formatter: "{value}",
- textStyle: {
- color: "red"
- }
- }
- }
- ],
- series: [
- {
- type: "radar",
- itemStyle: { normal: { areaStyle: { type: "default" } } },
- tooltip: {
- trigger: "item"
- },
- data: [
- {
- name: "现有设备",
- value: XianYouData,
- areaStyle: {
- normal: {
- color: "rgb(255, 217, 0)"
- }
- },
- itemStyle: {
- normal: {
- color: "rgb(255, 217, 0)",
- lineStyle: {
- color: "rgb(255, 217, 0)"
- },
- areaStyle: {
- type: "default"
- }
- }
- }
- },
- {
- name: "搭建设备",
- value: DaJianData,
- areaStyle: {
- normal: {
- color: "rgb(0, 119, 254)" // 选择项目颜色
- }
- },
- itemStyle: {
- normal: {
- color: "rgb(0, 119, 254)",
- lineStyle: {
- color: "rgb(0, 119, 254)"
- },
- areaStyle: {
- type: "default"
- }
- }
- }
- }
- ]
- }
- ]
- });
- },
- // 加载项目设备环比增长的ecahrts
- loadRegionEcharts2(XData, V1, V2, V3, V4) {
- // 基于准备好的dom,初始化echarts实例
- this.myChart2 = this.$echarts.init(
- document.getElementById("previewOfSiteStatusCentent5")
- ); // 绘制图表
- this.myChart2.clear();
- this.myChart2.setOption({
- color: [
- "rgb(140,143,146)",
- "rgb(255,214,0)",
- "rgb(229,132,12)",
- "rgb(211,22,22)"
- ],
- tooltip: {
- trigger: "axis"
- },
- legend: {
- data: ["离线数量", "预警数量", "故障数量", "报警数量"],
- textStyle: {
- //图例文字的样式
- color: "rgb(0, 119, 254)",
- fontSize: 12
- }
- },
- grid: {
- left: "3%",
- right: "6%",
- bottom: "3%",
- containLabel: true
- },
- xAxis: {
- type: "category",
- boundaryGap: false,
- data: XData,
- axisLabel: {
- formatter: "{value}",
- textStyle: {
- //改变刻度字体样式
- color: "rgb(0, 119, 254)"
- },
- fontSize: 12 //字体大小
- },
- splitLine: {
- show: false
- }
- },
- yAxis: {
- type: "value",
- axisLabel: {
- formatter: "{value}",
- textStyle: {
- //改变刻度字体样式
- color: "rgb(0, 119, 254)"
- },
- fontSize: 12 //字体大小
- },
- splitLine: {
- show: false
- }
- },
- series: [
- {
- name: "离线数量",
- type: "line",
- data: V1,
- smooth: true,
- symbol: "none" //取消折点圆圈
- },
- {
- name: "预警数量",
- type: "line",
- data: V2,
- smooth: true,
- symbol: "none" //取消折点圆圈
- },
- {
- name: "故障数量",
- type: "line",
- data: V3,
- smooth: true,
- symbol: "none" //取消折点圆圈
- },
- {
- name: "报警数量",
- type: "line",
- data: V4,
- smooth: true,
- symbol: "none" //取消折点圆圈
- }
- ]
- });
- },
- // 预警报警信息滚动
- ScrollUp() {
- var box = document.getElementById("previewOfSiteStatusCentent6");
- var con1 = document.getElementById("GisRightCententBox2UL");
- if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) {
- box.scrollTop = 0;
- } else {
- box.scrollTop++;
- }
- },
- //鼠标移入事件
- mouseOver(index) {
- if (this.timer) {
- clearInterval(this.timer);
- this.$refs.tooltip[index].handleShowPopper();
- }
- },
- //鼠标移出事件
- mouseLeave(index) {
- this.$refs.tooltip[index].handleClosePopper();
- this.timer = setInterval(this.ScrollUp, 100);
- },
- //按照项目选择去联动地图
- initPointToMap1(projectNo) {
- let _this = this;
- loadModules([
- "dojo/parser",
- "dojo/ready",
- "dojo/_base/array",
- "esri/Color",
- "dojo/dom-style",
- "dojo/query",
-
- "esri/map",
- "esri/dijit/InfoWindow",
- "esri/request",
- "esri/graphic",
- "esri/geometry/Extent",
-
- "esri/symbols/SimpleMarkerSymbol",
- "esri/symbols/SimpleFillSymbol",
- "esri/symbols/PictureMarkerSymbol",
- "esri/renderers/ClassBreaksRenderer",
-
- "esri/layers/GraphicsLayer",
- "esri/SpatialReference",
- "esri/dijit/PopupTemplate",
- "esri/geometry/Point",
- "esri/geometry/webMercatorUtils",
- "esri/layers/ArcGISTiledMapServiceLayer",
- "extras/ClusterLayer",
-
- "dijit/layout/BorderContainer",
- "dijit/layout/ContentPane",
-
- "dojo/domReady!"
- ])
- .then(
- ([
- parser,
- ready,
- arrayUtils,
- Color,
- domStyle,
- query,
- Map,
- InfoWindow,
- esriRequest,
- Graphic,
- Extent,
- SimpleMarkerSymbol,
- SimpleFillSymbol,
- PictureMarkerSymbol,
- ClassBreaksRenderer,
- GraphicsLayer,
- SpatialReference,
- PopupTemplate,
- Point,
- webMercatorUtils,
- ArcGISTiledMapServiceLayer,
- ClusterLayer
- ]) => {
- _this.$http
- .post(_this.nozzle.listStationBase, {
- data: {
- platformCode: projectNo
- }
- })
- .then(response => {
- console.log(response);
- if (response.data.code === 1) {
- let picBaseUrl =
- "https://static.arcgis.com/images/Symbols/Shapes/";
- let photoInfo = {};
- var imagealone = {};
- let position = {};
-
- //第一步清空
- _this.map.graphics.clear();
-
- if (this.graphicsLayerByMarker) {
- _this.map.removeLayer(this.graphicsLayerByMarker);
- }
- this.graphicsLayerByMarker = new GraphicsLayer(); //点
-
- let wgs = new SpatialReference({
- wkid: 4326
- });
- //第一步先初始化好点图层graphicsLayerByMarker
- var Marker_point;
- let markerPng;
-
- var marksymbol = new PictureMarkerSymbol(
- picBaseUrl + "BluePin1LargeB.png",
- 32,
- 32
- ).setOffset(0, 15);
-
- for (var k = 0; k < response.data.data.length; k++) {
- if (
- response.data.data[k].lon &&
- response.data.data[k].lon != "0"
- ) {
- Marker_point = new Point(
- parseFloat(response.data.data[k].lon),
- parseFloat(response.data.data[k].lat),
- wgs
- );
- var attr = {
- stCode: response.data.data[k].stCode,
- stName: response.data.data[k].stName,
- mapPoint: Marker_point
- };
- markerPng = new Graphic(Marker_point, marksymbol, attr);
- this.graphicsLayerByMarker.add(markerPng);
- }
- }
-
- //初始化结束
-
- photoInfo.data = arrayUtils.map(response.data.data, function(
- p
- ) {
- /* if(p.lon!=null){
- } */
- let latlng = new Point(
- parseFloat(p.lon),
- parseFloat(p.lat),
- wgs
- );
- let webMercator = webMercatorUtils.geographicToWebMercator(
- latlng
- );
- let attributes = {
- stName: p.stName,
- stCode: p.stCode
- };
- return {
- x: webMercator.x,
- y: webMercator.y,
- attributes: attributes
- };
- });
-
- let popupTemplate = new PopupTemplate({
- title: "",
- fieldInfos: [
- {
- fieldName: "stName",
- label: "名称:",
- visible: true
- },
- {
- fieldName: "stCode",
- label: "编号:",
- visible: true
- }
- ]
- });
- if (this.clusterLayer) {
- _this.map.removeLayer(this.clusterLayer);
- }
- this.clusterLayer = new ClusterLayer({
- data: photoInfo.data,
- distance: 100,
- id: "clusters" + projectNo,
- labelColor: "#fff",
- labelOffset: 10,
- resolution: _this.map.extent.getWidth() / _this.map.width,
- singleColor: "#888",
- singleTemplate: popupTemplate
- });
- let defaultSym = new SimpleMarkerSymbol().setSize(4);
- let renderer = new ClassBreaksRenderer(
- defaultSym,
- "clusterCount"
- );
-
- let blue = new PictureMarkerSymbol(
- picBaseUrl + "BluePin1LargeB.png",
- 32,
- 32
- ).setOffset(0, 15);
- let green = new PictureMarkerSymbol(
- picBaseUrl + "GreenPin1LargeB.png",
- 64,
- 64
- ).setOffset(0, 15);
- let red = new PictureMarkerSymbol(
- picBaseUrl + "RedPin1LargeB.png",
- 72,
- 72
- ).setOffset(0, 15);
- renderer.addBreak(0, 2, blue);
- renderer.addBreak(2, 200, green);
- renderer.addBreak(200, 1001, red);
-
- this.clusterLayer.setRenderer(renderer);
- _this.map.addLayer(this.clusterLayer);
- //聚簇图层按级别控制开关
-
- _this.map.on("update-end", () => {
- console.log("当前级别是:" + _this.map.getLevel());
- //隐藏聚簇图层
- if (_this.map.getLevel() > 9) {
- if (this.clusterLayer)
- _this.map.removeLayer(this.clusterLayer);
- _this.map.addLayer(this.graphicsLayerByMarker);
- } else {
- if (this.graphicsLayerByMarker)
- _this.map.removeLayer(this.graphicsLayerByMarker);
- _this.map.addLayer(this.clusterLayer);
- }
- });
-
- //点击单个图标事件
- this.graphicsLayerByMarker.on("click", res => {
- console.log(res.graphic.attributes.mapPoint);
- console.log(res.graphic.attributes.stCode);
- console.log(res.graphic.attributes.stName);
- _this.$http
- .post(_this.nozzle.getTempData, {
- data: {
- stCode: res.graphic.attributes.stCode
- }
- })
- .then(resP => {
- let textContent =
- "<table style='width: 330px;'><tr><td>名称</td><td>" +
- res.graphic.attributes.stName +
- "</td></tr>";
- for (let item in resP.data.data) {
- textContent += "<tr>";
- for (let arr in resP.data.data[item]) {
- textContent +=
- "<td>" + resP.data.data[item][arr] + "</td>";
- }
- textContent += "</tr>";
- }
- textContent +=
- "<tr><td style='text-align: right' colspan='2'><a href ='javascript:void(0)' style='color:dodgerblue' onclick=''>历时数据</a></td></tr></table>";
- _this.map.infoWindow.setTitle("详细信息");
- _this.map.infoWindow.setContent(textContent);
-
- _this.map.infoWindow.show(
- res.graphic.attributes.mapPoint,
- esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT
- );
- });
- });
-
- //聚簇图层按地图级别控制开关
- this.clusterLayer.on("click", function(res) {
- if (res.graphic._graphicsLayer._singles.length == 0) {
- return;
- }
- let d = res;
- _this.$http
- .post(_this.nozzle.getTempData, {
- data: {
- stCode:
- d.graphic._graphicsLayer._singles[0].attributes
- .stCode
- }
- })
- .then(resP => {
- let textContent =
- "<table style='width: 330px;'><tr><td>名称</td><td>" +
- d.graphic._graphicsLayer._singles[0].attributes
- .stName +
- "</td></tr>";
- for (let item in resP.data.data) {
- textContent += "<tr>";
- for (let arr in resP.data.data[item]) {
- textContent +=
- "<td>" + resP.data.data[item][arr] + "</td>";
- }
- textContent += "</tr>";
- }
- textContent +=
- "<tr><td style='text-align: right' colspan='2'><a href ='javascript:void(0)' style='color:dodgerblue' onclick=''>历时数据</a></td></tr></table>";
- _this.map.infoWindow.setTitle("详细信息");
- _this.map.infoWindow.setContent(textContent);
-
- _this.map.infoWindow.show(
- d.mapPoint,
- esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT
- );
- });
- });
- } else {
- message(response);
- }
- })
- .catch(response => {
- message(response);
- });
- }
- )
- .catch(err => {
- // handle any script or module loading errors
- // console.error(err);
- });
- },
- gotoProgramArea(areaCode) {
- //初始化项目行政区域边框
- // Create layer
- if (this.vectorSourceArea) {
- this.vectorSourceArea.clear();
- }
-
- /* let response = await fetch(
- "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json"
- );
-
- let dataJson = await response.json(); */
- this.$http
- .get(this.nozzle.queueadmin+"/"+areaCode+".json")
- .then(response => {
- console.log(response)
- let dataJson = response.data.features[0];
- console.log(dataJson)
-
- let areaFeature = new GeoJSON().readFeatures(dataJson);
-
- this.vectorSourceArea = new SourceVector({
- features: areaFeature
- });
-
- this.vectorArea = new LayerVector({
- renderMode: "image",
- maxResolution: 2,
- zIndex: 2,
- source: this.vectorSourceArea,
- style: feature => {
- return new Style({
- stroke: new Stroke({
- color: "#8A2BE2",
- lineCap: "butt",
- width: 3
- })
- });
- }
- });
- this.map.addLayer(this.vectorArea);
-
- //定位过去
- //开始根据routeFeature定位
- /* console.log(areaFeature[0].getGeometry().getExtent())
- console.log(areaFeature[0].geometryChangeKey_.target.extent_) */
- var extent = areaFeature[0].getGeometry().getExtent();
- this.map.getView().fit(extent, this.map.getSize());
- })
- },
-
- gotoProgramArea1(areaCode) {
- //初始化项目行政区域边框
- // Create layer
- if (this.vectorSourceArea) {
- this.vectorSourceArea.clear();
- }
-
- /* let response = await fetch(
- "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json"
- );
-
- let dataJson = await response.json(); */
- this.$http
- .get(this.nozzle.queueadmin+"/"+areaCode+".json")
- .then(response => {
- console.log(response)
- let dataJson = response.data.features[0];
- console.log(dataJson)
-
- let areaFeature = new GeoJSON().readFeatures(dataJson);
-
- this.vectorSourceArea = new SourceVector({
- features: areaFeature
- });
-
- this.vectorArea = new LayerVector({
- renderMode: "image",
- maxResolution: 2,
- zIndex: 2,
- source: this.vectorSourceArea,
- style: feature => {
- return new Style({
- stroke: new Stroke({
- color: "#8A2BE2",
- lineCap: "butt",
- width: 3
- })
- });
- }
- });
- this.map.addLayer(this.vectorArea);
-
- //定位过去
- //开始根据routeFeature定位
- /* console.log(areaFeature[0].getGeometry().getExtent())
- console.log(areaFeature[0].geometryChangeKey_.target.extent_) */
- var extent = areaFeature[0].getGeometry().getExtent();
- this.map.getView().fit(extent, this.map.getSize());
- })
- },
- //显示cluster聚簇界面
- showCluster(clusterData) {
- //初始化kkLayer
- if (this.source) {
- this.source.clear();
- }
- this.source = new SourceVector({});
-
- //初始化kkLayer
- if (this.vectorSource) {
- this.vectorSource.clear();
- }
- this.vectorSource = new SourceVector({
- wrapX: false
- });
-
- this.vector = new LayerVector({
- source: this.vectorSource,
- style: feature => {
- return this.getStyleOfCar(feature);
- }
- });
-
- var cell,
- resultwkt = "";
- var feature;
- var keydataStruct;
- this.north = -90;
- this.south = 90;
- this.east = -180;
- this.west = 180;
-
- for (var i = 0; i < clusterData.length; i++) {
- cell = clusterData[i];
- if (cell.lon != null && cell.lat != null) {
- resultwkt = "POINT(" + cell.lon + " " + cell.lat + ")";
- }
- feature = new FormatWKT().readFeature(resultwkt);
- //站点属性记录
- feature.lon = cell.lon;
- feature.lat = cell.lat;
- feature.stName = cell.stName;
- feature.stCode = cell.stCode;
- //加入ol.feautre几何属性
- feature.wkt = resultwkt;
- //无聚簇类型图层也添加一遍
- this.vectorSource.addFeature(feature);
-
- this.source.addFeature(feature);
- //计算边框,用于切换项目定位中心点
- this.north = Math.max(parseFloat(cell.lat), this.north);
- this.south = Math.min(parseFloat(cell.lat), this.south);
- this.east = Math.max(parseFloat(cell.lon), this.east);
- this.west = Math.min(parseFloat(cell.lon), this.west);
- }
-
- this.clusterSource = new Cluster({
- distance: 40,
- source: this.source
- });
- var styleCache = {};
-
- this.layer = new LayerVector({
- source: this.clusterSource,
- //source: this.source,
- style: feature => {
- var size = feature.get("features").length;
- var currentFeature = feature.get("features");
- if (size > 200) {
- return new Style({
- text: new Text({
- text: size.toString(),
- font: "bold 12px 微软雅黑",
- fill: new Fill({
- color: "#8A2BE2"
- }),
- textAlign: "center"
- //textBaseline: "top"
- }),
- image: new Icon({
- src:
- "https://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png"
- })
- /* image: new Circle({
- radius: 18,
- stroke: new Stroke({
- color: "#fff"
- }),
- fill: new Fill({
- color: "#3399CC"
- })
- }) */
- });
- } else if (size > 2) {
- return new Style({
- text: new Text({
- text: size.toString(),
- font: "bold 12px 微软雅黑",
- fill: new Fill({
- color: "green"
- }),
- textAlign: "center"
- //textBaseline: "top"
- }),
- image: new Icon({
- src:
- "https://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png"
- })
- /* image: new Circle({
- radius: 18,
- stroke: new Stroke({
- color: "#fff"
- }),
- fill: new Fill({
- color: "#3399CC"
- })
- }) */
- });
- } else {
- return this.getStyleOfCar(currentFeature[0]);
- }
- }
- });
- //飞行到指定的城市项目中心点
- // this.flyToCity()
- //?要判断currentZoom加哪一个
- if (this.currentZoom >= 8) this.map.addLayer(this.vector);
- else this.map.addLayer(this.layer);
-
-
- },
-
- getStyleOfCar(feature) {
- return new Style({
- image: new Icon({
- src:
- "https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png"
- })
- });
- },
- createOlMap() {
- /* let picBaseUrl ="https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png";
- let blue =picBaseUrl + "BluePin1LargeB.png"
- let green = picBaseUrl + "GreenPin1LargeB.png"
- let red = picBaseUrl + "RedPin1LargeB.png"
- */
-
- //加载地图自定义图标
- var view = new View({
- projection: "EPSG:4326", //使用这个坐标系
- center: [114, 30],
- zoom: 5,
- maxZoom: 19
- });
-
- var mapcontainer = this.$refs.rootmap;
-
- /* this.arcgiswhiteMap= new XYZ({
- url:
- "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer/tile/{z}/{y}/{x}"
- })
-
- this.arcgisMap=new XYZ({
- url:
- "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
- }) */
- this.arcgiswhiteMap = new XYZ({
- url:
- "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
- });
-
- this.arcgisMap = new XYZ({
- /* url:
- "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}" */
- url:
- "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
- });
-
- this.map = new Map({
- target: mapcontainer,
- layers: [
- new TileLayer({
- source: this.arcgisMap
- })
- ],
- view: view
- });
-
- //添加面板
- this.menu_overlay = new Overlay({
- element: document.getElementById("popup"),
- positioning: "center-left",
- offset: [20, 0]
- });
- this.menu_overlay.setVisible(false);
- this.map.addOverlay(this.menu_overlay);
-
- this.REFSFunctionToGis(!this.switchStatusData);
- //定义无聚簇的layer
- /* this.vectorSource = new SourceVector({
- //features: this.Features
- wrapX: false,
- });
- this.vector = new LayerVector({
- source: this.vectorSource,
- style: feature => {
- return this.getStyleOfCar(feature);
- }
- }); */
-
- // this.map.addLayer(this.vector);
-
- this.$http
- .post(this.nozzle.listStationBase, {
- data: {
- /* platformCode:projectNo */
- }
- })
- .then(response => {
- console.log(response)
- if (response.data.code === 1) {
- this.showCluster(response.data.data);
- }
- })
-
- //鼠标监听
- //鼠标点击事件
- this.map.on("click", e => {
- if (this.menu_overlay && this.menu_overlay != "")
- this.menu_overlay.setPosition(undefined);
- var pixel = this.map.getEventPixel(e.originalEvent);
- var feature = this.map.forEachFeatureAtPixel(pixel, function(
- feature,
- layer
- ) {
- return feature;
- });
- if (feature) {
- //捕捉到要素后,进行后续操作,如弹出要素信息
- // this.addPopupContent(e.coordinate, feature.values_.features);
- if (
- !!feature.get("features") &&
- typeof feature.get("features") != "undefined"
- ) {
- if (feature.get("features").length == 1) {
- /* console.log("点击了单个点"+e.coordinate) */
- var cell = feature.values_.features[0];
- this.showOlPanel(cell);
- }
- //点击的是聚簇图标,展示统计信息
- else {
- /* console.log("点击了聚簇"+e.coordinate) */
- var centerthis = this.getCenterFromArray(
- feature.values_.features
- );
-
- this.map.getView().setCenter([centerthis[0], centerthis[1]]);
- this.map.getView().setZoom(12);
- }
- } else {
- //点击的是vector图层的feature
- console.log(feature);
- //开始展示属性
- this.showOlPanel(feature);
- }
- }
- });
- //鼠标移动事件
- this.map.on("pointermove", function(evt) {
- if (evt.map.hasFeatureAtPixel(evt.pixel)) {
- evt.map.getTargetElement().style.cursor = "pointer";
- } else {
- evt.map.getTargetElement().style.cursor = "";
- }
- });
- //鼠标移动事件
- this.map.on("moveend", evt => {
- var zoom = this.map.getView().getZoom();
-
- if (zoom >= 8 && this.currentZoom < 8) {
- /* if(this.map.getView().getZoom()>10) */
- this.map.removeLayer(this.layer);
- this.map.addLayer(this.vector);
- //添加行政边框
- if (this.vectorArea) {
- this.vectorArea.setVisible(true)
- }
- } else if (zoom < 8 && this.currentZoom >= 8) {
- this.map.removeLayer(this.vector);
- this.map.addLayer(this.layer);
- //清除行政边框
- if (this.vectorArea) {
- this.vectorArea.setVisible(false)
- }
- } else {
- }
- this.currentZoom = zoom;
- });
- },
- closepopup() {
- if (this.menu_overlay && this.menu_overlay != "")
- this.menu_overlay.setPosition(undefined);
- },
- //openlayer属性框
- showOlPanel(feature) {
- this.$http
- .post(this.nozzle.getTempData, {
- data: {
- stCode: feature.stCode
- }
- })
- .then(resP => {
- console.log(resP);
- //开始展示属性字段
- let textContent = "";
- let closeDOM =
- "<a style='color:#fff;position: absolute;top: 2px;right: 8px;cursor: pointer;' class='ol-popup-closer' onclick='closepopup()' >X</a>";
-
- textContent =
- "<div style='color: #fff !important;font-size: 17px;font-weight: bold;margin-left: 9px;'>" +
- "详细信息" +
- "</div> <a style='color:#fff;position: absolute;top: 2px;right: 8px;cursor: pointer;' class='ol-popup-closer' onclick='closepopup()' >X</a></br> ";
- textContent +=
- "<div style='border-top: 1px solid #3F586F !important;border: none;margin-top: 6px;margin-bottom: 6px;'></div>";
-
- //添加html拼接---缩放至
- textContent +=
- `<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("` +
- feature.stCode +
- `")'>` +
- "历史数据" +
- "</div>";
-
- textContent +=
- '<div style="width:260px;height:33px;color: #fff;line-height:33px;">' +
- '<div style="font-size:14px;line-height:33px; margin-left: 22px;margin-top: 5px;position: absolute;">' +
- "名称" +
- "</div>" +
- '<div style="font-size:14px;line-height:33px;margin-top: 5px;position: absolute;margin-left: 179px;">' +
- feature.stName +
- "</div>" +
- "</div>";
-
- let data = {};
- let currentData = resP.data.data;
- for (let kx = 0; kx < currentData.length; kx++) {
- data[currentData[kx].name] = currentData[kx].value;
- }
- console.log(data);
-
- textContent += '<div style="width:300px;">';
- for (let key in data) {
- textContent +=
- '<div style="width:260px;height:33px;color: #fff;">' +
- '<div style="font-size:14px;line-height:33px; margin-left: 11px;margin-top: 5px;position: absolute;">' +
- key +
- "</div>" +
- '<div style="font-size:14px;line-height:33px;margin-top: 5px;position: absolute;margin-left: 179px;">' +
- data[key] +
- "</div>" +
- "</div>";
- }
- textContent += "</div>";
-
- textContent = closeDOM + textContent;
-
- textContent +=
- "<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>";
- //提取公共方法,放缩地图、显示属性等
- document.getElementById("popup").innerHTML = textContent;
-
- this.menu_overlay.setPosition([feature.lon, feature.lat]);
-
- this.map.getView().setCenter([feature.lon, feature.lat]);
- });
- },
- //初始化地图
- createMap(projectNo) {
- let _this = this;
- loadModules([
- "dojo/parser",
- "dojo/ready",
- "dojo/_base/array",
- "esri/Color",
- "dojo/dom-style",
- "dojo/query",
-
- "esri/map",
- "esri/dijit/InfoWindow",
- "esri/request",
- "esri/graphic",
- "esri/geometry/Extent",
-
- "esri/symbols/SimpleMarkerSymbol",
- "esri/symbols/SimpleFillSymbol",
- "esri/symbols/PictureMarkerSymbol",
- "esri/renderers/ClassBreaksRenderer",
-
- "esri/layers/GraphicsLayer",
- "esri/SpatialReference",
- "esri/dijit/PopupTemplate",
- "esri/geometry/Point",
- "esri/geometry/webMercatorUtils",
- "esri/layers/ArcGISTiledMapServiceLayer",
- "extras/ClusterLayer",
-
- "dijit/layout/BorderContainer",
- "dijit/layout/ContentPane",
-
- "dojo/domReady!"
- ])
- .then(
- ([
- parser,
- ready,
- arrayUtils,
- Color,
- domStyle,
- query,
- Map,
- InfoWindow,
- esriRequest,
- Graphic,
- Extent,
- SimpleMarkerSymbol,
- SimpleFillSymbol,
- PictureMarkerSymbol,
- ClassBreaksRenderer,
- GraphicsLayer,
- SpatialReference,
- PopupTemplate,
- Point,
- webMercatorUtils,
- ArcGISTiledMapServiceLayer,
- ClusterLayer
- ]) => {
- // create map with the given options at a DOM node w/ id 'mapNode'
- _this.map = new Map("previewOfSiteStatusMaps", {
- center: [114, 30],
- zoom: 5,
- logo: false,
- slider: false,
- maxZoom: 15
- });
-
- this.arcgiswhiteMap = new ArcGISTiledMapServiceLayer(
- //"http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
- "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer"
- );
- _this.map.addLayer(this.arcgiswhiteMap);
- /* this.arcgiswhiteMap.hide() */
- this.arcgisMap = new ArcGISTiledMapServiceLayer(
- /* "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer" */
- "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
- );
- _this.map.addLayer(this.arcgisMap);
- // console.log("zzzzzzzzzzz " + this.switchStatusData);
- this.REFSFunctionToGis(!this.switchStatusData);
- /* _this.map.on("zoom-end", function() {
- });
-
- _this.map.on("click", function(e) {
- }); */
- _this.map.on("load", function() {
- _this.$http
- .post(_this.nozzle.listStationBase, {
- data: {
- platformCode: projectNo
- }
- })
- .then(response => {
- console.log(response);
- if (response.data.code === 1) {
- let picBaseUrl =
- "https://static.arcgis.com/images/Symbols/Shapes/";
- let photoInfo = {};
- var imagealone = {};
- let position = {};
- if (this.graphicsLayerByMarker)
- this.graphicsLayerByMarker.clear();
- this.graphicsLayerByMarker = new GraphicsLayer(); //点
-
- let wgs = new SpatialReference({
- wkid: 4326
- });
- //第一步先初始化好点图层graphicsLayerByMarker
- var Marker_point;
- let markerPng;
-
- var marksymbol = new PictureMarkerSymbol(
- picBaseUrl + "BluePin1LargeB.png",
- 32,
- 32
- ).setOffset(0, 15);
-
- for (var k = 0; k < response.data.data.length; k++) {
- if (
- response.data.data[k].lon &&
- response.data.data[k].lon != "0"
- ) {
- Marker_point = new Point(
- parseFloat(response.data.data[k].lon),
- parseFloat(response.data.data[k].lat),
- wgs
- );
- var attr = {
- stCode: response.data.data[k].stCode,
- stName: response.data.data[k].stName,
- mapPoint: Marker_point
- };
- markerPng = new Graphic(Marker_point, marksymbol, attr);
- this.graphicsLayerByMarker.add(markerPng);
- }
- }
-
- //初始化结束
-
- photoInfo.data = arrayUtils.map(
- response.data.data,
- function(p) {
- /* if(p.lon!=null){
- } */
- let latlng = new Point(
- parseFloat(p.lon),
- parseFloat(p.lat),
- wgs
- );
- let webMercator = webMercatorUtils.geographicToWebMercator(
- latlng
- );
- let attributes = {
- stName: p.stName,
- stCode: p.stCode
- };
- return {
- x: webMercator.x,
- y: webMercator.y,
- attributes: attributes
- };
- }
- );
-
- let popupTemplate = new PopupTemplate({
- title: "",
- fieldInfos: [
- {
- fieldName: "stName",
- label: "名称:",
- visible: true
- },
- {
- fieldName: "stCode",
- label: "编号:",
- visible: true
- }
- ]
- });
- if (this.clusterLayer) this.clusterLayer.clear();
- this.clusterLayer = new ClusterLayer({
- data: photoInfo.data,
- distance: 100,
- id: "clusters",
- labelColor: "#fff",
- labelOffset: 10,
- resolution: _this.map.extent.getWidth() / _this.map.width,
- singleColor: "#888",
- singleTemplate: popupTemplate
- });
- let defaultSym = new SimpleMarkerSymbol().setSize(4);
- let renderer = new ClassBreaksRenderer(
- defaultSym,
- "clusterCount"
- );
-
- let blue = new PictureMarkerSymbol(
- picBaseUrl + "BluePin1LargeB.png",
- 32,
- 32
- ).setOffset(0, 15);
- let green = new PictureMarkerSymbol(
- picBaseUrl + "GreenPin1LargeB.png",
- 64,
- 64
- ).setOffset(0, 15);
- let red = new PictureMarkerSymbol(
- picBaseUrl + "RedPin1LargeB.png",
- 72,
- 72
- ).setOffset(0, 15);
- renderer.addBreak(0, 2, blue);
- renderer.addBreak(2, 200, green);
- renderer.addBreak(200, 1001, red);
-
- this.clusterLayer.setRenderer(renderer);
- _this.map.addLayer(this.clusterLayer);
- //聚簇图层按级别控制开关
-
- _this.map.on("update-end", () => {
- console.log("当前级别是:" + _this.map.getLevel());
- //隐藏聚簇图层
- if (_this.map.getLevel() > 9) {
- if (this.clusterLayer)
- _this.map.removeLayer(this.clusterLayer);
- _this.map.addLayer(this.graphicsLayerByMarker);
- } else {
- if (this.graphicsLayerByMarker)
- _this.map.removeLayer(this.graphicsLayerByMarker);
- _this.map.addLayer(this.clusterLayer);
- }
-
- _this.map.on("update-end", () => {
- console.log("当前级别是:" + _this.map.getLevel());
- //隐藏聚簇图层
- if (_this.map.getLevel() > 9) {
- if (clusterLayer) _this.map.removeLayer(clusterLayer);
- _this.map.addLayer(graphicsLayerByMarker);
- } else {
- if (graphicsLayerByMarker)
- _this.map.removeLayer(graphicsLayerByMarker);
- _this.map.addLayer(clusterLayer);
- }
- });
-
- //点击单个图标事件
- this.graphicsLayerByMarker.on("click", res => {
- console.log(res.graphic.attributes.mapPoint);
- console.log(res.graphic.attributes.stCode);
- console.log(res.graphic.attributes.stName);
- _this.$http
- .post(_this.nozzle.getTempData, {
- data: {
- stCode: res.graphic.attributes.stCode
- }
- })
- .then(resP => {
- let textContent =
- "<table style='width: 330px;'><tr><td>名称</td><td>" +
- res.graphic.attributes.stName +
- "</td></tr>";
- for (let item in resP.data.data) {
- textContent += "<tr>";
- for (let arr in resP.data.data[item]) {
- textContent +=
- "<td>" + resP.data.data[item][arr] + "</td>";
- }
- textContent += "</tr>";
- }
- textContent +=
- "<tr><td style='text-align: right' colspan='2'><a href ='javascript:void(0)' style='color:dodgerblue' onclick=''>历时数据</a></td></tr></table>";
- _this.map.infoWindow.setTitle("详细信息");
- _this.map.infoWindow.setContent(textContent);
-
- _this.map.infoWindow.show(
- res.graphic.attributes.mapPoint,
- esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT
- );
- });
- });
- });
-
- //聚簇图层按地图级别控制开关
- this.clusterLayer.on("click", function(res) {
- if (res.graphic._graphicsLayer._singles.length == 0) {
- return;
- }
- let d = res;
- _this.$http
- .post(_this.nozzle.getTempData, {
- data: {
- stCode:
- d.graphic._graphicsLayer._singles[0].attributes
- .stCode
- }
- })
- .then(resP => {
- let textContent =
- "<table style='width: 330px;'><tr><td>名称</td><td>" +
- d.graphic._graphicsLayer._singles[0].attributes
- .stName +
- "</td></tr>";
- for (let item in resP.data.data) {
- textContent += "<tr>";
- for (let arr in resP.data.data[item]) {
- textContent +=
- "<td>" + resP.data.data[item][arr] + "</td>";
- }
- textContent += "</tr>";
- }
- textContent +=
- "<tr><td style='text-align: right' colspan='2'><a href ='javascript:void(0)' style='color:dodgerblue' onclick=''>历时数据</a></td></tr></table>";
- _this.map.infoWindow.setTitle("详细信息");
- _this.map.infoWindow.setContent(textContent);
-
- _this.map.infoWindow.show(
- d.mapPoint,
- esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT
- );
- });
- });
- } else {
- message(response);
- }
- })
- .catch(response => {
- message(response);
- });
- });
- }
- )
- .catch(err => {
- // handle any script or module loading errors
- // console.error(err);
- });
- },
-
- // 给与gis的方法调动dome
- REFSFunctionToGis(type) {
- if (!type) {
- //加载黑色arcgis午夜蓝图
- let baseLayer = this.map.getLayers().item(0);
- baseLayer.setSource(this.arcgisMap);
- } else {
- //加载蓝色底图
- let baseLayer = this.map.getLayers().item(0);
- baseLayer.setSource(this.arcgiswhiteMap);
- }
- },
-
- // /////////////////////////////////////////////////////////////////////////////////////////////////////////////
- // /////////////////////////////////////////////////////////////////////////////////////////////////////////////
- // /////////////////////////////////////////////////////////////////////////////////////////////////////////////
- // /////////////////////////////////////////////////////////////////////////////////////////////////////////////
- // 时间选择的change
- TimeBoxChange() {
- // 时间改动了,需要调整其状态
- this.DateisChange = true;
- },
-
- // 根据站点编号查询站点的表头数据
- LoadGridTitleData() {
- // 加载历史数据/在表头前面加载
- setTimeout(() => {
- this.loadDataGridData();
- }, 0);
-
- this.$http
- .get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`)
- .then(response => {
- // 加载表头
- var headobj = response.data.data;
- // console.log(headobj);
- console.log(11111, this.HistoryTableData);
- // let arr = [];
- this.NFSNowDataTableHead = headobj.filter((item, index, obj) => {
- for (let k in this.HistoryTableData[0]) {
- if (item.field === k) {
- return item;
- }
- }
- });
- // console.log(8888, arr);
- console.log(22222222, this.NFSNowDataTableHead);
- })
- .catch(response => {
- message(response);
- });
- },
-
- //tabs的点击事件
- HistoryHandleClick(tab, event) {
- if (tab.index == 1) {
- // 渲染echarts的因子下拉框
- if (this.FirstOn) {
- // 仅仅第一次进来历史图形的页面时,需要加载因子列表
- this.loadSiteYinZiData();
- this.FirstOn = false;
- }
- if (this.DateisChange) {
- // 调用函数渲染数据
- this.loadEchartsData();
- }
- } else {
- // 渲染datagrid
- if (this.DateisChange) {
- // 渲染站点历史数据表格
- this.loadDataGridData();
- }
- }
- },
- //分页
- // 主页分页
- handleSizeChange(val) {
- // console.log(`当前页: ${val}`);
- this.ALLpageSize = val;
- this.loadFZData();
-
- // console.log(`每页 ${val} 条`);
- },
- handleCurrentChange(val) {
- // console.log(`当前页: ${val}`);
- this.ALLpageNum = val;
- this.loadFZData();
- },
- HistorySizeChange(val) {
- // 内页改变每页的条数
- this.HistorySize = val;
- this.loadDataGridData();
- },
- HistoryCurrentChange(val) {
- //内页改变页数
- this.HistoryPage = val;
- this.loadDataGridData();
- },
- // 历史表格数据请求
- loadDataGridData() {
- this.loading3 = true;
- this.$http
- .get(
- this.nozzle.dataSelectSiteSiteManHistoryDataMongoBySerial +
- "?dName=" +
- this.currentSiteNo +
- "&rows=" +
- this.HistorySize +
- "&page=" +
- this.HistoryPage +
- "&startTime=" +
- this.TimeBoxValue[0] +
- "&endTime=" +
- this.TimeBoxValue[1]
- )
- .then(response => {
- this.loading3 = false;
- // console.log(response.data.rows);
- this.HistoryTableData = response.data.rows;
- // console.log(1111111, this.HistoryTableData);
- this.DatagridDataLength = response.data.total;
- this.$http
- .get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`)
- .then(response => {
- // 加载表头
- var headobj = response.data.data;
- // console.log(headobj);
- console.log(11111, this.HistoryTableData);
- // let arr = [];
- this.NFSNowDataTableHead = headobj.filter((item, index, obj) => {
- for (let k in this.HistoryTableData[0]) {
- if (item.field === k) {
- return item;
- }
- }
- });
- // console.log(8888, arr);
- console.log(22222222, this.NFSNowDataTableHead);
- })
- .catch(response => {
- message(response);
- });
- })
- .catch(response => {
- message(response);
- this.loading3 = false;
- });
- },
- //获取站点分配的所有因子
- loadSiteYinZiData() {
- this.$http
- .get(
- this.nozzle.dataSelectSitePropertyList +
- "?siteNo=" +
- this.currentSiteNo
- )
- .then(response => {
- var SleVal = response.data;
- // 给数据添加一个空值
- SleVal.unshift({
- codeAscii: "",
- codeProperty: "请选择因子"
- });
- // 初始值清空
- this.SiteYinzi = "";
- this.SiteYinzi2 = "";
- // 根据数据长度来判断是否多于两个因子
- if (SleVal.length > 1) {
- this.SiteYinziAll = SleVal;
- this.SiteYinzi = SleVal[1].codeAscii;
- this.SiteYinziAll2 = SleVal;
- this.SiteYinzi2 = SleVal[2].codeAscii;
- this.SiteYinziZn = SleVal[1].codeProperty;
- this.SiteYinzi2Zn = SleVal[2].codeProperty;
- this.loadEchartsData();
- } else if (SleVal.length == 1) {
- this.SiteYinziAll = SleVal;
- this.SiteYinzi = SleVal[1].codeAscii;
- this.SiteYinziAll2 = SleVal;
- this.SiteYinzi2 = SleVal[0].codeAscii;
- this.SiteYinziZn = SleVal[1].codeProperty;
- this.SiteYinzi2Zn = SleVal[0].codeProperty;
- this.loadEchartsData();
- } else {
- this.SiteYinziAll = SleVal;
- this.SiteYinzi = SleVal[0].codeAscii;
- this.SiteYinziAll2 = SleVal;
- this.SiteYinzi2 = SleVal[0].codeAscii;
- this.SiteYinziZn = SleVal[0].codeProperty;
- this.SiteYinzi2Zn = SleVal[0].codeProperty;
- this.$message({
- showClose: true,
- message: "该站点下无分配因子",
- type: "warning"
- });
- }
- });
- },
- // 上因子change事件
- YinZiUp(SiteYinzi) {
- this.YinZiChange = true;
- this.SiteYinzi = SiteYinzi;
- for (var i = 0; i < this.SiteYinziAll.length; i++) {
- if (this.SiteYinziAll[i].codeAscii == this.SiteYinzi) {
- this.SiteYinziZn = this.SiteYinziAll[i].codeProperty;
- return false;
- }
- }
- },
- // 下因子change事件
- YinZiDown(SiteYinzi2) {
- this.YinZiChange = true;
- this.SiteYinzi2 = SiteYinzi2;
- for (var i = 0; i < this.SiteYinziAll2.length; i++) {
- if (this.SiteYinziAll2[i].codeAscii == this.SiteYinzi2) {
- this.SiteYinzi2Zn = this.SiteYinziAll2[i].codeProperty;
- return false;
- }
- }
- },
- // 获取echarts数据
- loadEchartsData() {
- if (this.DateisChange || this.YinZiChange) {
- this.YinZiChange = false;
- this.DateisChange = false;
- // 时间改变过或者因子有变化,请求新数据渲染
- this.$http
- .get(
- this.nozzle.dataSiteDataEchat +
- "?dName=" +
- this.currentSiteNo +
- "&up=" +
- this.SiteYinzi +
- "&down=" +
- this.SiteYinzi2 +
- "&startTime=" +
- this.TimeBoxValue[0] +
- "&endTime=" +
- this.TimeBoxValue[1]
- )
- .then(response => {
- if (response.data.tt.length > 0) {
- this.ChartsX = response.data.tt;
- this.ChartsUp = response.data.up;
- this.ChartsDown = response.data.down;
- this.$nextTick(function() {
- this.loadEcharts();
- });
- } else {
- this.$message({
- showClose: true,
- message: "无数据",
- type: "warning"
- });
- }
- })
- .catch(response => {
- this.$message({
- showClose: true,
- message: "无数据",
- type: "warning"
- });
- });
- } else {
- // 时间未改变且因子也没变化,只需要重新绘制
- this.$nextTick(function() {
- this.loadEcharts();
- });
- }
- },
- //渲染echarts
- loadEcharts() {
- // 基于准备好的dom,初始化echarts实例
- this.myChart = this.$echarts.init(
- document.getElementById("HistoryEchart")
- );
-
- // 绘制图表
- this.myChart.clear();
- this.myChart.setOption({
- color: ["#3398DB", "red"],
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "cross",
- crossStyle: {
- color: "#3398DB"
- }
- }
- },
- toolbox: {
- feature: {
- magicType: { show: true, type: ["line", "bar"] }
- }
- },
- legend: {
- data: [this.SiteYinziZn, this.SiteYinzi2Zn],
- textStyle: {
- color: "#3398DB" //字体颜色
- }
- },
- xAxis: [
- {
- type: "category",
- data: this.ChartsX,
- axisPointer: {
- type: "shadow"
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: "#3398DB" //这里用参数代替了
- }
- },
- axisLine: {
- lineStyle: {
- color: "#3398DB" // 颜色
- }
- }
- }
- ],
- yAxis: [
- {
- type: "value",
- name: this.SiteYinziZn,
- axisLabel: {
- show: true,
- textStyle: {
- color: "#3398DB" //这里用参数代替了
- }
- },
- axisLine: {
- lineStyle: {
- color: "#3398DB" // 颜色
- }
- }
- },
- {
- type: "value",
- name: this.SiteYinzi2Zn,
- axisLabel: {
- show: true,
- textStyle: {
- color: "#3398DB" //这里用参数代替了
- }
- },
- axisLine: {
- lineStyle: {
- color: "#3398DB" // 颜色
- }
- }
- }
- ],
- series: [
- {
- name: this.SiteYinziZn,
- type: "line",
- data: this.ChartsUp
- },
- {
- name: this.SiteYinzi2Zn,
- type: "line",
- yAxisIndex: 1,
- data: this.ChartsDown
- }
- ]
- });
- },
- HistorySizeChange(val) {
- // 内页改变每页的条数
- this.HistorySize = val;
- this.loadDataGridData();
- },
- HistoryCurrentChange(val) {
- //内页改变页数
- this.HistoryPage = val;
- this.loadDataGridData();
- },
- // 点击详情里面历史搜索
- Search() {
- if (this.HistoryBox == "Charts") {
- this.loadEchartsData();
- } else {
- this.loadDataGridData();
- }
- },
- labelHead(h, { column, index }) {
- let l = column.label.length;
- let f = 16; //每个字大小,其实是每个字的比例值,大概会比字体大小差不多大一点,
- column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素,这里minWidth只是一个比例值,不是真正的长度 //然后将列标题放在一个div块中,注意块的宽度一定要100%,否则表格显示不完全
-
- return h("div", { class: "table-head", style: { width: "100%" } }, [
- column.label
- ]);
- }
- },
- computed: {
- switchStatus: function() {
- return this.flag; // 直接监听props里的status状态
- }
- },
- created() {
- window.closepopup = this.closepopup;
- window.historyData = this.historyData;
- },
- mounted: function() {
- // 根据平台渲染站点数量统计及状态统计
- this.loadSiteNumForOroject();
- // 根据平台渲染项目设备总览
- this.loadQuyuShebei();
- // 根据平台渲染项目设备环比增长
- this.loadQuYuSheBeiHuanBi();
- // 根据平台渲染站点实时报警信息
- this.loadSiteBaoJing();
- // 返回出项目的坐标以及缩放等级**************************GIS调用
-
- // 默认加载所有的平台
- this.LoadAllProject();
- this.createOlMap();
- /* this.createMap(""); */
- // 默认展示 全部 的请求
- // this.ListClick(0, { platformCode: "" });
- // 默认加载项目站点覆盖排名
- this.loadQuyuPaiMing();
-
- this.$nextTick(function() {
- this.timer = setInterval(this.ScrollUp, 100);
- });
- // 默认从本地session srotage里面读取历史搜索记录ZZJ
- this.getItem();
- },
- destroyed: function() {
- clearInterval(this.timer);
- }
- };
- </script>
- <style scoped>
- .select {
- color: #fff;
- background: rgb(0, 119, 254);
- }
-
- .selectWidth {
- width: 3.2rem;
- }
- #previewOfSiteStatusMaps {
- width: 100%;
- height: 100%;
- position: relative;
- }
- #popup {
- background: url(./../../../static/img/tc_bg_img.png);
- background-size: cover;
- width: 460px;
- z-index: 99999;
- position: relative;
- }
- .earthmap {
- width: 100%;
- height: 100%;
- }
- .fwStyle {
- position: relative;
- top: 42px;
- right: 446px;
- z-index: 99;
- cursor: pointer;
- }
-
- .bubble {
- width: 200px;
- height: 50px;
- border: 5px solid gray;
- position: relative;
- }
- .common {
- width: 0;
- height: 0;
- position: absolute; /* 使用绝对定位 */
- left: 50%;
- transform: translate(-50%, 0); /* 水平居中 */
- }
-
- .triangle {
- bottom: 101px;
- left: -4px;
- border-top: 10px solid transparent;
-
- border-bottom: 10px solid transparent;
- border-right: 10px solid #3364bd;
- }
- .cover {
- bottom: -13px;
- border-top: 20px solid gray;
- border-right: 20px solid transparent;
- border-left: 20px solid transparent;
- }
- #previewOfSiteStatusLeftTop {
- /* position: absolute; */
- /* left: 0; */
- width: 350px;
- height: 290px;
- /* top: 0px; */
- background: rgba(0, 0, 0, 0.5);
- z-index: 100;
- }
- #previewOfSiteStatusLeftcenter {
- position: relative;
- /* left: 0; */
- width: 350px;
- height: 220px;
- margin-top: 15px;
- /* top: 305px; */
- background: rgba(0, 0, 0, 0.5);
- z-index: 100;
- }
- #previewOfSiteStatusLeftBottom {
- /* position: absolute; */
- /* left: 0; */
- width: 350px;
- height: 290px;
- margin-top: 15px;
- /* top: 610px; */
- background: rgba(0, 0, 0, 0.5);
- z-index: 100;
- }
- #previewOfSiteStatusRightTop {
- /* position: absolute; */
- /* right: 0; */
- width: 350px;
- height: 290px;
- /* top: 0px; */
- background: rgba(0, 0, 0, 0.5);
- z-index: 100;
- }
- #previewOfSiteStatusRightcenter {
- /* position: absolute; */
- /* right: 0; */
- width: 350px;
- height: 220px;
- /* top: 305px; */
- margin-top: 15px;
- background: rgba(0, 0, 0, 0.5);
- z-index: 100;
- }
- #previewOfSiteStatusRightBottom {
- /* position: absolute; */
- /* right: 0; */
- width: 350px;
- height: 290px;
- /* top: 540px; */
- margin-top: 15px;
- background: rgba(0, 0, 0, 0.5);
- z-index: 100;
- }
- .previewOfSiteStatusTitle {
- width: 100%;
- height: 40px;
- line-height: 40px;
- text-align: left;
- padding-left: 10px;
- box-sizing: border-box;
- background: var(--preSiteTitle);
- }
- .previewOfSiteStatusTitleImg {
- width: 28px;
- height: 28px;
- vertical-align: middle;
- }
- .previewOfSiteStatusTitleFont {
- color: rgb(0, 119, 254);
- vertical-align: middle;
- }
- .previewOfSiteStatusTitleBTN {
- position: absolute;
- top: 8px;
- color: var(--eldatebefore);
- right: 20px;
- border: 1px solid var(--eldatebefore);
- height: 26px;
- line-height: 26px;
- }
- .previewOfSiteStatusTitleBTN span {
- float: left;
- font-size: 12px;
- padding: 0 10px;
- cursor: pointer;
- height: 100%;
- border-right: 1px solid var(--eldatebefore);
- }
- .previewOfSiteStatusTitleBTN span:nth-child(3) {
- border-right: none;
- }
- #previewOfSiteStatusTop {
- position: absolute;
- top: 0;
- left: 350px;
- width: calc(100% - 700px);
- height: 80px;
- /* background-image: linear-gradient(rgb(11, 20, 29), rgba(11, 20, 29, 0.2)); */
- text-align: center;
- z-index: 99;
- }
- .previewOfSiteStatusTopC {
- display: inline-block;
- height: 50px;
- width: 180px;
- padding: 15px;
- }
- .previewOfSiteStatusTopimg {
- width: 40px;
- height: 40px;
- float: left;
- margin-top: 7px;
- }
- .previewOfSiteStatusTopCFont {
- float: left;
- height: 50px;
- width: 140px;
- padding-left: 10px;
- box-sizing: border-box;
- line-height: 0px;
- }
- .previewOfSiteStatusTopCData {
- width: 100%;
- height: 35px;
- line-height: 35px;
- display: inline-block;
- text-align: left;
- color: var(--preTopDatatxt);
- font-size: 20px;
- }
- .previewOfSiteStatusTopCMS {
- width: 100%;
- height: 15px;
- line-height: 15px;
- display: inline-block;
- text-align: left;
- font-size: 12px;
- color: white;
- }
- .previewOfSiteStatusCentent {
- width: 100%;
- height: calc(100% - 40px);
- background: var(--preSiteCentent);
- overflow: hidden;
- }
- .previewOfSiteStatusCentent .previewButton {
- padding-top: 0.05rem;
- }
- .previewOfSiteStatusCentent .previewButton .text {
- text-align: left;
- color: var(--white);
- }
- .previewButton .previewHistory {
- display: flex;
- flex-wrap: wrap;
- /* width: 100%; */
- margin: 0 3%;
- justify-content: space-between;
- }
- .previewButton .previewHistory .previewtext {
- cursor: pointer;
- width: 48%;
- /* height: 0.213333rem; */
- margin-top: 0.1125rem;
- /* margin-left: 2%; */
- /* line-height: 0.213333rem; */
- line-height: 24px;
- /* font-size: 0.093333rem; */
- font-size: 12px;
- text-align: center;
- border: 1px solid var(--eldatebefore);
- color: #fff;
- background: var(--pretextbg);
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- /* .previewButton .previewHistory .previewtext:nth-child(2n) {
- /* margin-left: 0.08rem; */
- /* margin-right: 2%; */
- /* } */
- */
-
- /* 项目选择A */
- #previewOfSiteStatusCentent1 {
- width: 100%;
- height: calc(100% - 5px);
- overflow: auto;
- margin: 0;
- padding-top: 10px;
- box-sizing: border-box;
- }
- .previewOfSiteStatusCentent1Li {
- width: auto;
- height: 32px;
- line-height: 26px;
- border: 1px solid rgb(0, 119, 254);
- float: left;
- padding: 3px 18px;
- color: rgb(0, 119, 254);
- margin: 5px 10px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- font-size: 14px;
- box-sizing: border-box;
- }
- .selectPreviewOfSiteStatusCentent1Li {
- border: 1px solid rgb(255, 217, 0);
- color: rgb(255, 217, 0);
- }
- /* 项目选择B */
- /* 平台站点数量及状态统计A */
- #previewOfSiteStatusCentent2_1,
- #previewOfSiteStatusCentent2_2 {
- width: 100%;
- height: 50%;
- float: left;
- }
- .previewOfSiteStatusCentent2P {
- color: rgb(0, 119, 254);
- float: left;
- height: 24px;
- line-height: 24px;
- padding-left: 15px;
- font-size: 14px;
- margin-top: 20px;
- font-size: 16px;
- }
- .previewOfSiteStatusCentent2C {
- width: 100%;
- height: 80px;
- float: left;
- }
- .previewOfSiteStatusCentent2CList {
- height: 100%;
- width: 33.3%;
- float: left;
- }
- .previewOfSiteStatusCentent2CListData {
- width: 100%;
- text-align: center;
- height: 40px;
- line-height: 40px;
- float: left;
- color: var(--preTopDatatxt);
- font-size: 24px;
- }
- .previewOfSiteStatusCentent2CListFont {
- width: 100px;
- text-align: center;
- height: 20px;
- line-height: 20px;
- float: left;
- }
- .previewOfSiteStatusCentent2CListFontImg {
- width: 18px;
- height: 18px;
- vertical-align: middle;
- }
- .previewOfSiteStatusCentent2CListFonts {
- color: rgb(0, 119, 254);
- vertical-align: middle;
- font-size: 15px;
- }
- /* 平台站点数量及状态统计B */
- /* 项目站点覆盖排名A */
- #previewOfSiteStatusCentent3 {
- width: 100%;
- height: 100%;
- overflow: auto;
- }
- .previewOfSiteStatusCentent3Li {
- display: flex;
- width: 100%;
- height: 40px;
- line-height: 0;
- /* background: rgba(47, 53, 77, 0.5); */
- }
- .previewOfSiteStatusCentent3LiName {
- width: 90px;
- color: var(--white);
- text-align: left;
- height: 40px;
- line-height: 40px;
- font-size: 14px;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- box-sizing: border-box;
- padding-left: 5px;
- }
- .previewOfSiteStatusCentent3LiCharts {
- height: 12px;
- border: 1px solid rgb(0, 119, 254);
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- flex: 1;
- margin-top: 14px;
- margin-left: 5px;
- position: relative;
- }
- .previewOfSiteStatusCentent3LiCharts2 {
- position: absolute;
- top: 0;
- left: 0;
- background: url("./../../../static/img/JDT.png") repeat-x;
- height: 10px;
- }
- .previewOfSiteStatusCentent3LiData {
- width: 70px;
- color: var(--preTopDatatxt);
- height: 40px;
- line-height: 40px;
- margin-left: 5px;
- white-space: nowrap;
- }
- .previewOfSiteStatusCentent3LiDW {
- color: rgb(0, 119, 254);
- }
- /* 项目站点覆盖排名B */
- /* 项目设备总览A */
- #previewOfSiteStatusCentent4 {
- width: 100%;
- height: 100%;
- }
- #previewOfSiteStatusCentent4eCharts {
- width: 250px;
- height: 250px;
- float: left;
- }
- #previewOfSiteStatusCentent4Font {
- width: 100px;
- height: 100%;
- float: left;
- }
- #previewOfSiteStatusCentent4Font1 {
- width: 100%;
- height: 50%;
- float: left;
- padding-top: 75px;
- box-sizing: border-box;
- }
- #previewOfSiteStatusCentent4Font2 {
- width: 100%;
- height: 50%;
- float: left;
- padding-top: 5px;
- box-sizing: border-box;
- }
- .previewOfSiteStatusCentent4Font1P1 {
- float: left;
- width: 100%;
- height: 24px;
- line-height: 24px;
- color: rgb(255, 217, 0);
- }
- .previewOfSiteStatusCentent4Font1P2 {
- float: left;
- width: 100%;
- height: 24px;
- line-height: 24px;
- color: var(--white);
- vertical-align: middle;
- }
- .previewOfSiteStatusCentent4Font1P2S {
- float: left;
- width: 16px;
- height: 16px;
- border-radius: 10px;
- background: rgb(255, 217, 0);
- vertical-align: middle;
- }
- .previewOfSiteStatusCentent4Font2P1 {
- float: left;
- width: 100%;
- height: 24px;
- line-height: 24px;
- color: rgb(0, 119, 254);
- }
- .previewOfSiteStatusCentent4Font2P2 {
- float: left;
- width: 100%;
- height: 24px;
- line-height: 24px;
- color: var(--white);
- vertical-align: middle;
- }
- .previewOfSiteStatusCentent4Font2P2S {
- float: left;
- width: 16px;
- height: 16px;
- border-radius: 10px;
- background: rgb(0, 119, 254);
- vertical-align: middle;
- }
- /* 项目设备总览B */
- /* 项目设备环比增长A */
- #previewOfSiteStatusCentent5 {
- width: 100%;
- height: 100%;
- }
- /* 项目设备环比增长B */
- /* 站点实时报警A */
- #previewOfSiteStatusCentent6 {
- width: 100%;
- height: 100%;
- /* background: rgba(7, 13, 19, 0.38); */
- overflow: auto;
- }
- #GisRightCententBox2UL {
- width: 100%;
- height: auto;
- }
- .GIsRightWaringList {
- width: 100%;
- height: 30px;
- line-height: 30px;
- color: white;
- box-sizing: border-box;
- border-bottom: 1px solid cadetblue;
- }
- .GIsRightWaringList:hover {
- background: rgb(0, 119, 254);
- cursor: pointer;
- }
- .GIsRightWaringListNo {
- width: 40%;
- float: left;
- font-size: 14px;
- color: var(--white);
- }
- .GIsRightWaringListName {
- width: 45%;
- float: left;
- font-size: 14px;
- color: var(--white);
- }
- .GIsRightWaringListType {
- width: 15%;
- float: left;
- font-size: 14px;
- }
- .red {
- color: red;
- }
- .Yellow {
- color: var(--diatitle);
- }
- .NoBaoJing {
- position: relative;
- top: 50px;
- }
- /* 站点实时报警B */
- </style>
- <style>
- .esriPopup .sizer {
- width: 300px;
- }
- /* infowindow相关 */
-
- .esriPopup .outerPointer,
- .contentPane,
- .actionsPane {
- background-color: rgba(17, 32, 39, 0.8) !important;
- color: #fff !important;
- }
-
- .esriPopup .titlePane {
- background-color: #112027 !important;
- color: #fff !important;
- opacity: 0.8 !important;
- }
-
- .esriPopup .contentPane {
- padding: 0px 6px 6px 10px !important;
- }
-
- .esriPopup .titleButton.close {
- opacity: 1 !important;
- }
-
- /* .esriPopup .titleButton.closeclose:hover{
- opacity:0!important;
- } */
- .esriViewPopup .headerBox {
- overflow: hidden;
- }
-
- .esriViewPopup .header {
- color: #fff !important;
- font-size: 14px;
- }
-
- .esriPopup .titleButton.maximize {
- display: none;
- }
-
- .esriViewPopup .mainSection .attrTable td,
- td.attrName {
- color: #fff !important;
- font-size: 12px;
- }
-
- .esriViewPopup .hzLine {
- border-top: 1px solid #3f586f !important;
- }
-
- .sizer {
- width: 350px !important;
- }
-
- .esriPopup a {
- color: #fff;
- }
- .actionList {
- display: none;
- }
- .boxmain,
- .boxmainR {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 350px;
- overflow-x: hidden;
- overflow-y: auto;
- z-index: 100;
- }
- .boxmain {
- left: 0;
- }
- .boxmainR {
- right: 0;
- }
-
- #TimeBoxs {
- position: relative;
- top: 0;
- left: 0;
- }
- .ButtonImgs {
- position: absolute;
- top: 0;
- left: 420px;
- }
- </style>