BJ_web_developers / dyitoc

Commit 66faa378fcf9c54e6585a9447e1bcdbbacfc9fe2

Authored by liuqimichale
1 parent e00e4982

道闸 诱导屏

Inline Side-by-side
Showing 4 changed files with 49 additions and 40 deletions
src/assets/img/bg-wrap.png 0 → 100644
View file @66faa37

2.76 KB
src/components/allPieChart.vue
  View file @66faa37
... ... @@ -21,7 +21,7 @@ export default {
21 21 },
22 22 height: {
23 23 type: String,
24   - default: '350px'
  24 + default: '205px'
25 25 },
26 26 autoResize: {
27 27 type: Boolean,
... ... @@ -72,14 +72,16 @@ export default {
72 72 trigger: 'item',
73 73 formatter: "{b} : {c} ({d}%)"
74 74 },
75   - series: [{
  75 + series: [
  76 +
  77 + {
76 78 name: '内环',
77 79 type: 'pie',
78 80 silent: true,
79 81 clockWise: true,
80 82 hoverAnimation: false,
81 83 animationType: 'scale',
82   - radius: '8%',
  84 + radius: ['10%','16%'],
83 85 center: ['50%', '50%'],
84 86 label: {
85 87 normal: {
... ... @@ -93,10 +95,10 @@ export default {
93 95 color: {
94 96 colorStops: [{
95 97 offset: 0,
96   - color: '#fff' // 0% 处的颜色
  98 + color: '#157ADB' // 0% 处的颜色
97 99 }, {
98 100 offset: 1,
99   - color: '#cfcfcf' // 100% 处的颜色
  101 + color: '#157ADB' // 100% 处的颜色
100 102 }]
101 103 }
102 104 }
... ... @@ -107,7 +109,7 @@ export default {
107 109 {
108 110 name: '半径模式',
109 111 type: 'pie',
110   - radius: ['10%', '40%'],
  112 + radius: ['20%', '100%'],
111 113 center: ['50%', '50%'],
112 114 roseType: 'radius',
113 115 label: {
... ... @@ -116,57 +118,42 @@ export default {
116 118 lableLine: {
117 119 show: false
118 120 },
119   - data: [{
120   - value: 55,
121   - name: '待维修',
122   - itemStyle: {
123   - normal: {
124   - color: {
125   - colorStops: [{
126   - offset: 0,
127   - color: '#FF7671' // 0% 处的颜色
128   - }, {
129   - offset: 1,
130   - color: '#A14AFF' // 100% 处的颜色
131   - }]
132   - },
133   - }
134   - }
135   - },
  121 + data: [
136 122 {
137 123 value: 35,
138   - name: '维修中',
  124 + name: '诱导屏',
139 125 itemStyle: {
140 126 normal: {
141 127 color: {
142 128 colorStops: [{
143 129 offset: 0,
144   - color: '#FFEA4F' // 0% 处的颜色
  130 + color: '#FFBA00' // 0% 处的颜色
145 131 }, {
146 132 offset: 1,
147   - color: '#F89212' // 100% 处的颜色
  133 + color: '#FF8100' // 100% 处的颜色
148 134 }]
149 135 },
150 136 }
151 137 }
152 138 },
153 139 {
154   - value: 200,
155   - name: '运行中',
  140 + value: 55,
  141 + name: '道闸',
156 142 itemStyle: {
157 143 normal: {
158 144 color: {
159 145 colorStops: [{
160 146 offset: 0,
161   - color: '#57FFE0' // 0% 处的颜色
  147 + color: '#00CAFE' // 0% 处的颜色
162 148 }, {
163 149 offset: 1,
164   - color: '#3469E2' // 100% 处的颜色
  150 + color: '#2772F4' // 100% 处的颜色
165 151 }]
166 152 },
167 153 }
168 154 }
169   - }
  155 + },
  156 +
170 157 ],
171 158 animationType: 'scale',
172 159 animationEasing: 'elasticOut',
... ...
src/views/dicisection.vue
  View file @66faa37
... ... @@ -64,6 +64,7 @@ export default {
64 64 @mixin textStyle($color){
65 65 padding-right: 23px;
66 66 text-align: left;
  67 + font-size: 12px;
67 68 color: $color;
68 69 }
69 70 @mixin borderStyle($color) {
... ... @@ -83,6 +84,7 @@ export default {
83 84 width: 80px;
84 85 padding-left: 23px;
85 86 text-align: left;
  87 + font-size: 14px;
86 88 color: $color;
87 89 }
88 90 .dici-wrap{
... ...
src/views/youdaopingsection.vue
  View file @66faa37
... ... @@ -5,18 +5,17 @@
5 5 <li>
6 6 <div>
7 7 <div class="bg-wrap">
8   - <p>123</p>
9   - <p>123</p>
  8 + <p class="dznum-total">{{ dzNum|formatNum }}</p>
  9 + <p class="name">道闸</p>
10 10 </div>
11 11 </div>
12 12 <div>
13 13 <div class="bg-wrap">
14   - <p>123</p>
15   - <p>123</p>
  14 + <p class="ydpnum-total">{{ ydpNum|formatNum }}</p>
  15 + <p class="name">诱导屏</p>
16 16 </div>
17 17 </div>
18 18 </li>
19   - <!--<allPieChart tag="li"></allPieChart>-->
20 19 <li>
21 20 <allPieChart :chart-data="lineChartData"/>
22 21 </li>
... ... @@ -46,7 +45,9 @@ export default {
46 45 },
47 46 data() {
48 47 return {
49   - lineChartData: lineChartData.newVisitis
  48 + lineChartData: lineChartData.newVisitis,
  49 + dzNum: '23454',
  50 + ydpNum: '4454'
50 51 }
51 52 },
52 53 created() {
... ... @@ -66,19 +67,38 @@ export default {
66 67 <style lang="scss" scoped>
67 68 .ydp-dz-wrap{
68 69 display: flex;
  70 + text-align: center;
69 71 li{
70 72 height: 100%;
71 73 flex: 1;
72 74 &:nth-of-type(1)>div{
73 75 height: 50%;
74 76 .bg-wrap{
75   - width: 111px;
76   - height: 52px;
  77 + width: 115px;
  78 + height: 59px;
  79 + padding: 13px 0 0 0;
77 80 position: relative;
78 81 top:50%;
79 82 left: 50%;
80 83 transform: translate(-50%,-50%);
81   - background-color: #f00;
  84 + background:url("../assets/img/bg-wrap.png") no-repeat;
  85 + .dznum-total,.ydpnum-total{
  86 + font-size: 17px;
  87 + font-weight:bold;
  88 + -webkit-background-clip: text;
  89 + -webkit-text-fill-color: transparent;
  90 + }
  91 + .dznum-total{
  92 + background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0,202,254, 1)), to(rgba(39,114,244, 1)));
  93 + }
  94 + .ydpnum-total{
  95 + background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255,186,0, 1)), to(rgba(255,129,0, 1)));
  96 + }
  97 + .name{
  98 + padding-top: 5px;
  99 + font-size: 12px;
  100 + color: #fff;
  101 + }
82 102 }
83 103 }
84 104 }
... ...