<!--终端运维-->
<template>
    <div class="pd10">
        <!--终端运维管理 -->
        <el-form v-show="wuser" :inline="true" :model="formInline" class="demo-form-inline forms">
            <el-form-item label="终端型号:">
                <el-select v-model="formInline.devType" 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="formInline.runFlag" 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="formInline.comFlag" 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="formInline.search" placeholder="输入装置相关关键字筛选" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
                <!-- <el-button type="primary" icon="el-icon-download">导出</el-button> -->
                <el-button type="primary" icon="el-icon-success" @click="deviceData">终端状态管理</el-button>
                <el-button type="primary" icon="el-icon-s-order" @click="liuniangconfig">流量套餐配置</el-button>
                <el-button type="primary" icon="el-icon-menu" @click="configliul">流量策略配置</el-button>
                <el-button type="primary" icon="el-icon-s-data" @click="liultjData">流量统计</el-button>
                <el-button type="primary" icon="el-icon-setting" @click="resect">重启前置程序</el-button>
            </el-form-item>
        </el-form>

        <!-- <el-row v-show="wuser" :gutter="10" :style="`height:${vhh}px; overflow: hidden;`"> -->
        <el-select
            v-show="false"
            v-model="ExpandedNum"
            @change="handleExpandNumChange"
            placeholder="选择展开级别"
            size="mini"
            style="left: 0; width: 100px"
        >
            <el-option label="不展开" :value="0"></el-option>
            <el-option label="展开1" :value="1"></el-option>
            <el-option label="展开2" :value="2"></el-option>
            <el-option label="展开3" :value="3"></el-option>
        </el-select>
        <u-table
            stripe
            v-show="wuser"
            border
            header-cell-class-name="table_header"
            v-loading="loading"
            ref="plTreeTable"
            :data="treeTable"
            fixed-columns-roll
            :height="vhh"
            selectTrClass="selectTr"
            :row-height="rowHeight"
            row-id="id"
            @selection-change="handleSelectionChange"
            :expand-row-id="expandID"
            :filter-node-method="filterNode"
            big-data-checkbox
            :treeConfig="{
                children: 'children',
                hasChildren: 'hasChildren',
                iconClose: 'el-icon-arrow-right',
                iconOpen: 'el-icon-arrow-down',
                expandAll: true
            }"
            use-virtual
            @table-body-scroll="tableBodyScroll"
            @select-all="selectAll"
        >
            <template slot="empty">没有查询到符合条件的记录</template>
            <u-table-column :selectable="selected" type="selection" align="center" width="55"></u-table-column>
            <u-table-column
                min-width="200"
                prop="name"
                label="电网拓扑"
                :show-overflow-tooltip="true"
                align="left"
                :treeNode="true"
                width="200"
            ></u-table-column>
            <u-table-column min-width="150" prop="devType" label="终端型号" align="center"></u-table-column>
            <u-table-column min-width="150" prop="version" label="版本信息" align="center"></u-table-column>
            <u-table-column min-width="140" prop="baseFlowMeal" label="基础套餐(MB)" align="center"></u-table-column>
            <u-table-column min-width="140" prop="reamFlowMeal" label="扩展套餐(MB)" align="center"></u-table-column>
            <u-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).toFixed(2)
                                : ''
                        }}
                    </el-tag>
                </template>
            </u-table-column>
            <u-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)) *
                                  100
                              ).toFixed(2)
                            : ''
                    }}
                </template>
            </u-table-column>
            <u-table-column prop="runFlag" label="终端状态" align="center">
                <template slot-scope="scope">
                    <el-tag
                        type="primary"
                        v-if="scope.row.runFlag === 0"
                        style="color: #fff; background: #0099cc"
                        size="small"
                    >
                        投运
                    </el-tag>
                    <el-tag
                        type="primary"
                        v-if="scope.row.runFlag === 1"
                        style="color: #fff; background: #996600"
                        size="small"
                    >
                        热备用
                    </el-tag>
                    <el-tag
                        type="primary"
                        v-if="scope.row.runFlag === 2"
                        style="color: #fff; background: #cc0000"
                        size="small"
                    >
                        停运
                    </el-tag>
                </template>
            </u-table-column>
            <u-table-column prop="comFlag" label="通讯状态" align="center">
                <template slot-scope="scope">
                    <el-tag
                        type="primary"
                        v-if="scope.row.comFlag === 0"
                        style="color: #fff; background: #cc0000"
                        size="small"
                    >
                        中断
                    </el-tag>
                    <el-tag
                        type="primary"
                        v-if="scope.row.comFlag === 1"
                        style="color: #fff; background: #2e8b57"
                        size="small"
                    >
                        正常
                    </el-tag>
                </template>
            </u-table-column>
            <u-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)"
                        icon="el-icon-view"
                    >
                        终端详情
                    </el-button>
                    <el-button
                        v-if="scope.row.level === 4"
                        :disabled="scope.row.state == 1 ? true : false"
                        type="primary"
                        size="mini"
                        icon="el-icon-view"
                        @click="queryview(scope.row)"
                    >
                        流量详情
                    </el-button>
                </template>
            </u-table-column>
        </u-table>

        <!--终端状态管理-->
        <el-dialog
            :close-on-click-modal="false"
            title="终端状态管理"
            class="eldialot"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose"
        >
            <el-row>
                <el-col :span="12">
                    <span style="font-size: 14px; font-weight: bold">终端状态:</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
                header-cell-class-name="table_header"
                :data="terminalRunFlag"
                border
                style="width: 100%; margin-top: 10px"
                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="50%"
            class="eldialot"
            :before-close="handleClose"
        >
            <span style="font-size: 14px; font-weight: bold">基础套餐:</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-size: 14px; font-weight: bold">扩展套餐:</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
                header-cell-class-name="table_header"
                :data="terminalFlowMeal"
                style="width: 100%; margin-top: 10px"
                height="60vh"
                row-key="id"
                highlight-current-row
                border
                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="流量策略配置"
            class="eldialot"
            :visible.sync="condialogVisible"
            width="50%"
            :before-close="handleClose"
        >
            <span style="font-size: 14px; font-weight: bold">流量策略:</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
                header-cell-class-name="table_header"
                :header-cell-style="{
                    height: '25px',
                    padding: '0px'
                }"
                :row-style="{ height: '28px' }"
                :cell-style="{ padding: '0px' }"
                :data="terminalFlowStrategy"
                style="width: 100%; margin-top: 10px"
                height="60vh"
                row-key="id"
                highlight-current-row
                border
                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="流量统计"
            class="eldialot"
            :visible.sync="tjdialogVisible"
            width="80%"
            :before-close="handleClose"
        >
            <el-row>
                <el-col :span="16">
                    <el-form :inline="true">
                        <el-form-item>
                            <Timeinterval ref="interval" :interval="3"></Timeinterval>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="Traffic">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table
                        stripe
                        header-cell-class-name="table_header"
                        :data="TrafficstatisticsData"
                        border
                        :row-config="{ isCurrent: true, isHover: true }"
                        style="width: 100%"
                        height="500px"
                        highlight-current-row
                        :row-class-name="rowClassName"
                    >
                        <el-table-column prop="number" align="center" label="序号" min-width="50"></el-table-column>
                        <el-table-column
                            prop="deviceName"
                            align="center"
                            label="终端名称"
                            min-width="100"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            prop="electricPowerCompany"
                            align="center"
                            label="供电公司"
                            min-width="100"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            prop="substation"
                            align="center"
                            label="变电站"
                            min-width="100"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            prop="deviceIP"
                            align="center"
                            label="IP"
                            min-width="120"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            prop="flowMeal"
                            align="center"
                            label="套餐流量(MB)"
                            min-width="120"
                        ></el-table-column>
                        <el-table-column
                            prop="statisValue"
                            align="center"
                            label="终端统计流量(MB)"
                            min-width="150"
                        ></el-table-column>
                        <el-table-column prop="date" align="center" label="剩余流量(MB)" min-width="120">
                            <template slot-scope="scope">
                                <span>{{ (scope.row.flowMeal - scope.row.statisValue).toFixed(2) }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="8">
                    <div id="celvtj" v-if="flag" class="ml10" style="width: 100%; height: 600px"></div>
                </el-col>
            </el-row>
        </el-dialog>
        <!--使用详情-->
        <el-dialog
            :close-on-click-modal="false"
            title="终端使用详情"
            class="eldialot"
            :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
                        header-cell-class-name="table_header"
                        :header-cell-style="{
                            height: '25px',
                            padding: '0px'
                        }"
                        :row-style="{ height: '28px' }"
                        :cell-style="{ padding: '0px' }"
                        :data="logtableData"
                        border
                        style="width: 100%; margin-top: 10px"
                        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">
                <el-form :inline="true">
                    <el-form-item>
                        <Timeinterval ref="queryview" :interval="3"></Timeinterval>
                    </el-form-item>
                    <el-form-item label="统计类型:">
                        <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>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="ml10" icon="el-icon-search" @click="TrafficQuery">
                            查询
                        </el-button>
                    </el-form-item>
                    <el-form-item style="float: right">
                        <!-- <el-button type="primary" @click="back">返回</el-button> -->
                        <svg-icon class="back" icon-class="back" @click="back" />
                    </el-form-item>
                    <!-- <span style="font-weight: ; font-size: 14px">统计类型:</span> -->
                </el-form>
            </el-col>
            <el-col :span="24" style="margin-right: 30%">
                <el-checkbox-group v-model="checkedCities" :min="0" :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="TrafficDetails"
                    header-cell-class-name="table_header"
                    height="125"
                    border
                    class="mb10"
                    style="width: 100%; margin-top: 10px"
                    highlight-current-row
                >
                    <el-table-column prop="month" align="center" label="月份" width="88"></el-table-column>
                    <el-table-column prop="flowMeal" align="center" label="套餐流量"></el-table-column>
                    <el-table-column prop="statisValue" align="center" label="运营商统计流量(MB)">
                        <template slot-scope="scope">
                            <span>{{ scope.row.statisValue == null ? '/' : scope.row.statisValue }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="actualValue" align="center" label="系统统计量(MB)">
                        <template slot-scope="scope">
                            {{ scope.row.actualValue.toFixed(2) }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template>
                            <el-button type="primary" size="mini" @click="pathJump">流量套餐配置</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div id="details">
                    <div v-show="DailyaccumulationEcharts" id="liulang" ref="fg" style="width: 100%"></div>
                </div>
                <div id="details1">
                    <div v-show="MonthlycumulativeEcharts" id="liulanghe" ref="fg" style="width: 100%"></div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import runManage from '@/api/device/runManger.js'
import yan from '@/assets/commjs/color'
import { dicData } from '@/assets/commjs/dictypeData'
import Timeinterval from '@/views/components/Timeinterval.vue'
export default {
    name: 'operationmage',
    components: {
        Timeinterval
    },
    data() {
        return {
            ExpandedNum: 3,
            formInline: {
                devType: '',
                comFlag: '',
                runFlag: '',
                search: ''
            },
            item: ['', ''],
            zoom: '', //图表焦点校验
            twoheight: '',
            radio3: '日累计',
            myChartes: '',
            myChartes1: '',
            dialogVisible: false,
            prodialogVisible: false,
            liudialogVisible: false,
            condialogVisible: false,
            tjdialogVisible: false,
            dialogVisiblexq: false,
            terminalRunFlag: [],
            terminalFlowMeal: [],
            terminalFlowStrategy: [],
            baseMealId: '',
            baseMealIdList: [],
            extendMealId: '',
            extendMealIdList: [],
            flowStrategyId: '',
            flowStrategyIdList: [],
            vh: undefined,
            vhh: undefined,
            flag: false,
            wuser: true,
            user: false,
            DailyaccumulationEcharts: true,
            MonthlycumulativeEcharts: false,
            title: '',
            protitle: '',
            device: 1,
            radio: '',
            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,
            expandID: [],
            search: '',
            tableData: [],
            checkIds: [],
            //弹窗列表
            logtableData: [],
            TrafficDetails: [],
            TrafficstatisticsData: [],
            status: '',
            rowId: '',
            //进度条对象
            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
            },
            cityData: [],
            cities: [],
            checkedCities: []
        }
    },
    computed: {
        treeTable: function () {
            var searchValue = this.formInline.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.expandID = this.expandID.join(',').split(',')
                return handleTreeData
            }
            return this.tableData
        }
    },
    created() {
        this.getDevType()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.resizeEchartDaily()
        this.resizeEchartMonth()

        // this.vh =window.sessionStorage.getItem('appheight') - 125 + "px";
        window.addEventListener('resize', () => {
            if (this.myChartes !== '') {
                this.myChartes.resize()
            } else if (this.myChartes1 !== '') {
                this.myChartes1.resize()
            }
        })
        this.getList()
    },

    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') / 2 - 315
            this.vhh = window.sessionStorage.getItem('appheight') - 55
        },
        pathJump() {
            this.$router.push('/BusinessAdministrator/management/PlanTraffic')
        },
        //判断需要展开层级
        handleExpandNumChange() {
            if (this.ExpandedNum > 0) {
                this.setExpandKeys(this.tableData)
            }
        },
        //层级展开递归方法
        setExpandKeys(dataList, n) {
            if (!n) n = 1
            for (let i = 0; i < dataList.length; i++) {
                if (n <= this.ExpandedNum) {
                    //this.expandID=[]
                    this.expandID.push(`${dataList[i].id}`)
                    if (dataList[i].hasOwnProperty('children')) {
                        const children = dataList[i].children
                        this.setExpandKeys(children, n + 1)
                    }
                }
            }
        },
        //获取所有终端型号
        getDevType() {
            var code = 'Dev_Type'
            this.teriminaloption = dicData(code, [], 1)
            this.cityData = dicData('Dev_Fun', [])
            this.cityData.forEach(item => {
                this.cities.push(item.name)
            })
        },
        selected(row, index) {
            if (row.level !== 4) {
                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() {},
        //序号
        rowClassName({ row, rowIndex }) {
            row.number = rowIndex + 1
        },
        //流量统计触发事件
        liultjData() {
            this.tjdialogVisible = true
            this.flag = true
            // this.$refs.interval.timeOptions = [
            //     { label: "年份", value: 1 },
            //   ]
            // this.item = this.$refs.interval.timeValue;
            // let data = {
            //   devId: this.checkIds[0],
            //   searchBeginTime: this.item[0],
            //   searchEndTime: this.item[1],
            // };
            // runManage.getMonthFlow(data).then((res) => {

            // });
            setTimeout(() => {
                this.Traffic()
            }, 100)
        },
        //流量查询
        Traffic() {
            this.$refs.interval.timeOptions = [{ label: '月份', value: 3 }]
            this.item = this.$refs.interval.timeValue
            let data = {
                searchBeginTime: this.item[0],
                searchEndTime: this.item[1]
            }
            runManage.getMonthFlow(data).then(res => {
                this.TrafficstatisticsData = res.data
                this.$nextTick(() => {
                    this.tubiao()
                })
            })
        },
        //获取图表
        tubiao() {
            const echarts = require('echarts')
            var myChartes = echarts.init(document.getElementById('celvtj'))
            let xData = []
            let flowMeal = []
            let statisValue = []
            let echartsData = this.TrafficstatisticsData.slice(0, 10)
            echartsData.forEach(item => {
                xData.push(item.deviceName)
                flowMeal.push(item.flowMeal)
                statisValue.push(item.statisValue)
            })
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            var option = {
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLine: { show: true },
                    axisLabel: {
                        // padding: [0, 10, 0, 10],
                        interval: 0,
                        rotate: 45,
                        textStyle: {
                            fontFamily: yan.EchartObject.fontFamily,
                            color: echartsColor.WordColor,
                            fontSize: yan.EchartObject.xNamefontSize
                        }
                    }
                },
                yAxis: {
                    name: 'M',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor,
                        fontSize: yan.EchartObject.xNamefontSize
                    }
                },
                grid: yan.EchartObject.gridb,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    formatter: function (params) {
                        // console.log(params);
                        var tips = ''
                        for (var i = 0; i < echartsData.length; i++) {
                            if (echartsData[i].deviceName == params[0].name) {
                                tips += echartsData[i].substation + '_' + params[0].name + '</br/>'
                            }
                        }
                        for (var i = 0; i < params.length; i++) {
                            tips += params[i].seriesName + ':' + '&nbsp' + '&nbsp' + '&nbsp' + params[i].value + '<br/>'
                        }
                        return tips
                    }
                },
                legend: {
                    right: 40,
                    top: 5,
                    data: ['套餐总量', '流量使用量'],
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },
                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                // title: {
                //   text: "",
                //   // "subtext": "（单位：M)",
                //   textStyle: {
                //     color: "black",
                //     fontSize: 20,
                //   },
                //   subtextStyle: {
                //     color: "#a0a0a0",
                //     fontSize: 15,
                //   },
                //   left: "3%",
                //   top: "0%",
                // },
                series: [
                    {
                        name: '套餐总量',
                        data: flowMeal,
                        type: 'bar',
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        barGap: '-100%',
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 10,
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            }
                        },
                        itemStyle: {
                            normal: { show: true, color: '#33CCCC' }
                        }
                    },
                    {
                        name: '流量使用量',
                        data: statisValue,
                        type: 'bar',
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        label: {
                            show: true,
                            position: 'top',
                            fontSize: 10,
                            textStyle: {
                                //数值样式
                                color: echartsColor.WordColor
                            }
                        },
                        itemStyle: {
                            normal: { show: true, color: '#FF6600' }
                        }
                    }
                ]
            }
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            setTimeout(() => {
                myChartes.resize()
            }, 0)
        },
        //关闭
        handleClose() {
            ;(this.dialogVisible = false),
                (this.prodialogVisible = false),
                (this.liudialogVisible = false),
                (this.condialogVisible = false),
                (this.tjdialogVisible = false),
                (this.dialogVisiblexq = false)
            this.getList()
        },
        //重启前置
        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
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            var option = {
                backgroundColor: '#fff',
                title: {
                    text: name + '性能详情',
                    left: '45%',
                    top: '0',
                    textStyle: {
                        color: echartsColor.WordColor,
                        fontSize: yan.EchartObject.titleNamefontSize1,
                        fontWeight: '400'
                    }
                },
                color: ['#5B8FF9', '#FFA18E', '#5AD8A6'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        },
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                grid: yan.EchartObject.grid1,
                legend: {
                    data: ['cpu使用率', '内存使用率', '磁盘使用率'],
                    left: '50px',
                    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: echartsColor.WordColor
                    },
                    itemWidth: 10,
                    itemHeight: 10
                },
                xAxis: {
                    type: 'time',
                    name: '时间',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            fontFamily: yan.EchartObject.fontFamily,
                            color: echartsColor.WordColor,
                            fontSize: yan.EchartObject.xNamefontSize
                        },
                        rotate: 0
                    },
                    axisTick: {
                        show: true,
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    max: '100',
                    name: '%',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    // 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: {
                        textStyle: {
                            color: echartsColor.WordColor,
                            fontSize: yan.EchartObject.xNamefontSize
                        }
                    },
                    splitLine: {
                        show: true
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    }
                },
                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) {
            if (val == '日累计') {
                this.DailyaccumulationEcharts = true
                this.MonthlycumulativeEcharts = false
            } else if (val == '月累计') {
                this.DailyaccumulationEcharts = false
                this.MonthlycumulativeEcharts = true
            }
        },
        //返回
        back() {
            if (this.user) {
                this.user = false
                this.wuser = true
            } else {
                this.user = true
                this.wuser = false
            }
        },
        //流量详情
        queryview(row) {
            this.rowId = row.id
            this.titleName = row.devType
            this.wuser = false
            this.user = true
            this.$refs.queryview.timeOptions = [
                // { label: "年份", value: 1 },
                // { label: "季度", value: 2 },
                { label: '月份', value: 3 }
                // { label: "周", value: 4 }
                // { label: "自定义", value: 5 },
            ]
            this.TrafficQuery()
        },
        //流量查询
        TrafficQuery() {
            this.checkedCities = []
            this.item = this.$refs.queryview.timeValue
            let data = {
                devId: this.rowId,
                searchBeginTime: this.item[0],
                searchEndTime: this.item[1]
            }
            runManage.getFlowManageDetail(data).then(res => {
                this.TrafficDetails = res.data
                this.$nextTick(() => {
                    this.Dailyaccumulation()
                    this.Monthlycumulative()
                })
                this.TrafficDetails[0].functions.forEach(item => {
                    this.cityData.forEach(node => {
                        if (item.fucName == node.id) {
                            item.fucName = node.name
                            this.checkedCities.push(item.fucName)
                        }
                    })
                })
            })
        },
        //流量图表
        Dailyaccumulation() {
            const echarts = require('echarts')
            let domID1 = document.getElementById('liulang')
            this.myChartes = echarts.init(domID1, null, { renderer: 'svg' })
            setTimeout(() => {
                domID1.style.width = window.sessionStorage.getItem('details') + 'px'
                domID1.style.height = window.sessionStorage.getItem('appheight') - 210 + 'px'
            }, 0)
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let date = []
            let dailyActualValue = []
            this.TrafficDetails[0].deviceDayFlowsList.forEach(item => {
                date.push(item.date)
                dailyActualValue.push(item.dailyActualValue)
            })
            this.myChartes.clear()
            var option = {
                // backgroundColor: 'rgb(20, 58, 110)',
                // color: ["#00CC99"],
                title: {
                    text: this.titleName + '日流量使用',
                    y: '20px',
                    x: 'center',
                    textStyle: {
                        fontSize: yan.EchartObject.titleNamefontSize,
                        color: echartsColor.WordColor
                    }
                },
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)'
                },
                grid: yan.EchartObject.grida,
                dataZoom: yan.EchartObject.dataZoom,
                xAxis: [
                    {
                        type: 'category',
                        name: '时间',
                        data: date,
                        // axisTick: {
                        //   alignWithLabel: true,
                        // },
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.WordColor
                            }
                        },
                        axisLabel: {
                            // interval:0,
                            textStyle: {
                                fontFamily: yan.EchartObject.fontFamily,
                                color: echartsColor.WordColor,
                                fontSize: yan.EchartObject.xNamefontSize
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '流量(MB)',
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        axisLabel: {
                            textStyle: {
                                color: echartsColor.WordColor,
                                fontSize: yan.EchartObject.xNamefontSize
                            },
                            formatter: '{value}MB'
                        },
                        splitLine: {
                            lineStyle: {
                                color: echartsColor.thread,
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                opacity: 0.7,
                                show: true,
                                color: echartsColor.FigureColor[0]
                            }
                        },
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        data: dailyActualValue,
                        label: {
                            show: true,
                            position: 'top',
                            // distance: 10,
                            color: echartsColor.WordColor
                        },
                        markLine: {
                            silent: true,
                            label: {
                                position: 'middle',
                                formatter: '{b}',
                                color: yan.ColorObject.Integrity3
                            },
                            data: [
                                {
                                    name: '日均流量标准',
                                    yAxis: 33.03,
                                    lineStyle: {
                                        color: yan.ColorObject.Integrity3
                                    },
                                    itemStyle: {
                                        color: yan.ColorObject.Integrity3
                                    },
                                    label: {
                                        position: 'end',
                                        formatter: '{b}\n {c}MB'
                                    }
                                }
                            ]
                        }
                    }
                ]
            }
            this.myChartes.setOption(option)
            window.echartsArr.push(this.myChartes)
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.fg, element => {
                _this.$nextTick(() => {
                    //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
                    ;(domID1.style.width = document.getElementById('details').offsetWidth - 0 + 'px'),
                        _this.myChartes.resize()
                })
            })
        },
        resizeEchartDaily() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('details'), element => {
                let domeId = document.getElementById('details')
                let domeId2 = document.getElementById('liulang')
                domeId2.style.width = domeId.offsetWidth - 0 + 'px'
                // this.$nextTick(() => {
                if (this.myChartes !== '') {
                    this.myChartes.resize()
                }
                // });
            })
        },
        Monthlycumulative() {
            const echarts = require('echarts')
            let domID1 = document.getElementById('liulanghe')
            this.myChartes1 = echarts.init(domID1, null, { renderer: 'svg' })
            setTimeout(() => {
                domID1.style.width = window.sessionStorage.getItem('details1') + 'px'
                domID1.style.height = window.sessionStorage.getItem('appheight') - 210 + 'px'
            }, 0)
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let date = []
            let dailyActualValue = []
            // this.TrafficDetails[0].deviceDayFlowsList.forEach((item) => {
            //   date.push(item.date);
            //   dailyActualValue.push(item.dailyActualValue);
            // });
            let echartsData = this.TrafficDetails[0].deviceDayFlowsList
            let result = 0
            for (let i = 0; i < echartsData.length; i++) {
                date.push(echartsData[i].date)
                result += echartsData[i].dailyActualValue
                dailyActualValue.push(result.toFixed(2))
            }
            this.myChartes1.clear()
            var option = {
                // backgroundColor: 'rgb(20, 58, 110)',
                // color: ["#00CC99"],
                title: {
                    text: this.titleName + '月流量累计',
                    y: '20px',
                    x: 'center',
                    textStyle: {
                        fontSize: yan.EchartObject.titleNamefontSize,
                        color: echartsColor.WordColor
                    }
                },
                tooltip: {
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)'
                },
                grid: yan.EchartObject.grida,
                dataZoom: yan.EchartObject.dataZoom,
                xAxis: [
                    {
                        type: 'category',
                        name: '时间',
                        data: date,
                        axisTick: {
                            alignWithLabel: true
                        },
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.WordColor
                            }
                        },
                        axisLabel: {
                            // interval:0,
                            textStyle: {
                                fontFamily: yan.EchartObject.fontFamily,
                                color: echartsColor.WordColor,
                                fontSize: yan.EchartObject.xNamefontSize
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '流量(MB)',
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        axisLabel: {
                            textStyle: {
                                color: echartsColor.WordColor,
                                fontSize: yan.EchartObject.xNamefontSize
                            },
                            formatter: '{value}MB'
                        },
                        splitLine: {
                            lineStyle: {
                                color: echartsColor.thread,
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        type: 'line',
                        symbol: 'circle',
                        symbolSize: 10,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    fontSize: 10
                                },
                                opacity: 0.7,
                                show: true,
                                color: echartsColor.FigureColor[0]
                            }
                        },
                        showSymbol: true,
                        data: dailyActualValue
                    }
                ]
            }
            this.myChartes1.setOption(option)
            window.echartsArr.push(this.myChartes1)
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.fg, element => {
                _this.$nextTick(() => {
                    //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
                    ;(domID1.style.width = document.getElementById('details1').offsetWidth - 0 + 'px'),
                        _this.myChartes1.resize()
                })
            })
        },
        resizeEchartMonth() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('details1'), element => {
                let domeId = document.getElementById('details1')
                let domeId2 = document.getElementById('liulanghe')
                domeId2.style.width = domeId.offsetWidth - 0 + 'px'
                // this.$nextTick(() => {
                if (this.myChartes !== '') {
                    this.myChartes1.resize()
                }
                // });
            })
        },

        //主列表
        //查看主列表
        getList() {
            this.loading = true
            runManage.getList(this.formInline).then(response => {
                if (response.code === 'A0000') {
                    this.tableData = response.data
                    this.loading = false
                }
                this.handleExpandNumChange()
            })
        },

        //批量操作
        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.expandID.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.getList();
                    this.$message.success('终端运行状态修改成功!')
                }
                // this.dialogVisible = false
            })
        },

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

        //批量修改终端流量策略
        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()
                    // this.getList();
                    this.$message.success('终端流量策略修改成功!')
                }
                // this.condialogVisible = false
            })
        },

        //设置提交
        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');
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
    height: 32px;
}
::v-deep .forms {
    .el-select {
        width: 150px;
    }
    .el-input__inner {
        width: 150px;
    }
}
</style>
<style lang="scss" scoped>
// ::v-deep .table_header {
//   height: 35px !important;
// }
// ::v-deep .has-gutter {
//   height: 35px !important;
// }

.back {
    font-size: 29px;
    line-height: 32px;
    color: $themeColor;
    cursor: pointer;
    &:hover {
        color: $themeColor;
        opacity: 0.9;
    }
}
</style>
