From 3fe6be8e6eeae41fcfabc5876cac2fddd1c860f0 Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期四, 21 一月 2021 11:41:07 +0800 Subject: [PATCH] 朔黄首页数据统计分析tab静态页完善 --- src/pages/shuohuangMonitorAnalyze/index/App.vue | 2 src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue | 13 + src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 246 ++++++++++++++++++++-- src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue | 181 ++++++++++++++++ src/pages/shuohuangMonitorAnalyze/components/charts/line.vue | 18 + src/pages/shuohuangMonitorAnalyze/index/main.ts | 3 src/pages/shuohuangMonitorAnalyze/components/leftNav.vue | 2 src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue | 154 ++++++++++++++ 8 files changed, 587 insertions(+), 32 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue new file mode 100644 index 0000000..3e74266 --- /dev/null +++ b/src/pages/shuohuangMonitorAnalyze/components/charts/dataset.vue @@ -0,0 +1,154 @@ +<template> + <div class="irregular-dataset"> + <div ref="multiBar" style="width: 100%;height: 300px;"></div> + </div> +</template> + +<script> +export default { + data () { + return { + options: {}, + } + }, + mounted () { + this.options = this.mockData(); + this.initMultiBar(); + }, + methods: { + mockData () { + + var dimension = ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�']; + var categoryCount = 30; + var xAxisData = []; + var customData = []; + var legendData = []; + var dataList = []; + + legendData.push('trend'); + var encodeY = []; + for (var i = 0; i < dimension.length; i++) { + legendData.push(dimension[i]); + dataList.push([]); + encodeY.push(1 + i); + } + + for (var i = 0; i < categoryCount; i++) { + var val = Math.random() * 1000; + xAxisData.push('category' + i); + var customVal = [i]; + customData.push(customVal); + + for (var j = 0; j < dataList.length; j++) { + var value = j === 0 + ? this.$echarts.number.round(val, 2) + : this.$echarts.number.round(Math.max(0, dataList[j - 1][i] + (Math.random() - 0.5) * 200), 2); + dataList[j].push(value); + customVal.push(value); + } + } + return { + title: { + text: '杩濊鎯呭喌缁熻', + textStyle: { + fontSize: '14px' + } + }, + grid: { + top: 50, + left: 30, + right: 20, + }, + tooltip: { + trigger: 'axis' + }, + legend: { + data: legendData, + left: 'right', + //color: ['aqua','#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'] + }, + dataZoom: [{ + type: 'slider', + start: 50, + end: 70 + }, { + type: 'inside', + start: 50, + end: 70 + }], + xAxis: { + data: xAxisData + }, + yAxis: {}, + series: [{ + type: 'custom', + name: 'trend', + renderItem: this.renderItem, + itemStyle: { + borderWidth: 2 + }, + encode: { + x: 0, + y: encodeY + }, + data: customData, + z: 100 + }].concat(this.$echarts.util.map(dataList, function (data, index) { + return { + type: 'bar', + animation: false, + name: legendData[index + 1], + itemStyle: { + opacity: 0.7 + }, + color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'][index], + data: data + }; + })) + } + }, + renderItem (params, api) { + var xValue = api.value(0); + var currentSeriesIndices = api.currentSeriesIndices(); + var barLayout = api.barLayout({ + barGap: '30%', barCategoryGap: '20%', count: currentSeriesIndices.length - 1 + }); + + var points = []; + for (var i = 0; i < currentSeriesIndices.length; i++) { + var seriesIndex = currentSeriesIndices[i]; + if (seriesIndex !== params.seriesIndex) { + var point = api.coord([xValue, api.value(seriesIndex)]); + point[0] += barLayout[i - 1].offsetCenter; + point[1] -= 20; + points.push(point); + } + } + var style = api.style({ + color: '#975fe4', + //stroke: api.visual('color'), + stroke: 'aqua', + fill: null + }); + + return { + type: 'polyline', + shape: { + points: points + }, + + style: style + }; + }, + initMultiBar () { + this.$nextTick(() => { + let dom = this.$echarts.init(this.$refs['multiBar']); + dom.setOption(this.options); + }) + } + } +} +</script> + +<style> +</style> \ No newline at end of file diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/line.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/line.vue index c2c3a19..04dbb1b 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/charts/line.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/charts/line.vue @@ -1,5 +1,5 @@ <template> - <div ref="lineChart"></div> + <div ref="lineChart" :style="{width:defineW+'px',height:defineH+'px'}"></div> </template> <script> @@ -7,14 +7,22 @@ props: { options: { type: Object + }, + defineW: { + type: Number, + default: 600, + }, + defineH: { + type: Number, + default: 300, } }, - mounted(){ + mounted () { this.initLineChart(); }, - methods:{ - initLineChart(){ - this.$$nextTick(()=>{ + methods: { + initLineChart () { + this.$nextTick(() => { let dom = this.$echarts.init(this.$refs['lineChart']); dom.setOption(this.options); }) diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue index 46e941c..f71636f 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue @@ -1,17 +1,25 @@ <template> - <div ref="pieChart" style="width: 600px; height: 300px;"></div> + <div ref="pieChart" :style="{width: pieW+'px', height: pieH+'px'}"></div> </template> <script> export default { data () { return { - + } }, props: { options: { type: Object + }, + pieW: { + type: Number, + default: 600 + }, + pieH: { + type: Number, + default: 300 } }, mounted () { @@ -29,4 +37,5 @@ </script> <style lang="scss"> + </style> \ No newline at end of file diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue index 8007458..8092860 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue @@ -4,7 +4,7 @@ <el-tab-pane label="鏁版嵁缁熻鍒嗘瀽" name="dataStatistic"></el-tab-pane> <el-tab-pane label="浠诲姟缁熻鍒嗘瀽" name="taskStatistic"></el-tab-pane> </el-tabs> - <div class="tab-content"> + <div class="tab-content" v-if="actCardTab=='dataStatistic'"> <div class="card-view"> <el-card> <div class="title"> @@ -130,33 +130,82 @@ </div> </div> </div> - <div class="statics"> + <div class="statics flex-box"> <div class="lt"> <div class="statics-part"> <div class="statics-header"> <span class="title">涔樺姟鍛樿繚瑙勭粺璁�</span> - <time-shortcut @actPickerChange="irregularStatistic"></time-shortcut> + <time-shortcut @actPickerChange="irregularMenStatistic"></time-shortcut> </div> - <div class="chart-area flex-box"> - <div class="lt"> - <div class="chart-theme">涔樺姟鍛樻�讳汉鏁�</div> - <div class="sum"> - <span class="val">8846</span> - <span class="ratio">17.1%</span> + <div class="statics-content"> + <div class="chart-area flex-box"> + <div class="lt"> + <div class="chart-theme">涔樺姟鍛樻�讳汉鏁�</div> + <div class="sum"> + <span class="val">8846</span> + <span class="ratio">17.1%</span> + </div> + <line-chart :options="optionsOfIrregularSum" :defineW="300" :defineH="160"></line-chart> </div> - <Line :options="optionsOfIrregularSum"></Line> - </div> - <div class="gt"> - <div class="chart-theme">浜哄潎杩濊娆℃暟</div> - <div class="sum"> - <span class="val">8846</span> + <div class="gt"> + <div class="chart-theme">浜哄潎杩濊娆℃暟</div> + <div class="sum"> + <span class="val">8846</span> + </div> + <!-- <line-chart :options="optionsOfIrregularPer"></line-chart> --> + <line-chart :options="optionsOfIrregularPer" :defineW="300" :defineH="160"></line-chart> </div> </div> + <el-table :data="irregularTableData"> + <el-table-column label="鎺掑悕"></el-table-column> + <el-table-column label="濮撳悕"></el-table-column> + <el-table-column label="杩濊娆℃暟"></el-table-column> + <el-table-column label="鍛ㄦ定骞�"></el-table-column> + </el-table> + <el-pagination + @size-change="handleTableSizeChange" + @current-change="renderIrregularMenTable" + :current-page.sync="PageIndex" + :page-size="PageSize" + :page-sizes="pageSizes" + layout="total,sizes, prev, pager, next" + :total="tableTotal" + ></el-pagination> + </div> + </div> + </div> + <div class="rt"> + <div class="statics-part"> + <div class="statics-header"> + <span class="title">閲嶇偣鍦版杩濊浜嬩欢缁熻</span> + <time-shortcut @actPickerChange="irregularEventStatistic"></time-shortcut> + </div> + <div class="statics-content"> + <el-radio-group v-model="irregularEventType" size="small"> + <el-radio-button label="fhdd">闃叉姢鍦版</el-radio-button> + <el-radio-button label="jcz">杩涘嚭绔�</el-radio-button> + <el-radio-button label="gfx">杩囧垎鐩�</el-radio-button> + <el-radio-button label="hc">浼氳溅</el-radio-button> + <el-radio-button label="lsmx">涓存椂鎱㈡��</el-radio-button> + </el-radio-group> + <!-- <Pie :options="optionsOfIrregularEventPie"></Pie> --> + <Pie :options="optionsOfHidDangerPie"></Pie> </div> </div> </div> </div> + <div class="part"> + <div class="tab-swiper"> + <swipe-tabs></swipe-tabs> + </div> + <div class="tab-detail"> + <dataset-chart style="width:100%"></dataset-chart> + </div> + </div> </div> + </div> + <div class="tab-content" v-if="actCardTab=='taskStatistic'"> + </div> </div> </template> @@ -165,9 +214,11 @@ import timeShortcut from './timeShortcut'; import Bar from './charts/bar'; import Pie from './charts/pie'; -import Line from './charts/line'; +import LineChart from './charts/line'; +import SwipeTabs from './swipeTabs'; +import DatasetChart from './charts/dataset'; export default { - components: { timeShortcut, Bar, Pie, Line }, + components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart }, data () { return { actCardTab: 'dataStatistic', @@ -194,11 +245,24 @@ data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'], axisTick: { alignWithLabel: true - } + }, + // axisLine: { + // lineStyle: { + // color: '#ccc' + // } + // }, + // nameTextStyle: { + // color: "#333" + // } } ], yAxis: [ - { type: 'value' } + { + type: 'value', + axisLine: { + show: false + } + } ], series: [ { @@ -255,6 +319,10 @@ }, optionsOfIrregularSum: { animation: false, + grid: { + top: 0, + left: 0 + }, tooltip: { trigger: 'axis', axisPointer: { @@ -265,6 +333,7 @@ } }, xAxis: { + show: false, type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], @@ -274,6 +343,8 @@ }, yAxis: { type: 'value', + show: false, + boundaryGap: [0, '30%'], label: { show: false } @@ -282,17 +353,82 @@ { data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', - + smooth: true, + areaStyle: { + opacity: 0.3 + }, + color: '#5dbafd' } ] + }, + optionsOfIrregularPer: { + animation: false, + grid: { + top: 0, + left: 0 + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + xAxis: { + show: false, + type: 'category', + boundaryGap: false, + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + label: { + show: false + } + }, + yAxis: { + type: 'value', + show: false, + label: { + show: false + } + }, + series: [ + { + data: [820, 932, 901, 934, 1290, 1330, 1320], + type: 'line', + smooth: true, + areaStyle: { + opacity: 0.3 + }, + color: '#8adee6' + } + ] + }, + irregularTableData: [], + PageIndex: 1, + PageSize: 5, + pageSizes: [5, 10], + tableTotal: 0, + irregularEventType: 'fhdd', + optionsOfIrregularEventPie: { + } } }, methods: { + renderIrregularMenTable () { + + }, + handleTableSizeChange () { + + }, timeShortChange (time) { }, - irregularStatistic (time) { + irregularMenStatistic (time) { + + }, + irregularEventStatistic (time) { } } @@ -359,6 +495,15 @@ .day-ratio { display: flex; align-items: center; + &>span{ + margin-right: 6px; + } + .triangle.green{ + margin-top: -6px; + } + .triangle.red{ + margin-top: 6px; + } } } .devide { @@ -368,11 +513,17 @@ } .detail { display: flex; + align-items: center; + color: #777; + .name{ + margin-right: 20px; + } } } } .part { - padding: 10px 0; + padding: 20px 0; + margin-bottom: 20px; .header-width-tab { display: flex; justify-content: space-between; @@ -385,10 +536,46 @@ display: flex; padding: 0 10px; min-height: 400px; + margin-bottom: 20px; + .statics-header { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #eee; + padding-bottom: 10px; + margin-bottom: 20px; + .title { + font-size: 16px; + font-weight: bold; + } + } + .statics-part { + .statics-content { + padding: 0 20px; + .chart-area { + .chart-theme { + font-size: 14px; + color: #999; + } + .sum { + padding: 14px 0 10px; + .val { + font-size: 24px; + padding-left: 10px; + margin-right: 20px; + } + .ratio { + font-size: 14px; + color: #999; + } + } + } + } + } .lt { text-align: left; flex: 1; - padding-right: 20px; + padding-right: 40px; } .rt { text-align: left; @@ -426,6 +613,19 @@ } } } + .flex-box { + .lt, + .rt, + .gt { + flex: 1; + width: auto; + //padding: 0 20px; + } + } + .tab-swiper { + width: calc(100vw - 340px); + margin-bottom: 20px; + } } } } diff --git a/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue index afcc4d9..15ceb0c 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue @@ -69,7 +69,7 @@ data () { return { publicPath: process.env.BASE_URL, - activeIndex: 'searchForVideoAnalyze' + activeIndex: 'guideIndex' } }, mounted(){ diff --git a/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue b/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue new file mode 100644 index 0000000..2c7e937 --- /dev/null +++ b/src/pages/shuohuangMonitorAnalyze/components/swipeTabs.vue @@ -0,0 +1,181 @@ +<template> + <div class="swipe-tabs"> + <swiper :options="swiperOption" ref="swiperTabs"> + <swiper-slide v-for="slide in slides" :key="slide.id"> + <div class="slide-tab" :class="{'act':actSlide==slide.id}" @click="checkSlide(slide)"> + <div class="title">{{slide.name}}</div> + <div class="flex-box"> + <div> + <div class="dimension">杩濊鐜�</div> + <div class="dimension-val">{{slide.ratio}}</div> + </div> + <div style="margin-left: 60px;"> + <Pie :options="optOfPie(slide)" :pieW="70" :pieH="70"></Pie> + </div> + </div> + </div> + </swiper-slide> + </swiper> + <div class="swiper-scrollbar"></div> + <div class="swiper-button-next"> + <div class="icon-btn"> + <i class="iconfont iconyou1"></i> + </div> + </div> + <div class="swiper-button-prev"> + <div class="icon-btn"> + <i class="iconfont iconzuo"></i> + </div> + </div> + <div class="swiper-pagination"></div> + </div> +</template> + +<script> +import Pie from './charts/pie'; +export default { + components: { Pie }, + data () { + return { + swiperOption: { + spaceBetween: 0, + //initialSlide: 0, + direction: 'horizontal', + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev' + }, + slidesPerView: 5, + observer: true, + observeParents: true, + }, + slides: [ + { id: 'jlfgs', name: '鏈洪噺鍒嗗叕鍙�', ratio: 82, }, + { id: 'ztyj', name: '涓搧涓�灞�', ratio: 78, }, + { id: 'ztsj', name: '涓搧涓夊眬', ratio: 45 }, + { id: 'ztsij', name: '涓搧鍥涘眬', ratio: 30 }, + { id: 'jtjw', name: '浜搧鏈哄姟', ratio: 30 }, + { id: 'ztwj', name: '涓搧浜斿眬', ratio: 30 }, + { id: 'jgjw', name: '浜珮鏈哄姟', ratio: 30 }, + ], + actSlide: '' + } + }, + mounted () { + console.log('swip mounte'); + this.actSlide = this.slides[0].id; + + }, + methods: { + optOfPie (slide) { + return { + tooltip: { + trigger: 'item', + formatter: '{a}<br/>{b}:{c} ({d}%)' + }, + // legend: { + // orient: 'vertical', + // right: 10, + // y: 'center', + // data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'] + // }, + series: [ + { + name: '杩濊鐜�', + type: 'pie', + color: ['#18bfff', '#e9f6fb'], + radius: ['60%', '90%'], + //center: ['40%','60%'], + tooltip: { + show: false + }, + avoidLabelOverlap: false, + label: { + show: false, + position: 'center' + }, + // emphasis: { + // label: { + // show: true, + // fontSize: '30', + // fontWeight: 'bold' + // } + // }, + hoverAnimation: false, + labelLine: { + show: false + }, + data: [ + { value: slide.ratio, name: '' }, + { value: 100 - slide.ratio, name: '' }, + + ] + } + ] + } + }, + checkSlide (slide) { + this.actSlide = slide.id; + } + } +} +</script> + +<style lang="scss"> +.swipe-tabs { + position: relative; + padding: 0 30px; + + .swiper-container { + border-left: 1px solid #eee; + border-right: 1px solid #eee; + } + .slide-tab { + cursor: pointer; + border-top: 2px solid transparent; + padding: 20px; + text-align: left; + &.act { + border-color: #409eff; + } + .title { + font-size: 16px; + color: #666; + } + .dimension { + color: #999; + margin: 10px 0; + } + .dimension-val { + color: #555; + font-size: 28px; + } + } + .swiper-button-prev, + .swiper-button-next { + cursor: pointer; + // width: 40px; + // height: 40px; + position: absolute; + background: transparent; + top: 50%; + margin-top: -20px; + z-index: 999; + //border-radius: 4em; + outline: none; + .icon-btn { + font-size: 24px; + color: #666; + text-align: center; + line-height: 38px; + cursor: pointer; + } + } + .swiper-button-next { + right: -10px; + } + .swiper-button-prev { + left: -10px; + } +} +</style> \ No newline at end of file diff --git a/src/pages/shuohuangMonitorAnalyze/index/App.vue b/src/pages/shuohuangMonitorAnalyze/index/App.vue index c6d0831..bf0da94 100644 --- a/src/pages/shuohuangMonitorAnalyze/index/App.vue +++ b/src/pages/shuohuangMonitorAnalyze/index/App.vue @@ -38,7 +38,7 @@ data () { return { isCollapse: false, - actPage: 'searchForVideoAnalyze', + actPage: 'guideIndex', } }, mounted () { diff --git a/src/pages/shuohuangMonitorAnalyze/index/main.ts b/src/pages/shuohuangMonitorAnalyze/index/main.ts index 4297dbe..c67de5b 100644 --- a/src/pages/shuohuangMonitorAnalyze/index/main.ts +++ b/src/pages/shuohuangMonitorAnalyze/index/main.ts @@ -6,7 +6,10 @@ import echarts from 'echarts'; import 'element-ui/lib/theme-chalk/index.css'; import "@/assets/css/element-variables.scss"; +import VueAwesomeSwiper from "vue-awesome-swiper"; +import "swiper/dist/css/swiper.css"; Vue.use(ElementUI); +Vue.use(VueAwesomeSwiper as any); Vue.mixin(Mixin); Vue.prototype.$moment = moment; Vue.prototype.$echarts = echarts; -- Gitblit v1.8.0