298 lines
11 KiB
Vue
298 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<div class="Top" ref="top">
|
|
<div class="pd10">
|
|
<el-form :inline="true" :model="form" class="demo-form-inline">
|
|
<div style="display: flex">
|
|
<el-form-item label="筛选">
|
|
<el-input v-model="i" placeholder="请输入内容"></el-input>
|
|
</el-form-item>
|
|
|
|
<div style="display: flex; justify-content: space-between; flex-grow: 1">
|
|
<el-form-item>
|
|
<el-button type="primary" class="ml10" icon="el-icon-search" @click="steady">
|
|
查询
|
|
</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" class="ml10" @click="add">新增</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
<el-table
|
|
stripe
|
|
:data="totalData"
|
|
:height="height"
|
|
border
|
|
v-loading="isLoading"
|
|
style="width: 100%"
|
|
header-cell-class-name="table_header"
|
|
>
|
|
<el-table-column prop="point" label="套餐名"></el-table-column>
|
|
<el-table-column prop="point" label="套餐流量(MB)"></el-table-column>
|
|
<el-table-column prop="point" label="修改人"></el-table-column>
|
|
<el-table-column prop="point" label="修改时间"></el-table-column>
|
|
<el-table-column label="类型">
|
|
<template slot-scope="scope">
|
|
<el-tag @click="cha(scope.row)">{{ scope.row.point }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="类型">
|
|
<template slot-scope="scope">
|
|
<el-tag @click="cha(scope.row)">{{ scope.row.point }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">
|
|
编辑
|
|
</el-button>
|
|
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
title="编辑"
|
|
:visible.sync="dialogVisible"
|
|
width="20%"
|
|
:before-close="handleClose"
|
|
>
|
|
<el-form ref="form" :model="form" label-width="130px" :inline="true" class="demo-form-inline">
|
|
<el-form-item label="套餐名称:" style="margin-top: 20px">
|
|
<el-input v-model="form.name" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="套餐流量:" style="margin-top: 20px">
|
|
<el-input v-model="form.type" clearable></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="套餐类型:" style="margin-top: 20px">
|
|
<el-select v-model="value" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="二级类型:" style="margin-top: 20px">
|
|
<el-select v-model="value" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
title="新增"
|
|
:visible.sync="dialogVisible1"
|
|
width="20%"
|
|
:before-close="handleClose"
|
|
>
|
|
<el-form ref="form" :model="form" label-width="130px" :inline="true" class="demo-form-inline">
|
|
<el-form-item label="套餐名称:" style="margin-top: 20px">
|
|
<el-input v-model="form.name" clearable></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="套餐流量:" style="margin-top: 20px">
|
|
<el-input v-model="form.type" clearable></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="套餐类型:" style="margin-top: 20px">
|
|
<el-select v-model="value" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="二级类型:" style="margin-top: 20px">
|
|
<el-select v-model="value" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
|
<el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Area from '@/views/components/Area/Area.vue'
|
|
import { figure, serial, diagram, monthly } from './indicatorClassification.js'
|
|
import { viewheight } from '@/assets/commjs/common'
|
|
import { Classification } from './indicatorClassification.js'
|
|
import Timslot from './Timeslot.vue'
|
|
export default {
|
|
components: { Area, Timslot },
|
|
data() {
|
|
return {
|
|
i: '',
|
|
vh1: '',
|
|
dialogVisible: false,
|
|
dialogVisible1: false,
|
|
options: [
|
|
{
|
|
value: '选项1',
|
|
label: '电铁'
|
|
},
|
|
{
|
|
value: '选项2',
|
|
label: '换流站'
|
|
},
|
|
{
|
|
value: '选项3',
|
|
label: '风电'
|
|
},
|
|
{
|
|
value: '选项4',
|
|
label: '光伏'
|
|
},
|
|
{
|
|
value: '选项5',
|
|
label: '其他非线性负荷'
|
|
},
|
|
{
|
|
value: '选项6',
|
|
label: '敏感重要高危用户'
|
|
},
|
|
{
|
|
value: '选项7',
|
|
label: '变电站'
|
|
},
|
|
{
|
|
value: '选项8',
|
|
label: '跨省关口'
|
|
},
|
|
{
|
|
value: '选项9',
|
|
label: '其他'
|
|
}
|
|
],
|
|
value: '',
|
|
form: {
|
|
date: ''
|
|
},
|
|
height: null,
|
|
isLoading: false,
|
|
//稳态指标超标统计
|
|
|
|
totalData: [{ point: 1111 }],
|
|
|
|
active_active: 'first-first',
|
|
zoom: undefined, //图表焦点校验
|
|
vh: '',
|
|
height: 265,
|
|
device: '',
|
|
getHeight: '',
|
|
tabPosition: 'top',
|
|
active: 'first',
|
|
isLoading: false,
|
|
isLoading2: false,
|
|
isLoading3: false,
|
|
isLoading4: false,
|
|
serialData: []
|
|
}
|
|
},
|
|
created() {
|
|
this.account()
|
|
this.steady()
|
|
},
|
|
mounted() {
|
|
this.setHeight()
|
|
window.addEventListener('resize', this.setHeight)
|
|
setTimeout(() => {
|
|
this.getHeight = Number(this.$refs.getHeight.offsetHeight - 45)
|
|
}, 0)
|
|
//echarts图表调用
|
|
|
|
this.zoom = 1 / document.body.style.zoom
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.setHeight)
|
|
},
|
|
methods: {
|
|
setHeight() {
|
|
this.vh1 = window.sessionStorage.getItem('appheight') - 20 + 'px'
|
|
this.device = window.devicePixelRatio
|
|
this.height = window.sessionStorage.getItem('appheight') - 175 + 'px'
|
|
this.vh = (viewheight() - 90) / 2 + 'px'
|
|
this.zoom = 1 / document.body.style.zoom
|
|
},
|
|
add() {
|
|
this.dialogVisible1 = true
|
|
},
|
|
handleClose() {
|
|
this.dialogVisible = false
|
|
this.dialogVisible1 = false
|
|
},
|
|
handleEdit(val) {
|
|
this.dialogVisible = true
|
|
// console.log(val, "valvalval");
|
|
},
|
|
cellStyle(row, column, rowIndex, columnIndex) {
|
|
// console.log(row);
|
|
if (row.columnIndex == 2 || row.columnIndex == 3 || row.columnIndex == 4 || row.columnIndex == 5) {
|
|
return 'font-weight: 600;'
|
|
}
|
|
},
|
|
//监测终端统计echarts图表
|
|
|
|
//方法调用台账统计数据接口
|
|
account() {
|
|
this.isLoading = true
|
|
this.isLoading2 = true
|
|
//监测终端统计单位表格数据
|
|
Classification().then(res => {
|
|
this.isLoading = false
|
|
this.serialData = res.data
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import url('../../../../styles/comStyle.less');
|
|
::v-deep .el-table .cell {
|
|
text-align: center;
|
|
}
|
|
::v-deep .el-tabs--border-card > .el-tabs__content {
|
|
padding: 10px;
|
|
}
|
|
.prop {
|
|
font-weight: 600;
|
|
}
|
|
::v-deep .el-table__body-wrapper.is-scrolling-none {
|
|
height: 227px !important;
|
|
}
|
|
</style>
|