Newer
Older
operation_web / src / components / newFiber / NewFiberSearch.vue
@zhangqy zhangqy on 3 Dec 2019 31 KB 修改样式
<template>
  <div id="NewFiberSearch">
    <div id="NFSNo1" v-if="!isNFSSite">
      <div id="NFSNo1Top">
        <el-input placeholder="请输入内容" v-model="FZValue" clearable></el-input>
        <img src="../../../static/img/NFShouSuo.png" alt class="ButtonImg" @click="loadFZData" />
      </div>
      <div
        id="NFSNo1Bot"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <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 class="NFSNo1BotLiStatisticslist">
                <img src="../../../static/img/XFCX3.png" alt class="NFSNo1BotLiStatisticslistImg" />
                <span class="NFSNo1BotLiStatisticslistTitle">浸水</span>
                <div class="NFSNo1BotLiStatisticslistAll">
                  <div
                    class="NFSNo1BotLiStatisticslistNow"
                    :style="{'width':item.inundatePercentage }"
                  ></div>
                </div>
                <span class="NFSNo1BotLiStatisticslistValue">{{item.inundate}}</span>
              </div>
              <div class="NFSNo1BotLiStatisticslist">
                <img src="../../../static/img/XFCX5.png" alt class="NFSNo1BotLiStatisticslistImg" />
                <span class="NFSNo1BotLiStatisticslistTitle">溢流</span>
                <div class="NFSNo1BotLiStatisticslistAll">
                  <div
                    class="NFSNo1BotLiStatisticslistNow"
                    :style="{'width':item.siteOverflowPercentage}"
                  ></div>
                </div>
                <span class="NFSNo1BotLiStatisticslistValue">{{item.siteOverflow}}</span>
              </div>
            </div>
            <!-- 底部查看详情 -->
            <div class="NFSNo1BotLiDetails">
              <a
                href="javascript:void(0)"
                class="NFSNo1BotLiDetailsA"
                @click="ClickFZ(item.groupNo)"
              >查看详情</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <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.serial"
            :label="item.siteName"
            :value="item.serial"
          ></el-option>
        </el-select>
        <img :src="SiteTypeUrl" alt id="SiteTypeImg" />
        <img
          src="../../../static/img/NFShuaXin.png"
          alt
          class="ButtonImg"
          @click="LoadGridTitleData"
        />
        <!-- <img src="../../../static/img/NFQingKong.png" alt class="ButtonImg" /> -->
        <img src="../../../static/img/NFFanHui.png" alt class="ButtonImg" @click="FanHui" />
        <img
          src="../../../static/img/NFUpData.png"
          alt
          class="ButtonImg"
          @click="UpData"
          v-show="isAdmin"
        />
      </div>
      <div id="NFSNowData">
        <el-table :data="NFSNowDataTableData" style="width: 100%;height:140px;">
          <template v-for="(col ,index) in NFSNowDataTableHead">
            <el-table-column :prop="col.field" :label="col.title"></el-table-column>
          </template>
        </el-table>
      </div>
      <div id="NFSHistoryData">
        <div id="TimeBox">
          <span style="color:white;">时间:</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()" />
          <img src="../../../static/img/NFDaoChu.png" alt class="ButtonImg" @click="DaoChu()" />
        </div>
        <div id="NFSHistoryData2">
          <el-tabs v-model="HistoryBox" @tab-click="HistoryHandleClick">
            <el-tab-pane label="表格展示" name="DateGrid">
              <el-table
                :data="HistoryTableData"
                style="width: 100%;height:calc(100% - 45px)"
                stripe
              >
                <template v-for="(col ,index) in NFSNowDataTableHead">
                  <el-table-column :prop="col.field" :label="col.title"></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">
              <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 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: "",
      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
    };
  },
  methods: {
    // 加载页面分组信息
    loadFZData() {
      this.loading = true;
      this.$http
        .get(
          this.nozzle.userGroupRelaGetGroups +
            "?userId=4858cnf84ngf8e&condition=" +
            this.FZValue
        )
        .then(response => {
          this.loading = false;
          if (response.data.total > 0) {
            this.NFSNo1BotLiData = response.data.rows;
          } else {
            this.$message({
              showClose: true,
              message: "该用户下未分配信息",
              type: "warning"
            });
          }
        })
        .catch(response => {
          this.loading = false;
          this.$message({
            showClose: true,
            message: "数据请求失败",
            type: "warning"
          });
        });
    },
    // 点击分组
    ClickFZ(parentId) {
      this.$http
        .get(this.nozzle.groupsSelectSiteNoByGroupsNo + "?parentId=" + parentId)
        .then(response => {
          this.SiteOptions = response.data.data.rows;
          if (this.SiteOptions.length > 0) {
            this.SiteNo = response.data.data.rows[0].serial;
            this.isNFSSite = true;
            this.LoadGridTitleData();
            // 讲站点详情页面中做的页面优化进行重置
            this.FirstOn = true;
            this.YinZiChange = true;
            this.DateisChange = false;
            this.HistoryBox = "DateGrid";
          } else {
            this.$message({
              showClose: true,
              message: "该分组下无站点数据",
              type: "warning"
            });
          }
        })
        .catch(response => {
          message(response);
        });
    },
    // 返回至分组页面
    FanHui() {
      this.isNFSSite = false;
    },
    // 选择站点 站点下拉框点击事件
    selectV(SiteNo) {
      this.HistoryTableData = [];
      this.NFSNowDataTableData = [];
      this.NFSNowDataTableHead = [];
      this.LoadGridTitleData();
      // 当前tab为echarts时重新加载echarts
      if (this.HistoryBox == "Charts") {
        this.loadSiteYinZiData();
      }
    },
    // 时间选择的change
    TimeBoxChange() {
      // 时间改动了,需要调整其状态
      this.DateisChange = true;
    },
    // 根据站点编号查询站点的表头数据
    LoadGridTitleData() {
      this.$http
        .get(this.nozzle.siteGetHeads + "?siteNo=" + this.SiteNo)
        .then(response => {
          if (response.data.code == 200) {
            // 加载表头
            this.NFSNowDataTableHead = response.data.data;
            // 加载实时数据
            this.LoadSiteDataNow();
            // 加载历史数据
            this.loadDataGridData();
          } else {
            message(response);
          }
        })
        .catch(response => {
          message(response);
        });
    },
    // 根据站点编号查询站点的实时数据
    LoadSiteDataNow() {
      this.$http
        .get(
          this.nozzle.dataSelectSiteSiteManBySerial + "?dName=" + this.SiteNo
        )
        .then(response => {
          this.NFSNowDataTableData = 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";
          }
        })
        .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();
        }
      }
    },
    //分页
    HistorySizeChange(val) {
      // 改变每页的条数
      this.HistorySize = val;
      this.loadDataGridData();
    },
    HistoryCurrentChange(val) {
      //改变页数
      this.HistoryPage = val;
      this.loadDataGridData();
    },
    // 历史表格数据请求
    loadDataGridData() {
      this.$http
        .get(
          this.nozzle.dataSelectSiteSiteManHistoryDataMongoBySerial +
            "?dName=" +
            this.SiteNo +
            "&rows=" +
            this.HistorySize +
            "&page=" +
            this.HistoryPage +
            "&startTime=" +
            this.TimeBoxValue[0] +
            "&endTime=" +
            this.TimeBoxValue[1]
        )
        .then(response => {
          this.HistoryTableData = response.data.rows;
          this.DatagridDataLength = response.data.total;
        })
        .catch(response => {
          message(response);
        });
    },
    //获取站点分配的所有因子
    loadSiteYinZiData() {
      this.$http
        .get(this.nozzle.dataSelectSitePropertyList + "?siteNo=" + this.SiteNo)
        .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.SiteNo +
              "&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: "#333"
            }
          }
        },
        toolbox: {
          feature: {
            magicType: { show: true, type: ["line", "bar"] }
          }
        },
        legend: {
          data: [this.SiteYinziZn, this.SiteYinzi2Zn],
          textStyle: {
            color: "#ffffff" //字体颜色
          }
        },
        xAxis: [
          {
            type: "category",
            data: this.ChartsX,
            axisPointer: {
              type: "shadow"
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#999" //这里用参数代替了
              }
            },
            axisLine: {
              lineStyle: {
                color: "#333" // 颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: this.SiteYinziZn,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#999" //这里用参数代替了
              }
            },
            axisLine: {
              lineStyle: {
                color: "#333" // 颜色
              }
            }
          },
          {
            type: "value",
            name: this.SiteYinzi2Zn,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#999" //这里用参数代替了
              }
            },
            axisLine: {
              lineStyle: {
                color: "#333" // 颜色
              }
            }
          }
        ],
        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() {
      window.open(
        this.nozzle.dataReportBatchExportHistoryData +
          "?st=" +
          this.SiteNo +
          "&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) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios({
            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;
        }
      });
    }
  },
  mounted: function() {
    this.loadFZData();
  }
};
</script>

<style scoped>
#NFSNo1 {
  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 {
  vertical-align: middle;
  cursor: pointer;
  width: 100px;
  height: 36px;
}
/* 站点分组页面样式A */
#NFSNo1Top {
  width: 100%;
  height: 60px;
  line-height: 0px;
  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(35, 38, 47, 0.42);
  border-color: rgb(0, 119, 254);
}
#NFSNo1Bot {
  width: 100%;
  height: calc(100% - 60px);
  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;
}
.NFSNo1BotLiStatistics {
  height: 180px;
  box-sizing: border-box;
  border-top: 1px solid rgb(15, 36, 58);
  border-bottom: 1px solid rgb(15, 36, 58);
}
.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: rgb(248, 232, 14);
}
.NFSNo1BotLiDetails {
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: rgb(0, 119, 254);
  text-align: right;
  padding-right: 20px;
  box-sizing: border-box;
}
.NFSNo1BotLiDetailsA {
  display: inline-block;
  height: 28px;
  line-height: 22px;
  border: 1px solid rgb(0, 119, 254);
  color: rgb(0, 119, 254);
  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;
}
/* /deep/ .el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid rgb(4, 51, 52);
  color: white;
}
/deep/ .el-select-dropdown {
  background-color: #3c3939 !important;
  border: 1px solid rgb(4, 51, 52) !important;
} */
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: rgb(4, 51, 52);
}
.el-select-dropdown__item {
  color: white;
}
#NFSNowData {
  height: 140px;
  width: 100%;
  margin: 20px 0;
  background: rgba(102, 102, 102, 0);
}
#NFSHistoryData {
  width: 100%;
  height: calc(100% - 220px);
}
#TimeBox {
  height: 60px;
  line-height: 60px;
  width: 100%;
  display: inline-block;
  text-align: left;
  padding-left: 10px;
  box-sizing: border-box;
}
#TimeBox .el-input__inner {
  background-color: rgba(0, 0, 0, 0) !important;
  border: 1px solid rgb(4, 51, 52) !important;
  color: white !important;
}
#TimeBox .el-radio__label {
  color: 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: white;
  box-sizing: border-box;
}
/* 因子选择 B*/
#HistoryEchart {
  width: 100%;
  height: calc(100% - 60px);
}
/* 站点详情页面样式B */
</style>
<style >
</style>