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 = [ ...@@ -85,6 +85,32 @@ export const asyncRoutes = [
85 } 85 }
86 ] 86 ]
87 }, 87 },
88 // 监控统计
89 {
90 path: '/jktj',
91 component: Layout,
92 children: [
93 {
94 path: 'index',
95 component: () => import('@/views/jktj/index'),
96 name: 'jktj',
97 meta: { title: '监控统计', icon: 'zhcx' }
98 }
99 ]
100 },
101 // 接入区域管理
102 {
103 path: '/jrqygl',
104 component: Layout,
105 children: [
106 {
107 path: 'index',
108 component: () => import('@/views/jrqygl/index'),
109 name: 'jrqygl',
110 meta: { title: '接入区域管理', icon: 'zhcx' }
111 }
112 ]
113 },
88 // 接入业务信息 114 // 接入业务信息
89 { 115 {
90 path: '/busineInfo', 116 path: '/busineInfo',
......
1 <template>
2 <div class="jktjDetail form-clues">
3 <el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px">
4 <el-row>
5 <el-col :span="6">
6 <el-form-item label="开始时间">
7 <el-date-picker type="date" :picker-options="pickerOptionsStart" clearable
8 v-model="form.startTime" value-format="yyyy-MM-dd"></el-date-picker>
9 </el-form-item>
10 </el-col>
11 <el-col :span="6">
12 <el-form-item label="结束时间">
13 <el-date-picker clearable :picker-options="pickerOptionsEnd" v-model="form.endTime"
14 value-format="yyyy-MM-dd">
15 </el-date-picker>
16 </el-form-item>
17 </el-col>
18
19 <el-col :span="12" class="btnColRight">
20 <el-button type="default" @click="resetForm"> 重置 </el-button>
21 <el-button type="primary"> 查询 </el-button>
22 </el-col>
23 </el-row>
24 </el-form>
25 <div class="form-clues-content">
26 <div class="echarts-box">
27 <div id="myChart" class="chart"></div>
28 </div>
29 </div>
30 </div>
31 </template>
32
33 <script>
34 export default {
35 name: "jktjDetail",
36 data () {
37 return {
38 // 开始结束日期限制
39 pickerOptionsStart: {
40 disabledDate: (time) => {
41 if (this.form.endTime) {
42 return (
43 time.getTime() >= new Date(this.form.endTime).getTime()
44 );
45 }
46 }
47 },
48 // 结束日期限制
49 pickerOptionsEnd: {
50 disabledDate: (time) => {
51 if (this.form.startTime) {
52 return (
53 time.getTime() <= new Date(this.form.startTime).getTime()
54 );
55 }
56 }
57 },
58 form: {
59 startTime: "",
60 endTime: ""
61 }
62 }
63 },
64 mounted () {
65 this.echartInit();
66 },
67 methods: {
68 resetForm () {
69 this.form = {
70 startTime: "",
71 endTime: ""
72 }
73 },
74 echartInit () {
75 // 基于准备好的dom，初始化echarts实例
76 let myChart = this.$echarts.init(
77 document.getElementById("myChart")
78 );
79 // 绘制图表
80 myChart.setOption({
81 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
82 title: {
83 show: true,
84 text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
85 left: "center",
86 textStyle: {
87 fontSize: 18,
88 lineHeight: 30,
89 height: 60,
90 color: "#777",
91 },
92 },
93 legend: {
94 data: [
95 "接入成功数量",
96 "接入失败数量",
97 "上报成功数量",
98 "上报失败数量",
99 ],
100 top: 80,
101 },
102 tooltip: {
103 show: true,
104 trigger: "axis",
105 },
106 grid: {
107 top: 120,
108 },
109 xAxis: [
110 {
111 type: "category",
112 data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
113 },
114 ],
115 yAxis: [
116 {
117 type: "value",
118 },
119 ],
120 series: [
121 {
122 name: "接入成功数量",
123 type: "bar",
124 data: [1000, 1500, 2000, 500, 4000],
125 },
126 {
127 name: "接入失败数量",
128 type: "bar",
129 data: [900, 500, 3200, 800, 4500],
130 },
131 {
132 name: "上报成功数量",
133 type: "bar",
134 data: [1000, 1500, 2000, 500, 4000],
135 },
136 {
137 name: "上报失败数量",
138 type: "bar",
139 data: [900, 500, 3200, 800, 4500],
140 },
141 ],
142 });
143 },
144 },
145 };
146 </script>
147 <style scoped lang="scss">
148 .jktjDetail {
149 background-color: #fff;
150 height: 100%;
151 display: flex;
152 flex-direction: column;
153
154 .echarts-box {
155 display: flex;
156 justify-content: center;
157 height: 100%;
158
159 .chart {
160 width: 100%;
161 height: 100%;
162 }
163 }
164
165 .form-clues-content {
166 flex: 1;
167 height: 100%;
168 }
169 }
170 </style>
171 <style scoped lang="scss">
172 @import "~@/styles/public.scss";
173 </style>
1 import filter from '@/utils/filter.js'
2 class data extends filter {
3 constructor() {
4 super()
5 }
6 columns () {
7 return [
8 {
9 type: 'selection'
10 },
11 {
12 prop: "jrddm",
13 label: "接入点代码",
14 },
15 {
16 prop: "jrdmc",
17 label: "接入点名称",
18 },
19 {
20 prop: "dlmc",
21 label: "队列名称",
22 },
23 {
24 prop: "ip",
25 label: "ip地址",
26 },
27 {
28 prop: "dk",
29 label: "端口号",
30 },
31 {
32 prop: "fzr",
33 label: "负责人",
34 },
35 {
36 prop: 'status',
37 label: '状态',
38 render: (h, scope) => {
39 return (
40 <div>
41 {
42 scope.row.status
43 ? <el-tag type='warning'>中断</el-tag>
44 : <el-tag type='warning'>中断1</el-tag>
45 }
46 </div>
47 )
48 }
49 },
50 ]
51 }
52 }
53 export default new data()
1 <template>
2 <div class="reportLog from-clues">
3 <div class="from-clues-header">
4 <el-form ref="ruleForm" :model="form" label-width="100px">
5 <el-row>
6 <el-col :span="6">
7 <el-form-item label="负责人" label-width="60px" prop="fzr">
8 <el-input v-model="form.fzr" placeholder="负责人"></el-input>
9 </el-form-item>
10 </el-col>
11 <el-col :span="6">
12 <el-form-item label="接入点名称" prop="jrdmc">
13 <el-select v-model="form.jrdmc" class="width100" clearable placeholder="接入点名称">
14 <el-option v-for="item in []" :key="item.value" :label="item.label" :value="item.value">
15 </el-option>
16 </el-select>
17 </el-form-item>
18 </el-col>
19
20 <el-col :span="12" class="btnColRight">
21 <el-form-item>
22 <el-button type="danger">删除</el-button>
23 <el-button @click="resetForm('ruleForm')">重置</el-button>
24 <el-button type="primary" @click="handleSubmit">查询结果</el-button>
25 </el-form-item>
26 </el-col>
27 </el-row>
28 </el-form>
29 </div>
30 <div class="from-clues-content">
31 <lb-table ref="table" @selection-change="handleSelectionChange" :page-size="pageData.size"
32 :current-page.sync="pageData.current" :total="pageData.total" @size-change="handleSizeChange"
33 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
34 </lb-table>
35 </div>
36 </div>
37 </template>
38
39 <script>
40 import data from "./data"
41 import tableMixin from '@/mixins/tableMixin.js'
42 export default {
43 name: "reportLog",
44 mixins: [tableMixin],
45 data () {
46 return {
47 form: {
48 fzr: '',
49 jrdmc: '',
50 currentPage: 1
51 },
52 rules: {
53 fzr: [
54 { required: true, message: '负责人', trigger: 'change' }
55 ],
56 jrdmc: [
57 { required: true, message: '接入点名称', trigger: 'change' }
58 ]
59 },
60 tableData: {
61 columns: data.columns().concat([
62 {
63 label: "操作",
64 width: '80',
65 render: (h, scope) => {
66 return (
67 <div>
68 <el-button
69 type="text"
70 size="mini"
71 icon="el-icon-edit"
72 style="margin-left: 10px"
73 onClick={() => { this.handleEdit(scope.row) }}
74 >
75 修改
76 </el-button>
77 </div>
78 )
79 }
80 }
81 ]),
82 data: [{}]
83 },
84 pageData: {
85 total: 0,
86 pageSize: 15,
87 },
88 }
89 },
90 methods: {
91 handleSelectionChange (val) {
92
93 },
94 resetForm () {
95 this.$refs.ruleForm.resetFields();
96 },
97 async featchData () {
98 },
99 handleEdit (row) {
100
101 }
102 }
103 }
104 </script>
105 <style scoped lang="scss">
106 @import "~@/styles/public.scss";
107 @import "./index.scss";
108 </style>
109