Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
bfa807e7 by xiaomiao
Options

工作台样式调整

1 parent 6c08504a
Inline Side-by-side
Showing 8 changed files with 126 additions and 84 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 getdata: [],
16 }; 17 };
17 }, 18 },
18 components: { 19 components: {
19 Chart, 20 Chart,
20 }, 21 },
21 mounted() { 22 mounted () {
22 this.getdjywltotal(); 23 this.addhousetotal();
23 window.addEventListener("resize", () => { 24 window.addEventListener("resize", () => {
24 this.cdata.seriesData = []; 25 this.getdata = [];
25 this.getdjywltotal(); 26 this.addhousetotal();
26 }); 27 });
28
27 }, 29 },
28 methods: { 30 methods: {
29 // 获取登记业务量玫瑰图数据 31 async addhousetotal () {
30 async getdjywltotal() { 32 if (this.getdata.length == 0) {
31 if (this.cdata.seriesData.length == 0) { 33 this.getdata = [];
32 try { 34 try {
33 let p = { 35 let { result: res } = await work.addhousetotal();
34 DJLX: "", 36 res.map((item) => {
35 QLLX: "",
36 XZQDM: "",
37 };
38 this.cdata.seriesData = [];
39 let res = await work.getdjywltotal(p);
40 if(this.cdata.seriesData.length == 0){
41 res.result.map((item) => {
42 return this.cdata.seriesData.push({ 37 return this.cdata.seriesData.push({
43 name: item.AREACODE, 38 name: `${item.fwyt + '（' + item.fwxz}）`,
44 value: item.ywtotal, 39 value: item.mj,
45 }); 40 });
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);
54 } 47 }
55 } 48 }
49 let delarr = this.cdata.seriesData.sort(this.up)
50 this.setadat(delarr)
51
56 }, 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 })
57 }, 67 },
58 }; 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,10 +21,10 @@ ...@@ -20,10 +21,10 @@
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 },
...@@ -50,25 +51,35 @@ export default { ...@@ -50,25 +51,35 @@ export default {
50 } 51 }
51 } 52 }
52 } 53 }
53 } 54 }
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;
64 display: flex;
65 img {
66 width: 47px;
67 height: 47px;
68 }
69 h4 {
70 margin-left: 20px;
71 height: 50px;
72 line-height: 50px;
73 }
74 }
63 } 75 }
64 }
65 76
66 .NoticeBar { 77 .NoticeBar {
67 position: absolute; 78 position: absolute;
68 bottom: 0; 79 bottom: 0;
69 } 80 }
70 81
71 .el-dropdown-menu { 82 .el-dropdown-menu {
72 padding: 0 !important; 83 padding: 0 !important;
73 border: 1px solid #ebeef5; 84 border: 1px solid #ebeef5;
74 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12); 85 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
...@@ -101,13 +112,13 @@ export default { ...@@ -101,13 +112,13 @@ export default {
101 background: #f6f7f9; 112 background: #f6f7f9;
102 color: #4a4a4a; 113 color: #4a4a4a;
103 } 114 }
104 } 115 }
105 116
106 .navbar { 117 .navbar {
107 height: $headerHeight; 118 height: $headerHeight;
108 overflow: hidden; 119 overflow: hidden;
109 position: relative; 120 position: relative;
110 background: #3D59C4; 121 background: linear-gradient(270deg, #ebf1ff 0%, #3d59c4 100%);
111 display: flex; 122 display: flex;
112 align-items: center; 123 align-items: center;
113 padding-right: 20px; 124 padding-right: 20px;
...@@ -229,5 +240,5 @@ export default { ...@@ -229,5 +240,5 @@ export default {
229 } 240 }
230 } 241 }
231 } 242 }
232 } 243 }
233 </style> 244 </style>
......
...@@ -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,13 +19,13 @@ ...@@ -19,13 +19,13 @@
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 {
...@@ -51,6 +51,10 @@ export default { ...@@ -51,6 +51,10 @@ export default {
51 asyncRoutes () { 51 asyncRoutes () {
52 return asyncRoutes 52 return asyncRoutes
53 } 53 }
54 },
55 mounted () {
56 console.log("this. permission_routes", this.permission_routes);
57
58 }
54 } 59 }
55 }
56 </script> 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 }
56 }
57 } 69 }
70
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,7 +67,6 @@ ...@@ -67,7 +67,6 @@
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)
......