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 @@ ...@@ -6,14 +6,14 @@
6 </div> 6 </div>
7 <div class="card2 mt-10"> 7 <div class="card2 mt-10">
8 <div class="title">数据趋势</div> 8 <div class="title">数据趋势</div>
9 <brokenline class="Brokenline" /> 9 <brokenline class="brokenline" />
10 </div> 10 </div>
11 </div> 11 </div>
12 </template> 12 </template>
13 13
14 <script> 14 <script>
15 import maps from "@/components/Echart/Map"; 15 import maps from "@/components/echart/map";
16 import brokenline from "@/components/Echart/Brokenline"; 16 import brokenline from "@/components/echart/brokenline";
17 export default { 17 export default {
18 data () { 18 data () {
19 return {}; 19 return {};
...@@ -78,7 +78,7 @@ export default { ...@@ -78,7 +78,7 @@ export default {
78 margin-bottom: 10px; 78 margin-bottom: 10px;
79 } 79 }
80 80
81 .Brokenline { 81 .brokenline {
82 margin: auto; 82 margin: auto;
83 width: 100%; 83 width: 100%;
84 } 84 }
......
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
54 </template> 54 </template>
55 55
56 <script> 56 <script>
57 import columnar from "@/components/Echart/Columnar"; 57 import columnar from "@/components/echart/columnar";
58 import work from "@/api/work"; 58 import work from "@/api/work";
59 export default { 59 export default {
60 data () { 60 data () {
......
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
18 </template> 18 </template>
19 19
20 <script> 20 <script>
21 import columnarsmat from "@/components/Echart/Columnarsmat"; 21 import columnarsmat from "@/components/echart/columnarsmat";
22 import Rose from "@/components/Echart/Rose"; 22 import Rose from "@/components/echart/Rose";
23 export default { 23 export default {
24 data () { 24 data () {
25 return { 25 return {
......
1 <template>
2 <div class="home">
3 <div class="home-left bgbk">
4 <div class="header titlebg">
5 汉中市接入概括
6 </div>
7 <!-- 地图 -->
8 <CenterLeft2Chart class="map" />
9 </div>
10 <div class="home-right">
11 <!-- 陕西省接入概括 -->
12 <div class="jrgk homebk">
13 <div class="header titlebg">
14 陕西省接入概括
15 </div>
16 <!-- 陕西省接入概括列表 -->
17 <el-row>
18 <el-col :span="9">
19 <ul class="gkList">
20 <li>总数量</li>
21 <div class="zsl">
22 <dv-digital-flop :config="config" style="height:70px;" />
23 <p></p>
24 </div>
25 </ul>
26 </el-col>
27 <el-col :span="5">
28 <ul class="jrl">
29 <div class="jrlList jrllsit1">
30 <p v-for="(item, index) in jrlList" :key="index">{{ item }}</p>
31 </div>
32 <li>日均接入量</li>
33 </ul>
34 </el-col>
35 <el-col :span="5">
36 <ul class="jrl">
37 <div class="jrlList jrllsit2">
38 <p v-for="(item, index) in dtjrlList" :key="index">{{ item }}</p>
39 </div>
40 <li>日均接入量</li>
41 </ul>
42 </el-col>
43 <el-col :span="5">
44 <ul class="jrl">
45 <div class="jrlList jrllsit3">
46 <p v-for="(item, index) in ztzlList" :key="index">{{ item }}</p>
47 </div>
48 <li>总体质量</li>
49 </ul>
50 </el-col>
51 </el-row>
52 </div>
53 <div class="jrdgk">
54 <!-- 接入点概括 -->
55 <div class="sxsjr homebk">
56 <div class="header titlebg">
57 接入点概括
58 </div>
59 <el-row>
60 <el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index">
61 <ul>
62 <li>{{ item.value }}</li>
63 <li>{{ item.title }}</li>
64 </ul>
65 </el-col>
66 </el-row>
67 </div>
68 <!-- 上报情况概括 -->
69 <div class="sbqkgk homebk">
70 <div class="header titlebg">
71 上报情况概括
72 </div>
73 <ul class="sbqkgs">
74 <div class="sbqkgsList">
75 <p v-for="(item, index) in sbqkgsList" :key="index"
76 :class="{ 'active': (typeof (item - 0) === 'number' && !isNaN(item - 0)) }">
77 {{ item }}
78 </p>
79 </div>
80 <li>总数量</li>
81 </ul>
82 </div>
83 </div>
84 <!-- 底部表格 -->
85 <div class="jrxxlb tableClass bgbk">
86 <div class="title titlebg">陕西省平台接入情况</div>
87 <!-- 陕西省平台接入情况table -->
88 <lb-table ref="table" :pagination="false" :heightNum="515" :column="tableData.columns" :data="tableData.data">
89 </lb-table>
90 </div>
91 </div>
92 </div>
93 </template>
94
95 <script>
96 // 上报首页
97 import wgsl from "./wgsl.vue";
98 import CenterLeft2Chart from "@/components/Echart/Map";
99 // 引入表格数据
100 import data from "./data"
101 export default {
102 name: "home",
103 components: { wgsl, CenterLeft2Chart },
104 data () {
105 function formatter (number) {
106 const numbers = number.toString().split('').reverse()
107 const segs = []
108 while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
109 return segs.join(',').split('').reverse().join('')
110 }
111 return {
112 // 总数量
113 config: {
114 number: [6523],
115 content: '{nt}',
116 formatter,
117 style: {
118 fontSize: 50,
119 fontWeight: 700,
120 fill: '#FFDD00'
121 }
122 },
123 // 日均接入量
124 jjrl: 300,
125 // 当天接入量
126 dtjrl: 100,
127 // 总体质量
128 ztzl: 3620,
129 // 上报情况概括
130 sbqkgs: 6296,
131 // 接入点概括
132 jrdList: [
133 {
134 value: 60,
135 title: '总数量'
136 },
137 {
138 value: 60,
139 title: '正常'
140 },
141 {
142 value: 60,
143 title: '异常'
144 }
145 ],
146 // 表格数据
147 tableData: {
148 // 表格头部信息
149 columns: data.columns(),
150 // 表格列表数据
151 data: [{
152 xzqmc: '咸阳市',
153 xzqzs: 100,
154 jrl: 300,
155 jscgl: 20,
156 dk: 60,
157 wjrqx: '长安县',
158 jrdf: 50
159 },
160 {
161 xzqmc: '咸阳市',
162 xzqzs: 100,
163 jrl: 300,
164 jscgl: 20,
165 dk: 60,
166 wjrqx: '长安县',
167 jrdf: 50
168 }]
169 }
170 }
171 },
172 computed: {
173 jrlList: function () {
174 return this.jjrl.toString().split('')
175 },
176 dtjrlList: function () {
177 return this.dtjrl.toString().split('')
178 },
179 ztzlList: function () {
180 return this.ztzl.toString().split('')
181 },
182 sbqkgsList: function () {
183 const numbers = this.sbqkgs.toString().split('').reverse()
184 const segs = []
185 while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
186 return segs.join(',').split('').reverse().join('')
187 }
188 },
189 methods: {
190 }
191 }
192 </script>
193 <style scoped lang="scss">
194 @import "~@/styles/mixin.scss";
195 @import "~@/styles/public.scss";
196 @import "./home.scss";
197 </style>