Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
cfeca695 by 任超
Options

style:样式修改

1 parent bc1ccfa8
Inline Side-by-side
Showing 12 changed files with 665 additions and 465 deletions
1 <template> 1 <template>
2 <div> 2 <div>
3 <Echart 3 <Echart :options="options" id="centreLeft1Chart" height="220px" width="100%"></Echart>
4 :options="options"
5 id="centreLeft1Chart"
6 height="220px"
7 width="459px"
8 ></Echart>
9 </div> 4 </div>
10 </template> 5 </template>
11 6
...@@ -30,13 +25,13 @@ export default { ...@@ -30,13 +25,13 @@ export default {
30 cdata: { 25 cdata: {
31 handler (newData) { 26 handler (newData) {
32 this.options = { 27 this.options = {
33 grid: { 28 grid: {
34 // 让图表占满容器 29 // 让图表占满容器
35 top: "0%", 30 top: "0%",
36 left: "1%", 31 left: "1%",
37 right: "30%", 32 right: "30%",
38 bottom: "0%", 33 bottom: "0%",
39 }, 34 },
40 color: [ 35 color: [
41 "#37a2da", 36 "#37a2da",
42 "#32c5e9", 37 "#32c5e9",
...@@ -75,4 +70,5 @@ export default { ...@@ -75,4 +70,5 @@ export default {
75 </script> 70 </script>
76 71
77 <style lang="scss" scoped> 72 <style lang="scss" scoped>
73
78 </style> 74 </style>
......
1 <template> 1 <template>
2 <div> 2 <div>
3 <Chart :cdata="cdata" /> 3 <Chart :cdata="cdata" />
4
5 <div class="rotograph">佛坪县</div> 4 <div class="rotograph">佛坪县</div>
6 </div> 5 </div>
7 </template> 6 </template>
...@@ -19,7 +18,7 @@ export default { ...@@ -19,7 +18,7 @@ export default {
19 { value: 25, name: "产地产权（独幢、层、套、间、房屋）" }, 18 { value: 25, name: "产地产权（独幢、层、套、间、房屋）" },
20 { value: 20, name: "建筑物区分所有权业主共有部分" }, 19 { value: 20, name: "建筑物区分所有权业主共有部分" },
21 { value: 35, name: "海域（含无居民海岛）使用权" }, 20 { value: 35, name: "海域（含无居民海岛）使用权" },
22 { value: 10, name: "构（建）筑物所有权" }, 21 { value: 10, name: "构（建）筑物所有权" },
23 { value: 5, name: "农用地使用权（非林地）" }, 22 { value: 5, name: "农用地使用权（非林地）" },
24 { value: 15, name: "林权" }, 23 { value: 15, name: "林权" },
25 { value: 25, name: "注销登记" }, 24 { value: 25, name: "注销登记" },
...@@ -43,15 +42,15 @@ export default { ...@@ -43,15 +42,15 @@ export default {
43 </script> 42 </script>
44 43
45 <style lang="scss" scoped> 44 <style lang="scss" scoped>
46 .rotograph{ 45 .rotograph {
47 margin: auto; 46 margin: auto;
48 width:200px; 47 width: 200px;
49 height: 30px; 48 height: 30px;
50 background-color: rgb(6, 121, 167); 49 background-color: rgb(6, 121, 167);
51 font-size: 20px; 50 font-size: 20px;
52 line-height: 30px; 51 line-height: 30px;
53 text-align: center; 52 text-align: center;
54 border-radius: 6px; 53 border-radius: 6px;
55 font-weight: 600; 54 font-weight: 600;
56 } 55 }
57 </style> 56 </style>
......
...@@ -99,10 +99,16 @@ export const asyncRoutes = [ ...@@ -99,10 +99,16 @@ export const asyncRoutes = [
99 component: Layout, 99 component: Layout,
100 children: [ 100 children: [
101 { 101 {
102 path: 'index', 102 path: 'ywltj',
103 component: () => import('@/views/jktj/index'), 103 component: () => import('@/views/jktj/ywltj/index'),
104 name: 'jktj',
105 meta: { title: '业务量统计', icon: 'zhcx' }
106 },
107 {
108 path: 'bsxljk',
109 component: () => import('@/views/jktj/bsxljk/index'),
104 name: 'jktj', 110 name: 'jktj',
105 meta: { title: '监控统计', icon: 'zhcx' } 111 meta: { title: '办事效率监控', icon: 'zhcx' }
106 } 112 }
107 ] 113 ]
108 }, 114 },
......
1 <template> 1 <template>
2 <div class="centercard"> 2 <div class="centercard">
3 <div class="card1 bg-shadow"> 3 <div class="card1 bg-shadow">
4 <maps class="map" /> 4 <maps class="map" />
5 </div> 5 </div>
6 <div class="card2 bg-shadow"> 6 <div class="card2 bg-shadow">
7 <Brokenline class="Brokenline" /> 7 <Brokenline class="Brokenline" />
...@@ -13,39 +13,41 @@ ...@@ -13,39 +13,41 @@
13 import maps from "@/components/echart/map"; 13 import maps from "@/components/echart/map";
14 import Brokenline from "@/components/echart/Brokenline"; 14 import Brokenline from "@/components/echart/Brokenline";
15 export default { 15 export default {
16 data() { 16 data () {
17 return {}; 17 return {};
18 }, 18 },
19 components: { maps,Brokenline }, 19 components: { maps, Brokenline },
20 mounted() {}, 20 mounted () { },
21 beforeDestroy() {}, 21 beforeDestroy () { },
22 methods: {}, 22 methods: {},
23 }; 23 };
24 </script> 24 </script>
25 25
26 <style lang="scss" scoped> 26 <style lang="scss" scoped>
27 .centercard{ 27 .centercard {
28 width: 50%; 28 width: 48%;
29 height: 100%; 29 height: 100%;
30 .card1{
31 width: 100%;
32 height: 600px;
33 30
34 .map{ 31 .card1 {
35 margin: auto; 32 width: 100%;
36 width: 95%; 33 height: 600px;
37 height: 600px;
38 }
39 }
40 .card2{
41 width: 100%;
42 height: 300px;
43 34
44 .Brokenline{ 35 .map {
45 margin: auto; 36 margin: auto;
46 width: 100%; 37 width: 95%;
47 height: 300px; 38 height: 600px;
48 } 39 }
49 } 40 }
50 } 41
42 .card2 {
43 width: 100%;
44 height: 300px;
45
46 .Brokenline {
47 margin: auto;
48 width: 100%;
49 height: 300px;
50 }
51 }
52 }
51 </style> 53 </style>
......
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
4 background-color: #031754; 4 background-color: #031754;
5 overflow: hidden; 5 overflow: hidden;
6 } 6 }
7 #index { 7
8 .bigScreen-con {
8 color: #d3d6dd; 9 color: #d3d6dd;
9 width: 1920px; 10 width: 1920px;
10 height: 1080px; 11 height: 1080px;
...@@ -14,119 +15,62 @@ ...@@ -14,119 +15,62 @@
14 transform-origin: left top; 15 transform-origin: left top;
15 overflow: hidden; 16 overflow: hidden;
16 17
17 .bg { 18 .header {
18 width: 100%; 19 width: 100%;
19 height: 100%; 20 height: 100px;
20 background-size: cover;
21 background-position: center center;
22 }
23 21
24 .host-body{ 22 .head {
25 .header{ 23 margin-top: 50px;
26 width: 100%; 24 }
27 height: 100px;
28 .head{
29 margin-top: 50px;
30 }
31 25
32 .dv-dec-10, 26 .dv-dec-10,
33 .dv-dec-10-s { 27 .dv-dec-10-s {
34 width: 50.3%; 28 width: 50.3%;
35 height: 10px; 29 height: 10px;
36 } 30 }
37 31
38 .dv-dec-10-s { 32 .dv-dec-10-s {
39 transform: rotateY(180deg); 33 transform: rotateY(180deg);
40 } 34 }
41 35
42 .dv-dec-8 { 36 .dv-dec-8 {
43 width: 200px; 37 width: 200px;
44 height: 50px; 38 height: 50px;
45 } 39 }
46 40
47 .title { 41 .title {
48 position: relative; 42 position: relative;
49 width: 500px; 43 width: 500px;
50 text-align: center; 44 text-align: center;
51 background-size: cover; 45 background-size: cover;
52 background-repeat: no-repeat; 46 background-repeat: no-repeat;
53 .dv-dec-5{
54 position: absolute;
55 width: 500px;
56 height: 40px;
57 left: 0;
58 top: 38.5px;
59 }
60 .title-text {
61 font-size: 37px;
62 position: absolute;
63 font-weight: 600;
64 width: 500px;
65 bottom: 20px;
66 left: 50%;
67 transform: translate(-50%);
68 }
69 47
70 .dv-dec-6 { 48 .dv-dec-5 {
71 position: absolute; 49 position: absolute;
72 bottom: -30px; 50 width: 500px;
73 left: 50%; 51 height: 40px;
74 width: 250px; 52 left: 0;
75 height: 8px; 53 top: 38.5px;
76 transform: translate(-50%);
77 }
78 } 54 }
79 }
80 .content{
81 width: 98%;
82 height: 900px;
83 margin: auto;
84 display: flex;
85 55
86 .centercard{ 56 .title-text {
87 width: 50%; 57 font-size: 37px;
88 height: 100%; 58 position: absolute;
89 .card1{ 59 font-weight: 600;
90 width: 100%; 60 width: 500px;
91 height: 600px; 61 bottom: 20px;
92 box-sizing: border-box; 62 left: 50%;
93 background: url("~@/image/tablebk.png") no-repeat; 63 transform: translate(-50%);
94 background-size: 100% 100%;
95 }
96 .card2{
97 width: 100%;
98 height: 300px;
99 box-sizing: border-box;
100 background: url("~@/image/tablebk.png") no-repeat;
101 background-size: 100% 100%;
102 }
103 } 64 }
104 .rightcard{ 65
105 width: 25%; 66 .dv-dec-6 {
106 height: 100%; 67 position: absolute;
107 .card1{ 68 bottom: -30px;
108 width: 100%; 69 left: 50%;
109 height: 300px; 70 width: 250px;
110 box-sizing: border-box; 71 height: 8px;
111 background: url("~@/image/tablebk.png") no-repeat; 72 transform: translate(-50%);
112 background-size: 100% 100%;
113 }
114 .card2{
115 width: 100%;
116 height: 300px;
117 box-sizing: border-box;
118 background: url("~@/image/tablebk.png") no-repeat;
119 background-size: 100% 100%;
120 }
121 .card3{
122 width: 100%;
123 height: 300px;
124 box-sizing: border-box;
125 background: url("~@/image/tablebk.png") no-repeat;
126 background-size: 100% 100%;
127 }
128 } 73 }
129 } 74 }
130 } 75 }
131 } 76 }
132
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="bigScreen"> 2 <div class="bigScreen">
3 <div id="index" ref="appRef"> 3 <div class="bigScreen-con" ref="appRef">
4 <div class="bg"> 4 <dv-loading v-if="loading">Loading...</dv-loading>
5 <dv-loading v-if="loading">Loading...</dv-loading> 5 <div v-else>
6 <div v-else class="host-body"> 6 <div class="header">
7 <div class="header"> 7 <div class="d-flex head">
8 <div class="d-flex head"> 8 <dv-decoration-10 class="dv-dec-10" />
9 <dv-decoration-10 class="dv-dec-10" /> 9 <div class="d-flex">
10 <div class="d-flex"> 10 <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
11 <dv-decoration-8 class="dv-dec-8" :color="decorationColor" /> 11 <div class="title">
12 <div class="title"> 12 <span class="title-text">汉中市不动产监管大屏</span>
13 <span class="title-text">汉中市不动产监管大屏</span> 13 <dv-decoration-5 :dur="1" class="dv-dec-5" :color="decorationColor" />
14 <dv-decoration-5
15 :dur="1"
16 class="dv-dec-5"
17 :color="decorationColor"
18 />
19 </div>
20 <dv-decoration-8
21 class="dv-dec-8"
22 :reverse="true"
23 :color="decorationColor"
24 />
25 </div> 14 </div>
26 <dv-decoration-10 class="dv-dec-10-s" /> 15 <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
27 </div> 16 </div>
17 <dv-decoration-10 class="dv-dec-10-s" />
28 </div> 18 </div>
29 <screencontent/>
30
31 </div> 19 </div>
20 <screencontent />
32 </div> 21 </div>
33 </div> 22 </div>
34 </div> 23 </div>
...@@ -38,7 +27,7 @@ import drawMixin from "../../utils/drawMixin"; ...@@ -38,7 +27,7 @@ import drawMixin from "../../utils/drawMixin";
38 import screencontent from './screencontent' 27 import screencontent from './screencontent'
39 export default { 28 export default {
40 mixins: [drawMixin], 29 mixins: [drawMixin],
41 data() { 30 data () {
42 return { 31 return {
43 decorationColor: ["#568aea", "#568aea"], 32 decorationColor: ["#568aea", "#568aea"],
44 }; 33 };
...@@ -46,11 +35,11 @@ export default { ...@@ -46,11 +35,11 @@ export default {
46 components: { 35 components: {
47 screencontent 36 screencontent
48 }, 37 },
49 mounted() { 38 mounted () {
50 // this.timeFn(); 39 // this.timeFn();
51 this.cancelLoading(); 40 this.cancelLoading();
52 }, 41 },
53 beforeDestroy() { 42 beforeDestroy () {
54 clearInterval(this.timing); 43 clearInterval(this.timing);
55 }, 44 },
56 methods: { 45 methods: {
...@@ -61,7 +50,7 @@ export default { ...@@ -61,7 +50,7 @@ export default {
61 // this.dateWeek = this.weekday[new Date().getDay()]; 50 // this.dateWeek = this.weekday[new Date().getDay()];
62 // }, 1000); 51 // }, 1000);
63 // }, 52 // },
64 cancelLoading() { 53 cancelLoading () {
65 setTimeout(() => { 54 setTimeout(() => {
66 this.loading = false; 55 this.loading = false;
67 }, 500); 56 }, 500);
......
...@@ -3,31 +3,24 @@ ...@@ -3,31 +3,24 @@
3 <div class="card bg-shadow"> 3 <div class="card bg-shadow">
4 <div class="cardhead">房屋情况统计表</div> 4 <div class="cardhead">房屋情况统计表</div>
5 <div class="cardcontent"> 5 <div class="cardcontent">
6 <el-table 6 <el-table class="bueatyScroll"
7 class="bueatyScroll" 7 :header-cell-style="{ 'text-align': 'center', background: '#02296d', color: '#ffffff' }"
8 :header-cell-style="{ 'text-align': 'center', background: '#02296d',color:'#ffffff' }" 8 :cell-style="{ 'text-align': 'center' }" :row-style="{ height: '30px' }" :data="tableData" stripe
9 :cell-style="{ 'text-align': 'center' }" 9 ref="tableref" height="250px" style="width: 100%">
10 :row-style="{ height: '30px' }" 10 <el-table-column type="index" label="序号" />
11 :data="tableData" 11 <el-table-column prop="use" label="用途" />
12 stripe 12 <el-table-column prop="property" label="性质" />
13 ref="tableref" 13 <el-table-column prop="area" label="面积" />
14 height="250px" 14 </el-table>
15 style="width: 100%"
16 >
17 <el-table-column type="index" label="序号" width="100" />
18 <el-table-column prop="use" label="用途" width="100" />
19 <el-table-column prop="property" label="性质" width="120" />
20 <el-table-column prop="area" label="面积" width="130" />
21 </el-table>
22 </div> 15 </div>
23 </div> 16 </div>
24 <div class="card bg-shadow"> 17 <div class="card bg-shadow">
25 <div class="cardhead">登记业务量</div> 18 <div class="cardhead">登记业务量</div>
26 <Rose/> 19 <Rose />
27 </div> 20 </div>
28 <div class="card bg-shadow"> 21 <div class="card bg-shadow">
29 <div class="cardhead">登记类型总量</div> 22 <div class="cardhead">登记类型总量</div>
30 <columnarsmat/> 23 <columnarsmat />
31 </div> 24 </div>
32 </div> 25 </div>
33 </template> 26 </template>
...@@ -36,52 +29,52 @@ ...@@ -36,52 +29,52 @@
36 import columnarsmat from "@/components/echart/columnarsmat"; 29 import columnarsmat from "@/components/echart/columnarsmat";
37 import Rose from "@/components/echart/Rose"; 30 import Rose from "@/components/echart/Rose";
38 export default { 31 export default {
39 data() { 32 data () {
40 return { 33 return {
41 tableData: [{ 34 tableData: [{
42 use:'居住', 35 use: '居住',
43 property: '住宅', 36 property: '住宅',
44 area: '120' 37 area: '120'
45 }, { 38 }, {
46 use: '水果店', 39 use: '水果店',
47 property: '商铺', 40 property: '商铺',
48 area: '342' 41 area: '342'
49 }, { 42 }, {
50 use: '商场', 43 use: '商场',
51 property: '商业', 44 property: '商业',
52 area: '2343' 45 area: '2343'
53 }, { 46 }, {
54 use: '耕地', 47 use: '耕地',
55 property: '农田', 48 property: '农田',
56 area: '29987' 49 area: '29987'
57 }, { 50 }, {
58 use: '林场', 51 use: '林场',
59 property: '林地', 52 property: '林地',
60 area: '67894' 53 area: '67894'
61 }, { 54 }, {
62 use: '旅游', 55 use: '旅游',
63 property: '旅游区', 56 property: '旅游区',
64 area: '22328' 57 area: '22328'
65 }, { 58 }, {
66 use: '政府', 59 use: '政府',
67 property: '建筑用地', 60 property: '建筑用地',
68 area: '1228' 61 area: '1228'
69 }, { 62 }, {
70 use: '学校', 63 use: '学校',
71 property: '建筑用地', 64 property: '建筑用地',
72 area: '2328' 65 area: '2328'
73 }, { 66 }, {
74 use: '采矿', 67 use: '采矿',
75 property: '矿场', 68 property: '矿场',
76 area: '2328' 69 area: '2328'
77 }] 70 }]
78 }; 71 };
79 }, 72 },
80 components: { columnarsmat,Rose }, 73 components: { columnarsmat, Rose },
81 mounted() { 74 mounted () {
82 scroll(tableref.value.$refs.bodyWrapper);//设置滚动 75 scroll(tableref.value.$refs.bodyWrapper);//设置滚动
83 }, 76 },
84 beforeDestroy() {}, 77 beforeDestroy () { },
85 methods: { 78 methods: {
86 79
87 }, 80 },
...@@ -92,6 +85,7 @@ export default { ...@@ -92,6 +85,7 @@ export default {
92 .leftcard { 85 .leftcard {
93 width: 25%; 86 width: 25%;
94 height: 100%; 87 height: 100%;
88
95 .cardhead { 89 .cardhead {
96 width: 100%; 90 width: 100%;
97 height: 40px; 91 height: 40px;
...@@ -100,47 +94,54 @@ export default { ...@@ -100,47 +94,54 @@ export default {
100 color: rgb(27, 185, 206); 94 color: rgb(27, 185, 206);
101 font-size: 26px; 95 font-size: 26px;
102 } 96 }
97
103 .cardcontent { 98 .cardcontent {
104 width: 450px; 99 width: 100%;
105 height: 250px; 100 height: 250px;
106 /deep/.el-table tr:nth-child(even){
107 background-color: #043d72!important;
108 }
109 /deep/.el-table__body-wrapper {
110 background-color: #043d72
111 }
112 /* striped先开启斑马纹属性，这里是修改斑马纹颜色 */
113 /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
114 background: #043d72
115 }
116 101
117 /* 非斑马纹颜色 */ 102 /deep/.el-table tr:nth-child(even) {
118 /deep/.el-table tr { 103 background-color: #043d72 !important;
119 background: #043d72 104 }
120 }
121 105
122 /* 斑马纹颜色定义完之后会显示自带的边框颜色，这里要重置 */ 106 /deep/.el-table__body-wrapper {
123 /deep/.el-table td, 107 background-color: #043d72
124 .building-top .el-table th.is-leaf { 108 }
125 border: none;
126 color: white;
127 }
128 109
129 /* 这里是滑过斑马纹滑过时的颜色 */ 110 /* striped先开启斑马纹属性，这里是修改斑马纹颜色 */
130 /deep/.el-table--enable-row-hover .el-table__body tr:hover > td { 111 /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
131 background-color: #021c55; 112 background: #043d72
132 } 113 }
133 .el-table{
134 --el-table-border:0px;
135 --el-table-border-color:rgb(0 0 0 / 0%);
136 114
137 } 115 /* 非斑马纹颜色 */
138 /deep/.el-table .el-table__cell { 116 /deep/.el-table tr {
139 padding: 6px 0; 117 background: #043d72
140 } 118 }
119
120 /* 斑马纹颜色定义完之后会显示自带的边框颜色，这里要重置 */
121 /deep/.el-table td,
122 .building-top .el-table th.is-leaf {
123 border: none;
124 color: white;
125 }
126
127 /* 这里是滑过斑马纹滑过时的颜色 */
128 /deep/.el-table--enable-row-hover .el-table__body tr:hover>td {
129 background-color: #021c55;
130 }
131
132 .el-table {
133 --el-table-border: 0px;
134 --el-table-border-color: rgb(0 0 0 / 0%);
135
136 }
137
138 /deep/.el-table .el-table__cell {
139 padding: 6px 0;
140 }
141 141
142 } 142 }
143 .card{ 143
144 .card {
144 width: 100%; 145 width: 100%;
145 height: 300px; 146 height: 300px;
146 } 147 }
......
...@@ -12,7 +12,7 @@ import centercard from "./centercard"; ...@@ -12,7 +12,7 @@ import centercard from "./centercard";
12 import rightcard from "./rightcard"; 12 import rightcard from "./rightcard";
13 export default { 13 export default {
14 mixins: [drawMixin], 14 mixins: [drawMixin],
15 data() { 15 data () {
16 return { 16 return {
17 decorationColor: ["#568aea", "#568aea"], 17 decorationColor: ["#568aea", "#568aea"],
18 }; 18 };
...@@ -22,15 +22,15 @@ export default { ...@@ -22,15 +22,15 @@ export default {
22 centercard, 22 centercard,
23 rightcard, 23 rightcard,
24 }, 24 },
25 mounted() { 25 mounted () {
26 // this.timeFn(); 26 // this.timeFn();
27 this.cancelLoading(); 27 this.cancelLoading();
28 }, 28 },
29 beforeDestroy() { 29 beforeDestroy () {
30 clearInterval(this.timing); 30 clearInterval(this.timing);
31 }, 31 },
32 methods: { 32 methods: {
33 cancelLoading() { 33 cancelLoading () {
34 setTimeout(() => { 34 setTimeout(() => {
35 this.loading = false; 35 this.loading = false;
36 }, 500); 36 }, 500);
...@@ -40,5 +40,61 @@ export default { ...@@ -40,5 +40,61 @@ export default {
40 </script> 40 </script>
41 41
42 <style scoped lang="scss"> 42 <style scoped lang="scss">
43 @import "./index.scss"; 43 .content {
44 width: 98%;
45 height: 900px;
46 margin: auto;
47 display: flex;
48 display: flex;
49
50 .centercard {
51 width: 50%;
52 height: 100%;
53
54 .card1 {
55 width: 100%;
56 height: 600px;
57 box-sizing: border-box;
58 background: url("~@/image/tablebk.png") no-repeat;
59 background-size: 100% 100%;
60 }
61
62 .card2 {
63 width: 100%;
64 height: 300px;
65 box-sizing: border-box;
66 background: url("~@/image/tablebk.png") no-repeat;
67 background-size: 100% 100%;
68 }
69 }
70
71 .rightcard {
72 width: 25%;
73 height: 100%;
74
75 .card1 {
76 width: 100%;
77 height: 300px;
78 box-sizing: border-box;
79 background: url("~@/image/tablebk.png") no-repeat;
80 background-size: 100% 100%;
81 }
82
83 .card2 {
84 width: 100%;
85 height: 300px;
86 box-sizing: border-box;
87 background: url("~@/image/tablebk.png") no-repeat;
88 background-size: 100% 100%;
89 }
90
91 .card3 {
92 width: 100%;
93 height: 300px;
94 box-sizing: border-box;
95 background: url("~@/image/tablebk.png") no-repeat;
96 background-size: 100% 100%;
97 }
98 }
99 }
44 </style> 100 </style>
......
1 <template> 1 <template>
2 <div class="home"> 2 <div>
3 <div class="home-left bgbk"> 3 <screencontent />
4 <div class="header titlebg">
5 汉中市接入概括
6 </div>
7 <!-- 地图 -->
8 <CenterLeft2Chart class="map" />
9 </div>
10 <div class="home-right">
11 <!-- 陕西省接入概括 -->
12 <div class="jrgk homebk">
13 <div class="header titlebg">
14 陕西省接入概括
15 </div>
16 <!-- 陕西省接入概括列表 -->
17 <el-row>
18 <el-col :span="9">
19 <ul class="gkList">
20 <li>总数量</li>
21 <div class="zsl">
22 <dv-digital-flop :config="config" style="height:70px;" />
23 <p></p>
24 </div>
25 </ul>
26 </el-col>
27 <el-col :span="5">
28 <ul class="jrl">
29 <div class="jrlList jrllsit1">
30 <p v-for="(item, index) in jrlList" :key="index">{{ item }}</p>
31 </div>
32 <li>日均接入量</li>
33 </ul>
34 </el-col>
35 <el-col :span="5">
36 <ul class="jrl">
37 <div class="jrlList jrllsit2">
38 <p v-for="(item, index) in dtjrlList" :key="index">{{ item }}</p>
39 </div>
40 <li>日均接入量</li>
41 </ul>
42 </el-col>
43 <el-col :span="5">
44 <ul class="jrl">
45 <div class="jrlList jrllsit3">
46 <p v-for="(item, index) in ztzlList" :key="index">{{ item }}</p>
47 </div>
48 <li>总体质量</li>
49 </ul>
50 </el-col>
51 </el-row>
52 </div>
53 <div class="jrdgk">
54 <!-- 接入点概括 -->
55 <div class="sxsjr homebk">
56 <div class="header titlebg">
57 接入点概括
58 </div>
59 <el-row>
60 <el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index">
61 <ul>
62 <li>{{ item.value }}</li>
63 <li>{{ item.title }}</li>
64 </ul>
65 </el-col>
66 </el-row>
67 </div>
68 <!-- 上报情况概括 -->
69 <div class="sbqkgk homebk">
70 <div class="header titlebg">
71 上报情况概括
72 </div>
73 <ul class="sbqkgs">
74 <div class="sbqkgsList">
75 <p v-for="(item, index) in sbqkgsList" :key="index"
76 :class="{ 'active': (typeof (item - 0) === 'number' && !isNaN(item - 0)) }">
77 {{ item }}
78 </p>
79 </div>
80 <li>总数量</li>
81 </ul>
82 </div>
83 </div>
84 <!-- 底部表格 -->
85 <div class="jrxxlb tableClass bgbk">
86 <div class="title titlebg">陕西省平台接入情况</div>
87 <!-- 陕西省平台接入情况table -->
88 <lb-table ref="table" :pagination="false" :heightNum="515" :column="tableData.columns" :data="tableData.data">
89 </lb-table>
90 </div>
91 </div>
92 </div> 4 </div>
93 </template> 5 </template>
94 6
95 <script> 7 <script>
96 // 上报首页 8 import screencontent from '@/views/dataView/screencontent'
97 import wgsl from "./wgsl.vue";
98 import CenterLeft2Chart from "@/components/echart/map";
99 // 引入表格数据
100 import data from "./data"
101 export default { 9 export default {
102 name: "home", 10 name: "home",
103 components: { wgsl, CenterLeft2Chart }, 11 components: {
12 screencontent
13 },
104 data () { 14 data () {
105 function formatter (number) {
106 const numbers = number.toString().split('').reverse()
107 const segs = []
108 while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
109 return segs.join(',').split('').reverse().join('')
110 }
111 return { 15 return {
112 // 总数量
113 config: {
114 number: [6523],
115 content: '{nt}',
116 formatter,
117 style: {
118 fontSize: 50,
119 fontWeight: 700,
120 fill: '#FFDD00'
121 }
122 },
123 // 日均接入量
124 jjrl: 300,
125 // 当天接入量
126 dtjrl: 100,
127 // 总体质量
128 ztzl: 3620,
129 // 上报情况概括
130 sbqkgs: 6296,
131 // 接入点概括
132 jrdList: [
133 {
134 value: 60,
135 title: '总数量'
136 },
137 {
138 value: 60,
139 title: '正常'
140 },
141 {
142 value: 60,
143 title: '异常'
144 }
145 ],
146 // 表格数据
147 tableData: {
148 // 表格头部信息
149 columns: data.columns(),
150 // 表格列表数据
151 data: [{
152 xzqmc: '咸阳市',
153 xzqzs: 100,
154 jrl: 300,
155 jscgl: 20,
156 dk: 60,
157 wjrqx: '长安县',
158 jrdf: 50
159 },
160 {
161 xzqmc: '咸阳市',
162 xzqzs: 100,
163 jrl: 300,
164 jscgl: 20,
165 dk: 60,
166 wjrqx: '长安县',
167 jrdf: 50
168 }]
169 }
170 }
171 },
172 computed: {
173 jrlList: function () {
174 return this.jjrl.toString().split('')
175 },
176 dtjrlList: function () {
177 return this.dtjrl.toString().split('')
178 },
179 ztzlList: function () {
180 return this.ztzl.toString().split('')
181 },
182 sbqkgsList: function () {
183 const numbers = this.sbqkgs.toString().split('').reverse()
184 const segs = []
185 while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
186 return segs.join(',').split('').reverse().join('')
187 } 16 }
188 }, 17 },
189 methods: { 18 methods: {
...@@ -191,7 +20,5 @@ export default { ...@@ -191,7 +20,5 @@ export default {
191 } 20 }
192 </script> 21 </script>
193 <style scoped lang="scss"> 22 <style scoped lang="scss">
194 @import "~@/styles/mixin.scss"; 23 @import "../dataView/index.scss";
195 @import "~@/styles/public.scss";
196 @import "./home.scss";
197 </style> 24 </style>
......
1 <template>
2 <div class="home">
3 <div class="home-left bgbk">
4 <div class="header titlebg">
5 汉中市接入概括
6 </div>
7 <!-- 地图 -->
8 <CenterLeft2Chart class="map" />
9 </div>
10 <div class="home-right">
11 <!-- 陕西省接入概括 -->
12 <div class="jrgk homebk">
13 <div class="header titlebg">
14 陕西省接入概括
15 </div>
16 <!-- 陕西省接入概括列表 -->
17 <el-row>
18 <el-col :span="9">
19 <ul class="gkList">
20 <li>总数量</li>
21 <div class="zsl">
22 <dv-digital-flop :config="config" style="height:70px;" />
23 <p></p>
24 </div>
25 </ul>
26 </el-col>
27 <el-col :span="5">
28 <ul class="jrl">
29 <div class="jrlList jrllsit1">
30 <p v-for="(item, index) in jrlList" :key="index">{{ item }}</p>
31 </div>
32 <li>日均接入量</li>
33 </ul>
34 </el-col>
35 <el-col :span="5">
36 <ul class="jrl">
37 <div class="jrlList jrllsit2">
38 <p v-for="(item, index) in dtjrlList" :key="index">{{ item }}</p>
39 </div>
40 <li>日均接入量</li>
41 </ul>
42 </el-col>
43 <el-col :span="5">
44 <ul class="jrl">
45 <div class="jrlList jrllsit3">
46 <p v-for="(item, index) in ztzlList" :key="index">{{ item }}</p>
47 </div>
48 <li>总体质量</li>
49 </ul>
50 </el-col>
51 </el-row>
52 </div>
53 <div class="jrdgk">
54 <!-- 接入点概括 -->
55 <div class="sxsjr homebk">
56 <div class="header titlebg">
57 接入点概括
58 </div>
59 <el-row>
60 <el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index">
61 <ul>
62 <li>{{ item.value }}</li>
63 <li>{{ item.title }}</li>
64 </ul>
65 </el-col>
66 </el-row>
67 </div>
68 <!-- 上报情况概括 -->
69 <div class="sbqkgk homebk">
70 <div class="header titlebg">
71 上报情况概括
72 </div>
73 <ul class="sbqkgs">
74 <div class="sbqkgsList">
75 <p v-for="(item, index) in sbqkgsList" :key="index"
76 :class="{ 'active': (typeof (item - 0) === 'number' && !isNaN(item - 0)) }">
77 {{ item }}
78 </p>
79 </div>
80 <li>总数量</li>
81 </ul>
82 </div>
83 </div>
84 <!-- 底部表格 -->
85 <div class="jrxxlb tableClass bgbk">
86 <div class="title titlebg">陕西省平台接入情况</div>
87 <!-- 陕西省平台接入情况table -->
88 <lb-table ref="table" :pagination="false" :heightNum="515" :column="tableData.columns" :data="tableData.data">
89 </lb-table>
90 </div>
91 </div>
92 </div>
93 </template>
94
95 <script>
96 // 上报首页
97 import wgsl from "./wgsl.vue";
98 import CenterLeft2Chart from "@/components/echart/map";
99 // 引入表格数据
100 import data from "./data"
101 export default {
102 name: "home",
103 components: { wgsl, CenterLeft2Chart },
104 data () {
105 function formatter (number) {
106 const numbers = number.toString().split('').reverse()
107 const segs = []
108 while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
109 return segs.join(',').split('').reverse().join('')
110 }
111 return {
112 // 总数量
113 config: {
114 number: [6523],
115 content: '{nt}',
116 formatter,
117 style: {
118 fontSize: 50,
119 fontWeight: 700,
120 fill: '#FFDD00'
121 }
122 },
123 // 日均接入量
124 jjrl: 300,
125 // 当天接入量
126 dtjrl: 100,
127 // 总体质量
128 ztzl: 3620,
129 // 上报情况概括
130 sbqkgs: 6296,
131 // 接入点概括
132 jrdList: [
133 {
134 value: 60,
135 title: '总数量'
136 },
137 {
138 value: 60,
139 title: '正常'
140 },
141 {
142 value: 60,
143 title: '异常'
144 }
145 ],
146 // 表格数据
147 tableData: {
148 // 表格头部信息
149 columns: data.columns(),
150 // 表格列表数据
151 data: [{
152 xzqmc: '咸阳市',
153 xzqzs: 100,
154 jrl: 300,
155 jscgl: 20,
156 dk: 60,
157 wjrqx: '长安县',
158 jrdf: 50
159 },
160 {
161 xzqmc: '咸阳市',
162 xzqzs: 100,
163 jrl: 300,
164 jscgl: 20,
165 dk: 60,
166 wjrqx: '长安县',
167 jrdf: 50
168 }]
169 }
170 }
171 },
172 computed: {
173 jrlList: function () {
174 return this.jjrl.toString().split('')
175 },
176 dtjrlList: function () {
177 return this.dtjrl.toString().split('')
178 },
179 ztzlList: function () {
180 return this.ztzl.toString().split('')
181 },
182 sbqkgsList: function () {
183 const numbers = this.sbqkgs.toString().split('').reverse()
184 const segs = []
185 while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
186 return segs.join(',').split('').reverse().join('')
187 }
188 },
189 methods: {
190 }
191 }
192 </script>
193 <style scoped lang="scss">
194 @import "~@/styles/mixin.scss";
195 @import "~@/styles/public.scss";
196 @import "./home.scss";
197 </style>
1 <template>
2 <!-- 监控日志 -->
3 <div class="jktjDetail form-clues">
4 <!-- 头部搜索 -->
5 <el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px">
6 <el-row>
7 <el-col :span="8">
8 <el-date-picker v-model="valueTime" type="datetimerange" range-separator="至"
9 start-placeholder="开始日期" end-placeholder="结束日期">
10 </el-date-picker>
11 </el-col>
12 <!-- <el-col :span="6">
13 <el-form-item label="开始时间">
14 <el-date-picker type="date" :picker-options="pickerOptionsStart" clearable
15 v-model="form.startTime" value-format="yyyy-MM-dd"></el-date-picker>
16 </el-form-item>
17 </el-col>
18 <el-col :span="6">
19 <el-form-item label="结束时间">
20 <el-date-picker clearable :picker-options="pickerOptionsEnd" v-model="form.endTime"
21 value-format="yyyy-MM-dd">
22 </el-date-picker>
23 </el-form-item>
24 </el-col> -->
25 <!-- 按钮操作 -->
26 <el-col :span="12" class="btnColRight">
27 <el-button type="default" @click="resetForm"> 重置 </el-button>
28 <el-button type="primary"> 查询 </el-button>
29 </el-col>
30 </el-row>
31 </el-form>
32 <!-- 表格 -->
33 <div class="form-clues-content echarts-box">
34 <div id="myChart" class="chart"></div>
35 </div>
36 </div>
37 </template>
38
39 <script>
40 export default {
41 name: "jktj",
42 data () {
43 return {
44 // 开始结束日期限制
45 pickerOptionsStart: {
46 disabledDate: (time) => {
47 if (this.form.endTime) {
48 return (
49 time.getTime() >= new Date(this.form.endTime).getTime()
50 );
51 }
52 }
53 },
54 // 结束日期限制
55 pickerOptionsEnd: {
56 disabledDate: (time) => {
57 if (this.form.startTime) {
58 return (
59 time.getTime() <= new Date(this.form.startTime).getTime()
60 );
61 }
62 }
63 },
64 // 搜索表单
65 valueTime: '',
66 form: {
67 startTime: "",
68 endTime: ""
69 }
70 }
71 },
72 mounted () {
73 // 初始化图表
74 this.echartInit();
75 },
76 methods: {
77 // 重置
78 resetForm () {
79 this.form = {
80 startTime: "",
81 endTime: ""
82 }
83 },
84 echartInit () {
85 // 基于准备好的dom，初始化echarts实例
86 let myChart = this.$echarts.init(
87 document.getElementById("myChart")
88 );
89 // 绘制图表
90 myChart.setOption({
91 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
92 title: {
93 show: true,
94 text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
95 left: "center",
96 textStyle: {
97 fontSize: 18,
98 lineHeight: 30,
99 height: 60,
100 color: "#777",
101 },
102 },
103 legend: {
104 data: [
105 "接入成功数量",
106 "接入失败数量",
107 "上报成功数量",
108 "上报失败数量",
109 ],
110 top: 80,
111 },
112 tooltip: {
113 show: true,
114 trigger: "axis",
115 },
116 grid: {
117 top: 120,
118 },
119 xAxis: [
120 {
121 type: "category",
122 data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
123 },
124 ],
125 yAxis: [
126 {
127 type: "value",
128 },
129 ],
130 series: [
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 name: "上报成功数量",
143 type: "bar",
144 data: [1000, 1500, 2000, 500, 4000],
145 },
146 {
147 name: "上报失败数量",
148 type: "bar",
149 data: [900, 500, 3200, 800, 4500],
150 },
151 ],
152 });
153 },
154 },
155 };
156 </script>
157 <style scoped lang="scss">
158 .jktjDetail {
159 background-color: #fff;
160 height: 100%;
161 display: flex;
162 flex-direction: column;
163
164 .echarts-box {
165 display: flex;
166 justify-content: center;
167 height: 100%;
168
169 .chart {
170 width: 100%;
171 height: 100%;
172 }
173 }
174
175 .form-clues-content {
176 flex: 1;
177 height: 100%;
178 }
179 }
180 </style>
181 <style scoped lang="scss">
182 @import "~@/styles/public.scss";
183 </style>