Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
148e4bde by 任超
Options

feat:文件夹整理

1 parent 88ce3f18
Expand all
Inline Side-by-side
Showing 14 changed files with 4 additions and 518 deletions
......@@ -23,7 +23,7 @@
</div>
</template>
<script>
import drawMixin from "../../utils/drawMixin";
import drawMixin from "@/utils/drawMixin";
import screencontent from './screencontent'
export default {
mixins: [drawMixin],
......
......@@ -6,7 +6,7 @@
</div>
</template>
<script>
import drawMixin from "../../utils/drawMixin";
import drawMixin from "@/utils/drawMixin";
import leftcard from "./leftcard";
import centercard from "./centercard";
import rightcard from "./rightcard";
......
<template>
<screencontent />
</template>
<script>
import screencontent from '@/views/dataView/screencontent'
import screencontent from '@/views/home/dataView/screencontent'
export default {
name: "home",
components: {
screencontent
},
data () {
return {
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
@import "../dataView/index.scss";
@import "./dataView/index.scss";
</style>
......
<template>
<div id="barChart"></div>
</template>
<script>
export default {
data () {
return {
};
},
mounted () {
this.drawProvinceMap();
},
methods: {
drawProvinceMap () {
var chartDom = document.getElementById('barChart');
var myChart = this.$echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['网络断开', '网络正常']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value'
}
],
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
series: [
{
name: '网络正常',
type: 'bar',
itemStyle: {
color: '#67C23A'
},
label: {
show: true,
position: 'inside'
},
emphasis: {
focus: 'series'
},
data: [200, 170, 240, 244, 200, 220, 210]
},
{
name: '网络断开',
type: 'bar',
itemStyle: {
color: '#F56C6C'
},
label: {
show: true,
position: 'inside'
},
emphasis: {
focus: 'series'
},
data: [-120, -132, -101, -134, -190, -230, -210]
}
],
}
myChart.setOption(option);
window.addEventListener("resize", () => {
this.myChart.resize();
});
}
}
}
</script>
<style scoped lang="scss">
#barChart {
width: 100%;
height: 500px;
}
</style>
<template>
<div id="jgChart" />
</template>
<script>
export default {
data () {
return {
};
},
methods: {
drawInit () {
let datavalue = [26, 300, 2000, 1200, 800];
let ii = -1;
var chartDom = document.getElementById('jgChart');
var myChart = this.$echarts.init(chartDom);
var option;
option = {
radar: {
indicator: [
{ name: '原则监管', max: 2600 },
{ name: '时效监管', max: 2600 },
{ name: '证书监管', max: 3600 },
{ name: '年限监管', max: 2600 },
{ name: '内容监管', max: 2600 },
],
name: {
rich: {
a: {
color: '#606266'
},
b: {
color: '#409EFF',
align: 'center',
}
},
formatter: (a, b) => {
ii++;
return `{a|${a}}\n{b|${datavalue[ii]}}`
}
}
},
series: [
{
type: 'radar',
symbol: 'none',//去掉拐点的圈
itemStyle: {
color: '#409EFF'
},
data: [
{
value: datavalue,
}
]
}
]
};
myChart.setOption(option);
}
},
mounted () {
this.drawInit()
}
}
</script>
<style scoped>
#jgChart {
width: 100%;
height: 330px;
}
</style>
<template>
<div class="map">
<div class="map-box" ref="mapContain" />
</div>
</template>
<script>
export default {
data () {
return {
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'
},
{
name: '略阳县',
value: '1000'
}], //城市json
max: "9000", //最大value值
min: "500", // 最小value值
};
},
methods: {
drawProvinceMap (mapName) {
this.mapName = mapName;
// 引入区域数据
require('./hanzhong.js');
let _this = this;
let myChart8 = this.$echarts.init(this.$refs.mapContain);
const option = {
visualMap: {
min: 0,
max: _this.max,
top: "bottom",
right: 10,
splitNumber: 6,
seriesIndex: [0],
itemWidth: 20, // 每个图元的宽度
itemGap: 2, // 每两个图元之间的间隔距离，单位为px
pieces: [ // 自定义每一段的范围，以及每一段的文字
{ gte: 6000, label: '6000以上', color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 2000, lte: 6000, label: '2000-6000', color: '#3375e4' },
{ gte: 1000, lte: 2000, label: '1000-2000', color: '#6797ef' },
{ gte: 500, lte: 1000, label: '500-1000', color: '#96b5ef' },
],
textStyle: {
color: '#737373'
}
},
// 数据移入显示
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("汉中市");
}
}
</script>
<style scoped>
.map {
width: 100%;
}
.map-box {
display: inline-block;
width: 100%;
height: calc(100vh - 153px);
}
</style>
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: "接入得分",
},
{
prop: "jrdf",
label: "未上传登薄日志区县",
},
{
prop: "jrdf",
label: "登薄日志得分",
},
{
prop: "jrdf",
label: "总评分",
}
]
}
}
export default new data()
.jgHome {
display: flex;
justify-content: space-between;
height: calc(100% - 20px);
.bottom10 {
margin-bottom: 10px;
}
.paddingbtm0 {
/deep/.el-card__body {
padding-bottom: 0;
}
}
&-left,
&-right {
width: 30%;
.fznum {
font-size: 24px;
color: $light-blue;
span {
font-size: 14px;
color: #606266;
}
}
.fzl {
display: flex;
align-items: center;
img {
width: 70px;
margin-right: 15px;
}
p:nth-child(1) {
font-size: 18px;
}
}
.zszm {
justify-content: space-between;
li:nth-child(1) {}
}
}
.barChart {
flex: 1;
margin-top: 10px;
height: calc(100vh - 330px);
}
&-center {
width: 39%;
}
}
\ No newline at end of file
<template>
<div class="jgHome">
<div class="jgHome-left">
<el-card>
<div slot="header">
<span>发证情况</span>
<el-button style="float: right;" type="text">更多</el-button>
</div>
<div class="fzl">
<img src="../../image/zs.png" alt="">
<div>
<p>发证量</p>
<p class="fznum">10000<span>本</span></p>
</div>
</div>
<ul class="zszm d-flex-center">
<li>
<p>证书</p>
<p class="fznum">600<span>本</span></p>
</li>
<li>
<p>证明</p>
<p class="fznum">900<span>本</span></p>
</li>
</ul>
</el-card>
<el-card class="barChart">
<barChart />
</el-card>
</div>
<div class="jgHome-center">
<el-card>
<hzMap />
</el-card>
</div>
<div class="jgHome-right">
<el-card class="bottom10 paddingbtm0">
<jgChart />
</el-card>
<el-card class="box-card paddingbtm0">
<div slot="header">
<span>违规总计</span>
<el-button style="float: right;" type="text">更多</el-button>
</div>
<lb-table ref="table" :pagination="false" :heightNum="546" :column="tableData.columns" :data="tableData.data">
</lb-table>
</el-card>
</div>
</div>
</template>
<script>
// 引入表格数据
import data from "./data"
import barChart from './components/barChart'
import hzMap from './components/map'
import jgChart from './components/jgChart'
export default {
name: "jgHome",
components: { barChart, hzMap, jgChart },
data () {
return {
// 表格数据
tableData: {
// 表格头部信息
columns: data.columns(),
// 表格列表数据
data: [{}]
}
}
},
methods: {}
}
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>