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
import filter from '@/utils/filter.js'
class data extends filter {
constructor() {
super()
}
columns () {
return [
{
type: 'index',
label: "序号",
},
{
prop: "xzqmc",
label: "行政区名称",
},
{
prop: "xzqzs",
label: "行政区总数",
},
{
prop: "jrl",
label: "接入量",
},
{
prop: 'jscgl',
label: '接收成功率',
render: (h, scope) => {
return (
<div>
{scope.row.jscgl} %
</div>
)
}
},
{
prop: "dk",
label: "成功率得分",
},
{
prop: "wjrqx",
label: "未接入区县",
},
{
prop: "jrdf",
label: "接入得分",
}
]
}
}
export default new data()
<template>
<div
class="ScaleBox"
ref="ScaleBox"
:style="{
width: width + 'px',
height: height + 'px',
}"
>
<slot></slot>
</div>
</template>
<script>
export default {
name: "ScaleBox",
props: {},
data() {
return {
scale: 0,
width: 1920,
height: 1080,
};
},
mounted() {
this.setScale();
window.addEventListener("resize", this.debounce(this.setScale));
},
methods: {
getScale() {
// 固定好16：9的宽高比，计算出最合适的缩放比
const { width, height } = this;
const wh = window.innerHeight / height;
const ww = window.innerWidth / width;
return ww < wh ? ww : wh;
},
setScale() {
// 获取到缩放比例，设置它
this.scale = this.getScale();
if (this.$refs.ScaleBox) {
this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
}
},
debounce(fn, delay) {
const delays = delay || 500;
let timer;
return function () {
const th = this;
const args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delays);
};
},
},
};
</script>
<style lang="scss">
#ScaleBox {
--scale: 1;
}
.ScaleBox {
position: absolute;
transform: scale(var(--scale)) translate(-50%, -50%);
display: flex;
flex-direction: column;
transform-origin: 0 0;
left: 50%;
top: 50%;
transition: 0.1s;
z-index: 999;
// background: rgba(255, 0, 0, 0.3);
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-06-09 10:06:26
-->
<template>
<div class="centercard">
<div class="card1">
<maps class="map" />
</div>
<div class="card2 mt-10">
<div class="title">数据趋势</div>
<brokenline class="brokenline" />
</div>
</div>
</template>
<script>
import maps from "@/components/Echart/Map";
import brokenline from "@/components/Echart/Brokenline";
export default {
data () {
return {};
},
components: { maps, brokenline },
mounted () { },
beforeDestroy () { },
methods: {},
};
</script>
<style lang="scss" scoped>
.centercard {
width: 40%;
height: calc(100vh - 114px);
box-sizing: border-box;
padding: 0 0.0521rem;
display: flex;
flex-direction: column;
.card1 {
width: 100%;
// background: url("~@/image/mapcenter.png") no-repeat;
background-size: 100% 100%;
position: relative;
height: 64%;
.title {
position: absolute;
font-weight: bold;
color: #02d9fd;
line-height: 0.1354rem;
font-size: 0.1146rem;
position: absolute;
left: 0;
right: 0;
top: 0.0365rem;
text-align: right;
padding-right: 15%;
}
}
.card2 {
width: 100%;
// background: url("~@/image/sjqs.png") no-repeat;
background-size: 100% 100%;
position: relative;
flex: 1;
.title {
position: absolute;
font-weight: bold;
color: #02d9fd;
line-height: 0.1354rem;
font-size: 0.1146rem;
position: absolute;
left: 0;
right: 0;
top: 0.0365rem;
text-align: center;
margin-bottom: 0.0521rem;
}
.brokenline {
margin: auto;
width: 100%;
}
}
}
</style>
.bigScreen {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.bigScreen-con {
color: #d3d6dd;
width: 1920px;
height: 1080px;
position: absolute;
top: 50%;
left: 50%;
transform-origin: left top;
overflow: hidden;
.header {
width: 100%;
height: 100px;
.head {
margin-top: 50px;
}
.dv-dec-10,
.dv-dec-10-s {
width: 50.3%;
height: 10px;
}
.dv-dec-10-s {
transform: rotateY(180deg);
}
.dv-dec-8 {
width: 200px;
height: 50px;
}
.title {
position: relative;
width: 500px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
.dv-dec-5 {
position: absolute;
width: 500px;
height: 40px;
left: 0;
top: 38.5px;
}
.title-text {
font-size: 37px;
position: absolute;
font-weight: 600;
width: 500px;
bottom: 20px;
left: 50%;
transform: translate(-50%);
}
.dv-dec-6 {
position: absolute;
bottom: -30px;
left: 50%;
width: 250px;
height: 8px;
transform: translate(-50%);
}
}
}
}
\ No newline at end of file
<!--
* @Description :工作台
* @Autor : miaofang
* @LastEditTime : 2023-05-17 15:25:28
-->
<template>
<div class="bigScreen">
<div class="bigScreen-con" ref="appRef">
<dv-loading v-if="loading">Loading...</dv-loading>
<div v-else>
<div class="header">
<div class="d-flex head">
<dv-decoration-10 class="dv-dec-10" />
<div class="d-flex">
<dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
<div class="title">
<dv-decoration-5
:dur="1"
class="dv-dec-5"
:color="decorationColor" />
</div>
<dv-decoration-8
class="dv-dec-8"
:reverse="true"
:color="decorationColor" />
</div>
<dv-decoration-10 class="dv-dec-10-s" />
</div>
</div>
<screencontent v-show="isshow" />
</div>
</div>
</div>
</template>
<script>
import drawMixin from "@/utils/drawMixin";
import screencontent from "./screencontent";
export default {
mixins: [drawMixin],
data () {
return {
isshow: true,
loading: true,
decorationColor: ["#568aea", "#568aea"],
};
},
components: {
screencontent,
},
mounted () {
// this.timeFn();
this.cancelLoading();
},
beforeDestroy () {
clearInterval(this.timing);
},
methods: {
cancelLoading () {
setTimeout(() => {
this.loading = false;
}, 500);
},
},
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
<!--
* @Description :工作台左侧
* @Autor : miaofang
* @LastEditTime: 2023-06-09 10:08:02
-->
<template>
<div class="leftcard">
<div class="card">
<div class="cardhead">区县接入</div>
<div class="cardcontent">
<ul class="cardcontent-left d-center">
<div class="rjjrlList">
<p v-for="(item, index) in qxjrlList" class="d-center qxjr" :key="index">
{{ item }}
</p>
</div>
<li>总量</li>
</ul>
<div class="cardcontent-right d-center">
<p>
<span>失败</span>
<span class="bad">{{ qxerrer }}</span>
</p>
<p>
<span>成功率</span>
<span class="cg">{{ qxcgl }}</span>
</p>
</div>
</div>
</div>
<div class="carda mt-15">
<div class="cardhead">省厅汇交</div>
<div class="cardcontent">
<ul class="cardcontent-left d-center">
<div class="rjjrlList">
<p v-for="(item, index) in stjrlList" class="d-center sthj" :key="index">
{{ item }}
</p>
</div>
<li>总量</li>
</ul>
<div class="cardcontent-right d-center">
<p>
<span>失败</span>
<span class="bad">{{ sterrer }}</span>
</p>
<p>
<span>成功率</span>
<span class="cg">{{ stcgl }}</span>
</p>
</div>
</div>
</div>
<div class="card1 mt-15">
<div class="cardhead">各区县数据上报统计</div>
<columnar />
</div>
</div>
</template>
<script>
import columnar from "@/components/Echart/Columnar";
import work from "@/api/work";
export default {
data () {
return {
// 日均接入量
qxerrer: "",
qxsuccess: "",
sterrer: "",
stsuccess: "",
qxjrl: "",
stjrl: "",
qxcgl: "",
stcgl: ""
};
},
mounted () {
this.getsthjqxjrtotal();
},
components: { columnar },
computed: {
qxjrlList: function () {
return this.qxjrl && this.qxjrl.toString().split("");
},
stjrlList: function () {
return this.stjrl && this.stjrl.toString().split("");
},
},
methods: {
getsthjqxjrtotal () {
return new Promise(async (resolve) => {
try {
let p = {
DJLX: "",
QLLX: "",
XZQDM: "",
};
let res = await work.getsthjqxjrtotal(p);
this.stjrl = res.result.stsum
this.qxjrl = res.result.qxsum
this.qxerrer = Number(res.result.qxjrerrer)
this.sterrer = Number(res.result.sthjerrer)
if (res.result.sum == "0") {
this.qxcgl = "100%"
this.stcgl = "100%"
} else {
let qxcglnum = Number(res.result.qxjrsuccess) / this.qxjrl * 100
let stcgl = Number(res.result.sthjsuccess) / this.qxjrl * 100
this.qxcgl = qxcglnum.toFixed(2) + "%";
this.stcgl = stcgl.toFixed(2) + "%";
}
} catch (error) {
this.$refs.msg.messageShow();
}
});
},
},
};
</script>
<style lang="scss" scoped>
.leftcard {
width: 30%;
display: flex;
height: calc(100vh - 114px);
flex-direction: column;
.card {
height: 22%;
// background: url("~@/image/qxjr.png") no-repeat;
background-size: 100% 100%;
position: relative;
text-align: center;
width: 100%;
}
.carda {
height: 22%;
background: url("~@/image/sthj.png") no-repeat;
background-size: 100% 100%;
position: relative;
text-align: center;
width: 100%;
}
.card1 {
// background: url("~@/image/sbtj.png") no-repeat;
background-size: 100% 100%;
position: relative;
box-sizing: border-box;
flex: 1;
}
.cardhead {
color: #02d9fd;
line-height: 0.125rem;
letter-spacing: 0.0104rem;
position: absolute;
font-size: 0.1042rem;
left: 0;
right: 0;
margin: auto;
text-align: center;
top: 8px;
font-weight: 700;
}
.rjjrlList {
display: flex;
margin-top: 0.01781rem;
.qxjr {
background: url("~@/image/jrl3.png");
background-size: 100% 100%;
width: 29px;
height: 46px;
}
.sthj {
background: url("~@/image/jh.png");
background-size: 100% 100%;
width: 29px;
height: 46px;
}
p {
margin: 0 0.0156rem 0.0521rem 0.0156rem;
font-weight: 700;
font-size: 30px;
}
}
.cardcontent {
width: 100%;
height: 100%;
display: flex;
// padding: 35px 20px 20px 20px;
box-sizing: border-box;
color: #e3f1ff;
margin-top: 0.1263rem;
.cardcontent-left {
width: 60%;
flex-direction: column;
position: relative;
flex: 1;
height: 100%;
li {
font-size: 0.1042rem;
}
}
.cardcontent-left::before {
position: absolute;
right: 0;
top: 0.24rem;
content: "";
width: 0.0052rem;
height: 0.4688rem;
background: linear-gradient(
180deg,
#091b4c 0%,
#47b5e0 56%,
#091b4c 100%
);
}
.cardcontent-right {
flex: 1;
width: 100%;
height: 100%;
flex-direction: column;
font-size: 0.09977rem;
.bad {
color: #c97168;
}
.cg {
color: #5fba7d;
}
p {
width: 1.25rem;
margin-bottom: 0.0417rem;
span:nth-child(1) {
text-align: right;
display: inline-block;
width: 45%;
margin-right: 0.0781rem;
}
span:nth-child(2) {
text-align: left;
display: inline-block;
width: 45%;
font-size: 20px;
font-weight: 900;
}
}
}
}
}
</style>
<!--
* @Description :工作台右侧
* @Autor : miaofang
* @LastEditTime: 2023-06-09 10:06:56
-->
<template>
<div class="rightcard">
<div class="card1 cardCon d-center">
<div class="cardhead">登记业务量</div>
<div class="cardcontent" style="margin-top: .3646rem">
<dv-scroll-board v-if="config.data.length > 0" :config="config" class="board" />
<div v-else class="nodata">暂无数据</div>
</div>
</div>
<div class="card2 cardCon mt-10">
<div class="cardhead">新建国有房屋信息</div>
<Rose />
</div>
<div class="card3 cardCon mt-10">
<div class="cardhead">登记类型总量</div>
<columnarsmat />
</div>
</div>
</template>
<script>
import columnarsmat from "@/components/Echart/Columnarsmat";
import Rose from "@/components/Echart/Rose";
import work from "@/api/work";
export default {
data () {
return {
config: {
headerBGC: '#016AC5',
oddRowBGC: '#154295',
evenRowBGC: '#154295',
header: ['序号', '业务名称', '登记业务量'],
columnWidth: [120, 270, 140],
data: [],
key: 0
}
}
},
components: { columnarsmat, Rose },
mounted () {
this.getdjywltotal();
window.addEventListener("resize", () => {
this.config.data = [];
this.getdjywltotal();
// scroll(tableref.value.$refs.bodyWrapper);//设置滚动
})
},
methods: {
// 获取登记业务量玫瑰图数据
async getdjywltotal () {
try {
let p = {
DJLX: "",
QLLX: "",
XZQDM: "",
};
let res = await work.getdjywltotal(p);
res.result.map((item, index) => {
this.config.data.push([index + 1, item.AREACODE, item.ywtotal])
});
// 遍历修改数组键，作为echars图表的参数
} catch (error) {
console.log(error);
}
},
},
}
</script>
<style lang="scss" scoped>
/deep/.row-item:not(:last-child) {
margin-bottom: 0.026rem;
}
.rightcard {
width: 30%;
display: flex;
height: calc(100vh - 114px);
flex-direction: column;
.cardhead {
font-size: 0.1042rem;
font-weight: bold;
color: #02d9fd;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 0.0625rem;
text-align: center;
}
.cardcontent {
width: 100%;
height: 100%;
display: -webkit-box;
overflow: hidden;
.nodata {
font-size: 0.1042rem;
color: #02d9fd;
font-weight: bold;
margin: auto;
margin-top: 120px;
}
}
.cardCon {
padding: 0.0521rem 0.026rem;
position: relative;
text-align: center;
width: 100%;
}
.card1 {
height: 33%;
// background: url("~@/image/xjgyfwxx.png") no-repeat;
background-size: 100% 100%;
/deep/.dv-scroll-board {
.header {
height: 0.1875rem;
align-items: center;
}
}
.board {
width: 90%;
margin: 0 auto;
height: 1.1031rem;
margin-top: 0.0521rem;
/deep/.header {
font-size: 0.0738rem;
}
/deep/.rows {
.ceil {
font-size: 0.0738rem;
color: #6bc1fc;
}
}
}
}
.card2 {
height: 33%;
// background: url("~@/image/djywl.png") no-repeat;
background-size: 100% 100%;
padding: 0.3825rem 0 0 0;
overflow: hidden;
}
.card3 {
height: 33%;
flex: 1;
// background: url("~@/image/djlxzl.png") no-repeat;
background-size: 100% 100%;
padding-bottom: 0;
.cardhead {
top: 0.0417rem;
}
}
.cardhead {
position: absolute;
}
}
</style>
<!--
* @Description :工作台表格区域
* @Autor : miaofang
* @LastEditTime : 2023-05-17 15:22:38
-->
<template>
<div class="content" id="box">
<leftcard />
<centercard />
<rightcard />
</div>
</template>
<script>
import "@/utils/flexible.js";
import drawMixin from "@/utils/drawMixin";
import leftcard from "./leftcard";
import centercard from "./centercard";
import rightcard from "./rightcard";
export default {
mixins: [drawMixin],
data () {
return {
decorationColor: ["#568aea", "#568aea"],
};
},
components: {
leftcard,
centercard,
rightcard
},
mounted () {
// this.timeFn();
this.cancelLoading();
},
beforeDestroy () {
clearInterval(this.timing);
},
methods: {
cancelLoading () {
setTimeout(() => {
this.loading = false;
}, 500);
},
},
};
</script>
<style scoped lang="scss">
.content {
width: 100%;
height: calc(100% -94px);
margin: auto;
display: flex;
justify-content: space-between;
margin-top: 15px;
}
// #box{
// width: 1620px;
// height: 680px;
// position: absolute;
// transform-origin: left top;
// overflow: hidden;
// }
</style>
.home {
height: calc(100% - 20px);
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
margin-top: 15px;
.map {
margin-left: -20px;
}
&-left {
width: 35%;
padding-top: 25px;
background-color: #000637;
color: #02D9FD;
}
.titlebg {
text-align: center;
line-height: 36px;
font-size: 20px;
background: url("~@/image/title.png") no-repeat;
width: 238px;
height: 36px;
margin: 0 auto;
position: relative;
top: -15px;
}
.bgbk {
padding: 2px;
box-sizing: border-box;
// background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.homebk {
background: url("~@/image/homebk.png") no-repeat;
background-size: 100% 100%;
}
&-right {
width: 64.5%;
.jrgk {
color: #02D9FD;
padding-bottom: 20px;
.header {
text-align: center;
line-height: 36px;
}
}
.gkList {
@include flex-center;
flex-direction: column;
position: relative;
li:nth-child(1) {
color: #409EFF;
font-size: 24px;
}
}
.gkList::before {
position: absolute;
right: 0;
top: 0;
content: '';
width: 1px;
height: 110px;
background: linear-gradient(180deg, #091B4C 0%, #47B5E0 56%, #091B4C 100%);
}
.zsl {
position: relative;
p {
background: url('../../image/zsl.png');
width: 200px;
height: 40px;
position: absolute;
left: 0;
bottom: 0;
background-size: cover;
margin-left: -34px;
}
}
.jrl {
margin-top: 20px;
text-align: center;
color: #E3F1FF;
.jrlList {
p {
margin: 0 3px 10px 3px;
}
}
.jrllsit1 {
p {
background: url('../../image/jrl1.png');
}
}
.jrllsit2 {
p {
background: url('../../image/jrl2.png');
}
}
.jrllsit3 {
p {
background: url('../../image/jrl3.png');
}
}
li {
color: #E3F1FF;
}
}
// 日均接入量
.jrlList {
display: flex;
align-items: center;
justify-content: center;
p {
width: 24px;
height: 36px;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
}
.jrdgk {
display: flex;
margin: 30px 0 30px 0;
justify-content: space-between;
.sxsjr {
width: 60%;
margin-right: 10px;
.header {
text-align: center;
color: #02D9FD;
line-height: 30px;
}
}
}
.jrdList {
ul {
@include flex-center;
flex-direction: column;
li:nth-child(1) {
font-size: 30px;
width: 50px;
height: 50px;
background: linear-gradient(143deg, #29C6F2 0%, #4370EF 100%);
border-radius: 2px;
color: #E3F1FF;
display: flex;
align-items: center;
justify-content: center;
margin: 10px 0;
}
li:nth-child(2) {
color: #FFFFFF;
font-size: 14px;
}
}
}
.jrdList:nth-of-type(2) {
li:nth-child(1) {
background: linear-gradient(143deg, #9CB636 0%, #32BCB1 100%);
}
}
.jrdList:nth-of-type(3) {
li:nth-child(1) {
background: linear-gradient(143deg, #C97E6D 0%, #CA304D 100%);
}
}
}
// 上报情况概括
.sbqkgk {
text-align: center;
color: #02D9FD;
line-height: 30px;
width: 50%;
}
.sbqkgs {
width: 100%;
.header {
text-align: center;
line-height: 36px;
}
.sbqkgsList {
display: flex;
justify-content: center;
font-size: 50px;
margin: 20px 0 10px 0;
color: #E3F1FF;
font-weight: 700;
}
.active {
width: 31px;
height: 46px;
background: #054AE9;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px 1px 3px 1px;
margin: 0 3px;
}
li {
font-size: 16px;
text-align: center;
color: #E3F1FF;
}
}
.jrxxlb {
margin-top: 5px;
/deep/tbody tr:nth-child(odd) {
background: #132E82 !important;
}
.title {
text-align: center;
line-height: 36px;
color: #02D9FD;
}
}
}
\ No newline at end of file
<template>
<screencontent />
</template>
<script>
import screencontent from '@/views/home/dataView/screencontent'
export default {
name: "home",
components: {
screencontent
}
}
</script>
<style scoped lang="scss">
@import "./dataView/index.scss";
</style>
<template>
<div class="wgsl">
<p class="title">陕西省不动产信息接入</p>
<div class="map-box" ref="mapContainProvince" />
</div>
</template>
<script>
export default {
data () {
return {
provinceName: "shanxi1",
mapName: "陕西",
listArr: [{
name: '西安市',
value: '6000'
},
{
name: '宝鸡市',
value: '8000'
},
{
name: '咸阳市',
value: '3000'
},
{
name: '铜川市',
value: '7000'
},
{
name: '渭南市',
value: '1000'
},
{
name: '延安市',
value: '2000'
},
{
name: '榆林市',
value: '600'
},
{
name: '汉中市',
value: '3000'
},
{
name: '安康市',
value: '1000'
},
{
name: '商洛市',
value: '1000'
}], //城市json
max: "9000", //最大value值
min: "500", // 最小value值
};
},
methods: {
drawProvinceMap (provinceName, mapName) {
this.provinceName = provinceName;
this.mapName = mapName;
// 引入区域数据
require(`./map/${this.provinceName}.js`);
let _this = this;
let myChart8 = this.$echarts.init(this.$refs.mapContainProvince);
const option = {
visualMap: {
min: _this.min,
max: _this.max,
show: false,
inRange: {
color: ["lightskyblue"],
},
},
// 数据移入显示
tooltip: {
trigger: "item",
formatter: function (params) {
return params.value ? params.name + ':' + params.value + '件' : params.name + ':' + '0件'
},
// 边框颜色
borderColor: "#CB000C",
// 边框宽度
borderWidth: "1",
},
series: [
{
type: "map",
map: this.mapName,
itemStyle: {
normal: { //正常状态
label: {
show: true,
formatter: '{b}', //地图上显示的数据，分别对应data中的name和value
color: '#fff',
},
areaColor: '#409EFF' //地图区域的颜色
},
emphasis: {
label: { show: true },
areaColor: "#67C23A", //鼠标进入时的颜色
},
},
data: _this.listArr,
},
],
};
myChart8.setOption(option);
},
},
mounted () {
// 初始化数据
this.drawProvinceMap("shanxi1", "陕西");
}
}
</script>
<style scoped>
.wgsl {
width: 100%;
}
.title {
text-align: center;
line-height: 36px;
font-size: 20px;
background: url("~@/image/title.png") no-repeat;
width: 238px;
height: 36px;
margin: 0 auto;
position: relative;
top: -15px;
}
.map-box {
display: inline-block;
width: 100%;
height: 75vh;
}
</style>