diff --git a/config/index.js b/config/index.js
index 0f99d4f..4ac2066 100644
--- a/config/index.js
+++ b/config/index.js
@@ -11,7 +11,7 @@
     assetsPublicPath: "/",
     proxyTable: {
       "/warnApi": {
-        /* target: "http://139.155.49.237:8286", //服务器接口 */
+        // target: "http://139.155.49.237:8286", //服务器接口 */
         target: "http://192.168.30.199:7099", //服务器接口
         changeOrigin: true, //是否跨域
         pathRewrite: {
@@ -22,7 +22,7 @@
         target: "http://192.168.30.199:7099", //陈迁接口
         changeOrigin: true, //是否跨域
         pathRewrite: {
-          "^/nfQuery": "" //需要rewrite重写的,
+          "^/nfQuery": "" //需要rewrite重写的,git
         }
       },
       "/Api": {
@@ -100,19 +100,19 @@
           "^/serverManage": "" //需要rewrite重写的,
         }
       },
-      '/dataLvWangapi': {
+      "/dataLvWangapi": {
         // 测试环境
         // 'target': 'http://192.168.30.44:8800', // 接口域名
-        'target': 'http://192.168.30.146:8865', // 熊凯
-        'changeOrigin': true, //是否跨域
-        'pathRewrite': {
-            '^/dataLvWangapi': '' //需要rewrite重写的,
+        target: "http://192.168.30.146:8865", // 熊凯
+        changeOrigin: true, //是否跨域
+        pathRewrite: {
+          "^/dataLvWangapi": "" //需要rewrite重写的,
         }
-    }
+      }
     },
 
     // Various Dev Server settings
-    host: "localhost", // can be overwritten by process.env.HOST
+    host: "192.168.30.113", // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,

diff --git a/config/index.js b/config/index.js
index 0f99d4f..4ac2066 100644
--- a/config/index.js
+++ b/config/index.js
@@ -11,7 +11,7 @@
     assetsPublicPath: "/",
     proxyTable: {
       "/warnApi": {
-        /* target: "http://139.155.49.237:8286", //服务器接口 */
+        // target: "http://139.155.49.237:8286", //服务器接口 */
         target: "http://192.168.30.199:7099", //服务器接口
         changeOrigin: true, //是否跨域
         pathRewrite: {
@@ -22,7 +22,7 @@
         target: "http://192.168.30.199:7099", //陈迁接口
         changeOrigin: true, //是否跨域
         pathRewrite: {
-          "^/nfQuery": "" //需要rewrite重写的,
+          "^/nfQuery": "" //需要rewrite重写的,git
         }
       },
       "/Api": {
@@ -100,19 +100,19 @@
           "^/serverManage": "" //需要rewrite重写的,
         }
       },
-      '/dataLvWangapi': {
+      "/dataLvWangapi": {
         // 测试环境
         // 'target': 'http://192.168.30.44:8800', // 接口域名
-        'target': 'http://192.168.30.146:8865', // 熊凯
-        'changeOrigin': true, //是否跨域
-        'pathRewrite': {
-            '^/dataLvWangapi': '' //需要rewrite重写的,
+        target: "http://192.168.30.146:8865", // 熊凯
+        changeOrigin: true, //是否跨域
+        pathRewrite: {
+          "^/dataLvWangapi": "" //需要rewrite重写的,
         }
-    }
+      }
     },
 
     // Various Dev Server settings
-    host: "localhost", // can be overwritten by process.env.HOST
+    host: "192.168.30.113", // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/components/newFiber/NewFiberSearch.vue b/src/components/newFiber/NewFiberSearch.vue
index f6684b6..46439f9 100644
--- a/src/components/newFiber/NewFiberSearch.vue
+++ b/src/components/newFiber/NewFiberSearch.vue
@@ -215,6 +215,7 @@
                   :label="item.title"
                   :key="index"
                   show-overflow-tooltip
+                  :render-header="labelHead"
                 ></el-table-column>
               </template>
             </el-table>
@@ -239,12 +240,6 @@
                 class="ButtonImg"
                 @click="Search()"
               />
-              <img
-                src="../../../static/img/NFDaoChu.png"
-                alt
-                class="ButtonImg"
-                @click="DaoChu()"
-              />
             </div>
             <div id="NFSHistoryData2">
               <el-tabs v-model="HistoryBox" @tab-click="HistoryHandleClick">
@@ -263,6 +258,7 @@
                         :label="col.title"
                         :key="index"
                         show-overflow-tooltip
+                        :render-header="labelHead"
                       ></el-table-column>
                     </template>
                   </el-table>
@@ -491,6 +487,16 @@
     };
   },
   methods: {
+    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
+      ]);
+    },
+
     // 加载页面分组信息
     loadFZData(event) {
       // console.log(event);
@@ -588,6 +594,7 @@
         case "detail":
           this.showCurrentSiteInfo = true;
           this.currentSiteNo = data.stCode;
+          // console.log(this.currentSiteNo);
           this.LoadGridTitleData();
           break;
         case "search":
@@ -616,27 +623,13 @@
       // 时间改动了，需要调整其状态
       this.DateisChange = true;
     },
-    // 根据站点编号查询站点的表头数据
-    LoadGridTitleData() {
+
+    // 根据站点编号查询站点的实时数据
+    LoadSiteDataNow() {
       this.HistoryTableData = [];
       this.NFSNowDataTableData = [];
       this.NFSNowDataTableHead = [];
-      this.$http
-        .get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`)
-        .then(response => {
-          // 加载表头
-          this.NFSNowDataTableHead = response.data.data;
-          // 加载实时数据
-          this.LoadSiteDataNow();
-          // 加载历史数据
-          this.loadDataGridData();
-        })
-        .catch(response => {
-          message(response);
-        });
-    },
-    // 根据站点编号查询站点的实时数据
-    LoadSiteDataNow() {
+
       this.loading2 = true;
       this.$http
         .get(
@@ -646,9 +639,8 @@
         )
         .then(response => {
           this.loading2 = false;
-          this.NFSNowDataTableData = JSON.parse(
-            JSON.stringify([response.data])
-          );
+
+          var tablearr = JSON.parse(JSON.stringify([response.data]));
           // 通过state显示图标
           if (response.data.state == 1) {
             // 异常
@@ -666,12 +658,49 @@
             // 正常
             this.SiteTypeUrl = "../../../static/img/NFLv.png";
           }
+
+          for (var k in tablearr[0]) {
+            if (tablearr[0][k] == "NaN") {
+              delete tablearr[0][k];
+            }
+          }
+          this.NFSNowDataTableData = tablearr;
         })
         .catch(response => {
           message(response);
           this.loading2 = false;
         });
     },
+    // 根据站点编号查询站点的表头数据
+    LoadGridTitleData() {
+      // 加载实时数据//在表头前面加载
+      this.LoadSiteDataNow();
+      this.$http
+        .get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`)
+        .then(response => {
+          // 加载表头
+          var headobj = response.data.data;
+          // console.log(headobj);
+          console.log(11111, this.NFSNowDataTableData);
+          // let arr = [];
+          this.NFSNowDataTableHead = headobj.filter((item, index, obj) => {
+            for (let k in this.NFSNowDataTableData[0]) {
+              if (item.field === k) {
+                return item;
+              }
+            }
+          });
+          // console.log(8888, arr);
+          console.log(22222222, this.NFSNowDataTableHead);
+
+          // 加载历史数据
+          this.loadDataGridData();
+        })
+        .catch(response => {
+          message(response);
+        });
+    },
+
     //tabs的点击事件
     HistoryHandleClick(tab, event) {
       if (tab.index == 1) {

diff --git a/config/index.js b/config/index.js
index 0f99d4f..4ac2066 100644
--- a/config/index.js
+++ b/config/index.js
@@ -11,7 +11,7 @@
     assetsPublicPath: "/",
     proxyTable: {
       "/warnApi": {
-        /* target: "http://139.155.49.237:8286", //服务器接口 */
+        // target: "http://139.155.49.237:8286", //服务器接口 */
         target: "http://192.168.30.199:7099", //服务器接口
         changeOrigin: true, //是否跨域
         pathRewrite: {
@@ -22,7 +22,7 @@
         target: "http://192.168.30.199:7099", //陈迁接口
         changeOrigin: true, //是否跨域
         pathRewrite: {
-          "^/nfQuery": "" //需要rewrite重写的,
+          "^/nfQuery": "" //需要rewrite重写的,git
         }
       },
       "/Api": {
@@ -100,19 +100,19 @@
           "^/serverManage": "" //需要rewrite重写的,
         }
       },
-      '/dataLvWangapi': {
+      "/dataLvWangapi": {
         // 测试环境
         // 'target': 'http://192.168.30.44:8800', // 接口域名
-        'target': 'http://192.168.30.146:8865', // 熊凯
-        'changeOrigin': true, //是否跨域
-        'pathRewrite': {
-            '^/dataLvWangapi': '' //需要rewrite重写的,
+        target: "http://192.168.30.146:8865", // 熊凯
+        changeOrigin: true, //是否跨域
+        pathRewrite: {
+          "^/dataLvWangapi": "" //需要rewrite重写的,
         }
-    }
+      }
     },
 
     // Various Dev Server settings
-    host: "localhost", // can be overwritten by process.env.HOST
+    host: "192.168.30.113", // can be overwritten by process.env.HOST
     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,
diff --git a/src/components/newFiber/NewFiberSearch.vue b/src/components/newFiber/NewFiberSearch.vue
index f6684b6..46439f9 100644
--- a/src/components/newFiber/NewFiberSearch.vue
+++ b/src/components/newFiber/NewFiberSearch.vue
@@ -215,6 +215,7 @@
                   :label="item.title"
                   :key="index"
                   show-overflow-tooltip
+                  :render-header="labelHead"
                 ></el-table-column>
               </template>
             </el-table>
@@ -239,12 +240,6 @@
                 class="ButtonImg"
                 @click="Search()"
               />
-              <img
-                src="../../../static/img/NFDaoChu.png"
-                alt
-                class="ButtonImg"
-                @click="DaoChu()"
-              />
             </div>
             <div id="NFSHistoryData2">
               <el-tabs v-model="HistoryBox" @tab-click="HistoryHandleClick">
@@ -263,6 +258,7 @@
                         :label="col.title"
                         :key="index"
                         show-overflow-tooltip
+                        :render-header="labelHead"
                       ></el-table-column>
                     </template>
                   </el-table>
@@ -491,6 +487,16 @@
     };
   },
   methods: {
+    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
+      ]);
+    },
+
     // 加载页面分组信息
     loadFZData(event) {
       // console.log(event);
@@ -588,6 +594,7 @@
         case "detail":
           this.showCurrentSiteInfo = true;
           this.currentSiteNo = data.stCode;
+          // console.log(this.currentSiteNo);
           this.LoadGridTitleData();
           break;
         case "search":
@@ -616,27 +623,13 @@
       // 时间改动了，需要调整其状态
       this.DateisChange = true;
     },
-    // 根据站点编号查询站点的表头数据
-    LoadGridTitleData() {
+
+    // 根据站点编号查询站点的实时数据
+    LoadSiteDataNow() {
       this.HistoryTableData = [];
       this.NFSNowDataTableData = [];
       this.NFSNowDataTableHead = [];
-      this.$http
-        .get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`)
-        .then(response => {
-          // 加载表头
-          this.NFSNowDataTableHead = response.data.data;
-          // 加载实时数据
-          this.LoadSiteDataNow();
-          // 加载历史数据
-          this.loadDataGridData();
-        })
-        .catch(response => {
-          message(response);
-        });
-    },
-    // 根据站点编号查询站点的实时数据
-    LoadSiteDataNow() {
+
       this.loading2 = true;
       this.$http
         .get(
@@ -646,9 +639,8 @@
         )
         .then(response => {
           this.loading2 = false;
-          this.NFSNowDataTableData = JSON.parse(
-            JSON.stringify([response.data])
-          );
+
+          var tablearr = JSON.parse(JSON.stringify([response.data]));
           // 通过state显示图标
           if (response.data.state == 1) {
             // 异常
@@ -666,12 +658,49 @@
             // 正常
             this.SiteTypeUrl = "../../../static/img/NFLv.png";
           }
+
+          for (var k in tablearr[0]) {
+            if (tablearr[0][k] == "NaN") {
+              delete tablearr[0][k];
+            }
+          }
+          this.NFSNowDataTableData = tablearr;
         })
         .catch(response => {
           message(response);
           this.loading2 = false;
         });
     },
+    // 根据站点编号查询站点的表头数据
+    LoadGridTitleData() {
+      // 加载实时数据//在表头前面加载
+      this.LoadSiteDataNow();
+      this.$http
+        .get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`)
+        .then(response => {
+          // 加载表头
+          var headobj = response.data.data;
+          // console.log(headobj);
+          console.log(11111, this.NFSNowDataTableData);
+          // let arr = [];
+          this.NFSNowDataTableHead = headobj.filter((item, index, obj) => {
+            for (let k in this.NFSNowDataTableData[0]) {
+              if (item.field === k) {
+                return item;
+              }
+            }
+          });
+          // console.log(8888, arr);
+          console.log(22222222, this.NFSNowDataTableHead);
+
+          // 加载历史数据
+          this.loadDataGridData();
+        })
+        .catch(response => {
+          message(response);
+        });
+    },
+
     //tabs的点击事件
     HistoryHandleClick(tab, event) {
       if (tab.index == 1) {
diff --git a/src/components/site/previewOfSiteStatus.vue b/src/components/site/previewOfSiteStatus.vue
index 1e2e9b4..33370f0 100644
--- a/src/components/site/previewOfSiteStatus.vue
+++ b/src/components/site/previewOfSiteStatus.vue
@@ -1,10 +1,8 @@
 <template>
   <div id="previewOfSiteStatus">
     <div id="previewOfSiteStatusMaps">
-      <div ref="rootmap" id="earthmap" class="earthmap">
-    </div>
-    <div id="popup" class="popup">
-      </div>
+      <div ref="rootmap" id="earthmap" class="earthmap"></div>
+      <div id="popup" class="popup"></div>
       <!-- <div id="previewOfSiteStatusTop">
         <div class="previewOfSiteStatusTopC">
           <img
@@ -364,13 +362,101 @@
               </div>
             </div>
           </div>
-          <!-- <div id="previewOfSiteStatusCentent6">
-            <div id="GisRightCententBox2UL">
-              <span v-if="NoBaoJingData" class="NoBaoJing">暂无报警数据</span>
-
-            </div>
-          </div> -->
         </div>
+        <el-dialog
+          title="历史数据表格"
+          :visible.sync="dialogVisible"
+          width="60%"
+          :append-to-body="true"
+        >
+          <div id="NFSHistoryData">
+            <div id="TimeBox">
+              <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="ButtonImg"
+                @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
+                    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下因子：
+                    <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>
   </div>
@@ -420,8 +506,78 @@
   },
   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,
+      currentZoom: 5,
       switchStatusData: this.flag, // 重新定义数据
       timer: {}, //定时器
       // 顶部中间汇总A
@@ -502,23 +658,26 @@
   },
   methods: {
     //项目图层切换
-    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);
-                  }
-                })
+    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)
+    historyData(stCode) {
+      console.log(stCode);
+      this.currentSiteNo = stCode;
+      this.dialogVisible = true;
+      this.LoadGridTitleData();
     },
     // 获取所有平台
     LoadAllProject() {
@@ -713,9 +872,9 @@
     // 点击项目ZZJ
     ListClick(index) {
       this.ChecksplatformCode = this.ProjectList[index]["groupNo"];
-       //刷新联动地图上的点位按照项目实际的个数
-       console.log(this.ChecksplatformCode)
-       this.initPointToMap(this.ChecksplatformCode)
+      //刷新联动地图上的点位按照项目实际的个数
+      console.log(this.ChecksplatformCode);
+      this.initPointToMap(this.ChecksplatformCode);
 
       // 限制数组的长度不超过10个
       // console.log(this.historyList.length);
@@ -1006,9 +1165,7 @@
       this.timer = setInterval(this.ScrollUp, 100);
     },
     //按照项目选择去联动地图
-    initPointToMap1(projectNo)
-    {
-
+    initPointToMap1(projectNo) {
       let _this = this;
       loadModules([
         "dojo/parser",
@@ -1067,274 +1224,247 @@
             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.$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();
+                  //第一步清空
+                  _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);
+                  if (this.graphicsLayerByMarker) {
+                    _this.map.removeLayer(this.graphicsLayerByMarker);
                   }
-                })
-                .catch(response => {
+                  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);
         });
-
     },
     //显示cluster聚簇界面
     showCluster(clusterData) {
@@ -1361,9 +1491,9 @@
         feature.stCode = cell.stCode;
         //加入ol.feautre几何属性
         feature.wkt = resultwkt;
-         //无聚簇类型图层也添加一遍
-        this.vectorSource.addFeature(feature)
-        
+        //无聚簇类型图层也添加一遍
+        this.vectorSource.addFeature(feature);
+
         this.source.addFeature(feature);
       }
 
@@ -1387,13 +1517,14 @@
                 fill: new Fill({
                   color: "#8A2BE2"
                 }),
-                textAlign: "center",
+                textAlign: "center"
                 //textBaseline: "top"
               }),
-               image: new Icon({
-                src: "https://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png"
-               })
-            /*   image: new Circle({
+              image: new Icon({
+                src:
+                  "https://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png"
+              })
+              /*   image: new Circle({
                 radius: 18,
                 stroke: new Stroke({
                   color: "#fff"
@@ -1403,8 +1534,7 @@
                 })
               }) */
             });
-          } 
-          else if (size > 2) {
+          } else if (size > 2) {
             return new Style({
               text: new Text({
                 text: size.toString(),
@@ -1412,13 +1542,14 @@
                 fill: new Fill({
                   color: "green"
                 }),
-                textAlign: "center",
+                textAlign: "center"
                 //textBaseline: "top"
               }),
-               image: new Icon({
-                src: "https://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png"
-               })
-            /*   image: new Circle({
+              image: new Icon({
+                src:
+                  "https://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png"
+              })
+              /*   image: new Circle({
                 radius: 18,
                 stroke: new Stroke({
                   color: "#fff"
@@ -1428,8 +1559,7 @@
                 })
               }) */
             });
-          }
-          else {
+          } else {
             return this.getStyleOfCar(currentFeature[0]);
           }
         }
@@ -1440,94 +1570,90 @@
     getStyleOfCar(feature) {
       return new Style({
         image: new Icon({
-          src: "https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png"
+          src:
+            "https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png"
         })
       });
     },
-    createOlMap()
-    {
-/*       let picBaseUrl ="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: 15
-    });
+      //加载地图自定义图标
+      var view = new View({
+        projection: "EPSG:4326", //使用这个坐标系
+        center: [114, 30],
+        zoom: 5,
+        maxZoom: 15
+      });
 
-    var mapcontainer = this.$refs.rootmap;
+      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://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer/tile/{z}/{y}/{x}"
+      });
 
-    
-          
-    this.map = new Map({
-      target: mapcontainer,
-      layers: [
-         new TileLayer({
-          source: this.arcgisMap
-        })
-      ],
-      view: view
-    });
+      this.arcgisMap = new XYZ({
+        url:
+          "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
+      });
 
-     //添加面板
-        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.map = new Map({
+        target: mapcontainer,
+        layers: [
+          new TileLayer({
+            source: this.arcgisMap
+          })
+        ],
+        view: view
+      });
 
-     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.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.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.$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);
+        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,
@@ -1543,9 +1669,9 @@
             typeof feature.get("features") != "undefined"
           ) {
             if (feature.get("features").length == 1) {
-              console.log("点击了单个点"+e.coordinate)
+              console.log("点击了单个点" + e.coordinate);
               var cell = feature.values_.features[0];
-              this.showOlPanel(cell)
+              this.showOlPanel(cell);
               /* var cell = feature.values_.features[0];
               this.popBox.title = cell.idNumber;
               this.popBox.carId = cell.vehicleId;
@@ -1554,19 +1680,15 @@
             }
             //点击的是聚簇图标，展示统计信息
             else {
-              console.log("点击了聚簇"+e.coordinate)
-              this.map.getView().setCenter([e.coordinate[0],e.coordinate[1]])
-              this.map.getView().setZoom(10)
-            
+              console.log("点击了聚簇" + e.coordinate);
+              this.map.getView().setCenter([e.coordinate[0], e.coordinate[1]]);
+              this.map.getView().setZoom(10);
             }
-          }
-          else
-          {
+          } else {
             //点击的是vector图层的feature
-            console.log(feature)
+            console.log(feature);
             //开始展示属性
-            this.showOlPanel(feature)
-
+            this.showOlPanel(feature);
           }
         }
       });
@@ -1578,115 +1700,98 @@
           evt.map.getTargetElement().style.cursor = "";
         }
       });
-       //鼠标移动事件
-      this.map.on("moveend", evt=> {
-       var zoom=this.map.getView().getZoom()
-  
-       if(zoom>=10&&this.currentZoom<10)
-       /*  if(this.map.getView().getZoom()>10) */
-        {
-          this.map.removeLayer(this.layer)
+      //鼠标移动事件
+      this.map.on("moveend", evt => {
+        var zoom = this.map.getView().getZoom();
+
+        if (zoom >= 10 && this.currentZoom < 10) {
+          /*  if(this.map.getView().getZoom()>10) */
+          this.map.removeLayer(this.layer);
           this.map.addLayer(this.vector);
-        }
-        else if(zoom<10&&this.currentZoom>=10)
-        {
-          this.map.removeLayer(this.vector)
+        } else if (zoom < 10 && this.currentZoom >= 10) {
+          this.map.removeLayer(this.vector);
           this.map.addLayer(this.layer);
+        } else {
         }
-        else
-        {
-
-        }
-        this.currentZoom=zoom
+        this.currentZoom = zoom;
       });
-      
-           
-
-
     },
-      closepopup() {
+    closepopup() {
       if (this.menu_overlay && this.menu_overlay != "")
         this.menu_overlay.setPosition(undefined);
     },
     //openlayer属性框
-    showOlPanel(feature)
-    {
+    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>";
+        .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='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: #29818a;position:absolute;font-size:15px;line-height:30px;margin-left: 22px;margin-top: -44px;width:69px;cursor: pointer;text-decoration:underline' onclick='historyData(" +
+            feature.stCode +
+            ")'>" +
+            "历史数据" +
+            "</div>";
+
+          textContent +=
+            '<div style="width:300px;height:40px;color: #fff;">' +
+            '<div style="font-size:14px;line-height:40px; margin-left: 22px;margin-top: 5px;position: absolute;">' +
+            "名称" +
+            "</div>" +
+            '<div style="font-size:14px;line-height:40px;margin-top: 5px;position: absolute;margin-left: 180px;">' +
+            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='border-top: 1px solid #3F586F !important;border: none;margin-top: 6px;margin-bottom: 6px;'></div>";
+              '<div style="width:300px;height:40px;color: #fff;">' +
+              '<div style="font-size:14px;line-height:40px; margin-left: 22px;margin-top: 5px;position: absolute;">' +
+              key +
+              "</div>" +
+              '<div style="font-size:14px;line-height:30px;margin-top: 5px;position: absolute;margin-left: 180px;">' +
+              data[key] +
+              "</div>" +
+              "</div>";
+          }
+          textContent += "</div>";
 
-              //添加html拼接---缩放至
-             textContent +=
-              "<div style='color: #29818a;position:absolute;font-size:9px;line-height:30px;margin-left: 11px;margin-top: -44px;width:69px;cursor: pointer;text-decoration:underline' onclick='historyData(" +
-              feature.stCode +
-              ")'>" +
-              "历史数据" +
-              "</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]);
 
-             textContent +=
-                '<div style="width:260px;height:30px;color: #fff;">' +
-                '<div style="font-size:14px;line-height:30px; margin-left: 11px;margin-top: 5px;position: absolute;">' +
-                '名称' +
-                "</div>" +
-                '<div style="font-size:14px;line-height:30px;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:30px;color: #fff;">' +
-                '<div style="font-size:14px;line-height:30px; margin-left: 11px;margin-top: 5px;position: absolute;">' +
-                key +
-                "</div>" +
-                '<div style="font-size:14px;line-height:30px;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]);
-                        })
+          this.map.getView().setCenter([feature.lon, feature.lat]);
+        });
     },
     //初始化地图
     createMap(projectNo) {
@@ -1766,7 +1871,6 @@
             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);
@@ -1780,21 +1884,21 @@
               _this.$http
                 .post(_this.nozzle.listStationBase, {
                   data: {
-                  platformCode:projectNo
-                    }
+                    platformCode: projectNo
+                  }
                 })
                 .then(response => {
-                  console.log(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();//点
-                  
+                    var imagealone = {};
+                    let position = {};
+                    if (this.graphicsLayerByMarker)
+                      this.graphicsLayerByMarker.clear();
+                    this.graphicsLayerByMarker = new GraphicsLayer(); //点
+
                     let wgs = new SpatialReference({
                       wkid: 4326
                     });
@@ -1808,24 +1912,23 @@
                       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);
+                    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);
                       }
                     }
 
@@ -1871,8 +1974,7 @@
                         }
                       ]
                     });
-                    if(this.clusterLayer)
-                        this.clusterLayer.clear()
+                    if (this.clusterLayer) this.clusterLayer.clear();
                     this.clusterLayer = new ClusterLayer({
                       data: photoInfo.data,
                       distance: 100,
@@ -1910,79 +2012,71 @@
 
                     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);
+                        if (this.clusterLayer)
+                          _this.map.removeLayer(this.clusterLayer);
+                        _this.map.addLayer(this.graphicsLayerByMarker);
                       } else {
-                        if (graphicsLayerByMarker)
-                          _this.map.removeLayer(graphicsLayerByMarker);
-                        _this.map.addLayer(clusterLayer);
+                        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>";
+                      _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
                             }
-                            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);
+                          })
+                          .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.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) {
@@ -2040,17 +2134,410 @@
 
     // 给与gis的方法调动dome
     REFSFunctionToGis(type) {
-
-
       if (!type) {
         //加载黑色arcgis午夜蓝图
         let baseLayer = this.map.getLayers().item(0);
-         baseLayer.setSource(this.arcgisMap);
+        baseLayer.setSource(this.arcgisMap);
       } else {
         //加载蓝色底图
-               let baseLayer = this.map.getLayers().item(0);
-         baseLayer.setSource(this.arcgiswhiteMap);
+        let baseLayer = this.map.getLayers().item(0);
+        baseLayer.setSource(this.arcgiswhiteMap);
+      }
+    },
+    // 时间选择的change
+    TimeBoxChange() {
+      // 时间改动了，需要调整其状态
+      this.DateisChange = true;
+    },
 
+    // 根据站点编号查询站点的实时数据
+    LoadSiteDataNow() {
+      this.HistoryTableData = [];
+      this.NFSNowDataTableData = [];
+      this.NFSNowDataTableHead = [];
+
+      this.loading2 = true;
+      this.$http
+        .get(
+          this.nozzle.dataSelectSiteSiteManBySerial +
+            "?stCode=" +
+            this.currentSiteNo
+        )
+        .then(response => {
+          this.loading2 = false;
+
+          var tablearr = JSON.parse(JSON.stringify([response.data]));
+          // 通过state显示图标
+          if (response.data.state == 1) {
+            // 异常
+            this.SiteTypeUrl = "../../../static/img/NFHong.png";
+          } else if (response.data.state == 2) {
+            // 溢流
+            this.SiteTypeUrl = "../../../static/img/NFHuang.png";
+          } else if (response.data.state == 3) {
+            // 离线
+            this.SiteTypeUrl = "../../../static/img/NFHui.png";
+          } else if (response.data.state == 4) {
+            // 浸水
+            this.SiteTypeUrl = "../../../static/img/NFQing.png";
+          } else {
+            // 正常
+            this.SiteTypeUrl = "../../../static/img/NFLv.png";
+          }
+
+          for (var k in tablearr[0]) {
+            if (tablearr[0][k] == "NaN") {
+              delete tablearr[0][k];
+            }
+          }
+          this.NFSNowDataTableData = tablearr;
+        })
+        .catch(response => {
+          message(response);
+          this.loading2 = false;
+        });
+    },
+    // 根据站点编号查询站点的表头数据
+    LoadGridTitleData() {
+      // 加载实时数据//在表头前面加载
+      this.LoadSiteDataNow();
+
+      this.$http
+        .get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`)
+        .then(response => {
+          // 加载表头
+          var headobj = response.data.data;
+          // console.log(headobj);
+          console.log(11111, this.NFSNowDataTableData);
+          // let arr = [];
+          this.NFSNowDataTableHead = headobj.filter((item, index, obj) => {
+            for (let k in this.NFSNowDataTableData[0]) {
+              if (item.field === k) {
+                return item;
+              }
+            }
+          });
+          // console.log(8888, arr);
+          console.log(22222222, this.NFSNowDataTableHead);
+
+          // 加载历史数据
+          this.loadDataGridData();
+        })
+        .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;
+        })
+        .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();
       }
     }
   },
@@ -2059,9 +2546,9 @@
       return this.flag; // 直接监听props里的status状态
     }
   },
-   created() {
+  created() {
     window.closepopup = this.closepopup;
-     window.historyData = this.historyData;
+    window.historyData = this.historyData;
   },
   mounted: function() {
     // 根据平台渲染站点数量统计及状态统计
@@ -2076,7 +2563,7 @@
 
     // 默认加载所有的平台
     this.LoadAllProject();
-    this.createOlMap()
+    this.createOlMap();
     /* this.createMap(""); */
     // 默认展示 全部 的请求
     // this.ListClick(0, { platformCode: "" });
@@ -2108,43 +2595,42 @@
   height: 100%;
   position: relative;
 }
- .popup {
-    background: url(./../../../static/img/tc_bg_img.png) no-repeat;
-    background-size: 100% 100%;
-    width: 323px;
-    
-  }
- .earthmap {
+.popup {
+  background: url(./../../../static/img/tc_bg_img.png);
+  background-size: cover;
+  width: 500px;
+}
+.earthmap {
   width: 100%;
   height: 100%;
-  }
-   .bubble {
-    width: 200px; 
-    height: 50px; 
-    border: 5px solid gray;; 
-    position: relative;
+}
+.bubble {
+  width: 200px;
+  height: 50px;
+  border: 5px solid gray;
+  position: relative;
 }
 .common {
-    width: 0; 
-    height: 0; 
-    position: absolute;        /* 使用绝对定位 */
-    left: 50%;
-    transform: translate(-50%, 0);    /* 水平居中 */
+  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;
+  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;
+  bottom: -13px;
+  border-top: 22px solid gray;
+  border-right: 20px solid transparent;
+  border-left: 20px solid transparent;
 }
 #previewOfSiteStatusLeftTop {
   /* position: absolute; */
@@ -2602,6 +3088,7 @@
 }
 .NoBaoJing {
   position: relative;
+  color: var(--white);
   top: 50px;
 }
 /* 站点实时报警B */