Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
ee0ea19a by 任超
Options

feat:首页

1 parent 42cd0c29
Inline Side-by-side
Showing 11 changed files with 713 additions and 257 deletions
<template>
<div>
<el-table :data="data" border v-loading="loading" v-bind="$attrs" v-on="$listeners">
<lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
</lb-column>
</el-table>
<el-pagination class="lb-table-pagination" v-if="pagination" :page-sizes="[10, 20, 50, 100]"
layout="total, prev, pager, next, jumper" :style="{
'margin-top': '16px',
'text-align': 'right',
}" v-bind="$attrs" v-on="$listeners" :pager-count="6" @current-change="paginationCurrentChange">
</el-pagination>
</div>
</template>
<script>
import LbColumn from "@/components/LbTable/lb-column";
export default {
components: { LbColumn },
props: {
data: Array,
column: Array,
pagination: {
type: Boolean,
default: true,
},
},
methods: {
paginationCurrentChange (val) {
this.$emit("current-change", val);
},
},
};
</script>
<style rel="stylesheet/less" lang="less" scoped>
</style>
<template>
<div class="fzqk">
<div class="home-title">
<span class="title-name">发证情况</span>
<span class="title-more">更多＞＞</span>
</div>
<div class="home-content">
<div class="top">
<div class="img">
<img :src="imgSrc" alt="" />
</div>
<div class="word">
<div class="name">发证总量</div>
<div class="num">{{ fzzl }}</div>
<div class="unit">本</div>
</div>
</div>
<div class="bottom">
<div class="name">证书</div>
<div class="smallnum">{{ zs }}</div>
<div class="unit">本</div>
</div>
<div class="bottom">
<div class="name">证明</div>
<div class="smallnum">{{ zm }}</div>
<div class="unit">本</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "fzqk",
components: {},
data () {
return {
fzzl: 132176,
zs: 54237,
zm: 77939,
imgSrc: require("./images/zs.png"),
};
},
methods: {},
};
</script>
<style scoped lang="scss">
@import "./home.scss";
.fzqk {
width: 100%;
height: 100%;
.top {
width: 100%;
height: 50%;
display: flex;
align-items: center;
.img {
width: 100px;
height: 100px;
img {
width: 80px;
height: 80px;
border-radius: 50%;
background: #0f93f6;
margin: 10px;
}
}
.word {
width: calc(100% - 100px);
height: 80px;
padding-left: 20px;
}
}
.bottom {
width: 50%;
height: 50%;
float: left;
}
.name {
font-size: 16px;
color: #606266;
width: 100%;
height: 40px;
line-height: 40px;
}
.num,
.smallnum {
display: inline-block;
font-size: 30px;
color: #0f93f6;
height: 40px;
line-height: 40px;
}
.smallnum {
font-size: 20px;
}
.unit {
display: inline-block;
font-size: 14px;
color: #606266;
height: 40px;
line-height: 40px;
}
}
</style>
\ No newline at end of file
.home {
background: #dfe7f3;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 10px;
display: flex;
justify-content: space-between;
&-left,
&-center,
&-right {
width: 32%;
height: 100%;
border-radius: 4px;
}
&-left {
width: 25%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&-top {
width: 100%;
height: 35%;
background: #fff;
margin-bottom: 15px;
border-radius: 4px;
}
&-bottom {
width: 100%;
height: calc(65% - 15px);
background: #fff;
border-radius: 4px;
}
}
&-center {
width: calc(40% - 30px);
background: #fff;
margin: 0 15px;
}
&-right {
width: 35%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&-top {
width: 100%;
height: 35%;
background: #fff;
margin-bottom: 15px;
border-radius: 4px;
}
&-bottom {
width: 100%;
height: calc(65% - 15px);
background: #fff;
border-radius: 4px;
}
}
&-title {
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #dfe7f3;
font-size: 16px;
.title-name,
.title-more {
display: inline-block;
height: 24px;
line-height: 24px;
margin-top: 8px;
}
.title-name {
float: left;
margin-left: 20px;
padding-left: 10px;
border-left: 4px solid #0F93F6;
}
.title-more {
display: inline-block;
float: right;
margin-right: 20px;
color: #97a8be;
cursor: pointer;
}
}
&-content {
width: 100%;
height: calc(100% - 41px);
padding: 0 20px 20px 20px;
}
}
.workplatform {
color: #4A4A4A;
height: 100%;
overflow: hidden;
.district {
margin: 10px 0;
/deep/.el-radio__label {
font-size: 20px;
}
&-name {
font-size: 20px;
font-weight: 600;
}
}
.data-statistics {
.sta-item {
height: 150px;
background-color: #FFFFFF;
border-radius: 5px;
@include flex-center();
flex-direction: column;
margin: 15px 0;
h5 {
font-size: 20px;
margin-bottom: 8px;
}
}
}
.statistical-chart-content {
height: calc(100% - 210px);
}
.statistical-chart {
display: flex;
.chart {
width: 50%;
min-height: 460px;
height: 100%;
}
}
}
\ No newline at end of file
<template>
<div class="workplatform">
<div class="district">
<span class="district-name">行政区：</span>
<el-radio-group v-model="xzq" size="medium">
<el-radio label="632321">同仁县</el-radio>
<el-radio label="632322">尖扎县</el-radio>
<el-radio label="632323">泽库县</el-radio>
<el-radio label="632324">河南县</el-radio>
</el-radio-group>
<div class="home">
<div class="home-left">
<div class="home-left-top">
<fzqk></fzqk>
</div>
<div class="home-left-bottom">
<wlqk></wlqk>
</div>
</div>
<div class="data-statistics">
<h3>数据统计</h3>
<el-row type="flex" justify="space-between">
<el-col :span="5" v-for="(item, index) in statisticsList" :key="index" class="sta-item">
<h5>{{ item.title }}</h5>
<p>{{ item.detail }}</p>
</el-col>
</el-row>
<div class="home-center">
<wgsl></wgsl>
</div>
<div class="statistical-chart-content">
<h3 style="margin-bottom:10px">统计图表</h3>
<el-select v-model="dateTime" placeholder="请选择年度">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<div class="statistical-chart">
<div id="myChart" class="chart"></div>
<div id="myChart1" class="chart"></div>
<div class="home-right">
<div class="home-right-top">
<jgfl></jgfl>
</div>
<div class="home-right-bottom">
<wgzj></wgzj>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getNumber, getYearList, getByYear } from '@/api/user'
// 监管首页
import fzqk from "./fzqk.vue";
import wlqk from "./wlqk.vue";
import wgsl from "./wgsl.vue";
import jgfl from "./jgfl.vue";
import wgzj from "./wgzj.vue";
export default {
name: "workplatform",
name: "home",
components: { fzqk, wlqk, wgsl, jgfl, wgzj },
data () {
return {
xzq: '',
dateTime: null,
options: [],
statisticsList: [
{
title: '500',
detail: '数据上报总数'
},
{
title: '500',
detail: '数据上报失败总数'
},
{
title: '500',
detail: '本年度上报总数'
},
{
title: '500',
detail: '本月上报总数'
}
],
qllxData: [],
djlxLeable: [],
djlxValue: []
}
},
computed: {
...mapGetters(['dicData'])
},
watch: {
dateTime: {
handler (newName, oldName) {
this._getByYear()
},
immediate: true
},
xzq: {
handler (newName, oldName) {
this._featchData()
this._getYearList()
},
immediate: true
},
},
created () {
this._featchData()
this._getYearList()
},
mounted () {
this.drawLine()
this.drawLine1()
return {};
},
methods: {
async _featchData () {
try {
let { result } = await getNumber(this.xzq)
this.statisticsList[0].title = result.allNumber
this.statisticsList[1].title = result.failNumber
this.statisticsList[2].title = result.thisYearNumber
this.statisticsList[3].title = result.thisMonthNumber
} catch (error) {
}
},
async _getYearList () {
try {
let { result } = await getYearList()
result = result.filter(x => !!x == true || x == 0)
result.forEach((item, index) => {
if (item) {
this.$set(this.options, index, {
value: item,
label: item
})
}
});
this.dateTime = this.options[0].value
this._getByYear()
} catch (error) {
}
},
async _getByYear () {
try {
let { result } = await getByYear(this.dateTime, this.xzq)
this.qllxData.length = 0
this.djlxLeable.length = 0
this.djlxValue.length = 0
result.qllx.forEach((item, index) => {
this.$set(this.qllxData, index, [
item.NUM, item.QLLX
])
})
result.djlx.forEach((item, index) => {
this.$set(this.djlxLeable, index, item.DJLX)
this.$set(this.djlxValue, index, item.NUM)
})
this.drawLine()
this.drawLine1()
} catch (error) {
}
},
drawLine () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
color: ['rgb(68, 231, 177)'],
dataset: {
source: this.qllxData
},
grid: { containLabel: true },
xAxis: {},
yAxis: {
type: 'category',
axisLabel: {
rotate: '30'
},
},
series: [
{
type: 'bar',
showBackground: true,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'right', //在上方显示
textStyle: {
color: '#4A4A4A',
fontSize: 14
}
}
}
},
encode: {
x: 'amount',
y: 'product'
}
}
]
})
},
drawLine1 () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart1'))
// 绘制图表
myChart.setOption({
color: ['rgb(85, 133, 221)'],
xAxis: {
data: this.djlxLeable,
axisLabel: {
rotate: '45'
}
},
yAxis: {
type: 'value'
},
series: [
{
data: this.djlxValue,
type: 'bar',
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: {
color: '#4A4A4A',
fontSize: 14
}
}
}
},
}
]
})
}
}
}
methods: {},
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "./index.scss";
@import "./home.scss";
</style>
......
<template>
<div class="jgfl">
<div class="home-title">
<span class="title-name">监管分类</span>
<span class="title-more">更多＞＞</span>
</div>
<div class="home-content">
<div id="jgfl-myChart" class="chart"></div>
</div>
</div>
</template>
<script>
export default {
name: "jgfl",
components: {},
data () {
return {
data: [20118, 416232, 224447, 32, 48842],
};
},
mounted () {
this.echartInit();
},
methods: {
echartInit () {
let _this = this;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(
document.getElementById("jgfl-myChart")
);
// 绘制图表
myChart.setOption({
title: {
text: "(单位: 件)",
textStyle: {
fontSize: 16,
color: "#606266",
fontWeight: "normal",
},
},
color: "red",
radar: {
indicator: [
{ name: "原则监管", max: 22000 },
{ name: "时效监管", max: 420000 },
{ name: "证书监管", max: 230000 },
{ name: "年限监管", max: 38000 },
{ name: "内容监管", max: 50000 },
],
name: {
color: "#606266",
formatter: function (value, indicator) {
if (value == "原则监管") {
return value + " " + _this.data[0];
} else if (value == "时效监管") {
return value + " " + _this.data[1];
} else if (value == "证书监管") {
return value + " " + _this.data[2];
} else if (value == "年限监管") {
return value + " " + _this.data[3];
} else if (value == "内容监管") {
return value + " " + _this.data[4];
}
},
},
splitLine: {
lineStyle: {
color: "#0F93F6",
},
},
splitArea: {
show: false
}
},
series: [
{
type: "radar",
data: [
{
value: _this.data,
},
],
},
],
});
},
},
};
</script>
<style scoped lang="scss">
@import "./home.scss";
.jgfl {
width: 100%;
height: 100%;
.chart {
width: 100%;
height: calc(100% - 10px);
margin-top: 10px;
}
}
</style>
\ No newline at end of file
<template>
<div class="wgsl">
<div id="wgsl-myChart" class="chart"></div>
</div>
</template>
<script>
// 网络情况
export default {
name: "wgsl",
components: {},
data () {
return {};
},
mounted () {
},
methods: {
},
};
</script>
<style scoped lang="scss">
@import "./home.scss";
.wgsl {
width: 100%;
height: 100%;
.chart {
width: 100%;
height: 100%;
background: url("./images/map.png") 50% 50% no-repeat;
}
}
</style>
\ No newline at end of file
<template>
<div class="wgzj">
<div class="home-title">
<span class="title-name">违规总计</span>
<span class="title-more">更多＞＞</span>
</div>
<div class="home-content">
<div class="table-box">
<paging-table v-loading="loading" :data="data" :column="column" :pagination="false"></paging-table>
</div>
</div>
</div>
</template>
<script>
import pagingTable from "@/components/pagingTable/pagingTable.vue";
export default {
name: "wgzj",
components: { pagingTable },
data () {
return {
loading: false,
data: [
{
xzq: "汉台区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "南郑区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "汉台区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "汉台区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "汉台区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "汉台区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "南郑区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "汉台区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "汉台区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "汉台区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "汉台区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "南郑区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "汉台区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "汉台区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
{
xzq: "汉台区",
yzjg: "4818",
sxjg: "367575",
zsjg: "72920",
nxjg: "3",
nrjg: "3082",
zj: "448398",
},
],
column: [
{
prop: "xzq",
label: "行政区/监管(件)",
},
{
prop: "yzjg",
label: "原则监管",
width: 60,
},
{
prop: "sxjg",
label: "时效监管",
},
{
prop: "zsjg",
label: "证书监管",
width: 60,
},
{
prop: "nxjg",
label: "年限监管",
width: 60,
},
{
prop: "nrjg",
label: "内容监管",
width: 60,
},
{
prop: "zj",
label: "总计",
},
],
};
},
methods: {},
};
</script>
<style scoped lang="scss">
@import "./home.scss";
.wgzj {
width: 100%;
height: 100%;
.table-box {
height: calc(100% - 20px);
overflow-y: scroll;
margin-top: 20px;
}
}
</style>
\ No newline at end of file
<template>
<div class="wlqk">
<div id="wlqk-myChart" class="chart"></div>
</div>
</template>
<script>
// 网络情况
export default {
name: "wlqk",
components: {},
data () {
return {
xAxisData: [],
wldkData: [],
wlzcData: [],
};
},
mounted () {
this.echartInit();
},
methods: {
echartInit () {
let _this = this;
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(
document.getElementById("wlqk-myChart")
);
// 绘制图表
myChart.setOption({
color: ["#ee9096", "#8fb657"],
legend: {
data: ["网络断开", "网络正常"],
top: 20,
},
xAxis: [
{
type: "category",
data: _this.xAxisData,
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "网络断开",
type: "bar",
data: _this.wldkData,
},
{
name: "网络正常",
type: "bar",
data: _this.wlzcData,
},
],
});
},
},
};
</script>
<style scoped lang="scss">
@import "./home.scss";
.wlqk {
width: 100%;
height: 100%;
.chart {
width: 100%;
height: 100%;
}
}
</style>
\ No newline at end of file