提交
This commit is contained in:
297
src/views/BusinessAdministrator/management/Extension/Census.vue
Normal file
297
src/views/BusinessAdministrator/management/Extension/Census.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user