Commit db113db393fc1710d5e36fc003fa4d16aa47c519
1 parent
237fd13d
122121
Showing
6 changed files
with
439 additions
and
262 deletions
config/dev.env.js
| ... | ... | @@ -5,7 +5,7 @@ const prodEnv = require('./prod.env') |
| 5 | 5 | const isDev = false; |
| 6 | 6 | //开发API地址 |
| 7 | 7 | // const devAdrress='"http://weberp.xlyprint.cn/xlyReport"'; |
| 8 | -const devAdrress='"http://172.16.114.9:8085/xlyReport"'; | |
| 8 | +const devAdrress='"http://weberp.xlyprint.cn:8888/xlyReport"'; | |
| 9 | 9 | //正式打包API地址 |
| 10 | 10 | const ipAdrress='"http://"+location.host+"/xlyReport"'; |
| 11 | 11 | ... | ... |
src/mixins/queryform.js
| ... | ... | @@ -122,8 +122,8 @@ export default { |
| 122 | 122 | return this.barOrLineChartFn(params.chartProperties, data); |
| 123 | 123 | }else if (chartType == "widget-barlinechart" ) { |
| 124 | 124 | return this.barLineChartFn(params.chartProperties, data); |
| 125 | - } else if ( chartType == "widget-barchart") { | |
| 126 | - return this.barOrLineChartFn(params.chartProperties, data); | |
| 125 | + // } else if ( chartType == "widget-barchart") { | |
| 126 | + // return this.barOrLineChartFn(params.chartProperties, data); | |
| 127 | 127 | } else if ( |
| 128 | 128 | chartType == "widget-piechart" || |
| 129 | 129 | chartType == "widget-funnel" |
| ... | ... | @@ -132,7 +132,8 @@ export default { |
| 132 | 132 | } else if (chartType == "widget-text") { |
| 133 | 133 | return this.widgettext(params.chartProperties, data) |
| 134 | 134 | } else if (chartType == "widget-stackchart") { |
| 135 | - return this.stackChartFn(params.chartProperties, data) | |
| 135 | + return this.stackChartFn(params.chartProperties, data); | |
| 136 | + // return this.stackChartFn(params.chartProperties, data) | |
| 136 | 137 | } else if (chartType == "widget-coord") { |
| 137 | 138 | return this.coordChartFn(params.chartProperties, data) |
| 138 | 139 | } else if (chartType == "widget-linemap") { |
| ... | ... | @@ -236,70 +237,12 @@ export default { |
| 236 | 237 | } |
| 237 | 238 | ananysicData["xAxis"] = xAxisList; |
| 238 | 239 | ananysicData["series"] = series; |
| 239 | - // console.log("11111",ananysicData); | |
| 240 | + | |
| 240 | 241 | return ananysicData; |
| 241 | 242 | }, |
| 242 | 243 | //堆叠图 |
| 243 | - stackChartFn(chartProperties, val) { | |
| 244 | - const ananysicData = {}; | |
| 245 | - // const series = []; | |
| 246 | - // //全部字段字典值 | |
| 247 | - // const types = Object.values(chartProperties) | |
| 248 | - // //x轴字段、y轴字段名 | |
| 249 | - // const xAxisField = Object.keys(chartProperties)[types.indexOf('xAxis')] | |
| 250 | - // const yAxisField = Object.keys(chartProperties)[types.indexOf('yAxis')] | |
| 251 | - // const dataField = Object.keys(chartProperties)[types.indexOf('bar')] | |
| 252 | - // //x轴数值去重，y轴去重 | |
| 253 | - // const xAxisList = this.setUnique(data.map(item => item[xAxisField])) | |
| 254 | - // const yAxisList = this.setUnique(data.map(item => item[yAxisField])) | |
| 255 | - // const dataFieldList = this.setUnique(data.map(item => item[dataField])) | |
| 256 | - // const dataGroup = this.setGroupByNew(data, xAxisList,'axis'); | |
| 257 | - // console.log("1111",types,dataGroup); | |
| 258 | - // for (const key in chartProperties) { | |
| 259 | - // if (chartProperties[key] !== 'yAxis' && !chartProperties[key].startsWith('xAxis')) { | |
| 260 | - // Object.keys(dataGroup).forEach(item => { | |
| 261 | - // const data = new Array(xAxisList.length).fill(0) | |
| 262 | - // dataGroup[item].forEach(res => { | |
| 263 | - // data[xAxisList.indexOf(res[xAxisField])] = res[key] | |
| 264 | - // }) | |
| 265 | - // series.push({ | |
| 266 | - // name: yAxisList[item], | |
| 267 | - // type: chartProperties[key], | |
| 268 | - // data: data, | |
| 269 | - // }) | |
| 270 | - // }) | |
| 271 | - // } | |
| 272 | - // } | |
| 273 | - const series = []; | |
| 274 | - let xAxisList = []; | |
| 275 | - let yAxisList = []; | |
| 276 | - for (const i in val) { | |
| 277 | - xAxisList[i] = val[i].axis; | |
| 278 | - yAxisList[i] = val[i].name; | |
| 279 | - } | |
| 280 | - xAxisList = this.setUnique(xAxisList); | |
| 281 | - yAxisList = this.setUnique(yAxisList); | |
| 282 | - for (const i in yAxisList) { | |
| 283 | - const data = new Array(xAxisList.length).fill(0); | |
| 284 | - for (const j in xAxisList) { | |
| 285 | - for (const k in val) { | |
| 286 | - if (val[k].name == yAxisList[i]) { | |
| 287 | - if (val[k].axis == xAxisList[j]) { | |
| 288 | - data[j] = val[k].data; | |
| 289 | - } | |
| 290 | - } | |
| 291 | - } | |
| 292 | - } | |
| 293 | - series.push({ | |
| 294 | - name: yAxisList[i], | |
| 295 | - type: 'bar', | |
| 296 | - data: data, | |
| 297 | - }); | |
| 298 | - } | |
| 299 | - | |
| 300 | - ananysicData["xAxis"] = xAxisList; | |
| 301 | - ananysicData["series"] = series; | |
| 302 | - return ananysicData; | |
| 244 | + stackChartFn(chartProperties, data) { | |
| 245 | + return data; | |
| 303 | 246 | }, |
| 304 | 247 | // 饼图、漏斗图 |
| 305 | 248 | piechartFn(chartProperties, data) { | ... | ... |
src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
| ... | ... | @@ -288,7 +288,7 @@ export default { |
| 288 | 288 | }, |
| 289 | 289 | //静态数据 |
| 290 | 290 | staticDataFn(val) { |
| 291 | - console.log("staticDataFn",val); | |
| 291 | + // console.log("staticDataFn",val); | |
| 292 | 292 | const optionsSetup = this.optionsSetup; |
| 293 | 293 | //颜色 |
| 294 | 294 | const customColor = optionsSetup.customColor; |
| ... | ... | @@ -388,63 +388,9 @@ export default { |
| 388 | 388 | getEchartData(val, optionsSetup) { |
| 389 | 389 | const data = this.queryEchartsData(val); |
| 390 | 390 | data.then(res => { |
| 391 | - this.renderingFn(optionsSetup, res); | |
| 391 | + this.staticDataFn(res) | |
| 392 | 392 | }); |
| 393 | 393 | }, |
| 394 | - renderingFn(optionsSetup, val) { | |
| 395 | - //颜色 | |
| 396 | - const customColor = optionsSetup.customColor; | |
| 397 | - const arrColor = []; | |
| 398 | - for (let i = 0; i < customColor.length; i++) { | |
| 399 | - arrColor.push(customColor[i].color); | |
| 400 | - } | |
| 401 | - // x轴 | |
| 402 | - if (optionsSetup.verticalShow) { | |
| 403 | - this.options.xAxis.data = []; | |
| 404 | - this.options.yAxis.data = val.xAxis; | |
| 405 | - this.options.xAxis.type = "value"; | |
| 406 | - this.options.yAxis.type = "category"; | |
| 407 | - } else { | |
| 408 | - this.options.xAxis.data = val.xAxis; | |
| 409 | - this.options.yAxis.data = []; | |
| 410 | - this.options.xAxis.type = "category"; | |
| 411 | - this.options.yAxis.type = "value"; | |
| 412 | - } | |
| 413 | - const series = []; | |
| 414 | - let legendName = []; | |
| 415 | - legendName = this.setUnique(legendName); | |
| 416 | - for (const i in val.series) { | |
| 417 | - if (val.series[i].type == "bar") { | |
| 418 | - series.push({ | |
| 419 | - name: val.series[i].name, | |
| 420 | - type: "bar", | |
| 421 | - data: val.series[i].data, | |
| 422 | - barGap: "0%", | |
| 423 | - stack: this.getStackStyle(), | |
| 424 | - barWidth: optionsSetup.maxWidth, | |
| 425 | - label: { | |
| 426 | - show: optionsSetup.isShow, | |
| 427 | - position: "top", | |
| 428 | - distance: 10, | |
| 429 | - fontSize: optionsSetup.fontSize, | |
| 430 | - color: optionsSetup.subTextColor, | |
| 431 | - fontWeight: optionsSetup.fontWeight, | |
| 432 | - }, | |
| 433 | - //颜色，圆角属性 | |
| 434 | - itemStyle: { | |
| 435 | - normal: { | |
| 436 | - color: arrColor[i], | |
| 437 | - barBorderRadius: optionsSetup.radius, | |
| 438 | - } | |
| 439 | - } | |
| 440 | - }) | |
| 441 | - } | |
| 442 | - legendName.push(val.series[i].name); | |
| 443 | - } | |
| 444 | - this.options.series = series; | |
| 445 | - this.options.legend['data'] = legendName; | |
| 446 | - this.setOptionsLegendName(legendName); | |
| 447 | - } | |
| 448 | 394 | } |
| 449 | 395 | }; |
| 450 | 396 | </script> | ... | ... |
src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
| ... | ... | @@ -487,92 +487,7 @@ export default { |
| 487 | 487 | }); |
| 488 | 488 | }, |
| 489 | 489 | renderingFn(optionsSetup, val) { |
| 490 | - //颜色 | |
| 491 | - const customColor = optionsSetup.customColor; | |
| 492 | - const arrColor = []; | |
| 493 | - if(customColor){ | |
| 494 | - for (let i = 0; i < customColor.length; i++) { | |
| 495 | - arrColor.push(customColor[i].color); | |
| 496 | - } | |
| 497 | - } | |
| 498 | - this.options.xAxis.data = val.xAxis; | |
| 499 | - this.options.yAxis.data = []; | |
| 500 | - this.options.xAxis.type = "category"; | |
| 501 | - this.options.yAxis.type = "value"; | |
| 502 | - const series = []; | |
| 503 | - let legendName = []; | |
| 504 | - for (const i in val.series) { | |
| 505 | - legendName.push(val.series[i].name); | |
| 506 | - } | |
| 507 | - legendName = this.setUnique(legendName); | |
| 508 | - for (let i = 0; i < legendName.length; i++) { | |
| 509 | - const bar = this.getDynamicSeriesData(legendName[i], val.series, "bar"); | |
| 510 | - series.push({ | |
| 511 | - name: legendName[i], | |
| 512 | - type: 'bar', | |
| 513 | - data: bar, | |
| 514 | - barGap: '0%', | |
| 515 | - barWidth: optionsSetup.maxWidth, | |
| 516 | - label: { | |
| 517 | - show: optionsSetup.isShowBar, | |
| 518 | - position: 'top', | |
| 519 | - distance: optionsSetup.distanceBar, | |
| 520 | - fontSize: optionsSetup.fontSizeBar, | |
| 521 | - color: optionsSetup.subTextColorBar, | |
| 522 | - fontWeight: optionsSetup.fontWeightBar, | |
| 523 | - }, | |
| 524 | - //颜色，圆角属性 | |
| 525 | - itemStyle: { | |
| 526 | - normal: { | |
| 527 | - color: arrColor[i], | |
| 528 | - barBorderRadius: optionsSetup.radius, | |
| 529 | - } | |
| 530 | - } | |
| 531 | - }) | |
| 532 | - } | |
| 533 | - for (let i = 0; i < legendName.length; i++) { | |
| 534 | - const line = this.getDynamicSeriesData(legendName[i], val.series, "line"); | |
| 535 | - series.push({ | |
| 536 | - name: legendName[i], | |
| 537 | - type: "line", | |
| 538 | - data: line, | |
| 539 | - yAxisIndex: 1, | |
| 540 | - symbol: optionsSetup.symbol, | |
| 541 | - showSymbol: optionsSetup.markPoint, | |
| 542 | - symbolSize: optionsSetup.pointSize, | |
| 543 | - smooth: optionsSetup.smoothCurve, | |
| 544 | - itemStyle: { | |
| 545 | - normal: { | |
| 546 | - color: arrColor[i], | |
| 547 | - } | |
| 548 | - }, | |
| 549 | - // 线条 | |
| 550 | - lineStyle: { | |
| 551 | - color: arrColor[i], | |
| 552 | - width: optionsSetup.lineWidth, | |
| 553 | - }, | |
| 554 | - label: { | |
| 555 | - show: optionsSetup.isShowLine, | |
| 556 | - position: 'top', | |
| 557 | - distance: optionsSetup.distanceLine, | |
| 558 | - fontSize: optionsSetup.fontSizeLine, | |
| 559 | - color: optionsSetup.subTextColorLine, | |
| 560 | - fontWeight: optionsSetup.fontWeightLine, | |
| 561 | - }, | |
| 562 | - }) | |
| 563 | - } | |
| 564 | - this.options.series = series; | |
| 565 | - this.options.legend['data'] = legendName; | |
| 566 | - this.setOptionsLegendName(legendName); | |
| 567 | - }, | |
| 568 | - getDynamicSeriesData(legend, series, type) { | |
| 569 | - let data = []; | |
| 570 | - for (const i in series) { | |
| 571 | - if (series[i].name == legend && series[i].type == type) { | |
| 572 | - data = series[i].data; | |
| 573 | - } | |
| 574 | - } | |
| 575 | - return data | |
| 490 | + this.staticDataFn(val); | |
| 576 | 491 | }, |
| 577 | 492 | } |
| 578 | 493 | }; | ... | ... |
src/views/bigscreenDesigner/designer/widget/div/widgetHtmlSlider.vue
| 1 | 1 | <template> |
| 2 | - <div :style="style" v-if="isRouterAlive"> | |
| 3 | - <el-carousel arrow="always" height="100%" class="carousel" :direction="carouselStyle.direction" | |
| 4 | - :indicator-position="carouselStyle.indicatorPosition" :interval="carouselStyle.interval" | |
| 5 | - :type="carouselStyle.type" :key="carouselKey"> | |
| 6 | - <el-carousel-item v-for="(url, index) in urlData" :key="index"> | |
| 7 | - <iframe class="carousel-img" :src="url" alt="" /> | |
| 2 | + <div class="fullscreen-carousel" :style="style"> | |
| 3 | + <!-- 进度指示器 --> | |
| 4 | + <div class="progress-indicator" :style="{width: progressWidth}"></div> | |
| 5 | + | |
| 6 | + <!-- 控制按钮 --> | |
| 7 | +<!-- <div class="controls">--> | |
| 8 | +<!-- <button class="control-btn" @click="prevSlide">--> | |
| 9 | +<!-- <i class="el-icon-arrow-left"></i>--> | |
| 10 | +<!-- </button>--> | |
| 11 | +<!-- <button class="control-btn" @click="nextSlide">--> | |
| 12 | +<!-- <i class="fas el-icon-arrow-right"></i>--> | |
| 13 | +<!-- </button>--> | |
| 14 | +<!-- </div>--> | |
| 15 | + | |
| 16 | + <el-carousel | |
| 17 | + :direction="carouselStyle.direction" | |
| 18 | + :indicator-position="carouselStyle.indicatorPosition" | |
| 19 | + :type="carouselStyle.type" | |
| 20 | + | |
| 21 | + :interval="intervalTime" | |
| 22 | + :autoplay="autoPlay" | |
| 23 | + :loop="true" | |
| 24 | + @change="handleSlideChange" | |
| 25 | + ref="carousel"> | |
| 26 | + <el-carousel-item v-for="(slide, index) in slides" :key="index"> | |
| 27 | + <div class="slide"> | |
| 28 | + <div class="content-container"> | |
| 29 | + <!-- 当前和下一个幻灯片预加载 --> | |
| 30 | + <template v-if="index === currentSlide || index === nextSlideIndex"> | |
| 31 | + <!-- 尝试使用object标签作为备用方案 --> | |
| 32 | + <object v-if="slide.useObject" | |
| 33 | + :data="slide.url" | |
| 34 | + type="text/html" | |
| 35 | + @load="onContentLoad(index)" | |
| 36 | + @error="onContentError(index)" | |
| 37 | + :class="{loaded: !slide.loading && !slide.error}"> | |
| 38 | + <div class="fallback-content"> | |
| 39 | + <i class="fas fa-exclamation-triangle"></i> | |
| 40 | + <h4>内容加载失败</h4> | |
| 41 | + <p>无法加载报表内容，请检查网络连接</p> | |
| 42 | + </div> | |
| 43 | + </object> | |
| 44 | + | |
| 45 | + <!-- 主要使用iframe --> | |
| 46 | + <iframe v-else | |
| 47 | + :src="slide.url" | |
| 48 | + frameborder="0" | |
| 49 | + allowfullscreen | |
| 50 | + @load="onContentLoad(index)" | |
| 51 | + @error="onContentError(index)" | |
| 52 | + referrerpolicy="no-referrer" | |
| 53 | + :class="{loaded: !slide.loading && !slide.error}" | |
| 54 | + ></iframe> | |
| 55 | + </template> | |
| 56 | + | |
| 57 | + <div class="loading" v-if="slide.loading"> | |
| 58 | + <div class="spinner"></div> | |
| 59 | + <p>报表加载中...</p> | |
| 60 | + </div> | |
| 61 | + | |
| 62 | + <div class="error" v-if="slide.error && !slide.loading"> | |
| 63 | + <i class="fas fa-exclamation-triangle"></i> | |
| 64 | + <p>报表加载失败</p> | |
| 65 | + </div> | |
| 66 | + </div> | |
| 67 | + </div> | |
| 8 | 68 | </el-carousel-item> |
| 9 | 69 | </el-carousel> |
| 70 | + | |
| 71 | + <!-- 圆圈页码指示器 --> | |
| 72 | + <div class="circle-indicator"> | |
| 73 | + <div | |
| 74 | + v-for="(slide, index) in slides" | |
| 75 | + :key="index" | |
| 76 | + :class="['circle', { active: currentSlide === index }]" | |
| 77 | + @click="goToSlide(index)" | |
| 78 | + > | |
| 79 | + </div> | |
| 80 | + </div> | |
| 81 | + | |
| 10 | 82 | </div> |
| 83 | + | |
| 11 | 84 | </template> |
| 12 | 85 | <script> |
| 13 | -import Vue from 'vue' | |
| 14 | -import iframeResize from 'iframe-resizer/js/iframeResizer' | |
| 15 | -Vue.use(iframeResize) | |
| 86 | + | |
| 16 | 87 | export default { |
| 17 | 88 | name: 'WidgetHtmlSlider', |
| 18 | 89 | components: {}, |
| ... | ... | @@ -23,18 +94,26 @@ export default { |
| 23 | 94 | data() { |
| 24 | 95 | return { |
| 25 | 96 | options: {}, |
| 26 | - urlData:[], | |
| 27 | 97 | optionsSetUp:{}, |
| 28 | 98 | carouselKey: 0, // 重新渲染组件用 |
| 29 | 99 | flagInter: null, |
| 30 | - isRouterAlive:true, | |
| 100 | + | |
| 101 | + autoPlay: true, | |
| 102 | + intervalTime: 5000, // 5秒切换一次 | |
| 103 | + currentSlide: 0, | |
| 104 | + nextSlideIndex: 1, | |
| 105 | + progressWidth: '0%', | |
| 106 | + progressInterval: null, | |
| 107 | + | |
| 108 | + slides: [{ | |
| 109 | + title: "", | |
| 110 | + url: "#", | |
| 111 | + loading: true, | |
| 112 | + error: false, | |
| 113 | + useObject: false | |
| 114 | + }] | |
| 31 | 115 | }; |
| 32 | 116 | }, |
| 33 | - mounted () { | |
| 34 | - // 内嵌iframe时 | |
| 35 | - // this.iframeResizer({log: true,}, this.$refs.iframe); | |
| 36 | - // this.changeFrameHeight(); | |
| 37 | - }, | |
| 38 | 117 | computed: { |
| 39 | 118 | transStyle() { |
| 40 | 119 | const obj = this.objToOne(this.options); |
| ... | ... | @@ -53,10 +132,9 @@ export default { |
| 53 | 132 | carouselStyle() { |
| 54 | 133 | this.initData(this.transStyle); |
| 55 | 134 | return { |
| 56 | - //imageList: this.isBlank(this.transStyle.imageAdress)?[]:this.transStyle.imageAdress.split(","), | |
| 57 | 135 | direction: !this.transStyle.tabType ? this.transStyle.tabDirection : 'horizontal', |
| 58 | 136 | indicatorPosition: this.transStyle.tabSelector, |
| 59 | - interval: this.transStyle.tabTime, | |
| 137 | + // intervalTime: this.transStyle.tabTime, | |
| 60 | 138 | type: this.transStyle.tabType |
| 61 | 139 | } |
| 62 | 140 | } |
| ... | ... | @@ -64,15 +142,19 @@ export default { |
| 64 | 142 | watch: { |
| 65 | 143 | value: { |
| 66 | 144 | handler(val) { |
| 67 | - this.options = val; | |
| 68 | - this.optionsSetUp = val.setup; | |
| 69 | - this.handlerUrlData(); | |
| 145 | + if(!this.ispreview){ | |
| 146 | + this.options = val; | |
| 147 | + this.optionsSetUp = val.setup; | |
| 148 | + this.handlerUrlData(); | |
| 149 | + } | |
| 70 | 150 | }, |
| 71 | 151 | deep: true, |
| 72 | 152 | }, |
| 73 | 153 | carouselStyle: { |
| 74 | 154 | handler(newValue, oldValue) { |
| 75 | - if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) { | |
| 155 | + if (JSON.stringify(newValue) !== JSON.stringify(oldValue) | |
| 156 | + && !this.ispreview | |
| 157 | + ) { | |
| 76 | 158 | this.carouselKey++; |
| 77 | 159 | } |
| 78 | 160 | }, |
| ... | ... | @@ -81,28 +163,63 @@ export default { |
| 81 | 163 | created() { |
| 82 | 164 | this.options = this.value; |
| 83 | 165 | }, |
| 166 | + mounted() { | |
| 167 | + // 初始加载第一个幻灯片 | |
| 168 | + this.slides[0].loading = true; | |
| 169 | + this.startProgressBar(); | |
| 170 | + // 设置超时检查 | |
| 171 | + setTimeout(() => { | |
| 172 | + // console.log("12313",this.slides); | |
| 173 | + for(let index=0;index<this.slides.length;index++){ | |
| 174 | + let slide = this.slides[index]; | |
| 175 | + if (slide.loading && !slide.useObject) { | |
| 176 | + this.slides[index].useObject = true; | |
| 177 | + } else if (slide.loading && slide.useObject) { | |
| 178 | + this.slides[index].loading = false; | |
| 179 | + this.slides[index].error = true; | |
| 180 | + } | |
| 181 | + } | |
| 182 | + // _this.slides.forEach((slide, index) => { | |
| 183 | + // if (slide.loading && !slide.useObject) { | |
| 184 | + // this.slides[index].useObject = true; | |
| 185 | + // } else if (slide.loading && slide.useObject) { | |
| 186 | + // this.slides[index].loading = false; | |
| 187 | + // this.slides[index].error = true; | |
| 188 | + // } | |
| 189 | + // }); | |
| 190 | + }, this.intervalTime); | |
| 191 | + }, | |
| 192 | + beforeDestroy() { | |
| 193 | + clearInterval(this.progressInterval); | |
| 194 | + }, | |
| 84 | 195 | methods: { |
| 85 | - reload(){ | |
| 86 | - this.isRouterAlive=false; | |
| 87 | - this.$nextTick(function(){ | |
| 88 | - this.isRouterAlive=true; | |
| 89 | - }) | |
| 90 | - }, | |
| 196 | + // reload(){ | |
| 197 | + // this.isRouterAlive=false; | |
| 198 | + // this.$nextTick(function(){ | |
| 199 | + // this.isRouterAlive=true; | |
| 200 | + // }) | |
| 201 | + // }, | |
| 91 | 202 | initData(data) { |
| 92 | 203 | let urlUp =[]; |
| 93 | 204 | if(this.hasOwn(data,"urls")){ |
| 94 | 205 | urlUp = data['urls']; |
| 95 | 206 | } |
| 96 | - let urlData = []; | |
| 207 | + let slides = []; | |
| 97 | 208 | if(this.isNotBlankArray(urlUp)){ |
| 98 | 209 | for(let i=0;i<urlUp.length;i++){ |
| 99 | 210 | const url = urlUp[i].url; |
| 100 | - urlData[i] = url; | |
| 211 | + const slidesOne = {}; | |
| 212 | + slidesOne.title=""; | |
| 213 | + slidesOne.url=url; | |
| 214 | + slidesOne.loading=true; | |
| 215 | + slidesOne.error=false; | |
| 216 | + slidesOne.useObject=false; | |
| 217 | + slides.push(slidesOne); | |
| 101 | 218 | } |
| 102 | 219 | } |
| 103 | - // console.log("12",urlData); | |
| 104 | - this.urlData = urlData; | |
| 105 | - this.urlData={...this.urlData}; | |
| 220 | + this.slides = slides; | |
| 221 | + this.intervalTime = this.isNotBlank(this.transStyle.tabTime)? this.transStyle.tabTime:5000; | |
| 222 | + // this.slides={...this.slides}; | |
| 106 | 223 | }, |
| 107 | 224 | handlerUrlData(){ |
| 108 | 225 | const data = this.optionsSetUp; |
| ... | ... | @@ -112,29 +229,290 @@ export default { |
| 112 | 229 | }else if(this.hasOwn(data,"dynamicHtmlSlider")){ |
| 113 | 230 | urlUp = data['dynamicHtmlSlider']; |
| 114 | 231 | } |
| 115 | - let urlData = []; | |
| 232 | + let slides = []; | |
| 116 | 233 | if(this.isNotBlankArray(urlUp)){ |
| 117 | 234 | for(let i=0;i<urlUp.length;i++){ |
| 118 | 235 | const url = urlUp[i].url; |
| 119 | - urlData[i] = url; | |
| 236 | + const slidesOne = {}; | |
| 237 | + slidesOne.title=""; | |
| 238 | + slidesOne.url=url; | |
| 239 | + slidesOne.loading=true; | |
| 240 | + slidesOne.error=false; | |
| 241 | + slidesOne.useObject=false; | |
| 242 | + slides.push(slidesOne); | |
| 120 | 243 | } |
| 121 | 244 | } |
| 122 | - this.urlData = urlData; | |
| 123 | - this.urlData={...this.urlData}; | |
| 245 | + this.slides = slides; | |
| 246 | + // this.slides={...this.slides}; | |
| 124 | 247 | }, |
| 248 | + | |
| 249 | + goToSlide(index) { | |
| 250 | + this.$refs.carousel.setActiveItem(index); | |
| 251 | + }, | |
| 252 | + prevSlide() { | |
| 253 | + this.$refs.carousel.prev(); | |
| 254 | + }, | |
| 255 | + nextSlide() { | |
| 256 | + this.$refs.carousel.next(); | |
| 257 | + }, | |
| 258 | + onContentLoad(index) { | |
| 259 | + this.slides[index].loading = false; | |
| 260 | + this.slides[index].error = false; | |
| 261 | + }, | |
| 262 | + onContentError(index) { | |
| 263 | + if (!this.slides[index].useObject) { | |
| 264 | + // 尝试使用object标签作为备用 | |
| 265 | + this.slides[index].useObject = true; | |
| 266 | + this.slides[index].loading = true; | |
| 267 | + this.slides[index].error = false; | |
| 268 | + } else { | |
| 269 | + this.slides[index].loading = false; | |
| 270 | + this.slides[index].error = true; | |
| 271 | + } | |
| 272 | + }, | |
| 273 | + handleSlideChange(currentIndex, prevIndex) { | |
| 274 | + this.currentSlide = currentIndex; | |
| 275 | + // 计算下一个幻灯片索引（用于预加载） | |
| 276 | + this.nextSlideIndex = (currentIndex + 1) % this.slides.length; | |
| 277 | + | |
| 278 | + // 启动当前幻灯片的加载（如果尚未加载） | |
| 279 | + if (this.slides[currentIndex].loading === false && | |
| 280 | + this.slides[currentIndex].error === false) { | |
| 281 | + // 内容已加载，无需操作 | |
| 282 | + } else { | |
| 283 | + this.slides[currentIndex].loading = true; | |
| 284 | + this.slides[currentIndex].error = false; | |
| 285 | + } | |
| 286 | + | |
| 287 | + // 启动进度条 | |
| 288 | + this.startProgressBar(); | |
| 289 | + }, | |
| 290 | + startProgressBar() { | |
| 291 | + clearInterval(this.progressInterval); | |
| 292 | + this.progressWidth = '0%'; | |
| 293 | + | |
| 294 | + if (!this.autoPlay) return; | |
| 295 | + | |
| 296 | + const startTime = Date.now(); | |
| 297 | + const duration = this.intervalTime; | |
| 298 | + | |
| 299 | + this.progressInterval = setInterval(() => { | |
| 300 | + const elapsed = Date.now() - startTime; | |
| 301 | + const percent = Math.min(100, (elapsed / duration) * 100); | |
| 302 | + this.progressWidth = percent + '%'; | |
| 303 | + | |
| 304 | + if (percent >= 100) { | |
| 305 | + clearInterval(this.progressInterval); | |
| 306 | + } | |
| 307 | + }, this.intervalTime); | |
| 308 | + } | |
| 125 | 309 | }, |
| 126 | 310 | } |
| 127 | 311 | </script> |
| 312 | +<style> | |
| 313 | +* { | |
| 314 | + margin: 0; | |
| 315 | + padding: 0; | |
| 316 | + box-sizing: border-box; | |
| 317 | +} | |
| 128 | 318 | |
| 129 | -<style scoped lang="scss"> | |
| 130 | -.carousel { | |
| 319 | +body, html { | |
| 131 | 320 | width: 100%; |
| 132 | 321 | height: 100%; |
| 322 | + overflow: hidden; | |
| 323 | + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| 324 | + background: #000; | |
| 133 | 325 | } |
| 134 | 326 | |
| 135 | -.carousel-img { | |
| 327 | +.fullscreen-carousel { | |
| 136 | 328 | width: 100%; |
| 137 | 329 | height: 100%; |
| 330 | + position: relative; | |
| 331 | + background: #000; | |
| 332 | +} | |
| 333 | + | |
| 334 | +.el-carousel { | |
| 335 | + width: 100%; | |
| 336 | + height: 100%; | |
| 337 | +} | |
| 338 | + | |
| 339 | +.el-carousel__container { | |
| 340 | + height: 100% !important; | |
| 341 | +} | |
| 342 | + | |
| 343 | +.slide { | |
| 344 | + width: 100%; | |
| 345 | + height: 100%; | |
| 346 | + display: flex; | |
| 347 | + justify-content: center; | |
| 348 | + align-items: center; | |
| 349 | + background: #000; | |
| 350 | +} | |
| 351 | + | |
| 352 | +.content-container { | |
| 353 | + width: 100%; | |
| 354 | + height: 100%; | |
| 355 | + position: relative; | |
| 356 | + overflow: hidden; | |
| 357 | +} | |
| 358 | + | |
| 359 | +.content-container iframe, | |
| 360 | +.content-container object { | |
| 361 | + width: 100%; | |
| 362 | + height: 100%; | |
| 363 | + border: none; | |
| 364 | + opacity: 0; | |
| 365 | + transition: opacity 0.5s ease-in-out; | |
| 366 | +} | |
| 367 | + | |
| 368 | +.content-container iframe.loaded, | |
| 369 | +.content-container object.loaded { | |
| 370 | + opacity: 1; | |
| 371 | +} | |
| 372 | + | |
| 373 | +.fallback-content { | |
| 374 | + width: 100%; | |
| 375 | + height: 100%; | |
| 376 | + display: flex; | |
| 377 | + flex-direction: column; | |
| 378 | + justify-content: center; | |
| 379 | + align-items: center; | |
| 380 | + background: linear-gradient(135deg, #2c3e50, #4ca1af); | |
| 381 | + color: white; | |
| 382 | + text-align: center; | |
| 383 | + padding: 20px; | |
| 384 | +} | |
| 385 | + | |
| 386 | +.fallback-content i { | |
| 387 | + font-size: 3rem; | |
| 388 | + margin-bottom: 20px; | |
| 389 | + color: #ffc107; | |
| 390 | +} | |
| 391 | + | |
| 392 | +.fallback-content h4 { | |
| 393 | + font-size: 1.5rem; | |
| 394 | + margin-bottom: 10px; | |
| 395 | +} | |
| 396 | + | |
| 397 | +.loading, .error { | |
| 398 | + position: absolute; | |
| 399 | + top: 0; | |
| 400 | + left: 0; | |
| 401 | + width: 100%; | |
| 402 | + height: 100%; | |
| 403 | + display: flex; | |
| 404 | + flex-direction: column; | |
| 405 | + justify-content: center; | |
| 406 | + align-items: center; | |
| 407 | + background: rgba(0, 0, 0, 0.8); | |
| 408 | + color: white; | |
| 409 | + z-index: 20; | |
| 410 | +} | |
| 411 | + | |
| 412 | +.loading i, .error i { | |
| 413 | + font-size: 2rem; | |
| 414 | + margin-bottom: 15px; | |
| 415 | +} | |
| 416 | + | |
| 417 | +/* 隐藏轮播指示器 */ | |
| 418 | +.el-carousel__indicators { | |
| 419 | + display: none; | |
| 138 | 420 | } |
| 139 | -</style> | |
| 140 | 421 | |
| 422 | +/* 加载动画 */ | |
| 423 | +.spinner { | |
| 424 | + width: 40px; | |
| 425 | + height: 40px; | |
| 426 | + border: 4px solid rgba(255, 255, 255, 0.3); | |
| 427 | + border-radius: 50%; | |
| 428 | + border-top-color: #fff; | |
| 429 | + animation: spin 1s ease-in-out infinite; | |
| 430 | +} | |
| 431 | + | |
| 432 | +@keyframes spin { | |
| 433 | + to { transform: rotate(360deg); } | |
| 434 | +} | |
| 435 | + | |
| 436 | +/* 圆圈页码指示器 */ | |
| 437 | +.circle-indicator { | |
| 438 | + position: fixed; | |
| 439 | + bottom: 20px; | |
| 440 | + left: 50%; | |
| 441 | + transform: translateX(-50%); | |
| 442 | + display: flex; | |
| 443 | + gap: 10px; | |
| 444 | + z-index: 100; | |
| 445 | +} | |
| 446 | + | |
| 447 | +.circle { | |
| 448 | + width: 12px; | |
| 449 | + height: 12px; | |
| 450 | + border-radius: 50%; | |
| 451 | + background: rgba(255, 255, 255, 0.4); | |
| 452 | + transition: all 0.3s ease; | |
| 453 | + cursor: pointer; | |
| 454 | +} | |
| 455 | + | |
| 456 | +.circle.active { | |
| 457 | + background: #fff; | |
| 458 | + transform: scale(1.2); | |
| 459 | + box-shadow: 0 0 5px rgba(255, 255, 255, 0.8); | |
| 460 | +} | |
| 461 | + | |
| 462 | +.circle:hover { | |
| 463 | + background: rgba(255, 255, 255, 0.7); | |
| 464 | +} | |
| 465 | + | |
| 466 | +/* 控制按钮 */ | |
| 467 | +.controls { | |
| 468 | + position: fixed; | |
| 469 | + top: 50%; | |
| 470 | + transform: translateY(-50%); | |
| 471 | + width: 100%; | |
| 472 | + display: flex; | |
| 473 | + justify-content: space-between; | |
| 474 | + padding: 0 20px; | |
| 475 | + z-index: 100; | |
| 476 | + opacity: 0; | |
| 477 | + transition: opacity 0.3s ease; | |
| 478 | +} | |
| 479 | + | |
| 480 | +.fullscreen-carousel:hover .controls { | |
| 481 | + opacity: 0.7; | |
| 482 | +} | |
| 483 | + | |
| 484 | +.controls:hover { | |
| 485 | + opacity: 1; | |
| 486 | +} | |
| 487 | +//el-icon-arrow-left | |
| 488 | +.control-btn { | |
| 489 | + background: rgba(0, 0, 0, 0.5); | |
| 490 | + color: white; | |
| 491 | + border: none; | |
| 492 | + width: 50px; | |
| 493 | + height: 50px; | |
| 494 | + border-radius: 50%; | |
| 495 | + display: flex; | |
| 496 | + justify-content: center; | |
| 497 | + align-items: center; | |
| 498 | + cursor: pointer; | |
| 499 | + font-size: 1.5rem; | |
| 500 | + transition: all 0.3s ease; | |
| 501 | +} | |
| 502 | + | |
| 503 | +.control-btn:hover { | |
| 504 | + background: rgba(0, 0, 0, 0.8); | |
| 505 | + transform: scale(1.1); | |
| 506 | +} | |
| 507 | + | |
| 508 | +/* 进度指示器 */ | |
| 509 | +.progress-indicator { | |
| 510 | + position: fixed; | |
| 511 | + top: 0; | |
| 512 | + left: 0; | |
| 513 | + height: 3px; | |
| 514 | + background: linear-gradient(90deg, #4ca1af, #2c3e50); | |
| 515 | + z-index: 101; | |
| 516 | + transition: width 0.3s ease; | |
| 517 | +} | |
| 518 | +</style> | ... | ... |
src/views/bigscreenDesigner/designer/widget/table/widgetTable.vue
| ... | ... | @@ -18,9 +18,8 @@ |
| 18 | 18 | <li |
| 19 | 19 | v-for="(item, index) in list" |
| 20 | 20 | :key="index" |
| 21 | - :style="tableRowHeight()" | |
| 21 | + :style="[tableLiHeight()]" | |
| 22 | 22 | > |
| 23 | - <!-- class="contentStyle"--> | |
| 24 | 23 | <div |
| 25 | 24 | v-for="(itemChild, idx) in header" |
| 26 | 25 | :key="idx" |
| ... | ... | @@ -79,7 +78,7 @@ export default { |
| 79 | 78 | return { |
| 80 | 79 | position: this.ispreview ? "absolute" : "static", |
| 81 | 80 | width: allStyle.width + "px", |
| 82 | - height: allStyle.height + "px", | |
| 81 | + // height: allStyle.height + "px", | |
| 83 | 82 | left: allStyle.left + "px", |
| 84 | 83 | top: allStyle.top + "px", |
| 85 | 84 | background: this.optionsSetUp.tableBgColor |
| ... | ... | @@ -213,6 +212,8 @@ export default { |
| 213 | 212 | tableRowHeight() { |
| 214 | 213 | let styleJson = {}; |
| 215 | 214 | const bAutoHeight = this.optionsSetUp.bAutoHeight; |
| 215 | + styleJson["height"] = "auto"; | |
| 216 | + // alert(bAutoHeight); | |
| 216 | 217 | if(!bAutoHeight){ |
| 217 | 218 | if (this.optionsSetUp.rowHeight) { |
| 218 | 219 | styleJson["height"] = this.optionsSetUp.rowHeight + "px"; |
| ... | ... | @@ -223,10 +224,14 @@ export default { |
| 223 | 224 | } |
| 224 | 225 | }else{ |
| 225 | 226 | styleJson["height"] = "auto"; |
| 226 | - styleJson["line-height"]=this.optionsSetUp.rowHeight+ "px"; | |
| 227 | 227 | } |
| 228 | 228 | return styleJson; |
| 229 | 229 | }, |
| 230 | + tableLiHeight(){ | |
| 231 | + let styleJson = {}; | |
| 232 | + styleJson["height"]=this.optionsSetUp.rowHeight+ "px" | |
| 233 | + return styleJson; | |
| 234 | + }, | |
| 230 | 235 | tableFiledWidth(index) { |
| 231 | 236 | let styleJson = {}; |
| 232 | 237 | if (this.optionsSetUp.dynamicAddTable[index].width) { |
| ... | ... | @@ -264,8 +269,6 @@ export default { |
| 264 | 269 | } |
| 265 | 270 | |
| 266 | 271 | .txtScroll-top .infoList li { |
| 267 | - //height: 50px; | |
| 268 | - //line-height: 50px; | |
| 269 | 272 | display: flex; |
| 270 | 273 | flex-direction: row; |
| 271 | 274 | } |
| ... | ... | @@ -279,12 +282,4 @@ export default { |
| 279 | 282 | overflow: hidden; |
| 280 | 283 | text-overflow: ellipsis; |
| 281 | 284 | } |
| 282 | - | |
| 283 | -/*.txtScroll-top .infoList li:nth-child(n) { | |
| 284 | - background: rgb(0, 59, 81); | |
| 285 | -} | |
| 286 | - | |
| 287 | -.txtScroll-top .infoList li:nth-child(2n) { | |
| 288 | - background: rgb(10, 39, 50); | |
| 289 | -}*/ | |
| 290 | 285 | </style> | ... | ... |