Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
843436f2 by xiaomiao
Options

引入组件大小写修改

1 parent 1095e8ad
Inline Side-by-side
Showing 4 changed files with 7 additions and 204 deletions
......@@ -6,14 +6,14 @@
</div>
<div class="card2 mt-10">
<div class="title">数据趋势</div>
<brokenline class="Brokenline" />
<brokenline class="brokenline" />
</div>
</div>
</template>
<script>
import maps from "@/components/Echart/Map";
import brokenline from "@/components/Echart/Brokenline";
import maps from "@/components/echart/map";
import brokenline from "@/components/echart/brokenline";
export default {
data () {
return {};
......@@ -78,7 +78,7 @@ export default {
margin-bottom: 10px;
}
.Brokenline {
.brokenline {
margin: auto;
width: 100%;
}
......
......@@ -54,7 +54,7 @@
</template>
<script>
import columnar from "@/components/Echart/Columnar";
import columnar from "@/components/echart/columnar";
import work from "@/api/work";
export default {
data () {
......
......@@ -18,8 +18,8 @@
</template>
<script>
import columnarsmat from "@/components/Echart/Columnarsmat";
import Rose from "@/components/Echart/Rose";
import columnarsmat from "@/components/echart/columnarsmat";
import Rose from "@/components/echart/Rose";
export default {
data () {
return {
......
<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>