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 @@ ...@@ -23,7 +23,7 @@
23 </div> 23 </div>
24 </template> 24 </template>
25 <script> 25 <script>
26 import drawMixin from "../../utils/drawMixin"; 26 import drawMixin from "@/utils/drawMixin";
27 import screencontent from './screencontent' 27 import screencontent from './screencontent'
28 export default { 28 export default {
29 mixins: [drawMixin], 29 mixins: [drawMixin],
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 </div> 6 </div>
7 </template> 7 </template>
8 <script> 8 <script>
9 import drawMixin from "../../utils/drawMixin"; 9 import drawMixin from "@/utils/drawMixin";
10 import leftcard from "./leftcard"; 10 import leftcard from "./leftcard";
11 import centercard from "./centercard"; 11 import centercard from "./centercard";
12 import rightcard from "./rightcard"; 12 import rightcard from "./rightcard";
......
1 <template> 1 <template>
2 <screencontent /> 2 <screencontent />
3 </template> 3 </template>
4
5 <script> 4 <script>
6 import screencontent from '@/views/dataView/screencontent' 5 import screencontent from '@/views/home/dataView/screencontent'
7 export default { 6 export default {
8 name: "home", 7 name: "home",
9 components: { 8 components: {
10 screencontent 9 screencontent
11 },
12 data () {
13 return {
14 }
15 },
16 methods: {
17 } 10 }
18 } 11 }
19 </script> 12 </script>
20 <style scoped lang="scss"> 13 <style scoped lang="scss">
21 @import "../dataView/index.scss"; 14 @import "./dataView/index.scss";
22 </style> 15 </style>
......
1 <template>
2 <div id="barChart"></div>
3 </template>
4
5 <script>
6 export default {
7 data () {
8 return {
9 };
10 },
11 mounted () {
12 this.drawProvinceMap();
13 },
14 methods: {
15 drawProvinceMap () {
16 var chartDom = document.getElementById('barChart');
17 var myChart = this.$echarts.init(chartDom);
18 var option;
19
20 option = {
21 tooltip: {
22 trigger: 'axis',
23 axisPointer: {
24 type: 'shadow'
25 }
26 },
27 legend: {
28 data: ['网络断开', '网络正常']
29 },
30 grid: {
31 left: '3%',
32 right: '4%',
33 bottom: '3%',
34 containLabel: true
35 },
36 xAxis: [
37 {
38 type: 'value'
39 }
40 ],
41 yAxis: [
42 {
43 type: 'category',
44 axisTick: {
45 show: false
46 },
47 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
48 }
49 ],
50 series: [
51 {
52 name: '网络正常',
53 type: 'bar',
54 itemStyle: {
55 color: '#67C23A'
56 },
57 label: {
58 show: true,
59 position: 'inside'
60 },
61 emphasis: {
62 focus: 'series'
63 },
64 data: [200, 170, 240, 244, 200, 220, 210]
65 },
66
67 {
68 name: '网络断开',
69 type: 'bar',
70 itemStyle: {
71 color: '#F56C6C'
72 },
73 label: {
74 show: true,
75 position: 'inside'
76 },
77 emphasis: {
78 focus: 'series'
79 },
80 data: [-120, -132, -101, -134, -190, -230, -210]
81 }
82 ],
83
84 }
85 myChart.setOption(option);
86 window.addEventListener("resize", () => {
87 this.myChart.resize();
88 });
89 }
90 }
91 }
92 </script>
93 <style scoped lang="scss">
94 #barChart {
95 width: 100%;
96 height: 500px;
97 }
98 </style>
1 <template>
2 <div id="jgChart" />
3 </template>
4
5 <script>
6 export default {
7 data () {
8 return {
9 };
10 },
11 methods: {
12 drawInit () {
13 let datavalue = [26, 300, 2000, 1200, 800];
14 let ii = -1;
15 var chartDom = document.getElementById('jgChart');
16 var myChart = this.$echarts.init(chartDom);
17 var option;
18 option = {
19 radar: {
20 indicator: [
21 { name: '原则监管', max: 2600 },
22 { name: '时效监管', max: 2600 },
23 { name: '证书监管', max: 3600 },
24 { name: '年限监管', max: 2600 },
25 { name: '内容监管', max: 2600 },
26 ],
27 name: {
28 rich: {
29 a: {
30 color: '#606266'
31 },
32 b: {
33 color: '#409EFF',
34 align: 'center',
35 }
36 },
37 formatter: (a, b) => {
38 ii++;
39 return `{a|${a}}\n{b|${datavalue[ii]}}`
40 }
41 }
42 },
43 series: [
44 {
45 type: 'radar',
46 symbol: 'none',//去掉拐点的圈
47 itemStyle: {
48 color: '#409EFF'
49 },
50 data: [
51 {
52 value: datavalue,
53 }
54 ]
55 }
56 ]
57 };
58 myChart.setOption(option);
59 }
60 },
61 mounted () {
62 this.drawInit()
63 }
64 }
65 </script>
66 <style scoped>
67 #jgChart {
68 width: 100%;
69 height: 330px;
70 }
71 </style>
1 <template>
2 <div class="map">
3 <div class="map-box" ref="mapContain" />
4 </div>
5 </template>
6 <script>
7 export default {
8 data () {
9 return {
10 mapName: "汉中市",
11 listArr: [{
12 name: '汉台区',
13 value: '6000'
14 },
15 {
16 name: '南郑区',
17 value: '8000'
18 },
19 {
20 name: '城固县',
21 value: '3000'
22 },
23 {
24 name: '洋县',
25 value: '7000'
26 },
27 {
28 name: '西乡县',
29 value: '1000'
30 },
31 {
32 name: '镇巴县',
33 value: '2000'
34 },
35 {
36 name: '勉县',
37 value: '600'
38 },
39 {
40 name: '留坝县',
41 value: '3000'
42 },
43 {
44 name: '佛坪县',
45 value: '1000'
46 },
47 {
48 name: '宁强县',
49 value: '1000'
50 },
51 {
52 name: '略阳县',
53 value: '1000'
54 }], //城市json
55 max: "9000", //最大value值
56 min: "500", // 最小value值
57 };
58 },
59 methods: {
60 drawProvinceMap (mapName) {
61 this.mapName = mapName;
62 // 引入区域数据
63 require('./hanzhong.js');
64 let _this = this;
65 let myChart8 = this.$echarts.init(this.$refs.mapContain);
66 const option = {
67 visualMap: {
68 min: 0,
69 max: _this.max,
70 top: "bottom",
71 right: 10,
72 splitNumber: 6,
73 seriesIndex: [0],
74 itemWidth: 20, // 每个图元的宽度
75 itemGap: 2, // 每两个图元之间的间隔距离，单位为px
76 pieces: [ // 自定义每一段的范围，以及每一段的文字
77 { gte: 6000, label: '6000以上', color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
78 { gte: 2000, lte: 6000, label: '2000-6000', color: '#3375e4' },
79 { gte: 1000, lte: 2000, label: '1000-2000', color: '#6797ef' },
80 { gte: 500, lte: 1000, label: '500-1000', color: '#96b5ef' },
81 ],
82 textStyle: {
83 color: '#737373'
84 }
85 },
86 // 数据移入显示
87 tooltip: {
88 trigger: "item",
89 formatter: function (params) {
90 return params.value ? params.name + ':' + params.value + '件' : params.name + ':' + '0件'
91 },
92 // 边框颜色
93 borderColor: "#CB000C",
94 // 边框宽度
95 borderWidth: "1",
96 },
97 series: [
98 {
99 type: "map",
100 map: this.mapName,
101 itemStyle: {
102 normal: { //正常状态
103 label: {
104 show: true,
105 formatter: '{b}', //地图上显示的数据，分别对应data中的name和value
106 color: '#fff',
107 },
108 areaColor: '#409EFF' //地图区域的颜色
109 },
110 emphasis: {
111 label: { show: true },
112 areaColor: "#67C23A", //鼠标进入时的颜色
113 },
114 },
115 data: _this.listArr,
116 },
117 ],
118 };
119 myChart8.setOption(option);
120 },
121 },
122 mounted () {
123 // 初始化数据
124 this.drawProvinceMap("汉中市");
125 }
126 }
127 </script>
128 <style scoped>
129 .map {
130 width: 100%;
131 }
132
133 .map-box {
134 display: inline-block;
135 width: 100%;
136 height: calc(100vh - 153px);
137 }
138 </style>
1 import filter from '@/utils/filter.js'
2 class data extends filter {
3 constructor() {
4 super()
5 }
6 columns () {
7 return [
8 {
9 type: 'index',
10 label: "序号",
11 },
12 {
13 prop: "xzqmc",
14 label: "行政区名称",
15 },
16 {
17 prop: "xzqzs",
18 label: "行政区总数",
19 },
20 {
21 prop: "jrl",
22 label: "接入量",
23 },
24 {
25 prop: 'jscgl',
26 label: '接收成功率',
27 render: (h, scope) => {
28 return (
29 <div>
30 {scope.row.jscgl} %
31 </div>
32 )
33 }
34 },
35 {
36 prop: "dk",
37 label: "成功率得分",
38 },
39 {
40 prop: "wjrqx",
41 label: "未接入区县",
42 },
43 {
44 prop: "jrdf",
45 label: "接入得分",
46 },
47 {
48 prop: "jrdf",
49 label: "未上传登薄日志区县",
50 },
51 {
52 prop: "jrdf",
53 label: "登薄日志得分",
54 },
55 {
56 prop: "jrdf",
57 label: "总评分",
58 }
59 ]
60 }
61 }
62 export default new data()
1 .jgHome {
2 display: flex;
3 justify-content: space-between;
4 height: calc(100% - 20px);
5
6 .bottom10 {
7 margin-bottom: 10px;
8 }
9
10 .paddingbtm0 {
11 /deep/.el-card__body {
12 padding-bottom: 0;
13 }
14 }
15
16 &-left,
17 &-right {
18 width: 30%;
19
20 .fznum {
21 font-size: 24px;
22 color: $light-blue;
23
24 span {
25 font-size: 14px;
26 color: #606266;
27 }
28 }
29
30 .fzl {
31 display: flex;
32 align-items: center;
33
34 img {
35 width: 70px;
36 margin-right: 15px;
37 }
38
39 p:nth-child(1) {
40 font-size: 18px;
41 }
42
43 }
44
45 .zszm {
46 justify-content: space-between;
47
48 li:nth-child(1) {}
49 }
50 }
51
52 .barChart {
53 flex: 1;
54 margin-top: 10px;
55 height: calc(100vh - 330px);
56 }
57
58 &-center {
59 width: 39%;
60 }
61 }
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="jgHome">
3 <div class="jgHome-left">
4 <el-card>
5 <div slot="header">
6 <span>发证情况</span>
7 <el-button style="float: right;" type="text">更多</el-button>
8 </div>
9 <div class="fzl">
10 <img src="../../image/zs.png" alt="">
11 <div>
12 <p>发证量</p>
13 <p class="fznum">10000<span>本</span></p>
14 </div>
15 </div>
16 <ul class="zszm d-flex-center">
17 <li>
18 <p>证书</p>
19 <p class="fznum">600<span>本</span></p>
20 </li>
21 <li>
22 <p>证明</p>
23 <p class="fznum">900<span>本</span></p>
24 </li>
25 </ul>
26 </el-card>
27 <el-card class="barChart">
28 <barChart />
29 </el-card>
30 </div>
31 <div class="jgHome-center">
32 <el-card>
33 <hzMap />
34 </el-card>
35 </div>
36 <div class="jgHome-right">
37 <el-card class="bottom10 paddingbtm0">
38 <jgChart />
39 </el-card>
40 <el-card class="box-card paddingbtm0">
41 <div slot="header">
42 <span>违规总计</span>
43 <el-button style="float: right;" type="text">更多</el-button>
44 </div>
45 <lb-table ref="table" :pagination="false" :heightNum="546" :column="tableData.columns" :data="tableData.data">
46 </lb-table>
47 </el-card>
48 </div>
49 </div>
50 </template>
51
52 <script>
53 // 引入表格数据
54 import data from "./data"
55 import barChart from './components/barChart'
56 import hzMap from './components/map'
57 import jgChart from './components/jgChart'
58 export default {
59 name: "jgHome",
60 components: { barChart, hzMap, jgChart },
61 data () {
62 return {
63 // 表格数据
64 tableData: {
65 // 表格头部信息
66 columns: data.columns(),
67 // 表格列表数据
68 data: [{}]
69 }
70 }
71 },
72 methods: {}
73 }
74 </script>
75 <style scoped lang="scss">
76 @import "./index.scss";
77 </style>