Merge branch 'dev' of http://yun.pashanhoo.com:9090/bdc/bdcsjsb-web into dev
Showing
15 changed files
with
30 additions
and
1325 deletions
| ... | @@ -13,7 +13,7 @@ import "nprogress/nprogress.css"; // progress bar style | ... | @@ -13,7 +13,7 @@ import "nprogress/nprogress.css"; // progress bar style |
| 13 | import getPageTitle from "@/utils/get-page-title"; | 13 | import getPageTitle from "@/utils/get-page-title"; |
| 14 | import getTheme from "@/utils/theme"; | 14 | import getTheme from "@/utils/theme"; |
| 15 | import Cookies from "js-cookie"; | 15 | import Cookies from "js-cookie"; |
| 16 | import {getToken, getUrlParam, setToken} from "@/utils/util"; | 16 | import { getToken, getUrlParam, setToken } from "@/utils/util"; |
| 17 | 17 | ||
| 18 | NProgress.configure({ showSpinner: false }); | 18 | NProgress.configure({ showSpinner: false }); |
| 19 | 19 | ||
| ... | @@ -27,7 +27,7 @@ router.beforeEach(async (to, from, next) => { | ... | @@ -27,7 +27,7 @@ router.beforeEach(async (to, from, next) => { |
| 27 | // cas操作 | 27 | // cas操作 |
| 28 | const token = getToken() | 28 | const token = getToken() |
| 29 | let locationUrl = window.location.origin + window.location.pathname; | 29 | let locationUrl = window.location.origin + window.location.pathname; |
| 30 | function casValidate (ticket){ | 30 | function casValidate (ticket) { |
| 31 | axios.get(window._config.services.management + "/management/cas/validate", { | 31 | axios.get(window._config.services.management + "/management/cas/validate", { |
| 32 | params: { | 32 | params: { |
| 33 | ticket: ticket, | 33 | ticket: ticket, |
| ... | @@ -35,10 +35,10 @@ router.beforeEach(async (to, from, next) => { | ... | @@ -35,10 +35,10 @@ router.beforeEach(async (to, from, next) => { |
| 35 | }, | 35 | }, |
| 36 | }).then(async (res) => { | 36 | }).then(async (res) => { |
| 37 | if (res.data.status === 1) { | 37 | if (res.data.status === 1) { |
| 38 | setToken(res.data.content.accessToken) | 38 | setToken(res.data.content.accessToken) |
| 39 | window.location.href = localStorage.getItem('sjsb-location') + '#' + localStorage.getItem('hash') | 39 | window.location.href = localStorage.getItem('sjsb-location') + '#' + localStorage.getItem('hash') |
| 40 | } else { | 40 | } else { |
| 41 | alert(res.data.message) | 41 | alert(res.data.message) |
| 42 | } | 42 | } |
| 43 | }).catch((e) => { | 43 | }).catch((e) => { |
| 44 | console.log(e); | 44 | console.log(e); |
| ... | @@ -65,12 +65,7 @@ router.beforeEach(async (to, from, next) => { | ... | @@ -65,12 +65,7 @@ router.beforeEach(async (to, from, next) => { |
| 65 | ...accessRoutes, | 65 | ...accessRoutes, |
| 66 | { path: "*", redirect: "/404", hidden: true } | 66 | { path: "*", redirect: "/404", hidden: true } |
| 67 | ]); | 67 | ]); |
| 68 | const routeTo = Cookies.get("routerTo"); | 68 | next(path) |
| 69 | if (routeTo && routeTo !== "/") { | ||
| 70 | next({ ...to, replace: true }); | ||
| 71 | } else { | ||
| 72 | next(path) | ||
| 73 | } | ||
| 74 | } | 69 | } |
| 75 | } | 70 | } |
| 76 | if (window._config.casEnable === true) { | 71 | if (window._config.casEnable === true) { |
| ... | @@ -92,35 +87,35 @@ router.beforeEach(async (to, from, next) => { | ... | @@ -92,35 +87,35 @@ router.beforeEach(async (to, from, next) => { |
| 92 | if (ticket) { | 87 | if (ticket) { |
| 93 | casValidate(ticket) | 88 | casValidate(ticket) |
| 94 | } else { | 89 | } else { |
| 95 | if (to.path === '/login') { | 90 | if (to.path === '/login') { |
| 96 | if (getUrlParam('_flag') === '1') { | 91 | if (getUrlParam('_flag') === '1') { |
| 97 | next(); | 92 | next(); |
| 98 | return | 93 | return |
| 99 | } else { | 94 | } else { |
| 100 | //todo: loginUrl 需要业务系统根据登录页面路由地址获取,这里只是简写 | 95 | //todo: loginUrl 需要业务系统根据登录页面路由地址获取,这里只是简写 |
| 101 | localStorage.setItem('sjsb-location',locationUrl) | 96 | localStorage.setItem('sjsb-location', locationUrl) |
| 102 | localStorage.setItem('hash',to.fullPath) | 97 | localStorage.setItem('hash', to.fullPath) |
| 103 | window.location.href = window._config.services.management + `/management/cas/status?loginUrl=${window._config.baseUrl}/sjsb/&hash=/login&` | 98 | window.location.href = window._config.services.management + `/management/cas/status?loginUrl=${window._config.baseUrl}/sjsb/&hash=/login&` |
| 104 | return | 99 | return |
| 105 | } | ||
| 106 | } | 100 | } |
| 107 | localStorage.setItem('sjsb-location',locationUrl) | 101 | } |
| 108 | localStorage.setItem('hash',to.fullPath) | 102 | localStorage.setItem('sjsb-location', locationUrl) |
| 109 | //todo: loginUrl 需要业务系统根据登录页面路由地址获取,这里只是简写 | 103 | localStorage.setItem('hash', to.fullPath) |
| 110 | window.location.href = window._config.services.management + `/management/cas/status?loginUrl=${window._config.baseUrl}/sjsb/&hash=/login` | 104 | //todo: loginUrl 需要业务系统根据登录页面路由地址获取,这里只是简写 |
| 105 | window.location.href = window._config.services.management + `/management/cas/status?loginUrl=${window._config.baseUrl}/sjsb/&hash=/login` | ||
| 111 | } | 106 | } |
| 112 | }else{ | 107 | } else { |
| 108 | permission() | ||
| 113 | if (to.path === '/login') { | 109 | if (to.path === '/login') { |
| 114 | const redirectUrl = getUrlParam('redirectUrl'); | 110 | const redirectUrl = getUrlParam('redirectUrl'); |
| 115 | if (redirectUrl && redirectUrl !== '') { | 111 | if (redirectUrl && redirectUrl !== '') { |
| 116 | window.location.href = redirectUrl | 112 | window.location.href = redirectUrl |
| 117 | return | 113 | return |
| 118 | } else { | 114 | } else { |
| 119 | next('/'); | 115 | next('/'); |
| 120 | return | 116 | return |
| 121 | } | 117 | } |
| 122 | } | 118 | } |
| 123 | permission() | ||
| 124 | } | 119 | } |
| 125 | } | 120 | } |
| 126 | NProgress.done() | 121 | NProgress.done() | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Description :路由配置 | 2 | * @Description :路由配置 |
| 3 | * @Autor : miaofang | 3 | * @Autor : miaofang |
| 4 | * @LastEditTime: 2023-06-20 11:09:57 | 4 | * @LastEditTime: 2023-06-26 09:56:40 |
| 5 | */ | 5 | */ |
| 6 | import Vue from 'vue' | 6 | import Vue from 'vue' |
| 7 | import Router from 'vue-router' | 7 | import Router from 'vue-router' |
| ... | @@ -40,9 +40,9 @@ export const asyncRoutes = [ | ... | @@ -40,9 +40,9 @@ export const asyncRoutes = [ |
| 40 | // 区县接入 | 40 | // 区县接入 |
| 41 | { | 41 | { |
| 42 | path: '/', | 42 | path: '/', |
| 43 | component: Layout, | ||
| 43 | redirect: '/qxjr', | 44 | redirect: '/qxjr', |
| 44 | meta: { title: '区县接入', icon: 'qxjr' }, | 45 | meta: { title: '区县接入', icon: 'qxjr' }, |
| 45 | component: Layout, | ||
| 46 | children: [ | 46 | children: [ |
| 47 | { | 47 | { |
| 48 | path: 'qxjr', | 48 | path: 'qxjr', | ... | ... |
src/views/home/data/index.js
deleted
100644 → 0
| 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() |
src/views/home/dataView/box.vue
deleted
100644 → 0
| 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> |
src/views/home/dataView/index.scss
deleted
100644 → 0
| 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 |
src/views/home/dataView/index.vue
deleted
100644 → 0
| 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> |
src/views/home/dataView/leftcard.vue
deleted
100644 → 0
| 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> |
src/views/home/home.scss
deleted
100644 → 0
| 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 |
src/views/home/index.vue
deleted
100644 → 0
src/views/home/map/shanxi1.js
deleted
100644 → 0
This diff is collapsed.
Click to expand it.
src/views/home/wgsl.vue
deleted
100644 → 0
| 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> |
| ... | @@ -150,7 +150,6 @@ export default { | ... | @@ -150,7 +150,6 @@ export default { |
| 150 | this.userInfo | 150 | this.userInfo |
| 151 | ) | 151 | ) |
| 152 | .then((response) => { | 152 | .then((response) => { |
| 153 | debugger | ||
| 154 | if (response.data.status === 1) { | 153 | if (response.data.status === 1) { |
| 155 | if (response.data.content.location) { | 154 | if (response.data.content.location) { |
| 156 | window.location.href = response.data.content.location; | 155 | window.location.href = response.data.content.location; |
| ... | @@ -160,9 +159,8 @@ export default { | ... | @@ -160,9 +159,8 @@ export default { |
| 160 | } | 159 | } |
| 161 | }) | 160 | }) |
| 162 | .catch((error) => { | 161 | .catch((error) => { |
| 163 | console.log(error); | ||
| 164 | this.$message.error(error.message); | 162 | this.$message.error(error.message); |
| 165 | }); | 163 | }) |
| 166 | } else { | 164 | } else { |
| 167 | return | 165 | return |
| 168 | } | 166 | } | ... | ... |
-
Please register or sign in to post a comment