Newer
Older
operation_web / src / components / newFiber / NewFiberSearch.vue
@朱忠杰 朱忠杰 on 2 Feb 2021 41 KB 设备分类
<template>
  <div id="NewFiberSearch">
    <div id="NFSNo1" v-if="!isNFSSite">
      <div id="NFSNo1Top">
        <el-input
          placeholder="请输入内容"
          v-model="FZValue"
          clearable
          @keyup.native.enter="loadFZData"
        ></el-input>

        <el-select v-model="SearchType" placeholder="请选择项目类型">
          <el-option
            v-for="item in listTypeInfo.xmlxList"
            :key="item.value"
            :label="item.key"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <img
          src="../../../static/img/NFShouSuo.png"
          alt
          class="ButtonImg"
          @click="loadFZData"
          v-has="'Search'"
        />
      </div>
      <div
        id="NFSNo1Bot"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.3)"
      >
        <ul id="NFSNo1BotUl">
          <li
            v-for="(item, index) in NFSNo1BotLiData"
            :key="index"
            class="NFSNo1BotLi"
          >
            <div class="NFSNo1BotLiTitle">
              <!-- 顶部分组名称 -->
              {{ item.groupName }}
            </div>
            <div class="NFSNo1BotLiStatistics">
              <!-- 中间站点统计 -->
              <div class="NFSNo1BotLiStatisticslist">
                <img
                  src="../../../static/img/XFCX1.png"
                  alt
                  class="NFSNo1BotLiStatisticslistImg"
                />
                <span class="NFSNo1BotLiStatisticslistTitle">总数</span>
                <div class="NFSNo1BotLiStatisticslistAll">
                  <div
                    class="NFSNo1BotLiStatisticslistNow"
                    :style="{ width: item.totalPercentage }"
                  ></div>
                </div>
                <span class="NFSNo1BotLiStatisticslistValue">{{
                  item.total
                }}</span>
              </div>
              <div class="NFSNo1BotLiStatisticslist">
                <img
                  src="../../../static/img/XFCX2.png"
                  alt
                  class="NFSNo1BotLiStatisticslistImg"
                />
                <span class="NFSNo1BotLiStatisticslistTitle">异常</span>
                <div class="NFSNo1BotLiStatisticslistAll">
                  <div
                    class="NFSNo1BotLiStatisticslistNow"
                    :style="{ width: item.exceptionStatePercentage }"
                  ></div>
                </div>
                <span class="NFSNo1BotLiStatisticslistValue">{{
                  item.exceptionState
                }}</span>
              </div>
              <div class="NFSNo1BotLiStatisticslist">
                <img
                  src="../../../static/img/XFCX4.png"
                  alt
                  class="NFSNo1BotLiStatisticslistImg"
                />
                <span class="NFSNo1BotLiStatisticslistTitle">离线</span>
                <div class="NFSNo1BotLiStatisticslistAll">
                  <div
                    class="NFSNo1BotLiStatisticslistNow"
                    :style="{ width: item.offLinePercentage }"
                  ></div>
                </div>
                <span class="NFSNo1BotLiStatisticslistValue">{{
                  item.offLine
                }}</span>
              </div>
            </div>
            <!-- 底部查看详情 -->
            <div class="NFSNo1BotLiDetails">
              <a
                href="javascript:void(0)"
                class="NFSNo1BotLiDetailsA"
                @click="ClickFZ(item.groupNo)"
                >查看详情</a
              >
            </div>
          </li>
        </ul>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ALLpageNum"
        :page-sizes="[12]"
        :page-size="ALLpageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="AllTotal"
      >
      </el-pagination>
    </div>
    <div v-if="isNFSSite" class="h-100 flex site-container">
      <!--左侧-->
      <div class="site-sidebar">
        <!--搜索-->
        <div class="site-sidebar_form">
          <el-input
            placeholder="请输入站点名称/站点编号"
            v-model="currentSiteName"
            @keyup.native.enter="handleChange"
            clearable
          />
          <div class="btn-group">
            <!-- <img
              src="../../../static/img/NFFanHui.png"
              alt
              class="ButtonImg"
              @click="FanHui"
            /> -->
            <el-button type="primary" @click="handleClick('search')"
              >搜索</el-button
            >
            <el-button type="primary" @click="FanHui">返回</el-button>
          </div>
        </div>
        <!--列表-->
        <div class="site-sidebar_list">
          <div
            class="site-sidebar_list-item"
            v-for="(site, index) in leftSiteList"
            :key="index"
            @click="handleClick('detail', site)"
          >
            <div class="title">
              <p>{{ site.stName }}</p>
            </div>
            <div class="infos"><span>存储时间:</span>{{ site.utTime }}</div>
            <div class="infos">
              <span>观测时间:</span>
              <p>{{ site.ttTime }}</p>
              <div
                class="state"
                :class="[
                  site.status === 0
                    ? 'online'
                    : site.status === 1
                    ? 'offline'
                    : site.status === 3
                    ? 'lowvoltage'
                    : ''
                ]"
              >
                {{ site.status | formatState }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--右侧-->
      <div class="site-main" v-if="showCurrentSiteInfo">
        <div id="NFSNo2" v-if="isNFSSite">
          <div id="NFSTop">
            <!-- <el-select
              v-model="SiteNo"
              filterable
              placeholder="请选择"
              @change="selectV(SiteNo)"
            >
              <el-option
                v-for="item in SiteOptions"
                :key="item.stCode"
                :label="item.stName"
                :value="item.stCode"
              ></el-option>
            </el-select> -->
            <!-- <img :src="SiteTypeUrl" alt id="SiteTypeImg" /> -->
            <img
              src="../../../static/img/NFShuaXin.png"
              alt
              class="ButtonImg"
              @click="LoadGridTitleData"
            />
          </div>
          <div id="NFSNowData">
            <el-table
              :data="NFSNowDataTableData"
              style="width: 100%;height:140px;"
              v-loading="loading2"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.3)"
            >
              <template v-for="(item, index) in NFSNowDataTableHead">
                <el-table-column
                  :prop="item.field"
                  :label="item.title"
                  :key="index"
                  show-overflow-tooltip
                  :render-header="labelHead"
                ></el-table-column>
              </template>
            </el-table>
          </div>
          <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>
      </div>
    </div>
    <el-dialog
      width="30%"
      title="选择文件"
      :visible.sync="RoleDialog2"
      id="RoleDialog2"
      append-to-body
    >
      <!-- <el-form
        :model="ProjectInformationConfig1Dialog3uploadData12"
        :rules="rules5"
        ref="ruleForm5"
        label-width="100px"
        enctype="multipart/form-data"
      >
        <el-form-item label="上传文件" prop="file">
          <input
            @change="IMGhandleFileChange2($event, 'file')"
            type="file"
            accept="application/vnd.ms-excel"
          />
        </el-form-item>
        <el-form-item id="FormButton2">
          <el-button
            type="primary"
            @click="submitForm5('ruleForm5')"
            :disabled="isTrueXls"
            >提交数据</el-button
          >
        </el-form-item>
      </el-form> -->
    </el-dialog>
  </div>
</template>

<script>
import { message } from "./../../util/item";
export default {
  name: "NewFiberSearch",
  data: function() {
    return {
      isNFSSite: false, //当前页面为分组时为false,为站点详情时为true
      FZValue: "", //分组信息模糊查询
      NFSNo1BotLiData: [
        // {
        //   inundate: 0, //浸水站点个数
        //   offLine: 0, //掉线站点个数
        //   inundatePercentage: "0%", //浸水站点百分比
        //   groupName: "北京采样仪", //分组名称
        //   total: 2, //站点总数
        //   siteOverflow: 0, //溢流站点个数
        //   exceptionStatePercentage: "0%", //异常站点个数百分比
        //   siteOverflowPercentage: "0%", //溢流站点百分比
        //   exceptionState: 0, //异常站点个数
        //   offLinePercentage: "0%", //掉线站点百分比
        //   groupNo: 8592, //分组编号
        //   totalPercentage: "100%" //站点总数百分比
        // }
      ], //渲染分组信息的数据
      SiteOptions: [], //渲染站点的下拉框信息
      SiteNo: "",
      AllTotal: 0, //所有总数
      ALLpageNum: 1,
      ALLpageSize: 12,
      SearchType: "",
      // 等待后台返回的站点管理数据的接口
      options: [
        {
          value: "1",
          label: "类型1"
        },
        {
          value: "2",
          label: "类型2"
        }
      ],
      SiteTypeUrl: "../../../static/img/NFLv.png", //站点状态显示不同的图片路径
      NFSNowDataTableData: [], //实时数据表格数据
      NFSNowDataTableHead: [], //实时数据表格表头数据
      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数据。

      // 判断当前用户是否拥有上传功能
      isAdmin: true,
      RoleDialog2: false,
      ProjectInformationConfig1Dialog3uploadData12: {
        file: {}
      },
      rules5: {
        file: [
          {
            required: true,
            message: "请选择文件",
            trigger: "change"
          }
        ]
      },
      isTrueXls: true,
      loading: false,
      loading2: false,
      loading3: false,
      //左侧站点列表
      siteName: "",
      leftSiteList: [],
      //列表相关
      listTypeInfo: {
        xmlxList: [
          { key: "全部项目", value: "" },
          { key: "合同项目", value: "0" },
          { key: "临测项目", value: "1" }
        ]
      },
      //当前项目code
      currentPlatformCode: "",
      //当前站点name
      currentSiteName: "",
      //当前站点code
      currentSiteNo: "",
      //显示当前站点下的信息
      showCurrentSiteInfo: false
    };
  },
  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);
      this.loading = true;
      this.$http
        .get(
          this.nozzle.userGroupRelaGetGroups +
            "?userId=4858cnf84ngf8e&condition=" +
            this.FZValue +
            "&pageNo=" +
            this.ALLpageNum +
            "&typeStr=" +
            this.SearchType +
            "&pageSize=" +
            this.ALLpageSize
        )
        .then(response => {
          // console.log(response);
          this.loading = false;
          if (response.data.total > 0) {
            // console.log(response.data);
            this.NFSNo1BotLiData = response.data.data;
            this.AllTotal = response.data.total;
          } else {
            this.$message({
              showClose: true,
              message: "根据该搜索没有搜索到新的信息",
              type: "warning"
            });
          }
        })
        .catch(response => {
          this.loading = false;
          this.$message({
            showClose: true,
            message: "数据请求失败",
            type: "warning"
          });
        });
    },
    // 点击项目查看该项目下的所有站点
    ClickFZ(platformCode, siteName) {
      this.currentPlatformCode = platformCode;
      this.$http
        .get(
          this.nozzle.groupsSelectSiteNoByGroupsNo +
            `?platformCode=${this.currentPlatformCode}&siteName=${this.currentSiteName}`
        )
        .then(res => {
          if (res.data.data.length) {
            this.leftSiteList = res.data.data;
          }
        })
        .catch(response => {
          message(response);
        });
      this.HistoryTableData = [];
      this.NFSNowDataTableData = [];
      this.NFSNowDataTableHead = [];
      this.isNFSSite = true;

      // this.$http
      //   .get(
      //     this.nozzle.groupsSelectSiteNoByGroupsNo +
      //       "?platformCode=" +
      //       platformCode
      //   )
      //   .then(response => {
      //     // console.log(response);
      //     this.loading2 = false;
      //     this.SiteOptions = response.data.data;
      //     // if (this.SiteOptions.length > 0) {
      //     this.SiteNo = response.data.data[0].stCode;

      //     // 讲站点详情页面中做的页面优化进行重置
      //     this.FirstOn = true;
      //     this.YinZiChange = true;
      //     this.DateisChange = false;
      //     this.HistoryBox = "DateGrid";
      //     // } else {
      //     //   this.$message({
      //     //     showClose: true,
      //     //     message: "该分组下无站点数据",
      //     //     type: "warning"
      //     //   });
      //     // }
      //   })
      //   .catch(response => {
      //     message(response);
      //   });
    },
    //点击事件
    handleClick(event, data) {
      switch (event) {
        case "detail":
          this.showCurrentSiteInfo = true;
          this.currentSiteNo = data.stCode;
          // console.log(this.currentSiteNo);
          this.LoadGridTitleData();
          break;
        case "search":
          this.showCurrentSiteInfo = false;
          this.ClickFZ(this.currentPlatformCode, this.currentSiteName);
          break;
      }
    },
    // 返回至分组页面
    FanHui() {
      this.isNFSSite = false;
      this.showCurrentSiteInfo = false;
      this.leftSiteList = [];
      this.currentSiteName = "";
    },
    // 选择站点 站点下拉框点击事件
    selectV(SiteNo) {
      this.LoadGridTitleData();
      // 当前tab为echarts时重新加载echarts
      if (this.HistoryBox == "Charts") {
        this.loadSiteYinZiData();
      }
    },
    // 时间选择的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
          }
        ]
      });
    },
    // 点击详情里面历史搜索
    Search() {
      if (this.HistoryBox == "Charts") {
        this.loadEchartsData();
      } else {
        this.loadDataGridData();
      }
    },
    // 点击导出
    DaoChu() {
      if (this.HistoryTableData.length == 0) {
        return this.$message({
          type: "error",
          message: "没有历史数据哦,无法导出!"
        });
      }
      window.open(
        this.nozzle.dataReportBatchExportHistoryData +
          "?st=" +
          this.currentSiteNo +
          "&startTime=" +
          this.TimeBoxValue[0] +
          "&endTime=" +
          this.TimeBoxValue[1]
      );
    },

    // 导入数据
    // UpData() {
    //   this.RoleDialog2 = true;
    // },
    // IMGhandleFileChange2(event, Name) {
    //   console.log();
    //   if (event.target.files[0].type !== "application/vnd.ms-excel") {
    //     this.$message.error("请上传.xls文件类型的文件");
    //     this.isTrueXls = true;
    //   } else {
    //     this.isTrueXls = false;
    //   }
    //   this.ProjectInformationConfig1Dialog3uploadData12[Name] =
    //     event.target.files[0];
    // },
    // 表单提交5
    submitForm5(formName) {
      // console.log(1, this.$refs[formName]);
      this.$refs[formName].validate(valid => {
        if (valid) {
          // console.log(11111);
          this.$http
            .post({
              url: this.nozzle.surveyDataExporExcelOfSurverData,
              method: "post",
              headers: {
                "Content-Type": "multipart/form-data"
              },
              data: this.ProjectInformationConfig1Dialog3uploadData12,
              transformRequest: [
                function(data, headers) {
                  const formData = new FormData();
                  for (const key of Object.keys(data)) {
                    formData.append(key, data[key]);
                  }
                  return formData;
                }
              ]
            })
            .then(response => {
              if (response.data.flag === true) {
                this.$message({
                  type: "success",
                  message: response.data.mgs
                });
                this.RoleDialog2 = false;
              } else {
                // message(response);
              }
            })
            .catch(response => {
              // message(response);
            });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    handleChange() {
      this.showCurrentSiteInfo = false;
      this.ClickFZ(this.currentPlatformCode, this.currentSiteName);
    }
  },
  filters: {
    //格式化状态
    formatState(value) {
      let str = "";
      switch (value) {
        case 0:
          str = "在线";
          break;
        case 1:
          str = "离线";
          break;
        case 2:
          str = "异常";
          break;
        case 3:
          str = "低电压";
          break;
      }
      return str;
    }
  },
  mounted: function() {
    this.loadFZData();
  }
};
</script>

<style lang="scss" scoped>
.el-container .el-main {
  padding: 30px !important;
}

#NFSNo1 {
  @include fd();
  width: 100%;
  height: 100%;
  -o-user-select: none;
  -moz-user-select: none; /*火狐 firefox*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10+*/
  -khtml-user-select: none; /*早期的浏览器*/
  user-select: none;
}
.ButtonImg {
  cursor: pointer;
  width: 100px;
  height: 36px;
  margin-left: 10px;
}
/* 站点分组页面样式A */
#NFSNo1Top {
  display: flex;
  width: 100%;
  margin-left: -10px;
  margin-bottom: 10px;
  text-align: left;
}
#NFSNo1Top .el-input {
  width: 250px;
  margin: 0 10px;
}
/* /deep/ .el-input__inner {
  background: #232020;
  color: white;
  border: 1px solid rgb(0, 119, 254);
} */
.el-button--primary.is-plain {
  color: rgb(0, 119, 254);
  background: rgba(255, 255, 255, 0.42);
  border-color: rgb(0, 119, 254);
}
#NFSNo1Bot {
  width: 100%;
  flex: 1;
  overflow: auto;
  /* padding: 0 15px; */
}
#NFSNo1BotUl {
  width: 100%;
  height: auto;
  font-size: 0;
  overflow: hidden;
}
/* 每个分组卡片的样式A */
.NFSNo1BotLi {
  width: 23%;
  float: left;
  margin: 10px 1%;
  /* height: 300px; */
  background: rgba(35, 38, 47, 0.42);
  box-sizing: border-box;
}
.NFSNo1BotLiTitle {
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  color: rgb(0, 119, 254);
  text-align: center;
  @include textover();
  background: var(--tablethead);
}
.NFSNo1BotLiStatistics {
  /* height: 180px; */
  box-sizing: border-box;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  background: var(--tablebody);
}
.NFSNo1BotLiStatisticslist {
  width: 100%;
  height: 35px;
  line-height: 35px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 15px;
}
.NFSNo1BotLiStatisticslistImg {
  width: 18px;
  height: 18px;
  float: left;
  vertical-align: middle;
  margin-top: 9px;
}
.NFSNo1BotLiStatisticslistTitle {
  float: left;
  font-size: 14px;
  color: rgb(0, 119, 254);
  vertical-align: middle;
  margin: 0 5px;
  width: 28px;
}
.NFSNo1BotLiStatisticslistAll {
  width: calc(100% - 110px);
  float: left;
  height: 18px;
  background: rgba(12, 37, 67, 0.6);
  margin-top: 8px;
  position: relative;
}
.NFSNo1BotLiStatisticslistNow {
  position: absolute;
  left: 0;
  top: 0;
  background: rgb(0, 120, 255);
  width: 25%;
  height: 100%;
}
.NFSNo1BotLiStatisticslistValue {
  width: 52px;
  float: left;
  font-size: 14px;
  color: var(--preTopDatatxt);
}
.NFSNo1BotLiDetails {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: rgb(0, 119, 254);
  text-align: right;
  padding-right: 20px;
  box-sizing: border-box;
  background: var(--tablebody);
}
.NFSNo1BotLiDetailsA {
  display: inline-block;
  height: 28px;
  line-height: 22px;
  border: 1px solid rgb(0, 119, 254);
  color: var(--bluetowhite) !important;
  background-color: var(--pretextbg);
  padding: 3px 20px;
  font-size: 16px;
  border-radius: 5px;
  box-sizing: border-box;
}
/* 每个分组卡片的样式B */

/* 站点分组页面样式B */
/* 站点详情页面样式A */
#NFSNo2 {
  width: 100%;
  height: 100%;
}
#NFSTop {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  padding-left: 15px;
}
#SiteTypeImg {
  vertical-align: middle;
  margin: 0 20px;
}

#NFSNowData {
  height: 140px;
  width: 100%;
  margin: 20px 0;
  background: rgba(102, 102, 102, 0);
}
#NFSHistoryData {
  width: 100%;
  height: calc(100% - 220px);
}
#TimeBox {
  @include fa();
  width: 100%;
  text-align: left;
  padding-left: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.timeTM {
  color: var(--white) !important;
}

#TimeBox .el-input__inner {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid rgb(4, 51, 52) !important;
  color: var(--white) !important;
}
#TimeBox .el-radio__label {
  color: var(--white) !important;
}
#NFSHistoryData2 {
  width: 100%;
  height: calc(100% - 60px);
  display: inline-block;
  /* background: rgba(255, 255, 255, 0.1); */
}

/* 因子选择 A*/
#YinziSelect {
  width: 100%;
  height: 60px;
  padding: 10px;
  text-align: left;
  color: var(--white);
  box-sizing: border-box;
}
/* 因子选择 B*/
#HistoryEchart {
  width: 100%;
  height: calc(100% - 60px);
}
/* 站点详情页面样式B */
/* 左侧样式 */
.site-sidebar {
  @include fd();
  width: 300px;
  margin-right: 10px;
  &_form {
    @include fd();
    margin-bottom: 10px;
    .btn-group {
      @include fj();
      /deep/ .el-button {
        width: 49%;
        margin-top: 5px;
        border-radius: 0;
      }
      /deep/ .el-button + .el-button {
        margin-left: 0;
      }
    }
  }
  &_list {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    background-color: var(--xfcxbgc);
    &-item {
      color: var(--xfcxcolor);
      text-align: left;
      padding-top: 5px;
      padding-bottom: 5px;
      cursor: pointer;
      background: var(--xfcxmegbgc);
      &:not(:last-child) {
        border-bottom: 1px solid var(--xfcxborder);
      }
      .title {
        @include fa();
        height: 30px;
        font-size: 16px;
        padding-left: 31px;
        background: url(../../../static/img/state.png) no-repeat 3px center;
        background-size: 25px 25px;
        p {
          @include textover();
        }
      }
      .infos {
        @include fa();
        height: 30px;
        font-size: 14px;
        padding: 5px 10px;
        font-weight: 100;
        span {
          width: 70px;
          font-weight: 900;
        }
        p {
          flex: 1;
          overflow: hidden;
        }
        .state {
          @include wh(50px, 25px);
          @include sc(12px, #fff);
          text-align: center;
          line-height: 25px;
          border-radius: 25px;
          font-weight: 600;
          background-color: rgb(229, 32, 39);
          &.offline {
            background-color: rgb(241, 156, 51);
          }
          &.online {
            background-color: rgb(37, 104, 243);
          }
          &.lowvoltage {
            background-color: rgb(41, 199, 114);
          }
        }
      }
    }
  }
}
.site-main {
  flex: 1;
  overflow: hidden;
}
</style>