Skip to content

bdc / bdcjg-web

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

工作台缩放问题和样式调整

1 parent 6e949a6d
Inline Side-by-side
Showing 14 changed files with 180 additions and 206 deletions
...@@ -57,7 +57,12 @@ export default { ...@@ -57,7 +57,12 @@ export default {
57 // 初始化echart 57 // 初始化echart
58 this.chart = this.$echarts.init(this.$el, 'tdTheme') 58 this.chart = this.$echarts.init(this.$el, 'tdTheme')
59 this.chart.setOption(this.options, true) 59 this.chart.setOption(this.options, true)
60
61 window.addEventListener("resize", function() {
62 this.chart.resize();
63 });
64
60 } 65 }
61 } 66 }
62 } 67 }
63 </script>
...\ No newline at end of file ...\ No newline at end of file
68 </script>
......
...@@ -86,6 +86,86 @@ export default { ...@@ -86,6 +86,86 @@ export default {
86 }, 86 },
87 components: { 87 components: {
88 Chart 88 Chart
89 } 89 },
90 mounted() {
91 window.addEventListener("resize", () => {
92 this.cdata=[],
93 this.cdata= {
94 legendItem: ['接入', '上报', '登簿'],
95 color: [
96 "#5324DA",
97 "#E873B2",
98 "#F4AF6F "
99 ],
100 echartData: [{
101 name: "2017-11",
102 value1: 1351,
103 value2: 600,
104 value3: 568,
105 },
106 {
107 name: "2017-11",
108 value1: 980,
109 value2: 1245,
110 value3: 1100,
111 },
112 {
113 name: "2017-11",
114 value1: 1127,
115 value2: 398,
116 value3: 568,
117 },
118 {
119 name: "2017-11",
120 value1: 1046,
121 value2: 689,
122 value3: 479
123 },
124 {
125 name: "2018-02",
126 value1: 780,
127 value2: 396,
128 value3: 655
129 },
130 {
131 name: "2018-08",
132 value1: 359,
133 value2: 1220,
134 value3: 540,
135 },
136 {
137 name: "2018-07",
138 value1: 229,
139 value2: 836,
140 value3: 1234,
141 },
142 {
143 name: "2018-09",
144 value1: 1176,
145 value2: 478,
146 value3: 755,
147 },
148 {
149 name: "2018-11",
150 value1: 515,
151 value2: 911,
152 value3: 806,
153 },
154 {
155 name: "2019-01",
156 value1: 658,
157 value2: 979,
158 value3: 813,
159 },
160 {
161 name: "2019-03",
162 value1: 364,
163 value2: 839,
164 value3: 886,
165 },
166 ]
167 }
168 });
169 },
90 } 170 }
91 </script> 171 </script>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 import Chart from "./Chart"; 6 import Chart from "./Chart";
7 import work from "@/api/work"; 7 import work from "@/api/work";
8 export default { 8 export default {
9 data () { 9 data() {
10 return { 10 return {
11 cdata: { 11 cdata: {
12 category: [], 12 category: [],
...@@ -18,13 +18,19 @@ export default { ...@@ -18,13 +18,19 @@ export default {
18 components: { 18 components: {
19 Chart, 19 Chart,
20 }, 20 },
21 mounted () { 21 mounted() {
22 window.addEventListener("resize", () => {
23 this.submitViews();
24 });
22 this.submitViews(); 25 this.submitViews();
23 }, 26 },
24 methods: { 27 methods: {
25 async submitViews () { 28 async submitViews() {
26 try { 29 try {
27 let { result: res } = await work.submitViews("A20"); 30 let { result: res } = await work.submitViews("A20");
31 this.cdata.category = [];
32 this.cdata.barData = [];
33 this.cdata.lineData = [];
28 res.map((item) => { 34 res.map((item) => {
29 return ( 35 return (
30 this.cdata.category.push(item.areaName), 36 this.cdata.category.push(item.areaName),
...@@ -40,6 +46,4 @@ export default { ...@@ -40,6 +46,4 @@ export default {
40 }; 46 };
41 </script> 47 </script>
42 48
43 <style lang="scss" scoped> 49 <style lang="scss" scoped></style>
44
45 </style>
......
1 <template> 1 <template>
2 <!-- 地图 --> 2 <!-- 地图 -->
3 <Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="53vh" 3 <Echart id="centreLeft2Chart" class="centreLeft2Chart" :key="key" ref="centreLeft2ChartRef" width="100%" height="53vh"
4 :options="options"></Echart> 4 :options="options"></Echart>
5 </template> 5 </template>
6 6
...@@ -12,6 +12,7 @@ export default { ...@@ -12,6 +12,7 @@ export default {
12 options: {}, 12 options: {},
13 max: "100", //最大value值 13 max: "100", //最大value值
14 min: "1", // 最小value值 14 min: "1", // 最小value值
15 key: 0
15 }; 16 };
16 }, 17 },
17 components: { 18 components: {
...@@ -23,6 +24,11 @@ export default { ...@@ -23,6 +24,11 @@ export default {
23 default: () => [], 24 default: () => [],
24 }, 25 },
25 }, 26 },
27 mounted() {
28 window.addEventListener("resize", () => {
29 this.key++
30 });
31 },
26 watch: { 32 watch: {
27 cdata: { 33 cdata: {
28 handler (newData) { 34 handler (newData) {
...@@ -155,6 +161,7 @@ export default { ...@@ -155,6 +161,7 @@ export default {
155 // 重新选择区域 161 // 重新选择区域
156 this.handleMapRandomSelect(); 162 this.handleMapRandomSelect();
157 }, 163 },
164
158 immediate: true, 165 immediate: true,
159 deep: true, 166 deep: true,
160 }, 167 },
......
1 <template>
2 <Echart :options="options" id="centreLeft1Chart" :key="key" height="225px" width="80%"></Echart>
3 </template>
4 <script>
5 import Echart from '@/common/echart'
6 export default {
7 components: {
8 Echart,
9 },
10 data() {
11 return {
12 key:0
13 }
14 },
15 props: {
16 cdata: {
17 type: Object,
18 default: () => ({})
19 },
20 },
21 watch: {
22 cdata: {
23 handler (newData) {
24 console.log("newData",newData);
25 this.options = {
26 grid: {
27 right:"1%",
28 bottom:"4%"
29 },
30 color: [
31 "#37a2da",
32 "#32c5e9",
33 "#9fe6b8",
34 "#ffdb5c",
35 "#ff9f7f",
36 "#fb7293",
37 "#e7bcf3",
38 "#8378ea"
39 ],
40 tooltip: {
41 trigger: "item",
42 formatter: "{a} <br/>{b} : {c} ({d}%)"
43 },
44 toolbox: {
45 show: true
46 },
47 calculable: true,
48 series: [
49 {
50 name: "业务量",
51 type: "pie",
52 radius: [40,100],
53 roseType: "area",
54 data: newData.seriesData
55 }
56 ],
57
58 }
59 this.key++
60 },
61 immediate: true,
62 deep: true
63 }
64 }
65 };
66 </script>
67
68 <style lang="scss" scoped>
69 #centreLeft1Chart {
70 margin-bottom: 10px;
71 margin-left: 60px;
72 }
73 </style>
1 <template>
2 <div>
3 <Chart :cdata="cdata" />
4 </div>
5 </template>
6
7 <script>
8 import Chart from "./Chart";
9 import work from "@/api/work";
10 export default {
11 data () {
12 return {
13 cdata: {
14 seriesData: [],
15 },
16 };
17 },
18 components: {
19 Chart,
20 },
21 mounted () {
22 this.getdjywltotal();
23
24
25 },
26 methods: {
27 // 获取登记业务量玫瑰图数据
28 async getdjywltotal () {
29 try {
30 let p = {
31 DJLX: "",
32 QLLX: "",
33 XZQDM: "",
34 };
35 let res = await work.getdjywltotal(p);
36 console.log("res",res);
37 // 遍历修改数组键，作为echars图表的参数
38 res.result.map((item) => {
39 return (
40 this.cdata.seriesData.push({ "name": item.AREACODE, "value": item.ywtotal })
41 )
42 });
43 } catch (error) {
44 console.log(error);
45 }
46
47
48 },
49 },
50 };
51 </script>
52
53 <style lang="scss" scoped>
54 </style>
1 <template> 1 <template>
2 <Echart :options="options" id="centreLeft1Chart" :key="key" height="225px" width="80%"></Echart> 2 <Echart
3 :options="options"
4 id="centreLeft1Chart"
5 :key="key"
6 height="225px"
7 width="80%"
8 ></Echart>
3 </template> 9 </template>
4 <script> 10 <script>
5 import Echart from '@/common/echart' 11 import Echart from "@/common/echart";
6 export default { 12 export default {
7 components: { 13 components: {
8 Echart, 14 Echart,
9 }, 15 },
10 data () { 16 data() {
11 return { 17 return {
12 key: 0 18 key: 0,
13 } 19 };
14 }, 20 },
15 props: { 21 props: {
16 cdata: { 22 cdata: {
17 type: Object, 23 type: Object,
18 default: () => ({}) 24 default: () => ({}),
19 }, 25 },
20 }, 26 },
27 mounted() {
28 window.addEventListener("resize", () => {
29 this.key++;
30 });
31 },
21 watch: { 32 watch: {
22 cdata: { 33 cdata: {
23 handler (newData) { 34 handler(newData) {
24 this.options = { 35 this.options = {
25 grid: {
26 right: "1%",
27 bottom: "4%"
28 },
29 color: [
30 "#37a2da",
31 "#32c5e9",
32 "#9fe6b8",
33 "#ffdb5c",
34 "#ff9f7f",
35 "#fb7293",
36 "#e7bcf3",
37 "#8378ea"
38 ],
39 tooltip: {
40 trigger: "item",
41 formatter: "{a} <br/>{b} : {c} ({d}%)"
42 },
43 toolbox: {
44 show: true
45 },
46 calculable: true,
47 series: [ 36 series: [
48 { 37 {
49 name: "业务量", 38 name: "Access From",
50 type: "pie", 39 type: "pie",
51 radius: [0,100], 40 center: "65%",
52 roseType: "area", 41 radius: "50%",
53 data: newData.seriesData 42 data: newData.seriesData,
54 } 43 emphasis: {
44 itemStyle: {
45 shadowBlur: 10,
46 shadowOffsetX: 0,
47 shadowColor: "rgba(0, 0, 0, 0.5)",
48 },
49 },
50 },
55 ], 51 ],
56 52 };
57 } 53 this.key++;
58 this.key++
59 }, 54 },
60 immediate: true, 55 immediate: true,
61 deep: true 56 deep: true,
62 } 57 },
63 } 58 },
64 }; 59 };
65 </script> 60 </script>
66 61
67 <style lang="scss" scoped> 62 <style lang="scss" scoped></style>
68 #centreLeft1Chart {
69 margin-bottom: 10px;
70 margin-left: 60px;
71 }
72 </style>
......
...@@ -20,8 +20,6 @@ export default { ...@@ -20,8 +20,6 @@ export default {
20 }, 20 },
21 mounted () { 21 mounted () {
22 this.getdjywltotal(); 22 this.getdjywltotal();
23
24
25 }, 23 },
26 methods: { 24 methods: {
27 // 获取登记业务量玫瑰图数据 25 // 获取登记业务量玫瑰图数据
......
...@@ -129,7 +129,9 @@ export default { ...@@ -129,7 +129,9 @@ export default {
129 if (!this.heightNumSetting) { 129 if (!this.heightNumSetting) {
130 let _this = this 130 let _this = this
131 if (this.heightNum) { 131 if (this.heightNum) {
132 console.log("this.heightNum``",this.heightNum);
132 _this.$nextTick(() => { 133 _this.$nextTick(() => {
134
133 window.addEventListener('resize', () => { 135 window.addEventListener('resize', () => {
134 _this.tableHeight = _this.calcHeightx(230) 136 _this.tableHeight = _this.calcHeightx(230)
135 }); 137 });
......
...@@ -10,42 +10,56 @@ ...@@ -10,42 +10,56 @@
10 <dv-decoration-8 class="dv-dec-8" :color="decorationColor" /> 10 <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
11 <div class="title"> 11 <div class="title">
12 <span class="title-text">汉中市不动产监管大屏</span> 12 <span class="title-text">汉中市不动产监管大屏</span>
13 <dv-decoration-5 :dur="1" class="dv-dec-5" :color="decorationColor" /> 13 <dv-decoration-5
14 :dur="1"
15 class="dv-dec-5"
16 :color="decorationColor"
17 />
14 </div> 18 </div>
15 <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" /> 19 <dv-decoration-8
20 class="dv-dec-8"
21 :reverse="true"
22 :color="decorationColor"
23 />
16 </div> 24 </div>
17 <dv-decoration-10 class="dv-dec-10-s" /> 25 <dv-decoration-10 class="dv-dec-10-s" />
18 </div> 26 </div>
19 </div> 27 </div>
20 <screencontent /> 28 <screencontent v-show="isshow"/>
21 </div> 29 </div>
22 </div> 30 </div>
23 </div> 31 </div>
24 </template> 32 </template>
25 <script> 33 <script>
26 import drawMixin from "@/utils/drawMixin"; 34 import drawMixin from "@/utils/drawMixin";
27 import screencontent from './screencontent' 35 import screencontent from "./screencontent";
28 export default { 36 export default {
29 mixins: [drawMixin], 37 mixins: [drawMixin],
30 data () { 38 data() {
31 return { 39 return {
40 isshow:true,
32 loading: true, 41 loading: true,
33 decorationColor: ["#568aea", "#568aea"], 42 decorationColor: ["#568aea", "#568aea"],
34 }; 43 };
35 }, 44 },
36 components: { 45 components: {
37 screencontent 46 screencontent,
38 }, 47 },
39 mounted () { 48 mounted() {
40 49 window.addEventListener("resize", () => {
50 this.isshow=false
51 });
52 window.addEventListener("resize", () => {
53 this.isshow=true
54 });
41 // this.timeFn(); 55 // this.timeFn();
42 this.cancelLoading(); 56 this.cancelLoading();
43 }, 57 },
44 beforeDestroy () { 58 beforeDestroy() {
45 clearInterval(this.timing); 59 clearInterval(this.timing);
46 }, 60 },
47 methods: { 61 methods: {
48 cancelLoading () { 62 cancelLoading() {
49 setTimeout(() => { 63 setTimeout(() => {
50 this.loading = false; 64 this.loading = false;
51 }, 500); 65 }, 500);
......
...@@ -118,7 +118,7 @@ export default { ...@@ -118,7 +118,7 @@ export default {
118 <style lang="scss" scoped> 118 <style lang="scss" scoped>
119 .leftcard { 119 .leftcard {
120 width: 32%; 120 width: 32%;
121 height: calc(100% -94px); 121 height: calc(100% -110px);
122 display: flex; 122 display: flex;
123 flex-direction: column; 123 flex-direction: column;
124 124
...@@ -126,18 +126,16 @@ export default { ...@@ -126,18 +126,16 @@ export default {
126 background: url("~@/image/homeLeftBg.png") no-repeat; 126 background: url("~@/image/homeLeftBg.png") no-repeat;
127 background-size: 100% 100%; 127 background-size: 100% 100%;
128 position: relative; 128 position: relative;
129 padding: 8px 0; 129 height: 22%;
130 height: 170px;
131 } 130 }
132 131
133 .card1 { 132 .card1 {
134 background: url("~@/image/qxsj.png") no-repeat; 133 background: url("~@/image/qxsj.png") no-repeat;
135 background-size: 100% 100%; 134 background-size: 100% 100%;
136 position: relative; 135 position: relative;
137 padding: 10px 0;
138 box-sizing: border-box; 136 box-sizing: border-box;
139 flex: 1; 137 flex: 1;
140 height: 100%; 138 height: 56%;
141 } 139 }
142 140
143 .cardhead { 141 .cardhead {
...@@ -180,7 +178,6 @@ export default { ...@@ -180,7 +178,6 @@ export default {
180 width: 100%; 178 width: 100%;
181 height: 100%; 179 height: 100%;
182 display: flex; 180 display: flex;
183 padding: 35px 20px 20px 20px;
184 box-sizing: border-box; 181 box-sizing: border-box;
185 color: #e3f1ff; 182 color: #e3f1ff;
186 183
......
...@@ -74,18 +74,18 @@ export default { ...@@ -74,18 +74,18 @@ export default {
74 74
75 .cardcontent { 75 .cardcontent {
76 width: 100%; 76 width: 100%;
77 height: 250px; 77 height: 100%;
78 } 78 }
79 79
80 .cardCon { 80 .cardCon {
81 padding: 20px 5px;
82 position: relative; 81 position: relative;
83 text-align: center; 82 text-align: center;
84 width: 100%; 83 width: 100%;
85 } 84 }
86 85
87 .card1 { 86 .card1 {
88 height: 200px; 87 width: 100%;
88 height: 30%;
89 background: url("~@/image/homeLeftBg.png") no-repeat; 89 background: url("~@/image/homeLeftBg.png") no-repeat;
90 background-size: 100% 100%; 90 background-size: 100% 100%;
91 91
...@@ -98,17 +98,15 @@ export default { ...@@ -98,17 +98,15 @@ export default {
98 } 98 }
99 99
100 .card2 { 100 .card2 {
101 height: 31%;
101 background: url("~@/image/djywl.png") no-repeat; 102 background: url("~@/image/djywl.png") no-repeat;
102 background-size: 100% 100%; 103 background-size: 100% 100%;
103 padding: 60px 0 0 0;
104 } 104 }
105 105
106 .card3 { 106 .card3 {
107 flex: 1; 107 flex: 1;
108 height: 100%;
109 background: url("~@/image/lxzl.png") no-repeat; 108 background: url("~@/image/lxzl.png") no-repeat;
110 background-size: 100% 100%; 109 background-size: 100% 100%;
111 padding-bottom: 0;
112 .cardhead { 110 .cardhead {
113 top: 8px; 111 top: 8px;
114 } 112 }
......
...@@ -358,12 +358,15 @@ export default { ...@@ -358,12 +358,15 @@ export default {
358 }, 358 },
359 // 上移下移 359 // 上移下移
360 moveUpward (index, row) { 360 moveUpward (index, row) {
361 console.log("row上移",row);
362
361 realMove(row.dictid, "UP", this.tableData); 363 realMove(row.dictid, "UP", this.tableData);
362 let id = findParents(this.tableData, row.dictid); 364 let id = findParents(this.tableData, row.dictid);
363 this.keyList = id; 365 this.keyList = id;
364 this.key++; 366 this.key++;
365 }, 367 },
366 moveDown (index, row) { 368 moveDown (index, row) {
369 console.log("row下移",row);
367 realMove(row.dictid, "DOWN", this.tableData); 370 realMove(row.dictid, "DOWN", this.tableData);
368 let id = findParents(this.tableData, row.dictid); 371 let id = findParents(this.tableData, row.dictid);
369 this.keyList = id; 372 this.keyList = id;
......
...@@ -2,6 +2,9 @@ ...@@ -2,6 +2,9 @@
2 <div class="timedTask from-clues"> 2 <div class="timedTask from-clues">
3 <div class="from-clues-header"> 3 <div class="from-clues-header">
4 <el-form ref="ruleForm" :model="form" label-width="100px"> 4 <el-form ref="ruleForm" :model="form" label-width="100px">
5 <el-form-item>
6 <Breadcrumb />
7 </el-form-item>
5 <el-row class="mb-5"> 8 <el-row class="mb-5">
6 <el-col :span="2" class="btnColRight"> 9 <el-col :span="2" class="btnColRight">
7 <btn nativeType="cx" @click="handleAdd()">新增菜单</btn> 10 <btn nativeType="cx" @click="handleAdd()">新增菜单</btn>
......