Newer
Older
operation_web / src / components / site / previewOfSiteStatus.vue
@raoxianxuan raoxianxuan on 23 Jan 2021 50 KB gis
<template>
  <div id="previewOfSiteStatus">
    <div id="previewOfSiteStatusMaps">
      <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"
                  ref="warn"
                  @mouseover="mouseOver"
                  @mouseleave="mouseLeave"
                >
                  <el-tooltip
                    class="item"
                    effect="dark"
                    open-delay="300"
                    :enterable="false"
                    :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>
    </div>
  </div>
</template>
<script>
import { message } from "./../../util/item";
import countTo from "vue-count-to"; //引入数字滚动插件
import { loadModules } from "esri-loader";
export default {
  name: "previewOfSiteStatus",
  components: { countTo }, //加载数字滚动插件
  data: function () {
    return {
      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: {
    // 获取所有平台
    LoadAllProject() {
      this.$http
        .post(
          this.nozzle.userGroupRelaGetGroups +
            "?&pageNo=" +
            1 +
            "&typeStr=" +
            "&pageSize=" +
            999
        )
        .then((response) => {
          if (response.status === 200) {
            this.ProjectList = this.ProjectList.concat(response.data.data);
          } 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 === 200) {
            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"];
      // 限制数组的长度不超过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.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() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    //鼠标移出事件
    mouseLeave() {
      this.timer = setInterval(this.ScrollUp, 100);
    },
    //初始化地图
    createMap() {
      let _this = this;
      loadModules([
        "dojo/parser",
        "dojo/ready",
        "dojo/_base/array",
        "esri/Color",
        "dojo/dom-style",
        "dojo/query",

        "esri/map",
        "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,
            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: [100, 35],
              zoom: 5,
              logo: false,
              slider: false,
            });
            
             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"
            );
            _this.map.addLayer(this.arcgisMap);
            /* _this.map.on("zoom-end", function() {
            });
            

            _this.map.on("click", function(e) {
            }); */
            _this.map.on("load", function () {
              _this.$http
                .post(_this.nozzle.listStationBase, {
                  data: {},
                })
                .then((response) => {
                  if (response.data.code === 200) {
                    let photoInfo = {};
                    let wgs = new SpatialReference({
                      wkid: 4326,
                    });
                    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,
                        },
                      ],
                    });
                    let 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 picBaseUrl =
                      "https://static.arcgis.com/images/Symbols/Shapes/";
                    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);

                    clusterLayer.setRenderer(renderer);
                    _this.map.addLayer(clusterLayer);
                    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午夜蓝图
            this.arcgiswhiteMap.hide()
             this.arcgisMap.show()
      }
      else
      {   
        //加载蓝色底图
             this.arcgisMap.hide()
             this.arcgiswhiteMap.show()

      }
    
    },
  },
  mounted: function () {
    // 根据平台渲染站点数量统计及状态统计
    this.loadSiteNumForOroject();
    // 根据平台渲染项目设备总览
    this.loadQuyuShebei();
    // 根据平台渲染项目设备环比增长
    this.loadQuYuSheBeiHuanBi();
    // 根据平台渲染站点实时报警信息
    this.loadSiteBaoJing();
    // 返回出项目的坐标以及缩放等级**************************GIS调用

    // 默认加载所有的平台
    this.LoadAllProject();
    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;
}
#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.2rem;
}
.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);
}
.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 {
  width: 100%;
  height: 40px;
  line-height: 0;
  /* background: rgba(47, 53, 77, 0.5); */
}
.previewOfSiteStatusCentent3LiName {
  float: left;
  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 {
  float: left;
  height: 12px;
  border: 1px solid rgb(0, 119, 254);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200px;
  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 {
  float: left;
  color: var(--preTopDatatxt);
  height: 40px;
  line-height: 40px;
  margin-left: 5px;
}
.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;
}
</style>