工作台样式调整
Showing
8 changed files
with
322 additions
and
280 deletions
... | @@ -17,7 +17,7 @@ | ... | @@ -17,7 +17,7 @@ |
17 | data () { | 17 | data () { |
18 | return { | 18 | return { |
19 | options: {}, | 19 | options: {}, |
20 | max: "100", //最大value值 | 20 | max: "5000", //最大value值 |
21 | min: "1", // 最小value值 | 21 | min: "1", // 最小value值 |
22 | key: 0, | 22 | key: 0, |
23 | mapjson: "", | 23 | mapjson: "", |
... | @@ -87,10 +87,10 @@ | ... | @@ -87,10 +87,10 @@ |
87 | itemGap: 2, // 每两个图元之间的间隔距离,单位为px | 87 | itemGap: 2, // 每两个图元之间的间隔距离,单位为px |
88 | pieces: [ | 88 | pieces: [ |
89 | // 自定义每一段的范围,以及每一段的文字 | 89 | // 自定义每一段的范围,以及每一段的文字 |
90 | { gte: 100, label: "100以上", color: "#035cf5" }, // 不指定 max,表示 max 为无限大(Infinity)。 | 90 | { gte: 100, label: "5000以上", color: "#035cf5" }, // 不指定 max,表示 max 为无限大(Infinity)。 |
91 | { gte: 50, lte: 6000, label: "20-100", color: "#3375e4" }, | 91 | { gte: 50, lte: 6000, label: "1000-5000", color: "#3375e4" }, |
92 | { gte: 20, lte: 2000, label: "1-200", color: "#6797ef" }, | 92 | { gte: 20, lte: 2000, label: "500-1000", color: "#6797ef" }, |
93 | { gte: 1, lte: 1000, label: "1-20", color: "#96b5ef" }, | 93 | { gte: 1, lte: 1000, label: "0-500", color: "#96b5ef" }, |
94 | ], | 94 | ], |
95 | textStyle: { | 95 | textStyle: { |
96 | color: "#737373", | 96 | color: "#737373", | ... | ... |
... | @@ -26,7 +26,7 @@ | ... | @@ -26,7 +26,7 @@ |
26 | watch: { | 26 | watch: { |
27 | cdata: { | 27 | cdata: { |
28 | handler (newData) { | 28 | handler (newData) { |
29 | 29 | console.log("newData", newData); | |
30 | this.options = { | 30 | this.options = { |
31 | color: [ | 31 | color: [ |
32 | "#37a2da", | 32 | "#37a2da", |
... | @@ -34,31 +34,29 @@ | ... | @@ -34,31 +34,29 @@ |
34 | "#9fe6b8", | 34 | "#9fe6b8", |
35 | "#ffdb5c", | 35 | "#ffdb5c", |
36 | "#ff9f7f", | 36 | "#ff9f7f", |
37 | "#8378ea", | ||
38 | "#fb7293", | 37 | "#fb7293", |
39 | "#e7bcf3", | 38 | "#e7bcf3", |
39 | "#8378ea" | ||
40 | 40 | ||
41 | ], | 41 | ], |
42 | tooltip: { | ||
43 | trigger: "item", | ||
44 | formatter: "<br/>{b} : {c} ({d}%)", | ||
45 | }, | ||
42 | series: [ | 46 | series: [ |
43 | { | 47 | { |
44 | name: "Access From", | 48 | name: "Access From", |
45 | type: "pie", | 49 | type: "pie", |
46 | radius: ["54%", "70%"], | ||
47 | avoidLabelOverlap: true, | 50 | avoidLabelOverlap: true, |
48 | label: { | 51 | label: { |
49 | formatter: (params) => { | 52 | formatter: (params) => { |
50 | // console.log(params) | 53 | return `${params.name}`; |
51 | return `${params.name}\n(${params.value})`; | ||
52 | }, | 54 | }, |
53 | position: "outer", | 55 | position: "outer", |
54 | alignTo: "edge", | 56 | alignTo: "edge", |
55 | margin: 5 | 57 | margin: 5 |
56 | }, | 58 | }, |
57 | labelLine: { | 59 | |
58 | lineStyle: { | ||
59 | width: 3, | ||
60 | }, | ||
61 | }, | ||
62 | data: newData.seriesData, | 60 | data: newData.seriesData, |
63 | } | 61 | } |
64 | ], | 62 | ], | ... | ... |
... | @@ -5,57 +5,71 @@ | ... | @@ -5,57 +5,71 @@ |
5 | </template> | 5 | </template> |
6 | 6 | ||
7 | <script> | 7 | <script> |
8 | import Chart from "./Chart"; | 8 | import Chart from "./Chart"; |
9 | import work from "@/api/work"; | 9 | import work from "@/api/work"; |
10 | export default { | 10 | export default { |
11 | data() { | 11 | data () { |
12 | return { | 12 | return { |
13 | cdata: { | 13 | cdata: { |
14 | seriesData: [], | 14 | seriesData: [], |
15 | }, | 15 | }, |
16 | }; | 16 | getdata: [], |
17 | }, | 17 | }; |
18 | components: { | 18 | }, |
19 | Chart, | 19 | components: { |
20 | }, | 20 | Chart, |
21 | mounted() { | 21 | }, |
22 | this.getdjywltotal(); | 22 | mounted () { |
23 | window.addEventListener("resize", () => { | 23 | this.addhousetotal(); |
24 | this.cdata.seriesData = []; | 24 | window.addEventListener("resize", () => { |
25 | this.getdjywltotal(); | 25 | this.getdata = []; |
26 | }); | 26 | this.addhousetotal(); |
27 | }, | 27 | }); |
28 | methods: { | 28 | |
29 | // 获取登记业务量玫瑰图数据 | 29 | }, |
30 | async getdjywltotal() { | 30 | methods: { |
31 | if (this.cdata.seriesData.length == 0) { | 31 | async addhousetotal () { |
32 | try { | 32 | if (this.getdata.length == 0) { |
33 | let p = { | 33 | this.getdata = []; |
34 | DJLX: "", | 34 | try { |
35 | QLLX: "", | 35 | let { result: res } = await work.addhousetotal(); |
36 | XZQDM: "", | 36 | res.map((item) => { |
37 | }; | 37 | return this.cdata.seriesData.push({ |
38 | this.cdata.seriesData = []; | 38 | name: `${item.fwyt + '(' + item.fwxz})`, |
39 | let res = await work.getdjywltotal(p); | 39 | value: item.mj, |
40 | if(this.cdata.seriesData.length == 0){ | 40 | }); |
41 | res.result.map((item) => { | ||
42 | return this.cdata.seriesData.push({ | ||
43 | name: item.AREACODE, | ||
44 | value: item.ywtotal, | ||
45 | }); | ||
46 | 41 | ||
47 | }); | 42 | }); |
48 | } | ||
49 | // 遍历修改数组键,作为echars图表的参数 | ||
50 | 43 | ||
51 | 44 | ||
52 | } catch (error) { | 45 | } catch (error) { |
53 | console.log(error); | 46 | console.log("error", error); |
47 | } | ||
54 | } | 48 | } |
55 | } | 49 | let delarr = this.cdata.seriesData.sort(this.up) |
56 | }, | 50 | this.setadat(delarr) |
57 | }, | 51 | |
58 | }; | 52 | }, |
53 | // 处理数据方法 | ||
54 | setadat (delarr) { | ||
55 | |||
56 | this.cdata.seriesData = delarr.splice(0, 6); | ||
57 | let sum = 0 | ||
58 | for (var i = 0; i < delarr.length; i++) { | ||
59 | sum = sum + delarr[i].value | ||
60 | } | ||
61 | sum = sum.toFixed(2) | ||
62 | this.cdata.seriesData.push({ | ||
63 | name: "其他(其他种类)", | ||
64 | values: "其他种类", | ||
65 | value: sum, | ||
66 | }) | ||
67 | }, | ||
68 | // 排序方法 | ||
69 | up (x, y) { return y.value - x.value } | ||
70 | |||
71 | } | ||
72 | }; | ||
59 | </script> | 73 | </script> |
60 | 74 | ||
61 | <style lang="scss" scoped></style> | 75 | <style lang="scss" scoped></style> | ... | ... |
... | @@ -2,7 +2,8 @@ | ... | @@ -2,7 +2,8 @@ |
2 | <div class="navbar-con"> | 2 | <div class="navbar-con"> |
3 | <div class="navbar"> | 3 | <div class="navbar"> |
4 | <div class="logo"> | 4 | <div class="logo"> |
5 | <img :src="require('@/image/logo.png')" alt="" /> | 5 | <img :src="require('@/image/bdclogo.png')" alt="" /> |
6 | <h4>不动产登记上报系统</h4> | ||
6 | </div> | 7 | </div> |
7 | <div class="right-menu"> | 8 | <div class="right-menu"> |
8 | <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> | 9 | <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand"> |
... | @@ -20,214 +21,224 @@ | ... | @@ -20,214 +21,224 @@ |
20 | </div> | 21 | </div> |
21 | </template> | 22 | </template> |
22 | <script> | 23 | <script> |
23 | import { mapGetters } from 'vuex' | 24 | import { mapGetters } from 'vuex' |
24 | import Breadcrumb from './Breadcrumb' | 25 | import Breadcrumb from './Breadcrumb' |
25 | import defaultSettings from '@/settings' | 26 | import defaultSettings from '@/settings' |
26 | export default { | 27 | export default { |
27 | components: { | 28 | components: { |
28 | Breadcrumb | 29 | Breadcrumb |
29 | }, | 30 | }, |
30 | computed: { | 31 | computed: { |
31 | ...mapGetters(['sidebar', 'avatar', 'name']) | 32 | ...mapGetters(['sidebar', 'avatar', 'name']) |
32 | }, | ||
33 | data () { | ||
34 | return { | ||
35 | title: defaultSettings.title | ||
36 | } | ||
37 | }, | ||
38 | methods: { | ||
39 | handleDataView () { | ||
40 | const { href } = this.$router.resolve('/dataView'); | ||
41 | window.open(href, '_blank'); | ||
42 | }, | 33 | }, |
43 | themeChange (val) { | 34 | data () { |
44 | this.$store.dispatch('app/updateTheme', val) | 35 | return { |
36 | title: defaultSettings.title | ||
37 | } | ||
45 | }, | 38 | }, |
46 | handleCommand (command) { | 39 | methods: { |
47 | if (command == 'a') { | 40 | handleDataView () { |
48 | } else { | 41 | const { href } = this.$router.resolve('/dataView'); |
42 | window.open(href, '_blank'); | ||
43 | }, | ||
44 | themeChange (val) { | ||
45 | this.$store.dispatch('app/updateTheme', val) | ||
46 | }, | ||
47 | handleCommand (command) { | ||
48 | if (command == 'a') { | ||
49 | } else { | ||
49 | 50 | ||
51 | } | ||
50 | } | 52 | } |
51 | } | 53 | } |
52 | } | 54 | } |
53 | } | ||
54 | </script> | 55 | </script> |
55 | <style lang="scss" scoped> | 56 | <style lang="scss" scoped> |
56 | .navbar-con { | 57 | .navbar-con { |
57 | position: relative; | 58 | position: relative; |
58 | 59 | ||
59 | .logo { | 60 | .logo { |
60 | color: #fff; | 61 | color: #fff; |
61 | font-size: 26px; | 62 | font-size: 26px; |
62 | font-weight: 700; | 63 | font-weight: 700; |
63 | } | 64 | display: flex; |
64 | } | 65 | img { |
65 | 66 | width: 47px; | |
66 | .NoticeBar { | 67 | height: 47px; |
67 | position: absolute; | 68 | } |
68 | bottom: 0; | 69 | h4 { |
69 | } | 70 | margin-left: 20px; |
70 | 71 | height: 50px; | |
71 | .el-dropdown-menu { | 72 | line-height: 50px; |
72 | padding: 0 !important; | 73 | } |
73 | border: 1px solid #ebeef5; | 74 | } |
74 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); | ||
75 | border-radius: 4px 0 0 4px 4px; | ||
76 | |||
77 | .el-dropdown-menu__item { | ||
78 | text-align: center; | ||
79 | margin-top: 0 !important; | ||
80 | font-size: 14px; | ||
81 | font-family: PingFangSC-Regular, PingFang SC; | ||
82 | font-weight: 400; | ||
83 | color: #4a4a4a; | ||
84 | width: 140px; | ||
85 | height: 36px; | ||
86 | line-height: 36px; | ||
87 | } | ||
88 | |||
89 | .el-dropdown-menu__item:nth-child(6) { | ||
90 | border-top: 1px solid #ebeef5; | ||
91 | } | ||
92 | |||
93 | .popper__arrow { | ||
94 | top: -11px !important; | ||
95 | left: 110px !important; | ||
96 | transform: rotate(0deg) scale(2); | ||
97 | } | 75 | } |
98 | 76 | ||
99 | .el-dropdown-menu__item:not(.is-disabled):hover, | 77 | .NoticeBar { |
100 | .el-dropdown-menu__item:focus { | 78 | position: absolute; |
101 | background: #f6f7f9; | 79 | bottom: 0; |
102 | color: #4a4a4a; | ||
103 | } | ||
104 | } | ||
105 | |||
106 | .navbar { | ||
107 | height: $headerHeight; | ||
108 | overflow: hidden; | ||
109 | position: relative; | ||
110 | background: #3D59C4; | ||
111 | display: flex; | ||
112 | align-items: center; | ||
113 | padding-right: 20px; | ||
114 | justify-content: space-between; | ||
115 | .header-logo { | ||
116 | width: 300px; | ||
117 | } | 80 | } |
118 | 81 | ||
119 | .backdrop { | 82 | .el-dropdown-menu { |
120 | flex: 1; | 83 | padding: 0 !important; |
121 | width: 60%; | 84 | border: 1px solid #ebeef5; |
122 | background-size: 100% 100%; | 85 | box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); |
123 | height: $headerHeight; | 86 | border-radius: 4px 0 0 4px 4px; |
124 | display: flex; | 87 | |
125 | align-items: center; | 88 | .el-dropdown-menu__item { |
126 | } | 89 | text-align: center; |
90 | margin-top: 0 !important; | ||
91 | font-size: 14px; | ||
92 | font-family: PingFangSC-Regular, PingFang SC; | ||
93 | font-weight: 400; | ||
94 | color: #4a4a4a; | ||
95 | width: 140px; | ||
96 | height: 36px; | ||
97 | line-height: 36px; | ||
98 | } | ||
127 | 99 | ||
128 | .hamburger-container { | 100 | .el-dropdown-menu__item:nth-child(6) { |
129 | line-height: 43px; | 101 | border-top: 1px solid #ebeef5; |
130 | height: 100%; | 102 | } |
131 | float: left; | ||
132 | cursor: pointer; | ||
133 | transition: background 0.3s; | ||
134 | -webkit-tap-highlight-color: transparent; | ||
135 | 103 | ||
136 | &:hover { | 104 | .popper__arrow { |
137 | background: rgba(0, 0, 0, 0.025); | 105 | top: -11px !important; |
106 | left: 110px !important; | ||
107 | transform: rotate(0deg) scale(2); | ||
138 | } | 108 | } |
139 | } | ||
140 | 109 | ||
141 | .breadcrumb-container { | 110 | .el-dropdown-menu__item:not(.is-disabled):hover, |
142 | float: left; | 111 | .el-dropdown-menu__item:focus { |
112 | background: #f6f7f9; | ||
113 | color: #4a4a4a; | ||
114 | } | ||
143 | } | 115 | } |
144 | 116 | ||
145 | .right-menu { | 117 | .navbar { |
146 | float: right; | 118 | height: $headerHeight; |
147 | height: 100%; | 119 | overflow: hidden; |
148 | line-height: 50px; | 120 | position: relative; |
121 | background: linear-gradient(270deg, #ebf1ff 0%, #3d59c4 100%); | ||
149 | display: flex; | 122 | display: flex; |
150 | align-items: center; | 123 | align-items: center; |
151 | 124 | padding-right: 20px; | |
152 | .function { | 125 | justify-content: space-between; |
153 | margin: 0 15px; | 126 | .header-logo { |
154 | cursor: pointer; | 127 | width: 300px; |
155 | } | 128 | } |
156 | 129 | ||
157 | .shutdown { | 130 | .backdrop { |
158 | font-size: 20px; | 131 | flex: 1; |
159 | margin-left: 15px; | 132 | width: 60%; |
160 | cursor: pointer; | 133 | background-size: 100% 100%; |
161 | } | 134 | height: $headerHeight; |
162 | 135 | display: flex; | |
163 | .organization-item { | 136 | align-items: center; |
164 | margin-right: 40px; | ||
165 | margin-top: -40px !important; | ||
166 | } | 137 | } |
167 | 138 | ||
168 | .item { | 139 | .hamburger-container { |
169 | margin-right: 40px; | 140 | line-height: 43px; |
170 | margin-top: -20px; | 141 | height: 100%; |
171 | line-height: 18.4px; | 142 | float: left; |
172 | cursor: pointer; | 143 | cursor: pointer; |
173 | position: relative; | 144 | transition: background 0.3s; |
174 | 145 | -webkit-tap-highlight-color: transparent; | |
175 | .item-box { | 146 | |
176 | position: absolute; | 147 | &:hover { |
177 | top: -5px; | 148 | background: rgba(0, 0, 0, 0.025); |
178 | left: 3px; | ||
179 | width: 100%; | ||
180 | min-width: 25px; | ||
181 | height: 25px; | ||
182 | cursor: pointer; | ||
183 | z-index: 100; | ||
184 | } | 149 | } |
185 | } | 150 | } |
186 | 151 | ||
187 | &:focus { | 152 | .breadcrumb-container { |
188 | outline: none; | 153 | float: left; |
189 | } | 154 | } |
190 | 155 | ||
191 | .right-menu-item { | 156 | .right-menu { |
192 | display: inline-block; | 157 | float: right; |
193 | height: 100%; | 158 | height: 100%; |
194 | font-size: 18px; | 159 | line-height: 50px; |
195 | color: #fff; | 160 | display: flex; |
196 | vertical-align: text-bottom; | 161 | align-items: center; |
197 | 162 | ||
198 | &.hover-effect { | 163 | .function { |
164 | margin: 0 15px; | ||
199 | cursor: pointer; | 165 | cursor: pointer; |
200 | transition: background 0.3s; | 166 | } |
201 | display: flex; | ||
202 | align-items: center; | ||
203 | 167 | ||
204 | &:hover { | 168 | .shutdown { |
205 | background: rgba(0, 0, 0, 0.025); | 169 | font-size: 20px; |
206 | } | 170 | margin-left: 15px; |
171 | cursor: pointer; | ||
207 | } | 172 | } |
208 | } | ||
209 | 173 | ||
210 | .avatar-wrapper { | 174 | .organization-item { |
211 | position: relative; | 175 | margin-right: 40px; |
212 | display: flex; | 176 | margin-top: -40px !important; |
213 | height: 40px; | 177 | } |
214 | align-items: center; | ||
215 | 178 | ||
216 | .user-avatar { | 179 | .item { |
180 | margin-right: 40px; | ||
181 | margin-top: -20px; | ||
182 | line-height: 18.4px; | ||
217 | cursor: pointer; | 183 | cursor: pointer; |
218 | width: 35px; | 184 | position: relative; |
219 | height: 35px; | 185 | |
220 | border-radius: 50%; | 186 | .item-box { |
187 | position: absolute; | ||
188 | top: -5px; | ||
189 | left: 3px; | ||
190 | width: 100%; | ||
191 | min-width: 25px; | ||
192 | height: 25px; | ||
193 | cursor: pointer; | ||
194 | z-index: 100; | ||
195 | } | ||
221 | } | 196 | } |
222 | 197 | ||
223 | .el-icon-caret-bottom { | 198 | &:focus { |
224 | cursor: pointer; | 199 | outline: none; |
225 | position: absolute; | 200 | } |
226 | right: -15px; | 201 | |
227 | top: 17px; | 202 | .right-menu-item { |
228 | font-size: 12px; | 203 | display: inline-block; |
204 | height: 100%; | ||
205 | font-size: 18px; | ||
206 | color: #fff; | ||
207 | vertical-align: text-bottom; | ||
208 | |||
209 | &.hover-effect { | ||
210 | cursor: pointer; | ||
211 | transition: background 0.3s; | ||
212 | display: flex; | ||
213 | align-items: center; | ||
214 | |||
215 | &:hover { | ||
216 | background: rgba(0, 0, 0, 0.025); | ||
217 | } | ||
218 | } | ||
219 | } | ||
220 | |||
221 | .avatar-wrapper { | ||
222 | position: relative; | ||
223 | display: flex; | ||
224 | height: 40px; | ||
225 | align-items: center; | ||
226 | |||
227 | .user-avatar { | ||
228 | cursor: pointer; | ||
229 | width: 35px; | ||
230 | height: 35px; | ||
231 | border-radius: 50%; | ||
232 | } | ||
233 | |||
234 | .el-icon-caret-bottom { | ||
235 | cursor: pointer; | ||
236 | position: absolute; | ||
237 | right: -15px; | ||
238 | top: 17px; | ||
239 | font-size: 12px; | ||
240 | } | ||
229 | } | 241 | } |
230 | } | 242 | } |
231 | } | 243 | } |
232 | } | ||
233 | </style> | 244 | </style> | ... | ... |
1 | <!-- | 1 | <!-- |
2 | * @Description: | 2 | * @Description: |
3 | * @Autor: renchao | 3 | * @Autor: renchao |
4 | * @LastEditTime: 2023-03-06 16:18:21 | 4 | * @LastEditTime: 2023-03-06 16:18:21 |
5 | --> | 5 | --> |
... | @@ -9,7 +9,7 @@ | ... | @@ -9,7 +9,7 @@ |
9 | <el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText" | 9 | <el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText" |
10 | :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical"> | 10 | :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical"> |
11 | <!-- 权限菜单 --> | 11 | <!-- 权限菜单 --> |
12 | <sidebar-item v-for="route in permission_routes.slice(3)" :key="route.path" :item="route" | 12 | <sidebar-item v-for="route in permission_routes.slice(4)" :key="route.path" :item="route" |
13 | :base-path="route.path" /> | 13 | :base-path="route.path" /> |
14 | <!-- 菜单全部展示 --> | 14 | <!-- 菜单全部展示 --> |
15 | <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> --> | 15 | <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> --> |
... | @@ -19,38 +19,42 @@ | ... | @@ -19,38 +19,42 @@ |
19 | </template> | 19 | </template> |
20 | 20 | ||
21 | <script> | 21 | <script> |
22 | import { mapGetters } from 'vuex' | 22 | import { mapGetters } from 'vuex' |
23 | import Logo from './Logo' | 23 | import Logo from './Logo' |
24 | import defaultSettings from '@/settings' | 24 | import defaultSettings from '@/settings' |
25 | import SidebarItem from './SidebarItem' | 25 | import SidebarItem from './SidebarItem' |
26 | import variables from '@/styles/variables.scss' | 26 | import variables from '@/styles/variables.scss' |
27 | import { asyncRoutes } from '@/router' | 27 | import { asyncRoutes } from '@/router' |
28 | export default { | 28 | export default { |
29 | components: { SidebarItem, Logo }, | 29 | components: { SidebarItem, Logo }, |
30 | data () { | 30 | data () { |
31 | return { | 31 | return { |
32 | title: defaultSettings.title | 32 | title: defaultSettings.title |
33 | } | ||
34 | }, | ||
35 | created () { | ||
36 | console.log(this.permission_routes); | ||
37 | }, | ||
38 | computed: { | ||
39 | ...mapGetters(['permission_routes', 'sidebar']), | ||
40 | activeMenu () { | ||
41 | const route = this.$route | ||
42 | const { meta, path } = route | ||
43 | if (meta.activeMenu) { | ||
44 | return meta.activeMenu | ||
45 | } | 33 | } |
46 | return path | ||
47 | }, | 34 | }, |
48 | variables () { | 35 | created () { |
49 | return variables | 36 | console.log(this.permission_routes); |
37 | }, | ||
38 | computed: { | ||
39 | ...mapGetters(['permission_routes', 'sidebar']), | ||
40 | activeMenu () { | ||
41 | const route = this.$route | ||
42 | const { meta, path } = route | ||
43 | if (meta.activeMenu) { | ||
44 | return meta.activeMenu | ||
45 | } | ||
46 | return path | ||
47 | }, | ||
48 | variables () { | ||
49 | return variables | ||
50 | }, | ||
51 | asyncRoutes () { | ||
52 | return asyncRoutes | ||
53 | } | ||
50 | }, | 54 | }, |
51 | asyncRoutes () { | 55 | mounted () { |
52 | return asyncRoutes | 56 | console.log("this. permission_routes", this.permission_routes); |
57 | |||
53 | } | 58 | } |
54 | } | 59 | } |
55 | } | ||
56 | </script> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
60 | </script> | ... | ... |
1 | <template> | 1 | <template> |
2 | <div class="rightcard"> | 2 | <div class="rightcard"> |
3 | <div class="card2 cardCon mt-10"> | ||
4 | <div class="cardhead">登记业务量</div> | ||
5 | <Rose /> | ||
6 | </div> | ||
7 | <div class="card1 cardCon d-center"> | 3 | <div class="card1 cardCon d-center"> |
8 | <div class="cardhead">新建国有房屋信息</div> | 4 | <div class="cardhead">登记业务量</div> |
9 | <div class="cardcontent" style="margin-top: .3646rem"> | 5 | <div class="cardcontent" style="margin-top: .3646rem"> |
10 | <dv-scroll-board v-if="config.data.length > 0" :config="config" class="board" /> | 6 | <dv-scroll-board v-if="config.data.length > 0" :config="config" class="board" /> |
11 | <div v-else class="nodata">暂无数据</div> | 7 | <div v-else class="nodata">暂无数据</div> |
12 | </div> | 8 | </div> |
13 | </div> | 9 | </div> |
14 | 10 | <div class="card2 cardCon mt-10"> | |
11 | <div class="cardhead">新建国有房屋信息</div> | ||
12 | <Rose /> | ||
13 | </div> | ||
15 | <div class="card3 cardCon mt-10"> | 14 | <div class="card3 cardCon mt-10"> |
16 | <div class="cardhead">登记类型总量</div> | 15 | <div class="cardhead">登记类型总量</div> |
17 | <columnarsmat /> | 16 | <columnarsmat /> |
... | @@ -30,7 +29,8 @@ | ... | @@ -30,7 +29,8 @@ |
30 | headerBGC: '#016AC5', | 29 | headerBGC: '#016AC5', |
31 | oddRowBGC: '#154295', | 30 | oddRowBGC: '#154295', |
32 | evenRowBGC: '#154295', | 31 | evenRowBGC: '#154295', |
33 | header: ['序号', '用途', '性质', '面积'], | 32 | header: ['序号', '业务名称', '登记业务量'], |
33 | columnWidth: [120, 270, 140], | ||
34 | data: [], | 34 | data: [], |
35 | key: 0 | 35 | key: 0 |
36 | } | 36 | } |
... | @@ -38,23 +38,38 @@ | ... | @@ -38,23 +38,38 @@ |
38 | }, | 38 | }, |
39 | components: { columnarsmat, Rose }, | 39 | components: { columnarsmat, Rose }, |
40 | mounted () { | 40 | mounted () { |
41 | this.addhousetotal(); | 41 | this.getdjywltotal(); |
42 | window.addEventListener("resize", () => { | ||
43 | this.cdata.seriesData = []; | ||
44 | this.getdjywltotal(); | ||
45 | }); | ||
42 | // scroll(tableref.value.$refs.bodyWrapper);//设置滚动 | 46 | // scroll(tableref.value.$refs.bodyWrapper);//设置滚动 |
43 | }, | 47 | }, |
44 | methods: { | 48 | methods: { |
45 | async addhousetotal () { | 49 | // 获取登记业务量玫瑰图数据 |
50 | async getdjywltotal () { | ||
46 | try { | 51 | try { |
47 | let { result: res } = await work.addhousetotal(); | 52 | let p = { |
48 | res.map((item, index) => { | 53 | DJLX: "", |
49 | return ( | 54 | QLLX: "", |
50 | this.config.data.push([index, item.fwyt, item.fwxz, item.mj]) | 55 | XZQDM: "", |
51 | ) | 56 | }; |
57 | |||
58 | let res = await work.getdjywltotal(p); | ||
59 | res.result.map((item, index) => { | ||
60 | this.config.data.push([index, item.AREACODE, item.ywtotal]) | ||
61 | |||
52 | }); | 62 | }); |
63 | |||
64 | // 遍历修改数组键,作为echars图表的参数 | ||
65 | |||
66 | |||
53 | } catch (error) { | 67 | } catch (error) { |
54 | console.log("error", error); | 68 | console.log(error); |
55 | } | 69 | } |
56 | } | 70 | |
57 | } | 71 | }, |
72 | }, | ||
58 | } | 73 | } |
59 | </script> | 74 | </script> |
60 | <style lang="scss" scoped> | 75 | <style lang="scss" scoped> |
... | @@ -134,6 +149,7 @@ | ... | @@ -134,6 +149,7 @@ |
134 | background: url("~@/image/djywl.png") no-repeat; | 149 | background: url("~@/image/djywl.png") no-repeat; |
135 | background-size: 100% 100%; | 150 | background-size: 100% 100%; |
136 | padding: 0.3825rem 0 0 0; | 151 | padding: 0.3825rem 0 0 0; |
152 | overflow: hidden; | ||
137 | } | 153 | } |
138 | 154 | ||
139 | .card3 { | 155 | .card3 { | ... | ... |
... | @@ -60,7 +60,7 @@ | ... | @@ -60,7 +60,7 @@ |
60 | getAction(api.subsystem, params).then((res) => { | 60 | getAction(api.subsystem, params).then((res) => { |
61 | if (res.status === 1) { | 61 | if (res.status === 1) { |
62 | console.log(" res.contentJJJGGG", res.content); | 62 | console.log(" res.contentJJJGGG", res.content); |
63 | // this.productName = res.content[0].name; | 63 | this.productName = res.content[0].name; |
64 | this.$store.dispatch("products/setData", res.content[0].code); | 64 | this.$store.dispatch("products/setData", res.content[0].code); |
65 | sessionStorage.setItem("products", res.content[0].code) | 65 | sessionStorage.setItem("products", res.content[0].code) |
66 | console.log("jjjggg的product"); | 66 | console.log("jjjggg的product"); | ... | ... |
... | @@ -67,9 +67,8 @@ | ... | @@ -67,9 +67,8 @@ |
67 | getAction(api.subsystem, params).then((res) => { | 67 | getAction(api.subsystem, params).then((res) => { |
68 | if (res.status === 1) { | 68 | if (res.status === 1) { |
69 | this.productName = res.content[0].name; | 69 | this.productName = res.content[0].name; |
70 | // console.log(" res.contentSSSSSBBBBB", res.content); | ||
71 | this.$store.dispatch("products/setData", res.content[0].code); | 70 | this.$store.dispatch("products/setData", res.content[0].code); |
72 | 71 | ||
73 | sessionStorage.setItem("products", res.content[0].code) | 72 | sessionStorage.setItem("products", res.content[0].code) |
74 | } else { | 73 | } else { |
75 | this.$message.error({ message: res.message, showClose: true }); | 74 | this.$message.error({ message: res.message, showClose: true }); | ... | ... |
-
Please register or sign in to post a comment