Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
1cd8460f by 任超
Options

feat:接入区域管理

1 parent 27b66d96
Inline Side-by-side
Showing 5 changed files with 361 additions and 0 deletions
......@@ -85,6 +85,32 @@ export const asyncRoutes = [
}
]
},
// 监控统计
{
path: '/jktj',
component: Layout,
children: [
{
path: 'index',
component: () => import('@/views/jktj/index'),
name: 'jktj',
meta: { title: '监控统计', icon: 'zhcx' }
}
]
},
// 接入区域管理
{
path: '/jrqygl',
component: Layout,
children: [
{
path: 'index',
component: () => import('@/views/jrqygl/index'),
name: 'jrqygl',
meta: { title: '接入区域管理', icon: 'zhcx' }
}
]
},
// 接入业务信息
{
path: '/busineInfo',
......
<template>
<div class="jktjDetail form-clues">
<el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px">
<el-row>
<el-col :span="6">
<el-form-item label="开始时间">
<el-date-picker type="date" :picker-options="pickerOptionsStart" clearable
v-model="form.startTime" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="结束时间">
<el-date-picker clearable :picker-options="pickerOptionsEnd" v-model="form.endTime"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12" class="btnColRight">
<el-button type="default" @click="resetForm"> 重置 </el-button>
<el-button type="primary"> 查询 </el-button>
</el-col>
</el-row>
</el-form>
<div class="form-clues-content">
<div class="echarts-box">
<div id="myChart" class="chart"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "jktjDetail",
data () {
return {
// 开始结束日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return (
time.getTime() >= new Date(this.form.endTime).getTime()
);
}
}
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return (
time.getTime() <= new Date(this.form.startTime).getTime()
);
}
}
},
form: {
startTime: "",
endTime: ""
}
}
},
mounted () {
this.echartInit();
},
methods: {
resetForm () {
this.form = {
startTime: "",
endTime: ""
}
},
echartInit () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(
document.getElementById("myChart")
);
// 绘制图表
myChart.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
title: {
show: true,
text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
left: "center",
textStyle: {
fontSize: 18,
lineHeight: 30,
height: 60,
color: "#777",
},
},
legend: {
data: [
"接入成功数量",
"接入失败数量",
"上报成功数量",
"上报失败数量",
],
top: 80,
},
tooltip: {
show: true,
trigger: "axis",
},
grid: {
top: 120,
},
xAxis: [
{
type: "category",
data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "接入成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "接入失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
{
name: "上报成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "上报失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
],
});
},
},
};
</script>
<style scoped lang="scss">
.jktjDetail {
background-color: #fff;
height: 100%;
display: flex;
flex-direction: column;
.echarts-box {
display: flex;
justify-content: center;
height: 100%;
.chart {
width: 100%;
height: 100%;
}
}
.form-clues-content {
flex: 1;
height: 100%;
}
}
</style>
<style scoped lang="scss">
@import "~@/styles/public.scss";
</style>
import filter from '@/utils/filter.js'
class data extends filter {
constructor() {
super()
}
columns () {
return [
{
type: 'selection'
},
{
prop: "jrddm",
label: "接入点代码",
},
{
prop: "jrdmc",
label: "接入点名称",
},
{
prop: "dlmc",
label: "队列名称",
},
{
prop: "ip",
label: "ip地址",
},
{
prop: "dk",
label: "端口号",
},
{
prop: "fzr",
label: "负责人",
},
{
prop: 'status',
label: '状态',
render: (h, scope) => {
return (
<div>
{
scope.row.status
? <el-tag type='warning'>中断</el-tag>
: <el-tag type='warning'>中断1</el-tag>
}
</div>
)
}
},
]
}
}
export default new data()
<template>
<div class="reportLog from-clues">
<div class="from-clues-header">
<el-form ref="ruleForm" :model="form" label-width="100px">
<el-row>
<el-col :span="6">
<el-form-item label="负责人" label-width="60px" prop="fzr">
<el-input v-model="form.fzr" placeholder="负责人"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="接入点名称" prop="jrdmc">
<el-select v-model="form.jrdmc" class="width100" clearable placeholder="接入点名称">
<el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" class="btnColRight">
<el-form-item>
<el-button type="danger">删除</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
<el-button type="primary" @click="handleSubmit">查询结果</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div class="from-clues-content">
<lb-table ref="table" @selection-change="handleSelectionChange" :page-size="pageData.size"
:current-page.sync="pageData.current" :total="pageData.total" @size-change="handleSizeChange"
@p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
</lb-table>
</div>
</div>
</template>
<script>
import data from "./data"
import tableMixin from '@/mixins/tableMixin.js'
export default {
name: "reportLog",
mixins: [tableMixin],
data () {
return {
form: {
fzr: '',
jrdmc: '',
currentPage: 1
},
rules: {
fzr: [
{ required: true, message: '负责人', trigger: 'change' }
],
jrdmc: [
{ required: true, message: '接入点名称', trigger: 'change' }
]
},
tableData: {
columns: data.columns().concat([
{
label: "操作",
width: '80',
render: (h, scope) => {
return (
<div>
<el-button
type="text"
size="mini"
icon="el-icon-edit"
style="margin-left: 10px"
onClick={() => { this.handleEdit(scope.row) }}
>
修改
</el-button>
</div>
)
}
}
]),
data: [{}]
},
pageData: {
total: 0,
pageSize: 15,
},
}
},
methods: {
handleSelectionChange (val) {
},
resetForm () {
this.$refs.ruleForm.resetFields();
},
async featchData () {
},
handleEdit (row) {
}
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
@import "./index.scss";
</style>