Skip to content

bdc / bdcsjsb-web

Go to a project
Toggle navigation
Toggle navigation pinning
bcb8e998 by renchao@pashanhoo.com
Options

style:上报

1 parent c678a78f
Expand all
Inline Side-by-side
Showing 12 changed files with 0 additions and 1288 deletions
1 import filter from '@/utils/filter.js'
2 class data extends filter {
3 constructor() {
4 super()
5 }
6 columns () {
7 return [
8 {
9 type: 'index',
10 label: "序号",
11 },
12 {
13 prop: "xzqmc",
14 label: "行政区名称",
15 },
16 {
17 prop: "xzqzs",
18 label: "行政区总数",
19 },
20 {
21 prop: "jrl",
22 label: "接入量",
23 },
24 {
25 prop: 'jscgl',
26 label: '接收成功率',
27 render: (h, scope) => {
28 return (
29 <div>
30 {scope.row.jscgl} %
31 </div>
32 )
33 }
34 },
35 {
36 prop: "dk",
37 label: "成功率得分",
38 },
39 {
40 prop: "wjrqx",
41 label: "未接入区县",
42 },
43 {
44 prop: "jrdf",
45 label: "接入得分",
46 }
47 ]
48 }
49 }
50 export default new data()
1 <template>
2 <div
3 class="ScaleBox"
4 ref="ScaleBox"
5 :style="{
6 width: width + 'px',
7 height: height + 'px',
8 }"
9 >
10 <slot></slot>
11 </div>
12 </template>
13
14 <script>
15 export default {
16 name: "ScaleBox",
17 props: {},
18 data() {
19 return {
20 scale: 0,
21 width: 1920,
22 height: 1080,
23 };
24 },
25 mounted() {
26 this.setScale();
27 window.addEventListener("resize", this.debounce(this.setScale));
28 },
29 methods: {
30 getScale() {
31 // 固定好16：9的宽高比，计算出最合适的缩放比
32 const { width, height } = this;
33 const wh = window.innerHeight / height;
34 const ww = window.innerWidth / width;
35 return ww < wh ? ww : wh;
36 },
37 setScale() {
38 // 获取到缩放比例，设置它
39 this.scale = this.getScale();
40 if (this.$refs.ScaleBox) {
41 this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
42 }
43 },
44 debounce(fn, delay) {
45 const delays = delay || 500;
46 let timer;
47 return function () {
48 const th = this;
49 const args = arguments;
50 if (timer) {
51 clearTimeout(timer);
52 }
53 timer = setTimeout(function () {
54 timer = null;
55 fn.apply(th, args);
56 }, delays);
57 };
58 },
59 },
60 };
61 </script>
62
63 <style lang="scss">
64 #ScaleBox {
65 --scale: 1;
66 }
67 .ScaleBox {
68 position: absolute;
69 transform: scale(var(--scale)) translate(-50%, -50%);
70 display: flex;
71 flex-direction: column;
72 transform-origin: 0 0;
73 left: 50%;
74 top: 50%;
75 transition: 0.1s;
76 z-index: 999;
77 // background: rgba(255, 0, 0, 0.3);
78 }
79 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-06-09 10:06:26
5 -->
6 <template>
7 <div class="centercard">
8 <div class="card1">
9 <maps class="map" />
10 </div>
11 <div class="card2 mt-10">
12 <div class="title">数据趋势</div>
13 <brokenline class="brokenline" />
14 </div>
15 </div>
16 </template>
17
18 <script>
19 import maps from "@/components/Echart/Map";
20 import brokenline from "@/components/Echart/Brokenline";
21 export default {
22 data () {
23 return {};
24 },
25 components: { maps, brokenline },
26 mounted () { },
27 beforeDestroy () { },
28 methods: {},
29 };
30 </script>
31
32 <style lang="scss" scoped>
33 .centercard {
34 width: 40%;
35 height: calc(100vh - 114px);
36 box-sizing: border-box;
37 padding: 0 0.0521rem;
38 display: flex;
39 flex-direction: column;
40
41 .card1 {
42 width: 100%;
43 // background: url("~@/image/mapcenter.png") no-repeat;
44 background-size: 100% 100%;
45 position: relative;
46 height: 64%;
47
48 .title {
49 position: absolute;
50 font-weight: bold;
51 color: #02d9fd;
52 line-height: 0.1354rem;
53 font-size: 0.1146rem;
54 position: absolute;
55 left: 0;
56 right: 0;
57 top: 0.0365rem;
58 text-align: right;
59 padding-right: 15%;
60 }
61 }
62
63 .card2 {
64 width: 100%;
65 // background: url("~@/image/sjqs.png") no-repeat;
66 background-size: 100% 100%;
67 position: relative;
68 flex: 1;
69
70 .title {
71 position: absolute;
72 font-weight: bold;
73 color: #02d9fd;
74 line-height: 0.1354rem;
75 font-size: 0.1146rem;
76 position: absolute;
77 left: 0;
78 right: 0;
79 top: 0.0365rem;
80 text-align: center;
81 margin-bottom: 0.0521rem;
82 }
83
84 .brokenline {
85 margin: auto;
86 width: 100%;
87 }
88 }
89 }
90 </style>
1 .bigScreen {
2 width: 100vw;
3 height: 100vh;
4 overflow: hidden;
5 }
6
7 .bigScreen-con {
8 color: #d3d6dd;
9 width: 1920px;
10 height: 1080px;
11 position: absolute;
12 top: 50%;
13 left: 50%;
14 transform-origin: left top;
15 overflow: hidden;
16
17 .header {
18 width: 100%;
19 height: 100px;
20
21 .head {
22 margin-top: 50px;
23 }
24
25 .dv-dec-10,
26 .dv-dec-10-s {
27 width: 50.3%;
28 height: 10px;
29 }
30
31 .dv-dec-10-s {
32 transform: rotateY(180deg);
33 }
34
35 .dv-dec-8 {
36 width: 200px;
37 height: 50px;
38 }
39
40 .title {
41 position: relative;
42 width: 500px;
43 text-align: center;
44 background-size: cover;
45 background-repeat: no-repeat;
46
47 .dv-dec-5 {
48 position: absolute;
49 width: 500px;
50 height: 40px;
51 left: 0;
52 top: 38.5px;
53 }
54
55 .title-text {
56 font-size: 37px;
57 position: absolute;
58 font-weight: 600;
59 width: 500px;
60 bottom: 20px;
61 left: 50%;
62 transform: translate(-50%);
63 }
64
65 .dv-dec-6 {
66 position: absolute;
67 bottom: -30px;
68 left: 50%;
69 width: 250px;
70 height: 8px;
71 transform: translate(-50%);
72 }
73 }
74 }
75 }
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * @Description :工作台
3 * @Autor : miaofang
4 * @LastEditTime : 2023-05-17 15:25:28
5 -->
6 <template>
7 <div class="bigScreen">
8 <div class="bigScreen-con" ref="appRef">
9 <dv-loading v-if="loading">Loading...</dv-loading>
10 <div v-else>
11 <div class="header">
12 <div class="d-flex head">
13 <dv-decoration-10 class="dv-dec-10" />
14 <div class="d-flex">
15 <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
16 <div class="title">
17 <dv-decoration-5
18 :dur="1"
19 class="dv-dec-5"
20 :color="decorationColor" />
21 </div>
22 <dv-decoration-8
23 class="dv-dec-8"
24 :reverse="true"
25 :color="decorationColor" />
26 </div>
27 <dv-decoration-10 class="dv-dec-10-s" />
28 </div>
29 </div>
30 <screencontent v-show="isshow" />
31 </div>
32 </div>
33 </div>
34 </template>
35 <script>
36 import drawMixin from "@/utils/drawMixin";
37 import screencontent from "./screencontent";
38 export default {
39 mixins: [drawMixin],
40 data () {
41 return {
42 isshow: true,
43 loading: true,
44 decorationColor: ["#568aea", "#568aea"],
45 };
46 },
47 components: {
48 screencontent,
49 },
50 mounted () {
51
52 // this.timeFn();
53 this.cancelLoading();
54 },
55 beforeDestroy () {
56 clearInterval(this.timing);
57 },
58 methods: {
59 cancelLoading () {
60 setTimeout(() => {
61 this.loading = false;
62 }, 500);
63 },
64 },
65 };
66 </script>
67
68 <style scoped lang="scss">
69 @import "./index.scss";
70 </style>
1 <!--
2 * @Description :工作台左侧
3 * @Autor : miaofang
4 * @LastEditTime: 2023-06-09 10:08:02
5 -->
6 <template>
7 <div class="leftcard">
8 <div class="card">
9 <div class="cardhead">区县接入</div>
10 <div class="cardcontent">
11 <ul class="cardcontent-left d-center">
12 <div class="rjjrlList">
13 <p v-for="(item, index) in qxjrlList" class="d-center qxjr" :key="index">
14 {{ item }}
15 </p>
16 </div>
17 <li>总量</li>
18 </ul>
19 <div class="cardcontent-right d-center">
20 <p>
21 <span>失败</span>
22 <span class="bad">{{ qxerrer }}</span>
23 </p>
24 <p>
25 <span>成功率</span>
26 <span class="cg">{{ qxcgl }}</span>
27 </p>
28 </div>
29 </div>
30 </div>
31 <div class="carda mt-15">
32 <div class="cardhead">省厅汇交</div>
33 <div class="cardcontent">
34 <ul class="cardcontent-left d-center">
35 <div class="rjjrlList">
36 <p v-for="(item, index) in stjrlList" class="d-center sthj" :key="index">
37 {{ item }}
38 </p>
39 </div>
40 <li>总量</li>
41 </ul>
42 <div class="cardcontent-right d-center">
43 <p>
44 <span>失败</span>
45 <span class="bad">{{ sterrer }}</span>
46 </p>
47 <p>
48 <span>成功率</span>
49 <span class="cg">{{ stcgl }}</span>
50 </p>
51 </div>
52 </div>
53 </div>
54 <div class="card1 mt-15">
55 <div class="cardhead">各区县数据上报统计</div>
56 <columnar />
57 </div>
58 </div>
59 </template>
60
61 <script>
62
63 import columnar from "@/components/Echart/Columnar";
64 import work from "@/api/work";
65 export default {
66 data () {
67 return {
68 // 日均接入量
69 qxerrer: "",
70 qxsuccess: "",
71 sterrer: "",
72 stsuccess: "",
73 qxjrl: "",
74 stjrl: "",
75 qxcgl: "",
76 stcgl: ""
77 };
78 },
79 mounted () {
80 this.getsthjqxjrtotal();
81 },
82 components: { columnar },
83 computed: {
84 qxjrlList: function () {
85 return this.qxjrl && this.qxjrl.toString().split("");
86 },
87 stjrlList: function () {
88 return this.stjrl && this.stjrl.toString().split("");
89 },
90 },
91 methods: {
92 getsthjqxjrtotal () {
93 return new Promise(async (resolve) => {
94 try {
95 let p = {
96 DJLX: "",
97 QLLX: "",
98 XZQDM: "",
99 };
100 let res = await work.getsthjqxjrtotal(p);
101 this.stjrl = res.result.stsum
102 this.qxjrl = res.result.qxsum
103 this.qxerrer = Number(res.result.qxjrerrer)
104 this.sterrer = Number(res.result.sthjerrer)
105 if (res.result.sum == "0") {
106 this.qxcgl = "100%"
107 this.stcgl = "100%"
108 } else {
109 let qxcglnum = Number(res.result.qxjrsuccess) / this.qxjrl * 100
110 let stcgl = Number(res.result.sthjsuccess) / this.qxjrl * 100
111 this.qxcgl = qxcglnum.toFixed(2) + "%";
112 this.stcgl = stcgl.toFixed(2) + "%";
113
114 }
115 } catch (error) {
116 this.$refs.msg.messageShow();
117 }
118 });
119 },
120 },
121 };
122 </script>
123
124 <style lang="scss" scoped>
125 .leftcard {
126 width: 30%;
127 display: flex;
128 height: calc(100vh - 114px);
129 flex-direction: column;
130
131 .card {
132 height: 22%;
133 // background: url("~@/image/qxjr.png") no-repeat;
134 background-size: 100% 100%;
135 position: relative;
136 text-align: center;
137 width: 100%;
138 }
139
140 .carda {
141 height: 22%;
142 background: url("~@/image/sthj.png") no-repeat;
143 background-size: 100% 100%;
144 position: relative;
145 text-align: center;
146 width: 100%;
147 }
148
149 .card1 {
150 // background: url("~@/image/sbtj.png") no-repeat;
151 background-size: 100% 100%;
152 position: relative;
153 box-sizing: border-box;
154 flex: 1;
155 }
156
157 .cardhead {
158 color: #02d9fd;
159 line-height: 0.125rem;
160 letter-spacing: 0.0104rem;
161 position: absolute;
162 font-size: 0.1042rem;
163 left: 0;
164 right: 0;
165 margin: auto;
166 text-align: center;
167 top: 8px;
168 font-weight: 700;
169 }
170
171 .rjjrlList {
172 display: flex;
173 margin-top: 0.01781rem;
174
175 .qxjr {
176 background: url("~@/image/jrl3.png");
177 background-size: 100% 100%;
178 width: 29px;
179 height: 46px;
180 }
181
182 .sthj {
183 background: url("~@/image/jh.png");
184 background-size: 100% 100%;
185 width: 29px;
186 height: 46px;
187 }
188
189 p {
190 margin: 0 0.0156rem 0.0521rem 0.0156rem;
191 font-weight: 700;
192 font-size: 30px;
193 }
194 }
195
196 .cardcontent {
197 width: 100%;
198 height: 100%;
199 display: flex;
200 // padding: 35px 20px 20px 20px;
201 box-sizing: border-box;
202 color: #e3f1ff;
203 margin-top: 0.1263rem;
204
205 .cardcontent-left {
206 width: 60%;
207 flex-direction: column;
208 position: relative;
209 flex: 1;
210 height: 100%;
211
212 li {
213 font-size: 0.1042rem;
214 }
215 }
216
217 .cardcontent-left::before {
218 position: absolute;
219 right: 0;
220 top: 0.24rem;
221 content: "";
222 width: 0.0052rem;
223 height: 0.4688rem;
224 background: linear-gradient(
225 180deg,
226 #091b4c 0%,
227 #47b5e0 56%,
228 #091b4c 100%
229 );
230 }
231
232 .cardcontent-right {
233 flex: 1;
234 width: 100%;
235 height: 100%;
236 flex-direction: column;
237 font-size: 0.09977rem;
238
239 .bad {
240 color: #c97168;
241 }
242
243 .cg {
244 color: #5fba7d;
245 }
246
247 p {
248 width: 1.25rem;
249 margin-bottom: 0.0417rem;
250
251 span:nth-child(1) {
252 text-align: right;
253 display: inline-block;
254
255 width: 45%;
256 margin-right: 0.0781rem;
257 }
258
259 span:nth-child(2) {
260 text-align: left;
261 display: inline-block;
262 width: 45%;
263 font-size: 20px;
264 font-weight: 900;
265 }
266 }
267 }
268 }
269 }
270 </style>
1 <!--
2 * @Description :工作台右侧
3 * @Autor : miaofang
4 * @LastEditTime: 2023-06-09 10:06:56
5 -->
6 <template>
7 <div class="rightcard">
8 <div class="card1 cardCon d-center">
9 <div class="cardhead">登记业务量</div>
10 <div class="cardcontent" style="margin-top: .3646rem">
11 <dv-scroll-board v-if="config.data.length > 0" :config="config" class="board" />
12 <div v-else class="nodata">暂无数据</div>
13 </div>
14 </div>
15 <div class="card2 cardCon mt-10">
16 <div class="cardhead">新建国有房屋信息</div>
17 <Rose />
18 </div>
19 <div class="card3 cardCon mt-10">
20 <div class="cardhead">登记类型总量</div>
21 <columnarsmat />
22 </div>
23 </div>
24 </template>
25
26 <script>
27 import columnarsmat from "@/components/Echart/Columnarsmat";
28 import Rose from "@/components/Echart/Rose";
29 import work from "@/api/work";
30 export default {
31 data () {
32 return {
33 config: {
34 headerBGC: '#016AC5',
35 oddRowBGC: '#154295',
36 evenRowBGC: '#154295',
37 header: ['序号', '业务名称', '登记业务量'],
38 columnWidth: [120, 270, 140],
39 data: [],
40 key: 0
41 }
42 }
43 },
44 components: { columnarsmat, Rose },
45 mounted () {
46 this.getdjywltotal();
47 window.addEventListener("resize", () => {
48 this.config.data = [];
49 this.getdjywltotal();
50 // scroll(tableref.value.$refs.bodyWrapper);//设置滚动
51 })
52 },
53 methods: {
54 // 获取登记业务量玫瑰图数据
55 async getdjywltotal () {
56 try {
57 let p = {
58 DJLX: "",
59 QLLX: "",
60 XZQDM: "",
61 };
62
63 let res = await work.getdjywltotal(p);
64 res.result.map((item, index) => {
65 this.config.data.push([index + 1, item.AREACODE, item.ywtotal])
66
67 });
68
69 // 遍历修改数组键，作为echars图表的参数
70
71
72 } catch (error) {
73 console.log(error);
74 }
75
76 },
77 },
78 }
79 </script>
80 <style lang="scss" scoped>
81 /deep/.row-item:not(:last-child) {
82 margin-bottom: 0.026rem;
83 }
84
85 .rightcard {
86 width: 30%;
87 display: flex;
88 height: calc(100vh - 114px);
89 flex-direction: column;
90
91 .cardhead {
92 font-size: 0.1042rem;
93 font-weight: bold;
94 color: #02d9fd;
95 text-align: center;
96 position: absolute;
97 left: 0;
98 right: 0;
99 top: 0.0625rem;
100 text-align: center;
101 }
102
103 .cardcontent {
104 width: 100%;
105 height: 100%;
106 display: -webkit-box;
107 overflow: hidden;
108
109 .nodata {
110 font-size: 0.1042rem;
111 color: #02d9fd;
112 font-weight: bold;
113 margin: auto;
114 margin-top: 120px;
115 }
116 }
117
118 .cardCon {
119 padding: 0.0521rem 0.026rem;
120 position: relative;
121 text-align: center;
122 width: 100%;
123 }
124
125 .card1 {
126 height: 33%;
127 // background: url("~@/image/xjgyfwxx.png") no-repeat;
128 background-size: 100% 100%;
129
130 /deep/.dv-scroll-board {
131 .header {
132 height: 0.1875rem;
133 align-items: center;
134 }
135 }
136
137 .board {
138 width: 90%;
139 margin: 0 auto;
140 height: 1.1031rem;
141 margin-top: 0.0521rem;
142
143 /deep/.header {
144 font-size: 0.0738rem;
145 }
146
147 /deep/.rows {
148 .ceil {
149 font-size: 0.0738rem;
150 color: #6bc1fc;
151 }
152 }
153 }
154 }
155
156 .card2 {
157 height: 33%;
158 // background: url("~@/image/djywl.png") no-repeat;
159 background-size: 100% 100%;
160 padding: 0.3825rem 0 0 0;
161 overflow: hidden;
162 }
163
164 .card3 {
165 height: 33%;
166 flex: 1;
167 // background: url("~@/image/djlxzl.png") no-repeat;
168 background-size: 100% 100%;
169 padding-bottom: 0;
170
171 .cardhead {
172 top: 0.0417rem;
173 }
174 }
175
176 .cardhead {
177 position: absolute;
178 }
179 }
180 </style>
1 <!--
2 * @Description :工作台表格区域
3 * @Autor : miaofang
4 * @LastEditTime : 2023-05-17 15:22:38
5 -->
6 <template>
7 <div class="content" id="box">
8 <leftcard />
9 <centercard />
10 <rightcard />
11 </div>
12 </template>
13 <script>
14 import "@/utils/flexible.js";
15 import drawMixin from "@/utils/drawMixin";
16 import leftcard from "./leftcard";
17 import centercard from "./centercard";
18 import rightcard from "./rightcard";
19 export default {
20 mixins: [drawMixin],
21 data () {
22 return {
23 decorationColor: ["#568aea", "#568aea"],
24 };
25 },
26 components: {
27 leftcard,
28 centercard,
29 rightcard
30 },
31 mounted () {
32 // this.timeFn();
33 this.cancelLoading();
34 },
35 beforeDestroy () {
36 clearInterval(this.timing);
37 },
38 methods: {
39 cancelLoading () {
40 setTimeout(() => {
41 this.loading = false;
42 }, 500);
43 },
44 },
45 };
46 </script>
47
48 <style scoped lang="scss">
49 .content {
50 width: 100%;
51 height: calc(100% -94px);
52 margin: auto;
53 display: flex;
54 justify-content: space-between;
55 margin-top: 15px;
56
57 }
58 // #box{
59 // width: 1620px;
60 // height: 680px;
61 // position: absolute;
62 // transform-origin: left top;
63 // overflow: hidden;
64 // }
65 </style>
1 .home {
2 height: calc(100% - 20px);
3 width: 100%;
4 box-sizing: border-box;
5 display: flex;
6 justify-content: space-between;
7 margin-top: 15px;
8
9 .map {
10 margin-left: -20px;
11 }
12
13 &-left {
14 width: 35%;
15 padding-top: 25px;
16 background-color: #000637;
17 color: #02D9FD;
18 }
19
20 .titlebg {
21 text-align: center;
22 line-height: 36px;
23 font-size: 20px;
24 background: url("~@/image/title.png") no-repeat;
25 width: 238px;
26 height: 36px;
27 margin: 0 auto;
28 position: relative;
29 top: -15px;
30 }
31
32 .bgbk {
33 padding: 2px;
34 box-sizing: border-box;
35 // background: url("~@/image/tablebk.png") no-repeat;
36 background-size: 100% 100%;
37 }
38
39 .homebk {
40 background: url("~@/image/homebk.png") no-repeat;
41 background-size: 100% 100%;
42 }
43
44 &-right {
45 width: 64.5%;
46
47 .jrgk {
48 color: #02D9FD;
49 padding-bottom: 20px;
50
51 .header {
52 text-align: center;
53 line-height: 36px;
54 }
55 }
56
57 .gkList {
58 @include flex-center;
59 flex-direction: column;
60 position: relative;
61
62 li:nth-child(1) {
63 color: #409EFF;
64 font-size: 24px;
65 }
66 }
67
68 .gkList::before {
69 position: absolute;
70 right: 0;
71 top: 0;
72 content: '';
73 width: 1px;
74 height: 110px;
75 background: linear-gradient(180deg, #091B4C 0%, #47B5E0 56%, #091B4C 100%);
76 }
77
78 .zsl {
79 position: relative;
80
81 p {
82 background: url('../../image/zsl.png');
83 width: 200px;
84 height: 40px;
85 position: absolute;
86 left: 0;
87 bottom: 0;
88 background-size: cover;
89 margin-left: -34px;
90 }
91 }
92
93 .jrl {
94 margin-top: 20px;
95 text-align: center;
96 color: #E3F1FF;
97
98 .jrlList {
99 p {
100 margin: 0 3px 10px 3px;
101 }
102 }
103
104 .jrllsit1 {
105 p {
106 background: url('../../image/jrl1.png');
107 }
108 }
109
110 .jrllsit2 {
111 p {
112 background: url('../../image/jrl2.png');
113 }
114 }
115
116 .jrllsit3 {
117 p {
118 background: url('../../image/jrl3.png');
119 }
120 }
121
122 li {
123 color: #E3F1FF;
124 }
125 }
126
127 // 日均接入量
128 .jrlList {
129 display: flex;
130 align-items: center;
131 justify-content: center;
132
133 p {
134 width: 24px;
135 height: 36px;
136 font-size: 30px;
137 display: flex;
138 align-items: center;
139 justify-content: center;
140 font-weight: 700;
141 }
142 }
143
144 .jrdgk {
145 display: flex;
146 margin: 30px 0 30px 0;
147 justify-content: space-between;
148
149 .sxsjr {
150 width: 60%;
151 margin-right: 10px;
152
153 .header {
154 text-align: center;
155 color: #02D9FD;
156 line-height: 30px;
157 }
158 }
159 }
160
161 .jrdList {
162 ul {
163 @include flex-center;
164 flex-direction: column;
165
166 li:nth-child(1) {
167 font-size: 30px;
168 width: 50px;
169 height: 50px;
170 background: linear-gradient(143deg, #29C6F2 0%, #4370EF 100%);
171 border-radius: 2px;
172 color: #E3F1FF;
173 display: flex;
174 align-items: center;
175 justify-content: center;
176 margin: 10px 0;
177 }
178
179 li:nth-child(2) {
180 color: #FFFFFF;
181 font-size: 14px;
182 }
183 }
184 }
185
186 .jrdList:nth-of-type(2) {
187 li:nth-child(1) {
188 background: linear-gradient(143deg, #9CB636 0%, #32BCB1 100%);
189 }
190 }
191
192 .jrdList:nth-of-type(3) {
193 li:nth-child(1) {
194 background: linear-gradient(143deg, #C97E6D 0%, #CA304D 100%);
195 }
196 }
197 }
198
199 // 上报情况概括
200 .sbqkgk {
201 text-align: center;
202 color: #02D9FD;
203 line-height: 30px;
204 width: 50%;
205 }
206
207 .sbqkgs {
208 width: 100%;
209
210 .header {
211 text-align: center;
212 line-height: 36px;
213 }
214
215 .sbqkgsList {
216 display: flex;
217 justify-content: center;
218 font-size: 50px;
219 margin: 20px 0 10px 0;
220 color: #E3F1FF;
221 font-weight: 700;
222 }
223
224 .active {
225 width: 31px;
226 height: 46px;
227 background: #054AE9;
228 display: flex;
229 align-items: center;
230 justify-content: center;
231 border-radius: 3px 1px 3px 1px;
232 margin: 0 3px;
233 }
234
235 li {
236 font-size: 16px;
237 text-align: center;
238 color: #E3F1FF;
239 }
240 }
241
242 .jrxxlb {
243 margin-top: 5px;
244
245 /deep/tbody tr:nth-child(odd) {
246 background: #132E82 !important;
247 }
248
249 .title {
250 text-align: center;
251 line-height: 36px;
252 color: #02D9FD;
253 }
254 }
255 }
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <screencontent />
3 </template>
4 <script>
5 import screencontent from '@/views/home/dataView/screencontent'
6 export default {
7 name: "home",
8 components: {
9 screencontent
10 }
11 }
12 </script>
13 <style scoped lang="scss">
14 @import "./dataView/index.scss";
15 </style>
1 <template>
2 <div class="wgsl">
3 <p class="title">陕西省不动产信息接入</p>
4 <div class="map-box" ref="mapContainProvince" />
5 </div>
6 </template>
7
8 <script>
9 export default {
10 data () {
11 return {
12 provinceName: "shanxi1",
13 mapName: "陕西",
14 listArr: [{
15 name: '西安市',
16 value: '6000'
17 },
18 {
19 name: '宝鸡市',
20 value: '8000'
21 },
22 {
23 name: '咸阳市',
24 value: '3000'
25 },
26 {
27 name: '铜川市',
28 value: '7000'
29 },
30 {
31 name: '渭南市',
32 value: '1000'
33 },
34 {
35 name: '延安市',
36 value: '2000'
37 },
38 {
39 name: '榆林市',
40 value: '600'
41 },
42 {
43 name: '汉中市',
44 value: '3000'
45 },
46 {
47 name: '安康市',
48 value: '1000'
49 },
50 {
51 name: '商洛市',
52 value: '1000'
53 }], //城市json
54 max: "9000", //最大value值
55 min: "500", // 最小value值
56 };
57 },
58 methods: {
59 drawProvinceMap (provinceName, mapName) {
60 this.provinceName = provinceName;
61 this.mapName = mapName;
62 // 引入区域数据
63 require(`./map/${this.provinceName}.js`);
64 let _this = this;
65 let myChart8 = this.$echarts.init(this.$refs.mapContainProvince);
66 const option = {
67 visualMap: {
68 min: _this.min,
69 max: _this.max,
70 show: false,
71 inRange: {
72 color: ["lightskyblue"],
73 },
74 },
75 // 数据移入显示
76 tooltip: {
77 trigger: "item",
78 formatter: function (params) {
79 return params.value ? params.name + ':' + params.value + '件' : params.name + ':' + '0件'
80 },
81 // 边框颜色
82 borderColor: "#CB000C",
83 // 边框宽度
84 borderWidth: "1",
85 },
86 series: [
87 {
88 type: "map",
89 map: this.mapName,
90 itemStyle: {
91 normal: { //正常状态
92 label: {
93 show: true,
94 formatter: '{b}', //地图上显示的数据，分别对应data中的name和value
95 color: '#fff',
96 },
97 areaColor: '#409EFF' //地图区域的颜色
98 },
99 emphasis: {
100 label: { show: true },
101 areaColor: "#67C23A", //鼠标进入时的颜色
102 },
103 },
104 data: _this.listArr,
105 },
106 ],
107 };
108 myChart8.setOption(option);
109 },
110 },
111 mounted () {
112 // 初始化数据
113 this.drawProvinceMap("shanxi1", "陕西");
114 }
115 }
116 </script>
117 <style scoped>
118 .wgsl {
119 width: 100%;
120 }
121
122 .title {
123 text-align: center;
124 line-height: 36px;
125 font-size: 20px;
126 background: url("~@/image/title.png") no-repeat;
127 width: 238px;
128 height: 36px;
129 margin: 0 auto;
130 position: relative;
131 top: -15px;
132 }
133
134 .map-box {
135 display: inline-block;
136 width: 100%;
137 height: 75vh;
138 }
139 </style>