Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
2061f67a by 田浩浩
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcjg-web

2 parents 63c19846 1f639c9c
Expand all
Inline Side-by-side
Showing 6 changed files with 439 additions and 297 deletions
...@@ -264,7 +264,10 @@ table td { ...@@ -264,7 +264,10 @@ table td {
264 display: none; 264 display: none;
265 } 265 }
266 // 时间选择框样式 266 // 时间选择框样式
267 .el-date-picker { 267 .el-date-picker{
268 .el-date-table td.disabled div{
269 background-color:#074487;
270 }
268 background-color: #031a46; 271 background-color: #031a46;
269 .el-date-picker__header-label{ 272 .el-date-picker__header-label{
270 color:#A6CFD6; 273 color:#A6CFD6;
...@@ -273,9 +276,7 @@ table td { ...@@ -273,9 +276,7 @@ table td {
273 background-color:#074487; 276 background-color:#074487;
274 .disabled{ 277 .disabled{
275 background-color:#074487; 278 background-color:#074487;
276 .el-date-table td.disabled div{ 279
277 background-color:#074487;
278 }
279 } 280 }
280 } 281 }
281 282
...@@ -301,6 +302,83 @@ table td { ...@@ -301,6 +302,83 @@ table td {
301 302
302 } 303 }
303 304
305 // 时间选择框2
306
307
308 .el-date-range-picker{
309 .el-date-range-picker__time-header > .el-icon-arrow-right{
310 color:#E3F1FF;;
311 }
312 background-color: #074487;
313 color: #fff;
314 .el-input__inner{
315 background: color #074487;
316 }
317
318 .el-input__inner{
319 background-color: #074487;
320 }
321 .el-input.is-disabled .el-input__inner{
322 background-color: #074487;
323 }
324 .el-date-range-picker__time-header{
325 background-color: #031a46;
326 }
327 .el-picker-panel__footer{
328 background-color: #031a46;
329 }
330 .el-time-panel{
331 background-color: #074487!important;
332 color: #E3F1FF;
333 }
334 .el-picker-panel__icon-btn{
335 color:#E3F1FF;
336 }
337 .el-date-table th{
338 color:#E3F1FF;
339 }
340 .el-time-spinner__item{
341 color: #E3F1FF;
342 }
343 .el-time-spinner__item.active:not(.disabled){
344 color: #fff;
345 }
346 .el-time-panel__btn{
347 color:#0F93F6;
348 }
349 .el-time-panel__btn.confirm{
350 width: 50px;
351 height: 25px;
352 line-height: 25px;
353 border-radius: 3px;
354 background-color: #fff;
355 }
356 .el-time-panel__footer{
357 background-color: #031a46;
358 }
359 .el-date-table td.in-range div{
360 background-color: #031a46;
361 }
362 .el-date-table td.start-date span, .el-date-table td.end-date span{
363 background-color: #074487;
364 // border:1px solid saddlebrown;
365 box-shadow: inset 0 0 7px #02D9FD;
366 border: 1px solid #02D9FD;
367 }
368 }
369 .el-date-editor{
370
371 .el-range-separator{
372 color: #E3F1FF;
373 }
374 .el-range-input{
375 background:none !important;
376 color: #fff;
377 }
378
379
380 }
381
304 382
305 383
306 384
......
...@@ -196,4 +196,4 @@ ...@@ -196,4 +196,4 @@
196 .btnColRight { 196 .btnColRight {
197 box-sizing: border-box; 197 box-sizing: border-box;
198 text-align: right; 198 text-align: right;
199 }
...\ No newline at end of file ...\ No newline at end of file
199 }
......
1 <template> 1 <template>
2 <!-- 监控日志 --> 2 <!-- 监控日志 -->
3 <div class="jktjDetail form-clues"> 3 <div class="jktjDetail form-clues">
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px"> 5 <el-form
6 <el-row> 6 ref="form"
7 <el-col :span="8"> 7 :model="form"
8 <el-date-picker v-model="valueTime" type="datetimerange" range-separator="至" 8 :inline="true"
9 start-placeholder="开始日期" end-placeholder="结束日期"> 9 class="from-clues-header"
10 </el-date-picker> 10 label-width="100px"
11 </el-col> 11 >
12 <!-- 按钮操作 --> 12 <el-row class="rows">
13 <el-col :span="12" class="btnColRight"> 13 <el-col :span="8">
14 <el-button type="default" @click="resetForm"> 重置 </el-button> 14 <el-date-picker
15 <el-button type="primary"> 查询 </el-button> 15 v-model="valueTime"
16 </el-col> 16 type="datetimerange"
17 </el-row> 17 range-separator="至"
18 </el-form> 18 start-placeholder="开始日期"
19 <!-- 表格 --> 19 end-placeholder="结束日期"
20 <div class="form-clues-content echarts-box"> 20 >
21 <div id="myChart" class="chart"></div> 21 </el-date-picker>
22 </div> 22 </el-col>
23 <!-- 按钮操作 -->
24 <el-col :span="12" class="btnColRight">
25 <el-button type="default" @click="resetForm"> 重置 </el-button>
26 <el-button type="primary"> 查询 </el-button>
27 </el-col>
28 </el-row>
29 </el-form>
30 <!-- 表格 -->
31 <div class="form-clues-content echarts-box">
32 <div id="myChart" class="chart"></div>
23 </div> 33 </div>
34 </div>
24 </template> 35 </template>
25 36
26 <script> 37 <script>
27 export default { 38 export default {
28 name: "jktj", 39 name: "jktj",
29 data () { 40 data() {
30 return { 41 return {
31 // 开始结束日期限制 42 // 开始结束日期限制
32 pickerOptionsStart: { 43 pickerOptionsStart: {
33 disabledDate: (time) => { 44 disabledDate: (time) => {
34 if (this.form.endTime) { 45 if (this.form.endTime) {
35 return ( 46 return time.getTime() >= new Date(this.form.endTime).getTime();
36 time.getTime() >= new Date(this.form.endTime).getTime() 47 }
37 ); 48 },
38 } 49 },
39 } 50 // 结束日期限制
40 }, 51 pickerOptionsEnd: {
41 // 结束日期限制 52 disabledDate: (time) => {
42 pickerOptionsEnd: { 53 if (this.form.startTime) {
43 disabledDate: (time) => { 54 return time.getTime() <= new Date(this.form.startTime).getTime();
44 if (this.form.startTime) { 55 }
45 return ( 56 },
46 time.getTime() <= new Date(this.form.startTime).getTime() 57 },
47 ); 58 // 搜索表单
48 } 59 valueTime: "",
49 } 60 form: {
50 }, 61 startTime: "",
51 // 搜索表单 62 endTime: "",
52 valueTime: '', 63 },
53 form: { 64 };
54 startTime: "", 65 },
55 endTime: "" 66 mounted() {
56 } 67 // 初始化图表
57 } 68 this.echartInit();
69 },
70 methods: {
71 // 重置
72 resetForm() {
73 this.form = {
74 startTime: "",
75 endTime: "",
76 };
58 }, 77 },
59 mounted () { 78 echartInit() {
60 // 初始化图表 79 // 基于准备好的dom，初始化echarts实例
61 this.echartInit(); 80 let myChart = this.$echarts.init(document.getElementById("myChart"));
81 // 绘制图表
82 myChart.setOption({
83 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
84 title: {
85 show: true,
86 text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
87 left: "center",
88 textStyle: {
89 fontSize: 30,
90 lineHeight: 30,
91 height: 60,
92 color: "#fff",
93 },
94 },
95 legend: {
96 data: [
97 "接入成功数量",
98 "接入失败数量",
99 "上报成功数量",
100 "上报失败数量",
101 ],
102 top: 80,
103 textStyle: {
104 fontSize: 24,
105 lineHeight: 30,
106 height: 60,
107 color: "#777",
108 },
109 },
110 tooltip: {
111 show: true,
112 trigger: "axis",
113 textStyle: {
114 fontSize: 22 // 字体大小
62 }, 115 },
63 methods: { 116 extraCssText: 'width:260px;height:200px;' // 背景色
64 // 重置
65 resetForm () {
66 this.form = {
67 startTime: "",
68 endTime: ""
69 }
70 }, 117 },
71 echartInit () { 118 grid: {
72 // 基于准备好的dom，初始化echarts实例 119 top: 120,
73 let myChart = this.$echarts.init(
74 document.getElementById("myChart")
75 );
76 // 绘制图表
77 myChart.setOption({
78 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
79 title: {
80 show: true,
81 text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
82 left: "center",
83 textStyle: {
84 fontSize: 18,
85 lineHeight: 30,
86 height: 60,
87 color: "#777",
88 },
89 },
90 legend: {
91 data: [
92 "接入成功数量",
93 "接入失败数量",
94 "上报成功数量",
95 "上报失败数量",
96 ],
97 top: 80,
98 },
99 tooltip: {
100 show: true,
101 trigger: "axis",
102 },
103 grid: {
104 top: 120,
105 },
106 xAxis: [
107 {
108 type: "category",
109 data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
110 },
111 ],
112 yAxis: [
113 {
114 type: "value",
115 },
116 ],
117 series: [
118 {
119 name: "接入成功数量",
120 type: "bar",
121 data: [1000, 1500, 2000, 500, 4000],
122 },
123 {
124 name: "接入失败数量",
125 type: "bar",
126 data: [900, 500, 3200, 800, 4500],
127 },
128 {
129 name: "上报成功数量",
130 type: "bar",
131 data: [1000, 1500, 2000, 500, 4000],
132 },
133 {
134 name: "上报失败数量",
135 type: "bar",
136 data: [900, 500, 3200, 800, 4500],
137 },
138 ],
139 });
140 }, 120 },
121 xAxis: [
122 {
123 type: "category",
124 data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
125 axisLabel: {
126 textStyle: {
127 show: true,
128 color: "#fff",
129 fontSize: "24",
130 },
131 },
132 },
133 ],
134 yAxis: [
135 {
136 type: "value",
137 axisLabel: {
138 textStyle: {
139 show: true,
140 color: "#fff",
141 fontSize: "24",
142 },
143 },
144 },
145 ],
146 series: [
147 {
148 name: "接入成功数量",
149 type: "bar",
150 data: [1000, 1500, 2000, 500, 4000],
151 },
152 {
153 name: "接入失败数量",
154 type: "bar",
155 data: [900, 500, 3200, 800, 4500],
156 },
157 {
158 name: "上报成功数量",
159 type: "bar",
160 data: [1000, 1500, 2000, 500, 4000],
161 },
162 {
163 name: "上报失败数量",
164 type: "bar",
165 data: [900, 500, 3200, 800, 4500],
166 },
167 ],
168 });
141 }, 169 },
170 },
142 }; 171 };
143 </script> 172 </script>
144 <style scoped lang="scss"> 173 <style scoped lang="scss">
145 @import "~@/styles/public.scss"; 174 @import "~@/styles/public.scss";
146 175
147 .jktjDetail { 176 .jktjDetail {
148 height: 100%; 177 height: 100%;
178 display: flex;
179 flex-direction: column;
180 .rows {
181 margin-left: 100px;
182 }
183 .echarts-box {
149 display: flex; 184 display: flex;
150 flex-direction: column; 185 justify-content: center;
186 height: 500px;
151 187
152 .echarts-box { 188 .chart {
153 display: flex; 189 width: 100%;
154 justify-content: center; 190 height: 100%;
155 height: 500px;
156
157 .chart {
158 width: 100%;
159 height: 100%;
160 }
161 } 191 }
192 }
162 193
163 .form-clues-content { 194 .form-clues-content {
164 flex: 1; 195 flex: 1;
165 height: 100%; 196 height: 100%;
166 } 197 }
167 } 198 }
168 </style> 199 </style>
169 <style scoped lang="scss"> 200 <style scoped lang="scss">
......
1 <template> 1 <template>
2 <!-- 监控日志 --> 2 <!-- 监控日志 -->
3 <div class="jktjDetail form-clues"> 3 <div class="jktjDetail form-clues">
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px"> 5 <el-form
6 <el-row> 6 ref="form"
7 <el-col :span="8"> 7 :model="form"
8 <el-date-picker v-model="valueTime" type="datetimerange" range-separator="至" 8 :inline="true"
9 start-placeholder="开始日期" end-placeholder="结束日期"> 9 class="from-clues-header"
10 </el-date-picker> 10 label-width="100px"
11 </el-col> 11 >
12 <!-- 按钮操作 --> 12 <el-row class="rows">
13 <el-col :span="12" class="btnColRight"> 13 <el-col :span="8">
14 <el-button type="default" @click="resetForm"> 重置 </el-button> 14 <el-date-picker
15 <el-button type="primary"> 查询 </el-button> 15 v-model="valueTime"
16 </el-col> 16 type="datetimerange"
17 </el-row> 17 range-separator="至"
18 </el-form> 18 start-placeholder="开始日期"
19 <!-- 表格 --> 19 end-placeholder="结束日期"
20 <div class="form-clues-content echarts-box"> 20 >
21 <div id="myChart" class="chart"></div> 21 </el-date-picker>
22 </div> 22 </el-col>
23 <!-- 按钮操作 -->
24 <el-col :span="12" class="btnColRight">
25 <el-button type="default" @click="resetForm"> 重置 </el-button>
26 <el-button type="primary"> 查询 </el-button>
27 </el-col>
28 </el-row>
29 </el-form>
30 <!-- 表格 -->
31 <div class="form-clues-content echarts-box">
32 <div id="myChart" class="chart"></div>
23 </div> 33 </div>
34 </div>
24 </template> 35 </template>
25 36
26 <script> 37 <script>
27 export default { 38 export default {
28 name: "jktj", 39 name: "jktj",
29 data () { 40 data() {
30 return { 41 return {
31 // 开始结束日期限制 42 // 开始结束日期限制
32 pickerOptionsStart: { 43 pickerOptionsStart: {
33 disabledDate: (time) => { 44 disabledDate: (time) => {
34 if (this.form.endTime) { 45 if (this.form.endTime) {
35 return ( 46 return time.getTime() >= new Date(this.form.endTime).getTime();
36 time.getTime() >= new Date(this.form.endTime).getTime() 47 }
37 ); 48 },
38 } 49 },
39 } 50 // 结束日期限制
40 }, 51 pickerOptionsEnd: {
41 // 结束日期限制 52 disabledDate: (time) => {
42 pickerOptionsEnd: { 53 if (this.form.startTime) {
43 disabledDate: (time) => { 54 return time.getTime() <= new Date(this.form.startTime).getTime();
44 if (this.form.startTime) { 55 }
45 return ( 56 },
46 time.getTime() <= new Date(this.form.startTime).getTime() 57 },
47 ); 58 // 搜索表单
48 } 59 valueTime: "",
49 } 60 form: {
50 }, 61 startTime: "",
51 // 搜索表单 62 endTime: "",
52 valueTime: '', 63 },
53 form: { 64 };
54 startTime: "", 65 },
55 endTime: "" 66 mounted() {
56 } 67 // 初始化图表
57 } 68 this.echartInit();
69 },
70 methods: {
71 // 重置
72 resetForm() {
73 this.form = {
74 startTime: "",
75 endTime: "",
76 };
58 }, 77 },
59 mounted () { 78 echartInit() {
60 // 初始化图表 79 // 基于准备好的dom，初始化echarts实例
61 this.echartInit(); 80 let myChart = this.$echarts.init(document.getElementById("myChart"));
81 // 绘制图表
82 myChart.setOption({
83 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
84 title: {
85 show: true,
86 text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
87 left: "center",
88 textStyle: {
89 fontSize: 30,
90 lineHeight: 30,
91 height: 60,
92 color: "#fff",
93 },
94 },
95 legend: {
96 data: [
97 "接入成功数量",
98 "接入失败数量",
99 "上报成功数量",
100 "上报失败数量",
101 ],
102 top: 80,
103 textStyle: {
104 fontSize: 24,
105 lineHeight: 30,
106 height: 60,
107 color: "#777",
108 },
109 },
110 tooltip: {
111 show: true,
112 trigger: "axis",
113 textStyle: {
114 fontSize: 22 // 字体大小
62 }, 115 },
63 methods: { 116 extraCssText: 'width:260px;height:200px;' // 背景色
64 // 重置
65 resetForm () {
66 this.form = {
67 startTime: "",
68 endTime: ""
69 }
70 }, 117 },
71 echartInit () { 118 grid: {
72 // 基于准备好的dom，初始化echarts实例 119 top: 120,
73 let myChart = this.$echarts.init(
74 document.getElementById("myChart")
75 );
76 // 绘制图表
77 myChart.setOption({
78 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
79 title: {
80 show: true,
81 text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
82 left: "center",
83 textStyle: {
84 fontSize: 18,
85 lineHeight: 30,
86 height: 60,
87 color: "#777",
88 },
89 },
90 legend: {
91 data: [
92 "接入成功数量",
93 "接入失败数量",
94 "上报成功数量",
95 "上报失败数量",
96 ],
97 top: 80,
98 },
99 tooltip: {
100 show: true,
101 trigger: "axis",
102 },
103 grid: {
104 top: 120,
105 },
106 xAxis: [
107 {
108 type: "category",
109 data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
110 },
111 ],
112 yAxis: [
113 {
114 type: "value",
115 },
116 ],
117 series: [
118 {
119 name: "接入成功数量",
120 type: "bar",
121 data: [1000, 1500, 2000, 500, 4000],
122 },
123 {
124 name: "接入失败数量",
125 type: "bar",
126 data: [900, 500, 3200, 800, 4500],
127 },
128 {
129 name: "上报成功数量",
130 type: "bar",
131 data: [1000, 1500, 2000, 500, 4000],
132 },
133 {
134 name: "上报失败数量",
135 type: "bar",
136 data: [900, 500, 3200, 800, 4500],
137 },
138 ],
139 });
140 }, 120 },
121 xAxis: [
122 {
123 type: "category",
124 data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
125 axisLabel: {
126 textStyle: {
127 show: true,
128 color: "#fff",
129 fontSize: "24",
130 },
131 },
132 },
133 ],
134 yAxis: [
135 {
136 type: "value",
137 axisLabel: {
138 textStyle: {
139 show: true,
140 color: "#fff",
141 fontSize: "24",
142 },
143 },
144 },
145 ],
146 series: [
147 {
148 name: "接入成功数量",
149 type: "bar",
150 data: [1000, 1500, 2000, 500, 4000],
151 },
152 {
153 name: "接入失败数量",
154 type: "bar",
155 data: [900, 500, 3200, 800, 4500],
156 },
157 {
158 name: "上报成功数量",
159 type: "bar",
160 data: [1000, 1500, 2000, 500, 4000],
161 },
162 {
163 name: "上报失败数量",
164 type: "bar",
165 data: [900, 500, 3200, 800, 4500],
166 },
167 ],
168 });
141 }, 169 },
170 },
142 }; 171 };
143 </script> 172 </script>
144 <style scoped lang="scss"> 173 <style scoped lang="scss">
145 @import "~@/styles/public.scss"; 174 @import "~@/styles/public.scss";
146 175
147 .jktjDetail { 176 .jktjDetail {
148 height: 100%; 177 height: 100%;
178 display: flex;
179 flex-direction: column;
180 .rows {
181 margin-left: 100px;
182 }
183 .echarts-box {
149 display: flex; 184 display: flex;
150 flex-direction: column; 185 justify-content: center;
186 height: 500px;
151 187
152 .echarts-box { 188 .chart {
153 display: flex; 189 width: 100%;
154 justify-content: center; 190 height: 100%;
155 height: 500px;
156
157 .chart {
158 width: 100%;
159 height: 100%;
160 }
161 } 191 }
192 }
162 193
163 .form-clues-content { 194 .form-clues-content {
164 flex: 1; 195 flex: 1;
165 height: 100%; 196 height: 100%;
166 } 197 }
167 } 198 }
168 </style> 199 </style>
169 <style scoped lang="scss"> 200 <style scoped lang="scss">
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
37 </el-col> 37 </el-col>
38 </el-row> 38 </el-row>
39 <el-row class="mt-10"> 39 <el-row class="mt-10">
40 <el-col :span="6"> 40 <el-col :span="6">
41 <el-form-item label="业务号" prop="ywh"> 41 <el-form-item label="业务号" prop="ywh">
42 <el-input v-model="form.ywh" class="width100" placeholder="业务号"></el-input> 42 <el-input v-model="form.ywh" class="width100" placeholder="业务号"></el-input>
43 </el-form-item> 43 </el-form-item>
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
75 </div> 75 </div>
76 <!-- 引入详情组件 --> 76 <!-- 引入详情组件 -->
77 <!-- 编辑 --> 77 <!-- 编辑 -->
78 <dataDetails ref="editLog" /> 78 <dataDetails ref="editLog" :title="title" />
79 </div> 79 </div>
80 </template> 80 </template>
81 <script> 81 <script>
...@@ -182,6 +182,7 @@ export default { ...@@ -182,6 +182,7 @@ export default {
182 label: "河南县", 182 label: "河南县",
183 }, 183 },
184 ], 184 ],
185 title: ''
185 }; 186 };
186 }, 187 },
187 methods: { 188 methods: {
...@@ -205,6 +206,7 @@ export default { ...@@ -205,6 +206,7 @@ export default {
205 handleEscalation () { }, 206 handleEscalation () { },
206 // 详情 207 // 详情
207 handleDetail (row) { 208 handleDetail (row) {
209 this.title = row.rectypeName
208 this.$refs.editLog.isShow(row); 210 this.$refs.editLog.isShow(row);
209 }, 211 },
210 }, 212 },
......