<!--终端运维-->
<template>
  <div class="pd10">
    <el-form v-show="wuser" :inline="true" class="demo-form-inline">
      <el-form-item label="终端型号:">
        <el-select v-model="teriminal" placeholder="请选择终端型号">
          <el-option
            v-for="item in teriminaloption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="终端状态:">
        <el-select v-model="teriminalstatus" placeholder="请选择终端状态">
          <el-option
            v-for="item in teriminalstatusoption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="通讯状态:">
        <el-select v-model="state" placeholder="请选择通讯状态">
          <el-option
            v-for="item in stateoption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="search" placeholder="输入关键字筛选" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-upload2">导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-success" @click="deviceData"
          >终端状态管理</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-s-order" @click="liuniangconfig"
          >流量套餐配置</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-menu" @click="configliul"
          >流量策略配置</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-s-data" @click="liultjData"
          >流量统计</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-setting" @click="resect"
          >重启前置程序</el-button
        >
      </el-form-item>
    </el-form>

    <el-row v-show="wuser" :gutter="10">
      <pl-table
        highlight-current-row
        header-cell-class-name="table_header"
        :header-cell-style="{
          height: '30px',
          top: '0px',
          padding: '0px',
          color: '#333333',
          background: '#e5e7f2',
        }"
        v-loading="loading"
        :row-style="{ height: '25px' }"
        :cell-style="{ padding: '0px' }"
        ref="plTreeTable"
        :data="treeTable"
        :height="height"
        selectTrClass="selectTr"
        :row-height="rowHeight"
        row-key="id"
        @selection-change="handleSelectionChange"
        :expand-row-keys="expandRow"
        :filter-node-method="filterNode"
        bigDataCheckbox
        :treeConfig="{ children: 'children', expandAll: true }"
        :use-virtual="true"
        header-drag-style
        @table-body-scroll="tableBodyScroll"
        fixedColumnsRoll
        inverse-current-row
        @select-all="selectAll"
      >
        <template slot="empty"> 没有查询到符合条件的记录 </template>
        <pl-table-column :selectable="selected" type="selection" width="55">
        </pl-table-column>
        <pl-table-column
          min-width="200"
          prop="name"
          label="电网拓扑"
          :showOverflowTooltip="true"
          :show-overflow-tooltip="true"
          align="center"
          :treeNode="true"
          width="200"
        ></pl-table-column>
        <pl-table-column
          min-width="150"
          prop="devType"
          label="终端型号"
          align="center"
        ></pl-table-column>
        <pl-table-column
          min-width="150"
          prop="version"
          label="版本信息"
          align="center"
        ></pl-table-column>
        <pl-table-column
          min-width="140"
          prop="baseFlowMeal"
          label="基础套餐(MB)"
          align="center"
        ></pl-table-column>
        <pl-table-column
          min-width="140"
          prop="reamFlowMeal"
          label="扩展套餐(MB)"
          align="center"
        ></pl-table-column>
        <pl-table-column min-width="150" label="剩余流量(MB)" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level === 4" type="primary">
              {{
                scope.row.level === 4
                  ? scope.row.baseFlowMeal +
                    scope.row.reamFlowMeal -
                    scope.row.statisValue
                  : ""
              }}
            </el-tag>
          </template>
        </pl-table-column>
        <pl-table-column min-width="150" label="流量使用占比(%)" align="center">
          <template slot-scope="scope">
            {{
              scope.row.level === 4
                ? scope.row.statisValue /
                  (scope.row.baseFlowMeal + scope.row.reamFlowMeal)
                : ""
            }}
          </template>
        </pl-table-column>
        <pl-table-column prop="runFlag" label="终端状态" align="center">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.runFlag === 0">投运</el-tag>
            <el-tag type="primary" v-if="scope.row.runFlag === 1"
              >热备用</el-tag
            >
            <el-tag type="primary" v-if="scope.row.runFlag === 2">停运</el-tag>
          </template>
        </pl-table-column>
        <pl-table-column prop="comFlag" label="通讯状态" align="center">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.comFlag === 0">中断</el-tag>
            <el-tag type="primary" v-if="scope.row.comFlag === 1">正常</el-tag>
          </template>
        </pl-table-column>
        <pl-table-column
          min-width="150"
          width="260"
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.level === 4"
              type="primary"
              size="mini"
              @click="uesdealia(scope.row)"
              >终端详情
            </el-button>
            <el-button
              v-if="scope.row.level === 4"
              :disabled="scope.row.state == 1 ? true : false"
              type="primary"
              size="mini"
              @click="queryview(scope.row)"
              >流量详情
            </el-button>
          </template>
        </pl-table-column>
      </pl-table>

      <!--终端状态管理-->
      <el-dialog
        :close-on-click-modal="false"
        title="终端状态管理"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
      >
        <el-row>
          <el-col :span="12">
            <span style="font-weight: bold; font-size: 14px">终端状态:</span>
            <el-radio-group v-model="radio">
              <el-radio :label="0">投运</el-radio>
              <el-radio :label="1">热备用</el-radio>
              <el-radio :label="2">停运</el-radio>
            </el-radio-group>
          </el-col>
          <el-col :span="12">
            <el-button
              type="primary"
              style="float: right; margin-right: 25px"
              @click="updateDevSubmit(0)"
              >设置提交</el-button
            >
          </el-col>
        </el-row>
        <el-table
          stripe
          :data="terminalRunFlag"
          border
          style="width: 100%; margin-top: 0.5%"
          height="60vh"
          row-key="id"
          highlight-current-row
          
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column
            prop="ip"
            align="center"
            label="网络参数"
          ></el-table-column>
          <el-table-column prop="runFlag" align="center" label="终端状态">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.runFlag === 0"
                >投运</el-tag
              >
              <el-tag type="warning" v-if="scope.row.runFlag === 1"
                >热备用</el-tag
              >
              <el-tag type="danger" v-if="scope.row.runFlag === 2">停运</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!--流量套餐配置-->
      <el-dialog
        :close-on-click-modal="false"
        title="流量套餐配置"
        :visible.sync="liudialogVisible"
        width="70%"
        :before-close="handleClose"
      >
        <span style="font-weight: bold; font-size: 14px">基础套餐:</span>
        <el-select v-model="baseMealId" placeholder="请选择基础套餐">
          <el-option
            v-for="item in baseMealIdList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-star-off" circle></el-button>
        <span style="font-weight: bold; font-size: 14px">扩展套餐:</span>
        <el-select v-model="extendMealId" placeholder="请选择基础套餐">
          <el-option
            v-for="item in extendMealIdList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-star-off" circle></el-button>

        <el-button
          type="primary"
          style="float: right; margin-right: 25px"
          @click="updateDevSubmit(1)"
          >设置提交</el-button
        >

        <el-table
          stripe
          :data="terminalFlowMeal"
          border
          style="width: 100%; margin-top: 0.5%"
          height="60vh"
          row-key="id"
          highlight-current-row
          
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column
            prop="ip"
            align="center"
            label="网络参数"
          ></el-table-column>
          <el-table-column
            prop="baseFlowMeal"
            align="center"
            label="基础流量(MB)"
          ></el-table-column>
          <el-table-column
            prop="reamFlowMeal"
            align="center"
            label="扩展流量(MB)"
          ></el-table-column>
        </el-table>
      </el-dialog>
      <!--流量策略配置-->
      <el-dialog
        :close-on-click-modal="false"
        title="流量策略配置"
        :visible.sync="condialogVisible"
        width="70%"
        :before-close="handleClose"
      >
        <span style="font-weight: bold; font-size: 14px">流量策略:</span>
        <el-select v-model="flowStrategyId" placeholder="请选择流量策略">
          <el-option
            v-for="item in flowStrategyIdList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-star-off" circle></el-button>

        <el-button
          type="primary"
          style="float: right; margin-right: 25px"
          @click="updateDevSubmit(2)"
          >设置提交</el-button
        >

        <el-table
          stripe
          :data="terminalFlowStrategy"
          border
          style="width: 100%; margin-top: 0.5%"
          height="60vh"
          row-key="id"
          highlight-current-row
          
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column
            prop="ip"
            align="center"
            label="网络参数"
          ></el-table-column>
          <el-table-column
            prop="flowStrategy"
            align="center"
            label="流量策略"
          ></el-table-column>
          <el-table-column prop="strategyFlag" align="center" label="策略类型">
            <template slot-scope="scope">
              <el-tag type="primary" v-if="scope.row.strategyFlag === 0"
                >定制</el-tag
              >
              <el-tag type="primary" v-if="scope.row.strategyFlag === 1"
                >默认</el-tag
              >
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!--流量统计-->
      <el-dialog
        :close-on-click-modal="false"
        title="流量统计"
        :visible.sync="tjdialogVisible"
        width="90%"
        :before-close="handleClose"
      >
        <el-row>
          <el-col :span="18">
            <timepicker
              @querfromdata="querfromdata"
              :interval="interval"
            ></timepicker>
          </el-col>
          <el-col :span="6">
            <span style="font-weight: bold; font-size: 14px">筛选数据:</span>
            <el-input
              v-model="input"
              placeholder="请输入内容"
              style="width: 55%"
            ></el-input>
            <el-button type="primary" icon="el-icon-star-off">筛选</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-table
              stripe
              :data="logtableData"
              border
              style="width: 100%; margin-top: 0.5%"
              :height="twoheight"
              highlight-current-row
            >
              <el-table-column
                prop="date"
                align="center"
                label="序号"
                width="88"
              ></el-table-column>
              <el-table-column
                prop="date"
                align="center"
                label="终端名称"
              ></el-table-column>
              <el-table-column
                prop="date"
                align="center"
                label="供电公司"
              ></el-table-column>
              <el-table-column
                prop="date"
                align="center"
                label="变电站"
              ></el-table-column>
              <el-table-column
                prop="date"
                align="center"
                label="IP"
              ></el-table-column>
              <el-table-column
                prop="date"
                align="center"
                label="套餐流量(M)"
              ></el-table-column>
              <el-table-column
                prop="date"
                align="center"
                label="终端统计流量(M)"
              ></el-table-column>
              <el-table-column
                prop="date"
                align="center"
                label="剩余流量(M)"
              ></el-table-column>
            </el-table>
          </el-col>
          <el-col :span="8">
            <div
              id="celvtj"
              v-if="flag"
              :style="'width:100%;height:' + twoheight + ';zoom:' + device"
            ></div>
          </el-col>
        </el-row>
      </el-dialog>
      <!--使用详情-->
      <el-dialog
        :close-on-click-modal="false"
        title="终端使用详情"
        :visible.sync="dialogVisiblexq"
        width="70%"
        :before-close="handleClose"
      >
        <el-row>
          <el-col :span="24">
            <div id="user" v-if="flag" style="width: 100%; height: 25vh"></div>
          </el-col>
          <el-col :span="24">
            <el-table
              stripe
              :data="logtableData"
              border
              style="width: 100%; margin-top: 0.5%"
              height="35vh"
              highlight-current-row
            >
              <el-table-column prop="date" align="center" label="cup使用率">
                <el-table-column
                  prop="date"
                  align="center"
                  label="使用率"
                ></el-table-column>
                <el-table-column
                  prop="date"
                  align="center"
                  label="总量"
                ></el-table-column>
                <el-table-column
                  prop="date"
                  align="center"
                  label="使用量"
                ></el-table-column>
                <el-table-column
                  prop="date"
                  align="center"
                  label="未使用量"
                ></el-table-column>
              </el-table-column>
              <el-table-column prop="date" align="center" label="内存使用率">
                <el-table-column
                  prop="date"
                  align="center"
                  label="使用率"
                ></el-table-column>
                <el-table-column
                  prop="date"
                  align="center"
                  label="总量"
                ></el-table-column>
                <el-table-column
                  prop="date"
                  align="center"
                  label="使用量"
                ></el-table-column>
                <el-table-column
                  prop="date"
                  align="center"
                  label="未使用量"
                ></el-table-column>
              </el-table-column>
              <el-table-column prop="date" align="center" label="磁盘使用率">
                <el-table-column
                  prop="date"
                  align="center"
                  label="使用率"
                ></el-table-column>
                <el-table-column
                  prop="date"
                  align="center"
                  label="总量"
                ></el-table-column>
                <el-table-column
                  prop="date"
                  align="center"
                  label="使用量"
                ></el-table-column>
                <el-table-column
                  prop="date"
                  align="center"
                  label="未使用量"
                ></el-table-column>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-dialog>
    </el-row>
    <!--流量使用详情-->
    <el-row v-show="user">
      <el-col :span="24">
        <span style="font-weight: ; font-size: 14px">统计类型:</span>
        <el-radio-group v-model="radio3" size="small" @change="checkbox">
          <el-radio-button label="日累计"></el-radio-button>
          <el-radio-button label="月累计"></el-radio-button>
        </el-radio-group>
        <timepicker
          @querfromdata="querfromdata"
          :interval="interval"
          style="width: 60%"
        ></timepicker>
        <el-button
          type="primary"
          style="float: right"
          class="el-icon-close"
          @click="back"
          circle
        ></el-button>
      </el-col>
      <el-col :span="24" style="margin-right: 30%">
        <el-checkbox-group v-model="checkedCities" :min="1" :max="20">
          <el-checkbox v-for="city in cities" :label="city" :key="city">{{
            city
          }}</el-checkbox>
        </el-checkbox-group>
      </el-col>
      <el-col :span="24">
        <el-table
          stripe
          :data="logtableData"
          :height="twoheight"
          border
          style="width: 100%; margin-top: 0.5%"
          highlight-current-row
        >
          <el-table-column
            prop="date"
            align="center"
            label="月份"
            width="88"
          ></el-table-column>
          <el-table-column
            prop="date"
            align="center"
            label="套餐流量"
          ></el-table-column>
          <el-table-column
            prop="date"
            align="center"
            label="运营商统计流量(MB)"
          ></el-table-column>
          <el-table-column
            prop="date"
            align="center"
            label="系统统计量(MB)"
          ></el-table-column>
        </el-table>
        <div
          id="liulang"
          :style="'width:100%;height:' + twoheight + ';zoom:' + device"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getheight, tableheight } from "@/assets/commjs/common";
import timepicker from "../../components/TimePicker/index4";
import runManage from "@/api/device/runManger.js";
import version from "@/api/device/version";
import { dicData } from "@/assets/commjs/dictypeData";
import { deleteType } from "@/api/admin/dict";

export default {
  components: {
    timepicker,
  },
  data() {
    return {
      height: 800,
      twoheight: "",
      interval: 3,
      radio3: "日累计",
      dialogVisible: false,
      prodialogVisible: false,
      liudialogVisible: false,
      condialogVisible: false,
      tjdialogVisible: false,
      dialogVisiblexq: false,

      terminalRunFlag: [],
      terminalFlowMeal: [],
      terminalFlowStrategy: [],

      baseMealId: "",
      baseMealIdList: [],
      extendMealId: "",
      extendMealIdList: [],
      flowStrategyId: "",
      flowStrategyIdList: [],

      flag: false,
      wuser: true,
      user: false,
      title: "",
      protitle: "",
      // tableheight: '',
      device: 1,
      radio: 0,
      input: "",
      //终端型号
      teriminal: "",
      teriminaloption: [],
      //终端状态
      teriminalstatus: "",
      teriminalstatusoption: [
        { name: "全部", id: "" },
        { name: "投运", id: 0 },
        { name: "热备用", id: 1 },
        { name: "停运", id: 2 },
      ],
      //通讯状态
      state: "",
      stateoption: [
        { name: "全部", id: "" },
        { name: "正常", id: 1 },
        { name: "中断", id: 0 },
      ],
      //程序版本
      program: "",
      programoption: [],
      //列表

      loading: false,
      rowHeight: 20,
      top: 0,
      expandRow: [],
      search: "",
      tableData: [],
      checkIds: [],
      //弹窗列表
      logtableData: [],
      status: "",
      //进度条对象
      percentageoption: [
        {
          name: "1号测试终端",
          status: "exception",
          percentage: 20,
        },
        {
          name: "2号测试终端",
          status: "warning",
          percentage: 50,
        },
        {
          name: "3号测试终端",
          status: "success",
          percentage: 90,
        },
      ],
      //分页
      pageData: {
        currentPage: 1,
        pagesize: 100,
        total: 200,
      },
      cities: [
        "三秒数据",
        "定值",
        "装置状态",
        "最大值",
        "最小值",
        "平均值",
        "cp95值",
        "自动招录波",
        "手动招录波",
        "自动招PQDIF文件",
        "高次谐波",
      ],
      checkedCities: [
        "三秒数据",
        "定值",
        "装置状态",
        "最大值",
        "最小值",
        "平均值",
        "cp95值",
        "自动招录波",
        "手动招录波",
        "自动招PQDIF文件",
        "高次谐波",
      ],
    };
  },
  computed: {
    treeTable: function () {
      var searchValue = this.search;
      if (searchValue) {
        // 一般表格的查询
        // return  this.tableData.filter(function(dataNews){
        //   return Object.keys(dataNews).some(function(key){
        //     return String(dataNews[key]).toLowerCase().indexOf(search) > -1
        //   })
        // }
        let treeData = this.tableData;
        let handleTreeData = this.handleTreeData(treeData, searchValue);
        this.setExpandRow(handleTreeData);
        this.expandRow = this.expandRow.join(",").split(",");
        return handleTreeData;
      }
      return this.tableData;
    },
  },
  created() {
    this.getDevType();
    this.getList();
  },
  mounted() {
    this.device = window.devicePixelRatio;
    if (this.device == 1) {
      this.twoheight = tableheight() / 2 + "px";
    } else if (this.device == 1.25) {
      this.twoheight = (tableheight() - 100) / 2 + "px";
    }
  },
  methods: {
    //获取所有终端型号
    getDevType() {
      var code = "Dev_Type";
      this.teriminaloption = dicData(code, [], 1);
    },
    selected(row, index) {
      if (row.level !== 4 && row.level !== 3) {
        return false; //不可勾选
      } else {
        return true; //可勾选
      }
    },
    //终端状态管理
    deviceData() {
      if (this.checkIds.length === 0) {
        this.$message.warning("请至少选择一台装置");
        return;
      }
      this.dialogVisible = true;
      this.getStatusManageList();
    },
    //流量套餐配置
    liuniangconfig() {
      if (this.checkIds.length === 0) {
        this.$message.warning("请至少选择一台装置");
        return;
      }
      this.getFlowMealList();
      this.liudialogVisible = true;
      this.getFlowManageList();
    },
    //流量策略配置
    configliul() {
      if (this.checkIds.length === 0) {
        this.$message.warning("请至少选择一台装置");
        return;
      }
      this.getFlowStrategyList();
      this.condialogVisible = true;
      this.getFlowStrategyManageList();
    },
    //查询触发事件
    querfromdata() {},
    //流量统计触发事件
    liultjData() {
      this.tjdialogVisible = true;
      this.flag = true;
      this.$nextTick(() => {
        this.tubiao();
      });
    },
    //获取图表
    tubiao() {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("celvtj"));
      var option = {
        xAxis: {
          type: "category",
          axisLine: { show: true },
          axisLabel: {
            padding: [0, 10, 0, 10],
            interval: 0,
            rotate: 45,
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            formatter: "{value}M",
          },
          axisLine: { show: true },
        },
        grid: {
          left: "10%",
          right: "6%",
          top: "6%",
          bottom: "20%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          right: 40,
          top: 5,
        },
        dataset: {
          source: [
            ["工业园", "套餐总量", "流量使用量"],
            ["PQSS882XB4-20", 126.94, 23.43],
            ["PQSS882XB4-21", 186.81, 65.65],
            ["PQSS882XB4-22", 129.66, 51.65],
            ["PQSS882XB4-23", 78.24, 17.53],
            ["PQSS882XB4-24", 119.06, 68.721],
            ["PQSS882XB4-25", 97.12, 54.42],
            ["PQSS882XB4-26", 151.36, 64.31],
            ["PQSS882XB4-27", 322.69, 22.72],
            ["PQSS882XB4-31", 215.58, 56.13],
            ["PQSS882XB4-28", 331.89, 55.93],
            ["PQSS882XB4-29", 131.22, 25.89],
            ["PQSS882XB4-30", 170.46, 50.53],
          ],
        },
        title: {
          text: "",
          // "subtext": "（单位：M)",
          textStyle: {
            color: "black",
            fontSize: 20,
          },
          subtextStyle: {
            color: "#a0a0a0",
            fontSize: 15,
          },
          left: "3%",
          top: "0%",
        },
        color: ["#FF6600", "#33CCCC"],
        series: [
          {
            type: "bar",
            miniBarWidth: 20,
            z: "-1",
            barGap: "-100%",
            label: {
              show: true,
              position: "top",
              fontSize: 10,
            },
          },
          {
            type: "bar",
            miniBarWidth: 20,
            label: {
              show: true,
              position: "top",
              fontSize: 10,
            },
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
    },
    //关闭
    handleClose() {
      (this.dialogVisible = false),
        (this.prodialogVisible = false),
        (this.liudialogVisible = false),
        (this.condialogVisible = false),
        (this.tjdialogVisible = false),
        (this.dialogVisiblexq = false);
    },
    //重启前置
    resect() {
      this.$confirm("此操作将重启前置装置设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "重启动成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取重启",
          });
        });
    },
    //分页
    handleSizeChange() {},
    //使用详情
    uesdealia(row) {
      this.dialogVisiblexq = true;
      this.flag = true;
      this.$nextTick(() => {
        this.userData(row);
      });
    },
    //使用趋势
    userData(row) {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("user"));
      var name = row.name;
      var option = {
        backgroundColor: "#fff",
        title: {
          text: name + "性能详情",
          left: "45%",
          top: "0",
          textStyle: {
            color: "#999",
            fontSize: 18,
            fontWeight: "400",
          },
        },
        color: ["#5B8FF9", "#FFA18E", "#5AD8A6"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
            lineStyle: {
              type: "dashed",
            },
          },
        },
        grid: {
          left: "25",
          right: "25",
          bottom: "14",
          top: "45",
          containLabel: true,
        },
        legend: {
          data: ["cpu使用率", "内存使用率", "磁盘使用率"],
          left: "20px",
          top: 0,
          icon: "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
          textStyle: {
            color: "#333",
          },
          itemWidth: 10,
          itemHeight: 10,
        },
        xAxis: {
          type: "time",

          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.5)",
            },
          },
        },
        yAxis: {
          type: "value",
          max: "100",
          // max: max_value>=100? max_value + 100: max_value+10,
          // max: max_value > 100 ? max_value * 2 : max_value + 10,
          // interval: 10,
          // nameLocation: "center",
          axisLabel: {
            color: "#999",
            textStyle: {
              fontSize: 12,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F3F4F4",
            },
          },
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            name: "cpu使用率",
            type: "line",
            smooth: true,
            data: [
              ["2022-02-01 12:12:11", 10],
              ["2022-02-01 12:12:12", 20],
              ["2022-02-01 12:12:13", 30],
              ["2022-02-01 12:12:14", 44],
              ["2022-02-01 12:12:15", 50],
              ["2022-02-01 12:12:16", 65],
              ["2022-02-01 12:12:17", 76],
            ],
          },
          {
            name: "内存使用率",
            type: "line",
            smooth: true,
            data: [
              ["2022-02-01 12:12:11", 13],
              ["2022-02-01 12:12:12", 54],
              ["2022-02-01 12:12:13", 34],
              ["2022-02-01 12:12:14", 44],
              ["2022-02-01 12:12:15", 35],
              ["2022-02-01 12:12:16", 53],
            ],
          },
          {
            name: "磁盘使用率",
            type: "line",
            smooth: true,
            data: [
              ["2022-02-01 12:12:11", 13],
              ["2022-02-01 12:12:12", 2],
              ["2022-02-01 12:12:13", 2],
              ["2022-02-01 12:12:14", 32],
              ["2022-02-01 12:12:15", 43],
              ["2022-02-01 12:12:16", 23],
              ["2022-02-01 12:12:17", 23],
            ],
          },
        ],
      };

      myChartes.setOption(option)
window.echartsArr.push(myChartes);
    },
    //切换事件
    checkbox(val) {},
    //返回
    back() {
      if (this.user) {
        this.user = false;
        this.wuser = true;
      } else {
        this.user = true;
        this.wuser = false;
      }
    },
    //流量详情
    queryview(row) {
      this.wuser = false;
      this.user = true;
      this.$nextTick(() => {
        this.liutubiao();
      });
    },
    //流量图表
    liutubiao() {
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("liulang"));
      var option = {
        // backgroundColor: 'rgb(20, 58, 110)',
        color: ["#00CC99"],
        tooltip: {},
        grid: {
          left: "3%",
          right: "5%",
          top: "9%",
          bottom: "8%",
        },
        xAxis: [
          {
            type: "category",
            name: "时间",
            data: [
              "01月",
              "02月",
              "03月",
              "04月",
              "05月",
              "06月",
              "07月",
              "08月",
              "09月",
              "10月",
              "11月",
              "12月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            nameTextStyle: {
              color: "#000",
            },
            axisLine: {
              lineStyle: {
                color: "#000",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#000",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "流量(MB)",
            axisLabel: {
              textStyle: {
                color: "#000",
              },
              formatter: "{value}MB",
            },
            splitLine: {
              lineStyle: {
                color: "#ccc",
              },
            },
            axisLine: {
              show: true,
            },
          },
        ],
        series: [
          {
            type: "bar",
            itemStyle: {
              normal: {
                opacity: 0.7,
              },
            },
            barWidth: "20",
            data: [60, 70, 80, 90, 60, 70, 80, 90, 36, 34, 67, 89],
            markLine: {
              silent: true,
              label: {
                position: "middle",
                formatter: "{b}",
                color: "red",
              },
              data: [
                {
                  name: "日均流量标准",
                  yAxis: 33.03,
                  lineStyle: {
                    color: "red",
                  },
                  itemStyle: {
                    color: "red",
                  },
                  label: {
                    position: "end",
                    formatter: "{b}\n {c}MB",
                  },
                },
              ],
            },
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
    },

    //主列表
    //查看主列表
    getList() {
      this.loading = true;
      let data = {
        comFlag: this.state,
        runFlag: this.teriminalstatus,
        devType: this.teriminal,
      };
      runManage.getList(data).then((response) => {
        if (response.code === "A0000") {
          this.tableData = response.data;
          this.loading = false;
        }
      });

      // this.tableData = response.data
    },

    //批量操作
    handleSelectionChange(val) {
      this.checkIds = val.map((item) => {
        return item.id;
      });
    },
    //  树形表格过滤
    handleTreeData(treeData, searchValue) {
      if (!treeData || treeData.length === 0) {
        return [];
      }
      const array = [];
      for (let i = 0; i < treeData.length; i += 1) {
        let match = false;
        for (let pro in treeData[i]) {
          if (typeof treeData[i][pro] == "string") {
            match = treeData[i][pro].includes(searchValue);
            if (match) break;
          }
        }

        if (
          this.handleTreeData(treeData[i].children, searchValue).length > 0 ||
          match
        ) {
          array.push({
            ...treeData[i],
            children: this.handleTreeData(treeData[i].children, searchValue),
          });
        }
      }
      return array;
    },

    tableBodyScroll({ scrollTop }) {
      this.top = scrollTop;
    },
    selectAll(val) {
      //console.log(val);
    },
    selectable(row, index) {
      if (index === 1) {
        return false;
      } else {
       // console.log(row, index);

        return true;
      }
    },
    // 将过滤好的树形数据展开
    setExpandRow(handleTreeData) {
      if (handleTreeData.length) {
        for (let i of handleTreeData) {
          this.expandRow.push(i.id);
          if (i.children.length) {
            this.setExpandRow(i.children);
          }
        }
      }
    },

    filterNode() {},

    //根据装置id查询装置终端状态
    getStatusManageList() {
      runManage.getStatusManageList(this.checkIds).then((response) => {
        if (response.code === "A0000") {
          this.terminalRunFlag = response.data;
          this.loading = false;
        }
      });
    },

    //根据装置id查询终端流量套餐
    getFlowManageList() {
      runManage.getFlowManageList(this.checkIds).then((response) => {
        if (response.code === "A0000") {
          this.terminalFlowMeal = response.data;
          this.loading = false;
        }
      });
    },
    //根据装置id查询终端流量策略
    getFlowStrategyManageList() {
      runManage.getFlowStrategyManageList(this.checkIds).then((response) => {
        if (response.code === "A0000") {
          this.terminalFlowStrategy = response.data;
          this.loading = false;
        }
      });
    },

    updateDevSubmit(type) {
      if (this.checkIds.length === 0) {
        this.$message.error("参数不可为空");
        return;
      }
      if (type === 0) {
        //运行状态
        if (this.radio === null) {
          this.$message.error("状态不可为空");
          return;
        }
      } else if (type === 1) {
        //装置流量
        if (
          (this.baseMealId === null || this.baseMealId === "") &&
          (this.extendMealId === null || this.extendMealId === "")
        ) {
          this.$message.error("设置套餐不可为空");
          return;
        }
      } else if (type === 2) {
        //装置策略
        if (this.flowStrategyId === null || this.flowStrategyId === "") {
          this.$message.error("流量策略不可为空");
          return;
        }
      }
      this.$confirm("确认提交吗", "提示", {
        confirmButtonText: "确认提交",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (type === 0) {
            //运行状态
            this.updateRunFlagManage();
          } else if (type === 1) {
            //装置流量
            this.updateDevFlowMeal();
          } else if (type === 2) {
            //装置策略
            this.updateDevFlowStrategy();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取提交",
          });
        });
    },
    //批量修改终端状态
    updateRunFlagManage() {
      let data = {
        ids: this.checkIds,
        runFlag: this.radio,
      };
      runManage.updateRunFlagManage(data).then((response) => {
        if (response.code === "A0000") {
          this.getStatusManageList();
          this.$message.success("终端运行状态修改成功!");
        }
      });
    },

    //批量修改终端流量套餐
    updateDevFlowMeal() {
      let data = {
        ids: this.checkIds,
        baseMealId: this.baseMealId,
        extendMealId: this.extendMealId,
      };
      runManage.updateDevFlowMeal(data).then((response) => {
        if (response.code === "A0000") {
          this.getFlowManageList();
          this.$message.success("终端流量套餐修改成功!");
        }
      });
    },

    //批量修改终端流量策略
    updateDevFlowStrategy() {
      let data = {
        ids: this.checkIds,
        flowStrategyId: this.flowStrategyId,
      };
      runManage.updateDevFlowStrategy(data).then((response) => {
        if (response.code === "A0000") {
          this.terminalFlowStrategy = response.data;
          this.loading = false;
          this.getFlowStrategyManageList();
        }
      });
    },

    //设置提交
    submitRun(type) {},

    //获取所有流量套餐
    getFlowMealList() {
      this.baseMealId = "";
      this.extendMealId = "";
      this.baseMealIdList = [];
      this.extendMealIdList = [];
      runManage.getFlowMeal().then((response) => {
        if (response.code === "A0000") {
          let da = response.data;
          if (da.length !== 0) {
            this.extendMealIdList.push({ name: "无", id: "" });
            da.forEach((item) => {
              if (item.type === 0) {
                //基础
                this.baseMealIdList.push(item);
              } else {
                //扩展
                this.extendMealIdList.push(item);
              }
            });
          }
        }
      });
    },

    //获取所有流量监测点
    getFlowStrategyList() {
      this.flowStrategyId = "";
      runManage.getRateOfFlowStrategy().then((response) => {
        if (response.code === "A0000") {
          let da = response.data;
          if (da.length !== 0) {
            this.flowStrategyIdList = response.data;
          }
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
</style>
<style lang="scss" scoped>
body,
html {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
body ::-webkit-scrollbar-thumb {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: rgba(144, 147, 153, 0.5);
}
::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
  //background: $themeColor;
  background: rgb(105, 114, 122);
  color: aliceblue;
}

.selectTr td {
  background: #ccc !important;
  color: red !important;
}
</style> >
