Skip to content

bdc / bdcjg-web

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

feat:首页

1 parent 42cd0c29
Inline Side-by-side
Showing 11 changed files with 713 additions and 257 deletions
1 <template>
2 <div>
3 <el-table :data="data" border v-loading="loading" v-bind="$attrs" v-on="$listeners">
4 <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
5 </lb-column>
6 </el-table>
7 <el-pagination class="lb-table-pagination" v-if="pagination" :page-sizes="[10, 20, 50, 100]"
8 layout="total, prev, pager, next, jumper" :style="{
9 'margin-top': '16px',
10 'text-align': 'right',
11 }" v-bind="$attrs" v-on="$listeners" :pager-count="6" @current-change="paginationCurrentChange">
12 </el-pagination>
13 </div>
14 </template>
15
16 <script>
17 import LbColumn from "@/components/LbTable/lb-column";
18
19 export default {
20 components: { LbColumn },
21 props: {
22 data: Array,
23 column: Array,
24 pagination: {
25 type: Boolean,
26 default: true,
27 },
28 },
29 methods: {
30 paginationCurrentChange (val) {
31 this.$emit("current-change", val);
32 },
33 },
34 };
35 </script>
36 <style rel="stylesheet/less" lang="less" scoped>
37
38 </style>
1 <template>
2 <div class="fzqk">
3 <div class="home-title">
4 <span class="title-name">发证情况</span>
5 <span class="title-more">更多＞＞</span>
6 </div>
7 <div class="home-content">
8 <div class="top">
9 <div class="img">
10 <img :src="imgSrc" alt="" />
11 </div>
12 <div class="word">
13 <div class="name">发证总量</div>
14 <div class="num">{{ fzzl }}</div>
15 <div class="unit">本</div>
16 </div>
17 </div>
18 <div class="bottom">
19 <div class="name">证书</div>
20 <div class="smallnum">{{ zs }}</div>
21 <div class="unit">本</div>
22 </div>
23 <div class="bottom">
24 <div class="name">证明</div>
25 <div class="smallnum">{{ zm }}</div>
26 <div class="unit">本</div>
27 </div>
28 </div>
29 </div>
30 </template>
31
32 <script>
33 export default {
34 name: "fzqk",
35 components: {},
36 data () {
37 return {
38 fzzl: 132176,
39 zs: 54237,
40 zm: 77939,
41 imgSrc: require("./images/zs.png"),
42 };
43 },
44 methods: {},
45 };
46 </script>
47 <style scoped lang="scss">
48 @import "./home.scss";
49
50 .fzqk {
51 width: 100%;
52 height: 100%;
53
54 .top {
55 width: 100%;
56 height: 50%;
57 display: flex;
58 align-items: center;
59
60 .img {
61 width: 100px;
62 height: 100px;
63
64 img {
65 width: 80px;
66 height: 80px;
67 border-radius: 50%;
68 background: #0f93f6;
69 margin: 10px;
70 }
71 }
72
73 .word {
74 width: calc(100% - 100px);
75 height: 80px;
76 padding-left: 20px;
77 }
78 }
79
80 .bottom {
81 width: 50%;
82 height: 50%;
83 float: left;
84 }
85
86 .name {
87 font-size: 16px;
88 color: #606266;
89 width: 100%;
90 height: 40px;
91 line-height: 40px;
92 }
93
94 .num,
95 .smallnum {
96 display: inline-block;
97 font-size: 30px;
98 color: #0f93f6;
99 height: 40px;
100 line-height: 40px;
101 }
102
103 .smallnum {
104 font-size: 20px;
105 }
106
107 .unit {
108 display: inline-block;
109 font-size: 14px;
110 color: #606266;
111 height: 40px;
112 line-height: 40px;
113 }
114 }
115 </style>
...\ No newline at end of file ...\ No newline at end of file
1 .home {
2 background: #dfe7f3;
3 height: 100%;
4 width: 100%;
5 box-sizing: border-box;
6 padding: 10px;
7 display: flex;
8 justify-content: space-between;
9
10 &-left,
11 &-center,
12 &-right {
13 width: 32%;
14 height: 100%;
15 border-radius: 4px;
16 }
17
18 &-left {
19 width: 25%;
20 display: flex;
21 justify-content: space-between;
22 flex-wrap: wrap;
23
24 &-top {
25 width: 100%;
26 height: 35%;
27 background: #fff;
28 margin-bottom: 15px;
29 border-radius: 4px;
30 }
31
32 &-bottom {
33 width: 100%;
34 height: calc(65% - 15px);
35 background: #fff;
36 border-radius: 4px;
37 }
38 }
39
40 &-center {
41 width: calc(40% - 30px);
42 background: #fff;
43 margin: 0 15px;
44 }
45
46 &-right {
47 width: 35%;
48 display: flex;
49 justify-content: space-between;
50 flex-wrap: wrap;
51
52 &-top {
53 width: 100%;
54 height: 35%;
55 background: #fff;
56 margin-bottom: 15px;
57 border-radius: 4px;
58 }
59
60 &-bottom {
61 width: 100%;
62 height: calc(65% - 15px);
63 background: #fff;
64 border-radius: 4px;
65 }
66 }
67
68 &-title {
69 width: 100%;
70 height: 40px;
71 line-height: 40px;
72 border-bottom: 1px solid #dfe7f3;
73 font-size: 16px;
74
75 .title-name,
76 .title-more {
77 display: inline-block;
78 height: 24px;
79 line-height: 24px;
80 margin-top: 8px;
81 }
82
83 .title-name {
84 float: left;
85 margin-left: 20px;
86 padding-left: 10px;
87 border-left: 4px solid #0F93F6;
88 }
89
90 .title-more {
91 display: inline-block;
92 float: right;
93 margin-right: 20px;
94 color: #97a8be;
95 cursor: pointer;
96 }
97 }
98
99 &-content {
100 width: 100%;
101 height: calc(100% - 41px);
102 padding: 0 20px 20px 20px;
103 }
104 }
1 .workplatform {
2 color: #4A4A4A;
3 height: 100%;
4 overflow: hidden;
5
6 .district {
7 margin: 10px 0;
8
9 /deep/.el-radio__label {
10 font-size: 20px;
11 }
12
13 &-name {
14 font-size: 20px;
15 font-weight: 600;
16 }
17 }
18
19 .data-statistics {
20 .sta-item {
21 height: 150px;
22 background-color: #FFFFFF;
23 border-radius: 5px;
24 @include flex-center();
25 flex-direction: column;
26 margin: 15px 0;
27
28 h5 {
29 font-size: 20px;
30 margin-bottom: 8px;
31 }
32 }
33 }
34
35 .statistical-chart-content {
36 height: calc(100% - 210px);
37 }
38
39 .statistical-chart {
40 display: flex;
41
42 .chart {
43 width: 50%;
44 min-height: 460px;
45 height: 100%;
46 }
47 }
48 }
...\ No newline at end of file ...\ No newline at end of file
1 <template> 1 <template>
2 <div class="workplatform"> 2 <div class="home">
3 <div class="district"> 3 <div class="home-left">
4 <span class="district-name">行政区：</span> 4 <div class="home-left-top">
5 <el-radio-group v-model="xzq" size="medium"> 5 <fzqk></fzqk>
6 <el-radio label="632321">同仁县</el-radio> 6 </div>
7 <el-radio label="632322">尖扎县</el-radio> 7 <div class="home-left-bottom">
8 <el-radio label="632323">泽库县</el-radio> 8 <wlqk></wlqk>
9 <el-radio label="632324">河南县</el-radio> 9 </div>
10 </el-radio-group>
11 </div> 10 </div>
12 <div class="data-statistics"> 11 <div class="home-center">
13 <h3>数据统计</h3> 12 <wgsl></wgsl>
14 <el-row type="flex" justify="space-between">
15 <el-col :span="5" v-for="(item, index) in statisticsList" :key="index" class="sta-item">
16 <h5>{{ item.title }}</h5>
17 <p>{{ item.detail }}</p>
18 </el-col>
19 </el-row>
20 </div> 13 </div>
21 <div class="statistical-chart-content"> 14 <div class="home-right">
22 <h3 style="margin-bottom:10px">统计图表</h3> 15 <div class="home-right-top">
23 <el-select v-model="dateTime" placeholder="请选择年度"> 16 <jgfl></jgfl>
24 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> 17 </div>
25 </el-option> 18 <div class="home-right-bottom">
26 </el-select> 19 <wgzj></wgzj>
27 <div class="statistical-chart">
28 <div id="myChart" class="chart"></div>
29 <div id="myChart1" class="chart"></div>
30 </div> 20 </div>
31 </div> 21 </div>
32 </div> 22 </div>
33 </template> 23 </template>
34 24
35 <script> 25 <script>
36 import { mapGetters } from 'vuex' 26 // 监管首页
37 import { getNumber, getYearList, getByYear } from '@/api/user' 27 import fzqk from "./fzqk.vue";
28 import wlqk from "./wlqk.vue";
29 import wgsl from "./wgsl.vue";
30 import jgfl from "./jgfl.vue";
31 import wgzj from "./wgzj.vue";
32
38 export default { 33 export default {
39 name: "workplatform", 34 name: "home",
35 components: { fzqk, wlqk, wgsl, jgfl, wgzj },
40 data () { 36 data () {
41 return { 37 return {};
42 xzq: '',
43 dateTime: null,
44 options: [],
45 statisticsList: [
46 {
47 title: '500',
48 detail: '数据上报总数'
49 },
50 {
51 title: '500',
52 detail: '数据上报失败总数'
53 },
54 {
55 title: '500',
56 detail: '本年度上报总数'
57 },
58 {
59 title: '500',
60 detail: '本月上报总数'
61 }
62 ],
63 qllxData: [],
64 djlxLeable: [],
65 djlxValue: []
66 }
67 },
68 computed: {
69 ...mapGetters(['dicData'])
70 },
71 watch: {
72 dateTime: {
73 handler (newName, oldName) {
74 this._getByYear()
75 },
76 immediate: true
77 },
78 xzq: {
79 handler (newName, oldName) {
80 this._featchData()
81 this._getYearList()
82 },
83 immediate: true
84 },
85 },
86 created () {
87 this._featchData()
88 this._getYearList()
89 },
90 mounted () {
91 this.drawLine()
92 this.drawLine1()
93 }, 38 },
94 methods: { 39 methods: {},
95 async _featchData () { 40 };
96 try {
97 let { result } = await getNumber(this.xzq)
98 this.statisticsList[0].title = result.allNumber
99 this.statisticsList[1].title = result.failNumber
100 this.statisticsList[2].title = result.thisYearNumber
101 this.statisticsList[3].title = result.thisMonthNumber
102 } catch (error) {
103 }
104 },
105 async _getYearList () {
106 try {
107 let { result } = await getYearList()
108 result = result.filter(x => !!x == true || x == 0)
109 result.forEach((item, index) => {
110 if (item) {
111 this.$set(this.options, index, {
112 value: item,
113 label: item
114 })
115 }
116 });
117 this.dateTime = this.options[0].value
118 this._getByYear()
119 } catch (error) {
120 }
121 },
122 async _getByYear () {
123 try {
124 let { result } = await getByYear(this.dateTime, this.xzq)
125 this.qllxData.length = 0
126 this.djlxLeable.length = 0
127 this.djlxValue.length = 0
128 result.qllx.forEach((item, index) => {
129 this.$set(this.qllxData, index, [
130 item.NUM, item.QLLX
131 ])
132 })
133 result.djlx.forEach((item, index) => {
134 this.$set(this.djlxLeable, index, item.DJLX)
135 this.$set(this.djlxValue, index, item.NUM)
136 })
137 this.drawLine()
138 this.drawLine1()
139 } catch (error) {
140 }
141 },
142 drawLine () {
143 // 基于准备好的dom，初始化echarts实例
144 let myChart = this.$echarts.init(document.getElementById('myChart'))
145 // 绘制图表
146 myChart.setOption({
147 color: ['rgb(68, 231, 177)'],
148 dataset: {
149 source: this.qllxData
150 },
151 grid: { containLabel: true },
152 xAxis: {},
153 yAxis: {
154 type: 'category',
155 axisLabel: {
156 rotate: '30'
157 },
158 },
159 series: [
160 {
161 type: 'bar',
162 showBackground: true,
163 itemStyle: {
164 normal: {
165 label: {
166 show: true, //开启显示
167 position: 'right', //在上方显示
168 textStyle: {
169 color: '#4A4A4A',
170 fontSize: 14
171 }
172 }
173 }
174 },
175 encode: {
176 x: 'amount',
177 y: 'product'
178 }
179 }
180 ]
181 })
182 },
183 drawLine1 () {
184 // 基于准备好的dom，初始化echarts实例
185 let myChart = this.$echarts.init(document.getElementById('myChart1'))
186 // 绘制图表
187 myChart.setOption({
188 color: ['rgb(85, 133, 221)'],
189 xAxis: {
190 data: this.djlxLeable,
191 axisLabel: {
192 rotate: '45'
193 }
194 },
195 yAxis: {
196 type: 'value'
197 },
198 series: [
199 {
200 data: this.djlxValue,
201 type: 'bar',
202 itemStyle: {
203 normal: {
204 label: {
205 show: true, //开启显示
206 position: 'top', //在上方显示
207 textStyle: {
208 color: '#4A4A4A',
209 fontSize: 14
210 }
211 }
212 }
213 },
214 }
215 ]
216 })
217 }
218 }
219 }
220 </script> 41 </script>
221 <style scoped lang="scss"> 42 <style scoped lang="scss">
222 @import "~@/styles/mixin.scss"; 43 @import "./home.scss";
223 @import "./index.scss";
224 </style> 44 </style>
......
1 <template>
2 <div class="jgfl">
3 <div class="home-title">
4 <span class="title-name">监管分类</span>
5 <span class="title-more">更多＞＞</span>
6 </div>
7 <div class="home-content">
8 <div id="jgfl-myChart" class="chart"></div>
9 </div>
10 </div>
11 </template>
12
13 <script>
14 export default {
15 name: "jgfl",
16 components: {},
17 data () {
18 return {
19 data: [20118, 416232, 224447, 32, 48842],
20 };
21 },
22 mounted () {
23 this.echartInit();
24 },
25 methods: {
26 echartInit () {
27 let _this = this;
28 // 基于准备好的dom，初始化echarts实例
29 let myChart = this.$echarts.init(
30 document.getElementById("jgfl-myChart")
31 );
32 // 绘制图表
33 myChart.setOption({
34 title: {
35 text: "(单位: 件)",
36 textStyle: {
37 fontSize: 16,
38 color: "#606266",
39 fontWeight: "normal",
40 },
41 },
42 color: "red",
43 radar: {
44 indicator: [
45 { name: "原则监管", max: 22000 },
46 { name: "时效监管", max: 420000 },
47 { name: "证书监管", max: 230000 },
48 { name: "年限监管", max: 38000 },
49 { name: "内容监管", max: 50000 },
50 ],
51 name: {
52 color: "#606266",
53 formatter: function (value, indicator) {
54 if (value == "原则监管") {
55 return value + " " + _this.data[0];
56 } else if (value == "时效监管") {
57 return value + " " + _this.data[1];
58 } else if (value == "证书监管") {
59 return value + " " + _this.data[2];
60 } else if (value == "年限监管") {
61 return value + " " + _this.data[3];
62 } else if (value == "内容监管") {
63 return value + " " + _this.data[4];
64 }
65 },
66 },
67 splitLine: {
68 lineStyle: {
69 color: "#0F93F6",
70 },
71 },
72 splitArea: {
73 show: false
74 }
75 },
76 series: [
77 {
78 type: "radar",
79 data: [
80 {
81 value: _this.data,
82 },
83 ],
84 },
85 ],
86 });
87 },
88 },
89 };
90 </script>
91 <style scoped lang="scss">
92 @import "./home.scss";
93
94 .jgfl {
95 width: 100%;
96 height: 100%;
97
98 .chart {
99 width: 100%;
100 height: calc(100% - 10px);
101 margin-top: 10px;
102 }
103 }
104 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="wgsl">
3 <div id="wgsl-myChart" class="chart"></div>
4 </div>
5 </template>
6
7 <script>
8 // 网络情况
9 export default {
10 name: "wgsl",
11 components: {},
12 data () {
13 return {};
14 },
15 mounted () {
16 },
17 methods: {
18
19 },
20 };
21 </script>
22 <style scoped lang="scss">
23 @import "./home.scss";
24
25 .wgsl {
26 width: 100%;
27 height: 100%;
28
29 .chart {
30 width: 100%;
31 height: 100%;
32 background: url("./images/map.png") 50% 50% no-repeat;
33 }
34 }
35 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="wgzj">
3 <div class="home-title">
4 <span class="title-name">违规总计</span>
5 <span class="title-more">更多＞＞</span>
6 </div>
7 <div class="home-content">
8 <div class="table-box">
9 <paging-table v-loading="loading" :data="data" :column="column" :pagination="false"></paging-table>
10 </div>
11 </div>
12 </div>
13 </template>
14
15 <script>
16 import pagingTable from "@/components/pagingTable/pagingTable.vue";
17 export default {
18 name: "wgzj",
19 components: { pagingTable },
20 data () {
21 return {
22 loading: false,
23 data: [
24 {
25 xzq: "汉台区",
26 yzjg: "4818",
27 sxjg: "367575",
28 zsjg: "72920",
29 nxjg: "3",
30 nrjg: "3082",
31 zj: "448398",
32 },
33 {
34 xzq: "南郑区",
35 yzjg: "4818",
36 sxjg: "367575",
37 zsjg: "72920",
38 nxjg: "3",
39 nrjg: "3082",
40 zj: "448398",
41 },
42 {
43 xzq: "汉台区",
44 yzjg: "4818",
45 sxjg: "367575",
46 zsjg: "72920",
47 nxjg: "3",
48 nrjg: "3082",
49 zj: "448398",
50 },
51 {
52 xzq: "汉台区",
53 yzjg: "4818",
54 sxjg: "367575",
55 zsjg: "72920",
56 nxjg: "3",
57 nrjg: "3082",
58 zj: "448398",
59 },
60 {
61 xzq: "汉台区",
62 yzjg: "4818",
63 sxjg: "367575",
64 zsjg: "72920",
65 nxjg: "3",
66 nrjg: "3082",
67 zj: "448398",
68 },
69 {
70 xzq: "汉台区",
71 yzjg: "4818",
72 sxjg: "367575",
73 zsjg: "72920",
74 nxjg: "3",
75 nrjg: "3082",
76 zj: "448398",
77 },
78 {
79 xzq: "南郑区",
80 yzjg: "4818",
81 sxjg: "367575",
82 zsjg: "72920",
83 nxjg: "3",
84 nrjg: "3082",
85 zj: "448398",
86 },
87 {
88 xzq: "汉台区",
89 yzjg: "4818",
90 sxjg: "367575",
91 zsjg: "72920",
92 nxjg: "3",
93 nrjg: "3082",
94 zj: "448398",
95 },
96 {
97 xzq: "汉台区",
98 yzjg: "4818",
99 sxjg: "367575",
100 zsjg: "72920",
101 nxjg: "3",
102 nrjg: "3082",
103 zj: "448398",
104 },
105 {
106 xzq: "汉台区",
107 yzjg: "4818",
108 sxjg: "367575",
109 zsjg: "72920",
110 nxjg: "3",
111 nrjg: "3082",
112 zj: "448398",
113 },
114 {
115 xzq: "汉台区",
116 yzjg: "4818",
117 sxjg: "367575",
118 zsjg: "72920",
119 nxjg: "3",
120 nrjg: "3082",
121 zj: "448398",
122 },
123 {
124 xzq: "南郑区",
125 yzjg: "4818",
126 sxjg: "367575",
127 zsjg: "72920",
128 nxjg: "3",
129 nrjg: "3082",
130 zj: "448398",
131 },
132 {
133 xzq: "汉台区",
134 yzjg: "4818",
135 sxjg: "367575",
136 zsjg: "72920",
137 nxjg: "3",
138 nrjg: "3082",
139 zj: "448398",
140 },
141 {
142 xzq: "汉台区",
143 yzjg: "4818",
144 sxjg: "367575",
145 zsjg: "72920",
146 nxjg: "3",
147 nrjg: "3082",
148 zj: "448398",
149 },
150 {
151 xzq: "汉台区",
152 yzjg: "4818",
153 sxjg: "367575",
154 zsjg: "72920",
155 nxjg: "3",
156 nrjg: "3082",
157 zj: "448398",
158 },
159 ],
160 column: [
161 {
162 prop: "xzq",
163 label: "行政区/监管(件)",
164 },
165 {
166 prop: "yzjg",
167 label: "原则监管",
168 width: 60,
169 },
170 {
171 prop: "sxjg",
172 label: "时效监管",
173 },
174 {
175 prop: "zsjg",
176 label: "证书监管",
177 width: 60,
178 },
179 {
180 prop: "nxjg",
181 label: "年限监管",
182 width: 60,
183 },
184 {
185 prop: "nrjg",
186 label: "内容监管",
187 width: 60,
188 },
189 {
190 prop: "zj",
191 label: "总计",
192 },
193 ],
194 };
195 },
196 methods: {},
197 };
198 </script>
199 <style scoped lang="scss">
200 @import "./home.scss";
201
202 .wgzj {
203 width: 100%;
204 height: 100%;
205
206 .table-box {
207 height: calc(100% - 20px);
208 overflow-y: scroll;
209 margin-top: 20px;
210 }
211 }
212 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="wlqk">
3 <div id="wlqk-myChart" class="chart"></div>
4 </div>
5 </template>
6
7 <script>
8 // 网络情况
9 export default {
10 name: "wlqk",
11 components: {},
12 data () {
13 return {
14 xAxisData: [],
15 wldkData: [],
16 wlzcData: [],
17 };
18 },
19 mounted () {
20 this.echartInit();
21 },
22 methods: {
23 echartInit () {
24 let _this = this;
25 // 基于准备好的dom，初始化echarts实例
26 let myChart = this.$echarts.init(
27 document.getElementById("wlqk-myChart")
28 );
29 // 绘制图表
30 myChart.setOption({
31 color: ["#ee9096", "#8fb657"],
32 legend: {
33 data: ["网络断开", "网络正常"],
34 top: 20,
35 },
36 xAxis: [
37 {
38 type: "category",
39 data: _this.xAxisData,
40 },
41 ],
42 yAxis: [
43 {
44 type: "value",
45 },
46 ],
47 series: [
48 {
49 name: "网络断开",
50 type: "bar",
51 data: _this.wldkData,
52 },
53 {
54 name: "网络正常",
55 type: "bar",
56 data: _this.wlzcData,
57 },
58 ],
59 });
60 },
61 },
62 };
63 </script>
64 <style scoped lang="scss">
65 @import "./home.scss";
66
67 .wlqk {
68 width: 100%;
69 height: 100%;
70
71 .chart {
72 width: 100%;
73 height: 100%;
74 }
75 }
76 </style>
...\ No newline at end of file ...\ No newline at end of file