Skip to content

bdc / bdcjg-web

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

style:样式修改

1 parent bc1ccfa8
Inline Side-by-side
Showing 12 changed files with 665 additions and 465 deletions
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="220px"
width="459px"
></Echart>
<Echart :options="options" id="centreLeft1Chart" height="220px" width="100%"></Echart>
</div>
</template>
......@@ -30,13 +25,13 @@ export default {
cdata: {
handler (newData) {
this.options = {
grid: {
// 让图表占满容器
top: "0%",
left: "1%",
right: "30%",
bottom: "0%",
},
grid: {
// 让图表占满容器
top: "0%",
left: "1%",
right: "30%",
bottom: "0%",
},
color: [
"#37a2da",
"#32c5e9",
......@@ -75,4 +70,5 @@ export default {
</script>
<style lang="scss" scoped>
</style>
......
<template>
<div>
<Chart :cdata="cdata" />
<div class="rotograph">佛坪县</div>
</div>
</template>
......@@ -19,7 +18,7 @@ export default {
{ value: 25, name: "产地产权（独幢、层、套、间、房屋）" },
{ value: 20, name: "建筑物区分所有权业主共有部分" },
{ value: 35, name: "海域（含无居民海岛）使用权" },
{ value: 10, name: "构（建）筑物所有权" },
{ value: 10, name: "构（建）筑物所有权" },
{ value: 5, name: "农用地使用权（非林地）" },
{ value: 15, name: "林权" },
{ value: 25, name: "注销登记" },
......@@ -43,15 +42,15 @@ export default {
</script>
<style lang="scss" scoped>
.rotograph{
margin: auto;
width:200px;
height: 30px;
background-color: rgb(6, 121, 167);
font-size: 20px;
line-height: 30px;
text-align: center;
border-radius: 6px;
font-weight: 600;
.rotograph {
margin: auto;
width: 200px;
height: 30px;
background-color: rgb(6, 121, 167);
font-size: 20px;
line-height: 30px;
text-align: center;
border-radius: 6px;
font-weight: 600;
}
</style>
......
......@@ -99,10 +99,16 @@ export const asyncRoutes = [
component: Layout,
children: [
{
path: 'index',
component: () => import('@/views/jktj/index'),
path: 'ywltj',
component: () => import('@/views/jktj/ywltj/index'),
name: 'jktj',
meta: { title: '业务量统计', icon: 'zhcx' }
},
{
path: 'bsxljk',
component: () => import('@/views/jktj/bsxljk/index'),
name: 'jktj',
meta: { title: '监控统计', icon: 'zhcx' }
meta: { title: '办事效率监控', icon: 'zhcx' }
}
]
},
......
<template>
<div class="centercard">
<div class="card1 bg-shadow">
<maps class="map" />
<maps class="map" />
</div>
<div class="card2 bg-shadow">
<Brokenline class="Brokenline" />
......@@ -13,39 +13,41 @@
import maps from "@/components/echart/map";
import Brokenline from "@/components/echart/Brokenline";
export default {
data() {
data () {
return {};
},
components: { maps,Brokenline },
mounted() {},
beforeDestroy() {},
components: { maps, Brokenline },
mounted () { },
beforeDestroy () { },
methods: {},
};
</script>
<style lang="scss" scoped>
.centercard{
width: 50%;
height: 100%;
.card1{
width: 100%;
height: 600px;
.centercard {
width: 48%;
height: 100%;
.map{
margin: auto;
width: 95%;
height: 600px;
}
}
.card2{
width: 100%;
height: 300px;
.card1 {
width: 100%;
height: 600px;
.Brokenline{
margin: auto;
width: 100%;
height: 300px;
}
}
}
.map {
margin: auto;
width: 95%;
height: 600px;
}
}
.card2 {
width: 100%;
height: 300px;
.Brokenline {
margin: auto;
width: 100%;
height: 300px;
}
}
}
</style>
......
......@@ -4,7 +4,8 @@
background-color: #031754;
overflow: hidden;
}
#index {
.bigScreen-con {
color: #d3d6dd;
width: 1920px;
height: 1080px;
......@@ -14,119 +15,62 @@
transform-origin: left top;
overflow: hidden;
.bg {
.header {
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
}
height: 100px;
.host-body{
.header{
width: 100%;
height: 100px;
.head{
margin-top: 50px;
}
.head {
margin-top: 50px;
}
.dv-dec-10,
.dv-dec-10-s {
width: 50.3%;
height: 10px;
}
.dv-dec-10,
.dv-dec-10-s {
width: 50.3%;
height: 10px;
}
.dv-dec-10-s {
transform: rotateY(180deg);
}
.dv-dec-10-s {
transform: rotateY(180deg);
}
.dv-dec-8 {
width: 200px;
height: 50px;
}
.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%);
}
.title {
position: relative;
width: 500px;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
.dv-dec-6 {
position: absolute;
bottom: -30px;
left: 50%;
width: 250px;
height: 8px;
transform: translate(-50%);
}
.dv-dec-5 {
position: absolute;
width: 500px;
height: 40px;
left: 0;
top: 38.5px;
}
}
.content{
width: 98%;
height: 900px;
margin: auto;
display: flex;
.centercard{
width: 50%;
height: 100%;
.card1{
width: 100%;
height: 600px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card2{
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.title-text {
font-size: 37px;
position: absolute;
font-weight: 600;
width: 500px;
bottom: 20px;
left: 50%;
transform: translate(-50%);
}
.rightcard{
width: 25%;
height: 100%;
.card1{
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card2{
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card3{
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.dv-dec-6 {
position: absolute;
bottom: -30px;
left: 50%;
width: 250px;
height: 8px;
transform: translate(-50%);
}
}
}
}
}
\ No newline at end of file
......
<template>
<div class="bigScreen">
<div id="index" ref="appRef">
<div class="bg">
<dv-loading v-if="loading">Loading...</dv-loading>
<div v-else class="host-body">
<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">
<span class="title-text">汉中市不动产监管大屏</span>
<dv-decoration-5
:dur="1"
class="dv-dec-5"
:color="decorationColor"
/>
</div>
<dv-decoration-8
class="dv-dec-8"
:reverse="true"
:color="decorationColor"
/>
<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">
<span class="title-text">汉中市不动产监管大屏</span>
<dv-decoration-5 :dur="1" class="dv-dec-5" :color="decorationColor" />
</div>
<dv-decoration-10 class="dv-dec-10-s" />
<dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
</div>
<dv-decoration-10 class="dv-dec-10-s" />
</div>
<screencontent/>
</div>
<screencontent />
</div>
</div>
</div>
......@@ -38,7 +27,7 @@ import drawMixin from "../../utils/drawMixin";
import screencontent from './screencontent'
export default {
mixins: [drawMixin],
data() {
data () {
return {
decorationColor: ["#568aea", "#568aea"],
};
......@@ -46,11 +35,11 @@ export default {
components: {
screencontent
},
mounted() {
mounted () {
// this.timeFn();
this.cancelLoading();
},
beforeDestroy() {
beforeDestroy () {
clearInterval(this.timing);
},
methods: {
......@@ -61,7 +50,7 @@ export default {
// this.dateWeek = this.weekday[new Date().getDay()];
// }, 1000);
// },
cancelLoading() {
cancelLoading () {
setTimeout(() => {
this.loading = false;
}, 500);
......
......@@ -3,31 +3,24 @@
<div class="card bg-shadow">
<div class="cardhead">房屋情况统计表</div>
<div class="cardcontent">
<el-table
class="bueatyScroll"
:header-cell-style="{ 'text-align': 'center', background: '#02296d',color:'#ffffff' }"
:cell-style="{ 'text-align': 'center' }"
:row-style="{ height: '30px' }"
:data="tableData"
stripe
ref="tableref"
height="250px"
style="width: 100%"
>
<el-table-column type="index" label="序号" width="100" />
<el-table-column prop="use" label="用途" width="100" />
<el-table-column prop="property" label="性质" width="120" />
<el-table-column prop="area" label="面积" width="130" />
</el-table>
<el-table class="bueatyScroll"
:header-cell-style="{ 'text-align': 'center', background: '#02296d', color: '#ffffff' }"
:cell-style="{ 'text-align': 'center' }" :row-style="{ height: '30px' }" :data="tableData" stripe
ref="tableref" height="250px" style="width: 100%">
<el-table-column type="index" label="序号" />
<el-table-column prop="use" label="用途" />
<el-table-column prop="property" label="性质" />
<el-table-column prop="area" label="面积" />
</el-table>
</div>
</div>
<div class="card bg-shadow">
<div class="cardhead">登记业务量</div>
<Rose/>
<Rose />
</div>
<div class="card bg-shadow">
<div class="cardhead">登记类型总量</div>
<columnarsmat/>
<columnarsmat />
</div>
</div>
</template>
......@@ -36,52 +29,52 @@
import columnarsmat from "@/components/echart/columnarsmat";
import Rose from "@/components/echart/Rose";
export default {
data() {
data () {
return {
tableData: [{
use:'居住',
property: '住宅',
area: '120'
}, {
use: '水果店',
property: '商铺',
area: '342'
}, {
use: '商场',
property: '商业',
area: '2343'
}, {
use: '耕地',
property: '农田',
area: '29987'
}, {
use: '林场',
property: '林地',
area: '67894'
}, {
use: '旅游',
property: '旅游区',
area: '22328'
}, {
use: '政府',
property: '建筑用地',
area: '1228'
}, {
use: '学校',
property: '建筑用地',
area: '2328'
}, {
use: '采矿',
property: '矿场',
area: '2328'
}]
use: '居住',
property: '住宅',
area: '120'
}, {
use: '水果店',
property: '商铺',
area: '342'
}, {
use: '商场',
property: '商业',
area: '2343'
}, {
use: '耕地',
property: '农田',
area: '29987'
}, {
use: '林场',
property: '林地',
area: '67894'
}, {
use: '旅游',
property: '旅游区',
area: '22328'
}, {
use: '政府',
property: '建筑用地',
area: '1228'
}, {
use: '学校',
property: '建筑用地',
area: '2328'
}, {
use: '采矿',
property: '矿场',
area: '2328'
}]
};
},
components: { columnarsmat,Rose },
mounted() {
components: { columnarsmat, Rose },
mounted () {
scroll(tableref.value.$refs.bodyWrapper);//设置滚动
},
beforeDestroy() {},
beforeDestroy () { },
methods: {
},
......@@ -92,6 +85,7 @@ export default {
.leftcard {
width: 25%;
height: 100%;
.cardhead {
width: 100%;
height: 40px;
......@@ -100,47 +94,54 @@ export default {
color: rgb(27, 185, 206);
font-size: 26px;
}
.cardcontent {
width: 450px;
height: 250px;
/deep/.el-table tr:nth-child(even){
background-color: #043d72!important;
}
/deep/.el-table__body-wrapper {
background-color: #043d72
}
/* striped先开启斑马纹属性，这里是修改斑马纹颜色 */
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
background: #043d72
}
width: 100%;
height: 250px;
/* 非斑马纹颜色 */
/deep/.el-table tr {
background: #043d72
}
/deep/.el-table tr:nth-child(even) {
background-color: #043d72 !important;
}
/* 斑马纹颜色定义完之后会显示自带的边框颜色，这里要重置 */
/deep/.el-table td,
.building-top .el-table th.is-leaf {
border: none;
color: white;
}
/deep/.el-table__body-wrapper {
background-color: #043d72
}
/* 这里是滑过斑马纹滑过时的颜色 */
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #021c55;
}
.el-table{
--el-table-border:0px;
--el-table-border-color:rgb(0 0 0 / 0%);
/* striped先开启斑马纹属性，这里是修改斑马纹颜色 */
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
background: #043d72
}
}
/deep/.el-table .el-table__cell {
padding: 6px 0;
}
/* 非斑马纹颜色 */
/deep/.el-table tr {
background: #043d72
}
/* 斑马纹颜色定义完之后会显示自带的边框颜色，这里要重置 */
/deep/.el-table td,
.building-top .el-table th.is-leaf {
border: none;
color: white;
}
/* 这里是滑过斑马纹滑过时的颜色 */
/deep/.el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: #021c55;
}
.el-table {
--el-table-border: 0px;
--el-table-border-color: rgb(0 0 0 / 0%);
}
/deep/.el-table .el-table__cell {
padding: 6px 0;
}
}
.card{
.card {
width: 100%;
height: 300px;
}
......
......@@ -12,7 +12,7 @@ import centercard from "./centercard";
import rightcard from "./rightcard";
export default {
mixins: [drawMixin],
data() {
data () {
return {
decorationColor: ["#568aea", "#568aea"],
};
......@@ -22,15 +22,15 @@ export default {
centercard,
rightcard,
},
mounted() {
mounted () {
// this.timeFn();
this.cancelLoading();
},
beforeDestroy() {
beforeDestroy () {
clearInterval(this.timing);
},
methods: {
cancelLoading() {
cancelLoading () {
setTimeout(() => {
this.loading = false;
}, 500);
......@@ -40,5 +40,61 @@ export default {
</script>
<style scoped lang="scss">
@import "./index.scss";
.content {
width: 98%;
height: 900px;
margin: auto;
display: flex;
display: flex;
.centercard {
width: 50%;
height: 100%;
.card1 {
width: 100%;
height: 600px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card2 {
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
}
.rightcard {
width: 25%;
height: 100%;
.card1 {
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card2 {
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card3 {
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
}
}
</style>
......
<template>
<div class="home">
<div class="home-left bgbk">
<div class="header titlebg">
汉中市接入概括
</div>
<!-- 地图 -->
<CenterLeft2Chart class="map" />
</div>
<div class="home-right">
<!-- 陕西省接入概括 -->
<div class="jrgk homebk">
<div class="header titlebg">
陕西省接入概括
</div>
<!-- 陕西省接入概括列表 -->
<el-row>
<el-col :span="9">
<ul class="gkList">
<li>总数量</li>
<div class="zsl">
<dv-digital-flop :config="config" style="height:70px;" />
<p></p>
</div>
</ul>
</el-col>
<el-col :span="5">
<ul class="jrl">
<div class="jrlList jrllsit1">
<p v-for="(item, index) in jrlList" :key="index">{{ item }}</p>
</div>
<li>日均接入量</li>
</ul>
</el-col>
<el-col :span="5">
<ul class="jrl">
<div class="jrlList jrllsit2">
<p v-for="(item, index) in dtjrlList" :key="index">{{ item }}</p>
</div>
<li>日均接入量</li>
</ul>
</el-col>
<el-col :span="5">
<ul class="jrl">
<div class="jrlList jrllsit3">
<p v-for="(item, index) in ztzlList" :key="index">{{ item }}</p>
</div>
<li>总体质量</li>
</ul>
</el-col>
</el-row>
</div>
<div class="jrdgk">
<!-- 接入点概括 -->
<div class="sxsjr homebk">
<div class="header titlebg">
接入点概括
</div>
<el-row>
<el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index">
<ul>
<li>{{ item.value }}</li>
<li>{{ item.title }}</li>
</ul>
</el-col>
</el-row>
</div>
<!-- 上报情况概括 -->
<div class="sbqkgk homebk">
<div class="header titlebg">
上报情况概括
</div>
<ul class="sbqkgs">
<div class="sbqkgsList">
<p v-for="(item, index) in sbqkgsList" :key="index"
:class="{ 'active': (typeof (item - 0) === 'number' && !isNaN(item - 0)) }">
{{ item }}
</p>
</div>
<li>总数量</li>
</ul>
</div>
</div>
<!-- 底部表格 -->
<div class="jrxxlb tableClass bgbk">
<div class="title titlebg">陕西省平台接入情况</div>
<!-- 陕西省平台接入情况table -->
<lb-table ref="table" :pagination="false" :heightNum="515" :column="tableData.columns" :data="tableData.data">
</lb-table>
</div>
</div>
<div>
<screencontent />
</div>
</template>
<script>
// 上报首页
import wgsl from "./wgsl.vue";
import CenterLeft2Chart from "@/components/echart/map";
// 引入表格数据
import data from "./data"
import screencontent from '@/views/dataView/screencontent'
export default {
name: "home",
components: { wgsl, CenterLeft2Chart },
components: {
screencontent
},
data () {
function formatter (number) {
const numbers = number.toString().split('').reverse()
const segs = []
while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
return segs.join(',').split('').reverse().join('')
}
return {
// 总数量
config: {
number: [6523],
content: '{nt}',
formatter,
style: {
fontSize: 50,
fontWeight: 700,
fill: '#FFDD00'
}
},
// 日均接入量
jjrl: 300,
// 当天接入量
dtjrl: 100,
// 总体质量
ztzl: 3620,
// 上报情况概括
sbqkgs: 6296,
// 接入点概括
jrdList: [
{
value: 60,
title: '总数量'
},
{
value: 60,
title: '正常'
},
{
value: 60,
title: '异常'
}
],
// 表格数据
tableData: {
// 表格头部信息
columns: data.columns(),
// 表格列表数据
data: [{
xzqmc: '咸阳市',
xzqzs: 100,
jrl: 300,
jscgl: 20,
dk: 60,
wjrqx: '长安县',
jrdf: 50
},
{
xzqmc: '咸阳市',
xzqzs: 100,
jrl: 300,
jscgl: 20,
dk: 60,
wjrqx: '长安县',
jrdf: 50
}]
}
}
},
computed: {
jrlList: function () {
return this.jjrl.toString().split('')
},
dtjrlList: function () {
return this.dtjrl.toString().split('')
},
ztzlList: function () {
return this.ztzl.toString().split('')
},
sbqkgsList: function () {
const numbers = this.sbqkgs.toString().split('').reverse()
const segs = []
while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
return segs.join(',').split('').reverse().join('')
}
},
methods: {
......@@ -191,7 +20,5 @@ export default {
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/public.scss";
@import "./home.scss";
@import "../dataView/index.scss";
</style>
......
<template>
<div class="home">
<div class="home-left bgbk">
<div class="header titlebg">
汉中市接入概括
</div>
<!-- 地图 -->
<CenterLeft2Chart class="map" />
</div>
<div class="home-right">
<!-- 陕西省接入概括 -->
<div class="jrgk homebk">
<div class="header titlebg">
陕西省接入概括
</div>
<!-- 陕西省接入概括列表 -->
<el-row>
<el-col :span="9">
<ul class="gkList">
<li>总数量</li>
<div class="zsl">
<dv-digital-flop :config="config" style="height:70px;" />
<p></p>
</div>
</ul>
</el-col>
<el-col :span="5">
<ul class="jrl">
<div class="jrlList jrllsit1">
<p v-for="(item, index) in jrlList" :key="index">{{ item }}</p>
</div>
<li>日均接入量</li>
</ul>
</el-col>
<el-col :span="5">
<ul class="jrl">
<div class="jrlList jrllsit2">
<p v-for="(item, index) in dtjrlList" :key="index">{{ item }}</p>
</div>
<li>日均接入量</li>
</ul>
</el-col>
<el-col :span="5">
<ul class="jrl">
<div class="jrlList jrllsit3">
<p v-for="(item, index) in ztzlList" :key="index">{{ item }}</p>
</div>
<li>总体质量</li>
</ul>
</el-col>
</el-row>
</div>
<div class="jrdgk">
<!-- 接入点概括 -->
<div class="sxsjr homebk">
<div class="header titlebg">
接入点概括
</div>
<el-row>
<el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index">
<ul>
<li>{{ item.value }}</li>
<li>{{ item.title }}</li>
</ul>
</el-col>
</el-row>
</div>
<!-- 上报情况概括 -->
<div class="sbqkgk homebk">
<div class="header titlebg">
上报情况概括
</div>
<ul class="sbqkgs">
<div class="sbqkgsList">
<p v-for="(item, index) in sbqkgsList" :key="index"
:class="{ 'active': (typeof (item - 0) === 'number' && !isNaN(item - 0)) }">
{{ item }}
</p>
</div>
<li>总数量</li>
</ul>
</div>
</div>
<!-- 底部表格 -->
<div class="jrxxlb tableClass bgbk">
<div class="title titlebg">陕西省平台接入情况</div>
<!-- 陕西省平台接入情况table -->
<lb-table ref="table" :pagination="false" :heightNum="515" :column="tableData.columns" :data="tableData.data">
</lb-table>
</div>
</div>
</div>
</template>
<script>
// 上报首页
import wgsl from "./wgsl.vue";
import CenterLeft2Chart from "@/components/echart/map";
// 引入表格数据
import data from "./data"
export default {
name: "home",
components: { wgsl, CenterLeft2Chart },
data () {
function formatter (number) {
const numbers = number.toString().split('').reverse()
const segs = []
while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
return segs.join(',').split('').reverse().join('')
}
return {
// 总数量
config: {
number: [6523],
content: '{nt}',
formatter,
style: {
fontSize: 50,
fontWeight: 700,
fill: '#FFDD00'
}
},
// 日均接入量
jjrl: 300,
// 当天接入量
dtjrl: 100,
// 总体质量
ztzl: 3620,
// 上报情况概括
sbqkgs: 6296,
// 接入点概括
jrdList: [
{
value: 60,
title: '总数量'
},
{
value: 60,
title: '正常'
},
{
value: 60,
title: '异常'
}
],
// 表格数据
tableData: {
// 表格头部信息
columns: data.columns(),
// 表格列表数据
data: [{
xzqmc: '咸阳市',
xzqzs: 100,
jrl: 300,
jscgl: 20,
dk: 60,
wjrqx: '长安县',
jrdf: 50
},
{
xzqmc: '咸阳市',
xzqzs: 100,
jrl: 300,
jscgl: 20,
dk: 60,
wjrqx: '长安县',
jrdf: 50
}]
}
}
},
computed: {
jrlList: function () {
return this.jjrl.toString().split('')
},
dtjrlList: function () {
return this.dtjrl.toString().split('')
},
ztzlList: function () {
return this.ztzl.toString().split('')
},
sbqkgsList: function () {
const numbers = this.sbqkgs.toString().split('').reverse()
const segs = []
while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
return segs.join(',').split('').reverse().join('')
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/public.scss";
@import "./home.scss";
</style>
<template>
<!-- 监控日志 -->
<div class="jktjDetail form-clues">
<!-- 头部搜索 -->
<el-form ref="form" :model="form" :inline="true" class="from-clues-header" label-width="100px">
<el-row>
<el-col :span="8">
<el-date-picker v-model="valueTime" type="datetimerange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-col>
<!-- <el-col :span="6">
<el-form-item label="开始时间">
<el-date-picker type="date" :picker-options="pickerOptionsStart" clearable
v-model="form.startTime" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="结束时间">
<el-date-picker clearable :picker-options="pickerOptionsEnd" v-model="form.endTime"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
</el-col> -->
<!-- 按钮操作 -->
<el-col :span="12" class="btnColRight">
<el-button type="default" @click="resetForm"> 重置 </el-button>
<el-button type="primary"> 查询 </el-button>
</el-col>
</el-row>
</el-form>
<!-- 表格 -->
<div class="form-clues-content echarts-box">
<div id="myChart" class="chart"></div>
</div>
</div>
</template>
<script>
export default {
name: "jktj",
data () {
return {
// 开始结束日期限制
pickerOptionsStart: {
disabledDate: (time) => {
if (this.form.endTime) {
return (
time.getTime() >= new Date(this.form.endTime).getTime()
);
}
}
},
// 结束日期限制
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.form.startTime) {
return (
time.getTime() <= new Date(this.form.startTime).getTime()
);
}
}
},
// 搜索表单
valueTime: '',
form: {
startTime: "",
endTime: ""
}
}
},
mounted () {
// 初始化图表
this.echartInit();
},
methods: {
// 重置
resetForm () {
this.form = {
startTime: "",
endTime: ""
}
},
echartInit () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(
document.getElementById("myChart")
);
// 绘制图表
myChart.setOption({
color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
title: {
show: true,
text: "汉中市接入数量与上报数量统计(单位:个)\n(2022年02月05日~2022年03月07日)",
left: "center",
textStyle: {
fontSize: 18,
lineHeight: 30,
height: 60,
color: "#777",
},
},
legend: {
data: [
"接入成功数量",
"接入失败数量",
"上报成功数量",
"上报失败数量",
],
top: 80,
},
tooltip: {
show: true,
trigger: "axis",
},
grid: {
top: 120,
},
xAxis: [
{
type: "category",
data: ["汉台区", "南郑区", "城固县", "洋县", "西乡县"],
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "接入成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "接入失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
{
name: "上报成功数量",
type: "bar",
data: [1000, 1500, 2000, 500, 4000],
},
{
name: "上报失败数量",
type: "bar",
data: [900, 500, 3200, 800, 4500],
},
],
});
},
},
};
</script>
<style scoped lang="scss">
.jktjDetail {
background-color: #fff;
height: 100%;
display: flex;
flex-direction: column;
.echarts-box {
display: flex;
justify-content: center;
height: 100%;
.chart {
width: 100%;
height: 100%;
}
}
.form-clues-content {
flex: 1;
height: 100%;
}
}
</style>
<style scoped lang="scss">
@import "~@/styles/public.scss";
</style>