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,7 +5,7 @@ const prodEnv = require('./prod.env') | ||
| 5 | const isDev = false; | 5 | const isDev = false; |
| 6 | //开发API地址 | 6 | //开发API地址 |
| 7 | // const devAdrress='"http://weberp.xlyprint.cn/xlyReport"'; | 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 | //正式打包API地址 | 9 | //正式打包API地址 |
| 10 | const ipAdrress='"http://"+location.host+"/xlyReport"'; | 10 | const ipAdrress='"http://"+location.host+"/xlyReport"'; |
| 11 | 11 |
src/mixins/queryform.js
| @@ -122,8 +122,8 @@ export default { | @@ -122,8 +122,8 @@ export default { | ||
| 122 | return this.barOrLineChartFn(params.chartProperties, data); | 122 | return this.barOrLineChartFn(params.chartProperties, data); |
| 123 | }else if (chartType == "widget-barlinechart" ) { | 123 | }else if (chartType == "widget-barlinechart" ) { |
| 124 | return this.barLineChartFn(params.chartProperties, data); | 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 | } else if ( | 127 | } else if ( |
| 128 | chartType == "widget-piechart" || | 128 | chartType == "widget-piechart" || |
| 129 | chartType == "widget-funnel" | 129 | chartType == "widget-funnel" |
| @@ -132,7 +132,8 @@ export default { | @@ -132,7 +132,8 @@ export default { | ||
| 132 | } else if (chartType == "widget-text") { | 132 | } else if (chartType == "widget-text") { |
| 133 | return this.widgettext(params.chartProperties, data) | 133 | return this.widgettext(params.chartProperties, data) |
| 134 | } else if (chartType == "widget-stackchart") { | 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 | } else if (chartType == "widget-coord") { | 137 | } else if (chartType == "widget-coord") { |
| 137 | return this.coordChartFn(params.chartProperties, data) | 138 | return this.coordChartFn(params.chartProperties, data) |
| 138 | } else if (chartType == "widget-linemap") { | 139 | } else if (chartType == "widget-linemap") { |
| @@ -236,70 +237,12 @@ export default { | @@ -236,70 +237,12 @@ export default { | ||
| 236 | } | 237 | } |
| 237 | ananysicData["xAxis"] = xAxisList; | 238 | ananysicData["xAxis"] = xAxisList; |
| 238 | ananysicData["series"] = series; | 239 | ananysicData["series"] = series; |
| 239 | - // console.log("11111",ananysicData); | 240 | + |
| 240 | return ananysicData; | 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 | piechartFn(chartProperties, data) { | 248 | piechartFn(chartProperties, data) { |
src/views/bigscreenDesigner/designer/widget/bar/widgetBarStackChart.vue
| @@ -288,7 +288,7 @@ export default { | @@ -288,7 +288,7 @@ export default { | ||
| 288 | }, | 288 | }, |
| 289 | //静态数据 | 289 | //静态数据 |
| 290 | staticDataFn(val) { | 290 | staticDataFn(val) { |
| 291 | - console.log("staticDataFn",val); | 291 | + // console.log("staticDataFn",val); |
| 292 | const optionsSetup = this.optionsSetup; | 292 | const optionsSetup = this.optionsSetup; |
| 293 | //颜色 | 293 | //颜色 |
| 294 | const customColor = optionsSetup.customColor; | 294 | const customColor = optionsSetup.customColor; |
| @@ -388,63 +388,9 @@ export default { | @@ -388,63 +388,9 @@ export default { | ||
| 388 | getEchartData(val, optionsSetup) { | 388 | getEchartData(val, optionsSetup) { |
| 389 | const data = this.queryEchartsData(val); | 389 | const data = this.queryEchartsData(val); |
| 390 | data.then(res => { | 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 | </script> | 396 | </script> |
src/views/bigscreenDesigner/designer/widget/barline/widgetBarLineStackChart.vue
| @@ -487,92 +487,7 @@ export default { | @@ -487,92 +487,7 @@ export default { | ||
| 487 | }); | 487 | }); |
| 488 | }, | 488 | }, |
| 489 | renderingFn(optionsSetup, val) { | 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 | <template> | 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 | </el-carousel-item> | 68 | </el-carousel-item> |
| 9 | </el-carousel> | 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 | </div> | 82 | </div> |
| 83 | + | ||
| 11 | </template> | 84 | </template> |
| 12 | <script> | 85 | <script> |
| 13 | -import Vue from 'vue' | ||
| 14 | -import iframeResize from 'iframe-resizer/js/iframeResizer' | ||
| 15 | -Vue.use(iframeResize) | 86 | + |
| 16 | export default { | 87 | export default { |
| 17 | name: 'WidgetHtmlSlider', | 88 | name: 'WidgetHtmlSlider', |
| 18 | components: {}, | 89 | components: {}, |
| @@ -23,18 +94,26 @@ export default { | @@ -23,18 +94,26 @@ export default { | ||
| 23 | data() { | 94 | data() { |
| 24 | return { | 95 | return { |
| 25 | options: {}, | 96 | options: {}, |
| 26 | - urlData:[], | ||
| 27 | optionsSetUp:{}, | 97 | optionsSetUp:{}, |
| 28 | carouselKey: 0, // 重新渲染组件用 | 98 | carouselKey: 0, // 重新渲染组件用 |
| 29 | flagInter: null, | 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 | computed: { | 117 | computed: { |
| 39 | transStyle() { | 118 | transStyle() { |
| 40 | const obj = this.objToOne(this.options); | 119 | const obj = this.objToOne(this.options); |
| @@ -53,10 +132,9 @@ export default { | @@ -53,10 +132,9 @@ export default { | ||
| 53 | carouselStyle() { | 132 | carouselStyle() { |
| 54 | this.initData(this.transStyle); | 133 | this.initData(this.transStyle); |
| 55 | return { | 134 | return { |
| 56 | - //imageList: this.isBlank(this.transStyle.imageAdress)?[]:this.transStyle.imageAdress.split(","), | ||
| 57 | direction: !this.transStyle.tabType ? this.transStyle.tabDirection : 'horizontal', | 135 | direction: !this.transStyle.tabType ? this.transStyle.tabDirection : 'horizontal', |
| 58 | indicatorPosition: this.transStyle.tabSelector, | 136 | indicatorPosition: this.transStyle.tabSelector, |
| 59 | - interval: this.transStyle.tabTime, | 137 | + // intervalTime: this.transStyle.tabTime, |
| 60 | type: this.transStyle.tabType | 138 | type: this.transStyle.tabType |
| 61 | } | 139 | } |
| 62 | } | 140 | } |
| @@ -64,15 +142,19 @@ export default { | @@ -64,15 +142,19 @@ export default { | ||
| 64 | watch: { | 142 | watch: { |
| 65 | value: { | 143 | value: { |
| 66 | handler(val) { | 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 | deep: true, | 151 | deep: true, |
| 72 | }, | 152 | }, |
| 73 | carouselStyle: { | 153 | carouselStyle: { |
| 74 | handler(newValue, oldValue) { | 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 | this.carouselKey++; | 158 | this.carouselKey++; |
| 77 | } | 159 | } |
| 78 | }, | 160 | }, |
| @@ -81,28 +163,63 @@ export default { | @@ -81,28 +163,63 @@ export default { | ||
| 81 | created() { | 163 | created() { |
| 82 | this.options = this.value; | 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 | methods: { | 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 | initData(data) { | 202 | initData(data) { |
| 92 | let urlUp =[]; | 203 | let urlUp =[]; |
| 93 | if(this.hasOwn(data,"urls")){ | 204 | if(this.hasOwn(data,"urls")){ |
| 94 | urlUp = data['urls']; | 205 | urlUp = data['urls']; |
| 95 | } | 206 | } |
| 96 | - let urlData = []; | 207 | + let slides = []; |
| 97 | if(this.isNotBlankArray(urlUp)){ | 208 | if(this.isNotBlankArray(urlUp)){ |
| 98 | for(let i=0;i<urlUp.length;i++){ | 209 | for(let i=0;i<urlUp.length;i++){ |
| 99 | const url = urlUp[i].url; | 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 | handlerUrlData(){ | 224 | handlerUrlData(){ |
| 108 | const data = this.optionsSetUp; | 225 | const data = this.optionsSetUp; |
| @@ -112,29 +229,290 @@ export default { | @@ -112,29 +229,290 @@ export default { | ||
| 112 | }else if(this.hasOwn(data,"dynamicHtmlSlider")){ | 229 | }else if(this.hasOwn(data,"dynamicHtmlSlider")){ |
| 113 | urlUp = data['dynamicHtmlSlider']; | 230 | urlUp = data['dynamicHtmlSlider']; |
| 114 | } | 231 | } |
| 115 | - let urlData = []; | 232 | + let slides = []; |
| 116 | if(this.isNotBlankArray(urlUp)){ | 233 | if(this.isNotBlankArray(urlUp)){ |
| 117 | for(let i=0;i<urlUp.length;i++){ | 234 | for(let i=0;i<urlUp.length;i++){ |
| 118 | const url = urlUp[i].url; | 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 | </script> | 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 | width: 100%; | 320 | width: 100%; |
| 132 | height: 100%; | 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 | width: 100%; | 328 | width: 100%; |
| 137 | height: 100%; | 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,9 +18,8 @@ | ||
| 18 | <li | 18 | <li |
| 19 | v-for="(item, index) in list" | 19 | v-for="(item, index) in list" |
| 20 | :key="index" | 20 | :key="index" |
| 21 | - :style="tableRowHeight()" | 21 | + :style="[tableLiHeight()]" |
| 22 | > | 22 | > |
| 23 | - <!-- class="contentStyle"--> | ||
| 24 | <div | 23 | <div |
| 25 | v-for="(itemChild, idx) in header" | 24 | v-for="(itemChild, idx) in header" |
| 26 | :key="idx" | 25 | :key="idx" |
| @@ -79,7 +78,7 @@ export default { | @@ -79,7 +78,7 @@ export default { | ||
| 79 | return { | 78 | return { |
| 80 | position: this.ispreview ? "absolute" : "static", | 79 | position: this.ispreview ? "absolute" : "static", |
| 81 | width: allStyle.width + "px", | 80 | width: allStyle.width + "px", |
| 82 | - height: allStyle.height + "px", | 81 | + // height: allStyle.height + "px", |
| 83 | left: allStyle.left + "px", | 82 | left: allStyle.left + "px", |
| 84 | top: allStyle.top + "px", | 83 | top: allStyle.top + "px", |
| 85 | background: this.optionsSetUp.tableBgColor | 84 | background: this.optionsSetUp.tableBgColor |
| @@ -213,6 +212,8 @@ export default { | @@ -213,6 +212,8 @@ export default { | ||
| 213 | tableRowHeight() { | 212 | tableRowHeight() { |
| 214 | let styleJson = {}; | 213 | let styleJson = {}; |
| 215 | const bAutoHeight = this.optionsSetUp.bAutoHeight; | 214 | const bAutoHeight = this.optionsSetUp.bAutoHeight; |
| 215 | + styleJson["height"] = "auto"; | ||
| 216 | + // alert(bAutoHeight); | ||
| 216 | if(!bAutoHeight){ | 217 | if(!bAutoHeight){ |
| 217 | if (this.optionsSetUp.rowHeight) { | 218 | if (this.optionsSetUp.rowHeight) { |
| 218 | styleJson["height"] = this.optionsSetUp.rowHeight + "px"; | 219 | styleJson["height"] = this.optionsSetUp.rowHeight + "px"; |
| @@ -223,10 +224,14 @@ export default { | @@ -223,10 +224,14 @@ export default { | ||
| 223 | } | 224 | } |
| 224 | }else{ | 225 | }else{ |
| 225 | styleJson["height"] = "auto"; | 226 | styleJson["height"] = "auto"; |
| 226 | - styleJson["line-height"]=this.optionsSetUp.rowHeight+ "px"; | ||
| 227 | } | 227 | } |
| 228 | return styleJson; | 228 | return styleJson; |
| 229 | }, | 229 | }, |
| 230 | + tableLiHeight(){ | ||
| 231 | + let styleJson = {}; | ||
| 232 | + styleJson["height"]=this.optionsSetUp.rowHeight+ "px" | ||
| 233 | + return styleJson; | ||
| 234 | + }, | ||
| 230 | tableFiledWidth(index) { | 235 | tableFiledWidth(index) { |
| 231 | let styleJson = {}; | 236 | let styleJson = {}; |
| 232 | if (this.optionsSetUp.dynamicAddTable[index].width) { | 237 | if (this.optionsSetUp.dynamicAddTable[index].width) { |
| @@ -264,8 +269,6 @@ export default { | @@ -264,8 +269,6 @@ export default { | ||
| 264 | } | 269 | } |
| 265 | 270 | ||
| 266 | .txtScroll-top .infoList li { | 271 | .txtScroll-top .infoList li { |
| 267 | - //height: 50px; | ||
| 268 | - //line-height: 50px; | ||
| 269 | display: flex; | 272 | display: flex; |
| 270 | flex-direction: row; | 273 | flex-direction: row; |
| 271 | } | 274 | } |
| @@ -279,12 +282,4 @@ export default { | @@ -279,12 +282,4 @@ export default { | ||
| 279 | overflow: hidden; | 282 | overflow: hidden; |
| 280 | text-overflow: ellipsis; | 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 | </style> | 285 | </style> |