diff --git a/src/components/site/previewOfSiteStatus.vue b/src/components/site/previewOfSiteStatus.vue
index 204332b..1591b2a 100644
--- a/src/components/site/previewOfSiteStatus.vue
+++ b/src/components/site/previewOfSiteStatus.vue
@@ -370,12 +370,100 @@
               </div>
             </div>
           </div>
-          <!-- <div id="previewOfSiteStatusCentent6">
-            <div id="GisRightCententBox2UL">
-              <span v-if="NoBaoJingData" class="NoBaoJing">暂无报警数据</span>
-
+          <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>
-          </div> -->
+          </el-dialog>
         </div>
       </div>
     </div>
@@ -632,23 +720,26 @@
       this.map.getView().setZoom(10);
     },
     //项目图层切换
-    initPointToMap(projectNo){
-       this.$http
-                .post(this.nozzle.listStationBase, {
-                  data: {
-                   platformCode:projectNo
-                    }
-                })
-                .then(response => {
-                  console.log(response)
-                  if (response.data.code === 1) {
-                   this.showCluster(response.data.data);
-                  }
-                })
+    initPointToMap(projectNo) {
+      this.$http
+        .post(this.nozzle.listStationBase, {
+          data: {
+            platformCode: projectNo
+          }
+        })
+        .then(response => {
+          console.log(response);
+          if (response.data.code === 1) {
+            this.showCluster(response.data.data);
+          }
+        });
     },
     //点击历史数据
     historyData(stCode) {
       console.log(stCode);
+      this.currentSiteNo = stCode;
+      this.LoadGridTitleData();
+      this.dialogVisible = true;
     },
     // 获取所有平台
     LoadAllProject() {
@@ -1457,9 +1548,9 @@
         }
       });
 
-            //初始化项目行政区域边框
-            // Create layer
-           /*  if (this.vectorSourceArea) {
+      //初始化项目行政区域边框
+      // Create layer
+      /*  if (this.vectorSourceArea) {
         this.vectorSourceArea.clear();
       }
 
@@ -1497,9 +1588,6 @@
 
       /* var extent = areaFeature[0].getGeometry().getExtent();
       this.map.getView().fit(extent, this.map.getSize()); */
-         
-
-
 
       var cell,
         resultwkt = "";
@@ -1682,18 +1770,18 @@
 
       // 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);
+          }
+        });
 
       //鼠标监听
       //鼠标点击事件
@@ -2195,57 +2283,10 @@
       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.loadDataGridData();
 
       this.$http
         .get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`)
@@ -2253,10 +2294,10 @@
           // 加载表头
           var headobj = response.data.data;
           // console.log(headobj);
-          console.log(11111, this.NFSNowDataTableData);
+          console.log(11111, this.HistoryTableData);
           // let arr = [];
           this.NFSNowDataTableHead = headobj.filter((item, index, obj) => {
-            for (let k in this.NFSNowDataTableData[0]) {
+            for (let k in this.HistoryTableData[0]) {
               if (item.field === k) {
                 return item;
               }
@@ -2264,9 +2305,6 @@
           });
           // console.log(8888, arr);
           console.log(22222222, this.NFSNowDataTableHead);
-
-          // 加载历史数据
-          this.loadDataGridData();
         })
         .catch(response => {
           message(response);
@@ -2584,6 +2622,15 @@
       } else {
         this.loadDataGridData();
       }
+    },
+    labelHead(h, { column, index }) {
+      let l = column.label.length;
+      let f = 16; //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
+      column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度 //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
+
+      return h("div", { class: "table-head", style: { width: "100%" } }, [
+        column.label
+      ]);
     }
   },
   computed: {