dev
/
GScreenWEB_TPMes
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

性能优化

This commit is contained in:
ljx 2024-09-23 10:49:47 +08:00
parent 5ac428a84b
commit 0de677cb57
2 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/datav/index.vue
View File

@ -10,7 +10,7 @@
<!-- <digital-flop :TodayData="showData.todayData" :Type="type"/> --> <!-- <digital-flop :TodayData="showData.todayData" :Type="type"/> -->
<div class="block-left-right-content"> <div class="block-left-right-content">
<div class="row1-col1" :style="`width:${row1Style.width[0]}; height:${row1Style.height};padding-right:0.1rem;`"> <div class="row1-col1" :style="`width:${row1Style.width[0]}; height:${row1Style.height};padding-right:0.1rem;`">
<div v-for="(rcitem) in row1col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`"> <div v-for="(rcitem,rcindex) in row1col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;"> <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div> <div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
<div class="rankHeader" style="display: flex;"> <div class="rankHeader" style="display: flex;">
@ -29,12 +29,12 @@
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;"> <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
<rose-chart :pieId="'roseChart'+rcitem.setting.ID" :chartData="rcitem" style="width: 100%;height: 100%;"/> <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
</div> </div>
</div> </div>
</div> </div>
<div class="row1-col2" v-if="row1col2report.length>0" :style="`width:${row1Style.width[1]}; height:${row1Style.height};padding-right:0.1rem;`"> <div class="row1-col2" v-if="row1col2report.length>0" :style="`width:${row1Style.width[1]}; height:${row1Style.height};padding-right:0.1rem;`">
<div v-for="(rcitem) in row1col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`"> <div v-for="(rcitem,rcindex) in row1col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;"> <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div> <div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
<div class="rankHeader" style="display: flex;"> <div class="rankHeader" style="display: flex;">
@ -53,7 +53,7 @@
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;"> <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
<rose-chart :pieId="'roseChart'+rcitem.setting.ID" :chartData="rcitem" style="width: 100%;height: 100%;"/> <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
</div> </div>
</div> </div>
</div> </div>
@ -64,7 +64,7 @@
<bar-chart :key="index" v-if="item.setting.reportType == 'bar'" style="height: 45%;" pieId="roseChart3" :chartData="item" :style="'height:'+item.setting.height+';width:'+item.setting.width+';'"/> <bar-chart :key="index" v-if="item.setting.reportType == 'bar'" style="height: 45%;" pieId="roseChart3" :chartData="item" :style="'height:'+item.setting.height+';width:'+item.setting.width+';'"/>
</template> </template>
</div> --> </div> -->
<div v-for="(rcitem) in row1col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`"> <div v-for="(rcitem,rcindex) in row1col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;"> <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div> <div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
<div class="rankHeader" style="display: flex;"> <div class="rankHeader" style="display: flex;">
@ -83,12 +83,12 @@
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;"> <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
<rose-chart :pieId="'roseChart'+rcitem.setting.ID" :chartData="rcitem" style="width: 100%;height: 100%;"/> <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
</div> </div>
</div> </div>
</div> </div>
<div class="row2-col1" v-if="row2col1report.length>0" :style="`width:${row2Style.width[0]}; height:${row2Style.height};margin-top: 0.1rem;padding-right:0.1rem;`"> <div class="row2-col1" v-if="row2col1report.length>0" :style="`width:${row2Style.width[0]}; height:${row2Style.height};margin-top: 0.1rem;padding-right:0.1rem;`">
<div v-for="(rcitem) in row2col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`"> <div v-for="(rcitem,rcindex) in row2col1report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;"> <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div> <div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
<div class="rankHeader" style="display: flex;"> <div class="rankHeader" style="display: flex;">
@ -107,12 +107,12 @@
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;"> <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
<rose-chart :pieId="'roseChart'+rcitem.setting.ID" :chartData="rcitem" style="width: 100%;height: 100%;"/> <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
</div> </div>
</div> </div>
</div> </div>
<div class="row2-col2" v-if="row2col2report.length>0" :style="`width:${row2Style.width[1]}; height:${row2Style.height};margin-top: 0.1rem;padding-right:0.1rem;`"> <div class="row2-col2" v-if="row2col2report.length>0" :style="`width:${row2Style.width[1]}; height:${row2Style.height};margin-top: 0.1rem;padding-right:0.1rem;`">
<div v-for="(rcitem) in row2col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`"> <div v-for="(rcitem,rcindex) in row2col2report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;"> <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div> <div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
<div class="rankHeader" style="display: flex;"> <div class="rankHeader" style="display: flex;">
@ -131,12 +131,12 @@
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;"> <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
<rose-chart :pieId="'roseChart'+rcitem.setting.ID" :chartData="rcitem" style="width: 100%;height: 100%;"/> <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
</div> </div>
</div> </div>
</div> </div>
<div class="row2-col3" v-if="row2col3report.length>0" :style="`width:${row2Style.width[2]}; height:${row2Style.height};margin-top: 0.1rem;`"> <div class="row2-col3" v-if="row2col3report.length>0" :style="`width:${row2Style.width[2]}; height:${row2Style.height};margin-top: 0.1rem;`">
<div v-for="(rcitem) in row2col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`"> <div v-for="(rcitem,rcindex) in row2col3report" :key="rcitem.setting.ID" :style="`width:${rcitem.setting.width}; height:${rcitem.setting.height};`">
<div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;"> <div v-if="rcitem.setting.reportType == 'rank'" style="width: 100%;height: 100%;">
<div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div> <div class="rankTitle" style="font-size: 0.2rem;line-height: 0.4rem;text-align: center;font-weight: bold; background-color: rgba(0, 102, 153, 0.4)">{{ rcitem.title }} </div>
<div class="rankHeader" style="display: flex;"> <div class="rankHeader" style="display: flex;">
@ -155,7 +155,7 @@
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;"> <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
<rose-chart :pieId="'roseChart'+rcitem.setting.ID" :chartData="rcitem" style="width: 100%;height: 100%;"/> <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
</div> </div>
</div> </div>
</div> </div>
@ -402,12 +402,18 @@ export default {
let that = this; let that = this;
setInterval(()=>{ setInterval(()=>{
that.createdData(Aid) that.createdData(Aid)
}, 100000) }, 150000)
}, },
methods: { methods: {
createdData (Aid) { createdData (Aid) {
let that = this let that = this
that.loadingDone = false; that.loadingDone = false;
this.row1col1report = [];
this.row1col2report = [];
this.row1col3report = [];
this.row2col1report = [];
this.row2col2report = [];
this.row2col3report = [];
that.showNotices = false; that.showNotices = false;
this.$api.post2('/api/web/GetScreenReport?category='+Aid).then(res => { this.$api.post2('/api/web/GetScreenReport?category='+Aid).then(res => {
if (res.code === '200') { if (res.code === '200') {

2
src/components/datav/roseChart.vue
View File

@ -81,7 +81,7 @@ export default {
createData() createData()
setInterval(createData, 100000) // setInterval(createData, 100000)
} }
} }
</script> </script>