qiangmj / report-ui

Commit 498b93d0bd3ca6d51be5440cdd1396ac0de1ebe9

Authored by qianbao
1 parent 9c6116d7

1、大屏左侧操作菜单归类 

2、代码文件归类
3、添加雷达图
Inline Side-by-side
Showing 1 changed file with 17 additions and 176 deletions
src/views/bigscreenDesigner/designer/widget/div/widgetSlider.vue
  View file @498b93d
1 <template> 1 <template>
2 - <superslide :options="options" class="slideBox">  
3 - <!-- slides -->  
4 - <div class="bd">  
5 - <ul>  
6 - <li>  
7 - <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=717294809,2494697366&fm=26&gp=0.jpg" alt="">  
8 - </li>  
9 - <li>  
10 - <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2090090414,3038344648&fm=26&gp=0.jpg" alt="">  
11 - </li>  
12 - </ul>  
13 - </div>  
14 - <!-- Optional controls slots -->  
15 - <!-- slot="titCell" -->  
16 - <div slot="titCell" class="hd">  
17 - <ul>  
18 - <li class="on">1</li>  
19 - <li class="">2</li>  
20 - <li class="">3</li>  
21 - </ul>  
22 - </div>  
23 - <!-- slot="prev" -->  
24 - <a slot="prev" class="prev" href="javascript:void(0)" />  
25 - <!-- slot="next" -->  
26 - <a slot="next" class="next" href="javascript:void(0)" />  
27 - <!-- slot="pageStateCell" -->  
28 - <span slot="pageStateCell" class="pageState" />  
29 - </superslide>  
30 <div :style="style"> 2 <div :style="style">
31 <el-carousel arrow="always" height="100%" class="carousel" :direction="carouselStyle.direction" 3 <el-carousel arrow="always" height="100%" class="carousel" :direction="carouselStyle.direction"
32 :indicator-position="carouselStyle.indicatorPosition" :interval="carouselStyle.interval" 4 :indicator-position="carouselStyle.indicatorPosition" :interval="carouselStyle.interval"
@@ -48,14 +20,9 @@ export default { @@ -48,14 +20,9 @@ export default {
48 }, 20 },
49 data() { 21 data() {
50 return { 22 return {
51 - options: {  
52 - mainCell: '.bd ul',  
53 - autoPlay: true,  
54 - effect: 'leftLoop',  
55 - options: {},  
56 - carouselKey: 0, // 重新渲染组件用  
57 - },  
58 - } 23 + options: {},
  24 + carouselKey: 0, // 重新渲染组件用
  25 + };
59 }, 26 },
60 computed: { 27 computed: {
61 transStyle() { 28 transStyle() {
@@ -87,8 +54,8 @@ export default { @@ -87,8 +54,8 @@ export default {
87 handler(val) { 54 handler(val) {
88 this.options = val; 55 this.options = val;
89 }, 56 },
  57 + deep: true
90 }, 58 },
91 - deep: true,  
92 carouselStyle: { 59 carouselStyle: {
93 handler(newValue, oldValue) { 60 handler(newValue, oldValue) {
94 if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) { 61 if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
@@ -100,152 +67,26 @@ export default { @@ -100,152 +67,26 @@ export default {
100 created() { 67 created() {
101 this.options = this.value; 68 this.options = this.value;
102 }, 69 },
103 - mounted(){}, 70 + mounted() { },
104 methods: {}, 71 methods: {},
105 -// created(){  
106 - // this.options = this.value;  
107 - // },  
108 - // methods: {},  
109 - // computed: {  
110 - // transStyle(){  
111 - // return this.objToOne(this.options);  
112 - // },  
113 - // style(){  
114 - // return {  
115 - // position: this.ispreview ? "absolute" : "static",  
116 - // background: this.transStyle.background,  
117 - // width: this.transStyle.width + "px",  
118 - // height: this.transStyle.height + "px",  
119 - // left: this.transStyle.left + "px",  
120 - // top: this.transStyle.top + "px",  
121 - // right: this.transStyle.right + "px",  
122 - // };  
123 - // },  
124 - // carouselStyle() {  
125 - // return {  
126 - // imageList: this.transStyle.imageAdress.split(','),  
127 - // direction: !this.transStyle.tabType ? this.transStyle.tabDirection : 'horizontal',  
128 - // indicatorPosition: this.transStyle.tabSelector,  
129 - // interval: this.transStyle.tabTime,  
130 - // type: this.transStyle.tabType  
131 - // }  
132 - // },  
133 - // },  
134 - // watch: {  
135 - // value: {  
136 - // handler(val) {  
137 - // this.options = val;  
138 - // },  
139 - // }  
140 - // deep: true  
141 - // },  
142 - // carouselStyle: {  
143 - // handler(newValue, oldValue) {  
144 - // if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {  
145 - // this.carouselKey++;  
146 - // }  
147 - // },  
148 - // },  
149 - // },  
150 -}; 72 +}
151 </script> 73 </script>
152 74
153 <style scoped lang="scss"> 75 <style scoped lang="scss">
154 -.slideBox {  
155 - width: 450px;  
156 - height: 230px; 76 +.carousel {
  77 + width: 100%;
  78 + height: 100%;
157 overflow: hidden; 79 overflow: hidden;
158 - position: relative;  
159 } 80 }
160 -.slideBox .hd {  
161 - height: 15px;  
162 - .carousel {  
163 - width: 100%;  
164 - height: 100%;  
165 - overflow: hidden;  
166 - position: absolute;  
167 - right: 5px;  
168 - bottom: 5px;  
169 - z-index: 1;  
170 - }  
171 - .slideBox .hd ul {  
172 - overflow: hidden;  
173 - zoom: 1;  
174 - float: left;  
175 - }  
176 - .slideBox .hd ul li {  
177 - float: left;  
178 - margin-right: 2px;  
179 - width: 15px;  
180 - height: 15px;  
181 - line-height: 14px;  
182 - text-align: center;  
183 - background: #fff;  
184 - cursor: pointer;  
185 - }  
186 - .slideBox .hd ul li.on {  
187 - background: #f00;  
188 - color: #fff;  
189 - }  
190 - .slideBox .bd {  
191 - position: relative;  
192 -  
193 - .carousel-img {  
194 - width: 100%;  
195 - height: 100%;  
196 - z-index: 0;  
197 - }  
198 -  
199 - .slideBox .bd li {  
200 - zoom: 1;  
201 - vertical-align: middle;  
202 - }  
203 -  
204 - .slideBox .bd img {  
205 - width: 450px;  
206 - height: 230px;  
207 - display: block;  
208 - }  
209 -  
210 - /* 下面是前/后按钮代码，如果不需要删除即可 */  
211 - .slideBox .prev,  
212 - .slideBox .next {  
213 - position: absolute;  
214 - left: 3%;  
215 - top: 50%;  
216 - margin-top: -25px;  
217 - display: block;  
218 - width: 32px;  
219 - height: 40px;  
220 - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOsAAAAgCAMAAADE+3+QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkYyNjE4RUVDRjgxMTFFMjk1ODhDQkIzNDg3MjdGNUEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkYyNjE4RUZDRjgxMTFFMjk1ODhDQkIzNDg3MjdGNUEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRjI2MThFQ0NGODExMUUyOTU4OENCQjM0ODcyN0Y1QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRjI2MThFRENGODExMUUyOTU4OENCQjM0ODcyN0Y1QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmLDzTcAAAAJUExURcHBwf///////wCiYf4AAAADdFJOU///ANfKDUEAAACjSURBVHja5JnRDUQhDMNM9h/6STfCgeKPsIBjhGgpnHPy7wLyYLUicC5IPJGtJfi5ngsSL1Q7AYgsW8QTV7YJJ6psFU1M2S6YiLJlLPFk21CiydaRaOT+7mKxhYOERDcuCBy+cheiJHBqHEYGqZzPug6d4aG7aajmDPUSQz3iUO8/9KYbeqsPzWCGZmtDM9OhWfjSH8fY31UuSMkT2UqET4ABAHo9NyVXKF5RAAAAAElFTkSuQmCC) -110px 5px no-repeat;  
221 - filter: alpha(opacity=50);  
222 - opacity: 0.5;  
223 - }  
224 81
225 - .slideBox .next {  
226 - left: auto;  
227 - right: 3%;  
228 - background-position: 8px 5px;  
229 - object-fit: contain;  
230 - }  
231 -  
232 - .slideBox .prev:hover,  
233 - .slideBox .next:hover {  
234 - filter: alpha(opacity=100);  
235 - opacity: 1;  
236 - }  
237 -  
238 - .slideBox .prevStop {  
239 - display: none;  
240 - }  
241 -  
242 - .slideBox .nextStop {  
243 - display: none; 82 +.carousel-img {
  83 + width: 100%;
  84 + height: 100%;
  85 + object-fit: contain;
  86 +}
244 87
245 - /deep/ .el-carousel__mask {  
246 - background: transparent;  
247 - }  
248 - }  
249 - } 88 +/deep/ .el-carousel__mask {
  89 + background: transparent;
250 } 90 }
251 </style> 91 </style>
  92 +