From 1af0c937466d8f8df26aaddd72dbd702dd0f3033 Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期二, 19 一月 2021 15:59:52 +0800 Subject: [PATCH] 轨迹图查询方法更新,朔黄添加首页 --- src/pages/shuohuangMonitorAnalyze/index/App.vue | 4 src/pages/shuohuangMonitorAnalyze/components/charts/bar.vue | 33 +++ src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue | 32 +++ src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 367 ++++++++++++++++++++++++++++++++++++ src/pages/shuohuangMonitorAnalyze/components/timeShortcut.vue | 83 ++++++++ src/pages/shuohuangMonitorAnalyze/index/main.ts | 3 src/pages/shuohuangMonitorAnalyze/components/leftNav.vue | 2 src/pages/shuohuangMonitorAnalyze/components/memberManage.vue | 55 ++-- src/pages/panoramicView/components/TracePlot.vue | 4 9 files changed, 551 insertions(+), 32 deletions(-) diff --git a/src/pages/panoramicView/components/TracePlot.vue b/src/pages/panoramicView/components/TracePlot.vue index 966368a..bf9d33e 100644 --- a/src/pages/panoramicView/components/TracePlot.vue +++ b/src/pages/panoramicView/components/TracePlot.vue @@ -12,7 +12,7 @@ value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00','23:59:59']" ></el-date-picker> - <el-button @click="searchData" size="small" type="primary" class="btn-search">鏌� 璇�</el-button> + <el-button @click="checkTime" size="small" type="primary" class="btn-search">鏌� 璇�</el-button> </div> <div class="check-target" :style="{height:fixedH+'px'}"> <div class="controller"> @@ -118,7 +118,6 @@ }, methods: { checkTime () { - debugger if (!this.searchTime) { this.$notify({ type: 'warning', @@ -148,6 +147,7 @@ treeNodes: [], isAll: false }; + clearInterval(this.timer); getSearchList(param).then(res => { _this.actObjs = []; if (!res.data.datalist) { diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/bar.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/bar.vue new file mode 100644 index 0000000..f8062cb --- /dev/null +++ b/src/pages/shuohuangMonitorAnalyze/components/charts/bar.vue @@ -0,0 +1,33 @@ +<template> + <div ref="barChart" style="width: 100%; height: 100%;"></div> +</template> + +<script> +export default { + data () { + return { + + } + }, + props: { + options:{ + type: Object, + } + }, + mounted(){ + this.initBar(); + }, + methods: { + initBar(){ + this.$nextTick(()=>{ + let dom = this.$echarts.init(this.$refs['barChart']); + dom.setOption(this.options); + }) + + } + } +} +</script> + +<style > +</style> \ No newline at end of file diff --git a/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue b/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue new file mode 100644 index 0000000..c4f767e --- /dev/null +++ b/src/pages/shuohuangMonitorAnalyze/components/charts/pie.vue @@ -0,0 +1,32 @@ +<template> + <div ref="pieChart" style="width: 100%; height: 100%;"></div> +</template> + +<script> +export default { + data () { + return { + + } + }, + props: { + options: { + type: Object + } + }, + mounted () { + this.initPie(); + }, + methods: { + initPie () { + this.$nextTick(() => { + let dom = this.$echarts.init(this.$refs['pieChart']); + dom.setOption(this.options); + }) + } + } +} +</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 new file mode 100644 index 0000000..40c81ac --- /dev/null +++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue @@ -0,0 +1,367 @@ +<template> + <div class="guide-index"> + <el-tabs class="tab-menu" v-model="actCardTab"> + <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="card-view"> + <el-card> + <div class="title"> + <span class="lt">鏈懆闅愭偅鏁伴噺</span> + <span class="rgt"> + <i class="el-icon-warning-outline"></i> + </span> + </div> + <div class="val">265</div> + <div class="trend week-day-ratio"> + <div class="week-ratio"> + <span>鍛ㄥ悓姣�</span> + <span class="triangle green"></span> + <span>12%</span> + </div> + <div class="day-ratio"> + <span>鏃ョ幆姣�</span> + <span class="triangle red"></span> + <span>11%</span> + </div> + </div> + <div class="devide"></div> + <div class="detail"> + <div class="name">鏃ュ潎闅愭偅浜嬩欢</div> + <div class="specific">28</div> + </div> + </el-card> + <el-card> + <div class="title"> + <span class="lt">鏈懆鍒嗘瀽杞︽閲�</span> + <span class="rgt"> + <i class="el-icon-warning-outline"></i> + </span> + </div> + <div class="val">8846</div> + <div class="trend"></div> + <div class="devide"></div> + <div class="detail"> + <div class="name">鏃ュ潎鍒嗘瀽閲�</div> + <div class="specific">128</div> + </div> + </el-card> + <el-card> + <div class="title"> + <span class="lt">杞偍鎬婚噺</span> + <span class="rgt"> + <i class="el-icon-warning-outline"></i> + </span> + </div> + <div class="val">8846</div> + <div class="trend"></div> + <div class="devide"></div> + <div class="detail"> + <div class="name">杞崲鐜�</div> + <div class="specific">60%</div> + </div> + </el-card> + <el-card> + <div class="title"> + <span class="lt">浠诲姟瀹屾垚姣斾緥</span> + <span class="rgt"> + <i class="el-icon-warning-outline"></i> + </span> + </div> + <div class="val">78%</div> + <div class="trend"></div> + <div class="devide"></div> + <div class="detail week-day-ratio"> + <div class="week-ratio"> + <span>鍛ㄥ悓姣�</span> + <span class="triangle green"></span> + <span>12%</span> + </div> + <div class="day-ratio"> + <span>鏃ョ幆姣�</span> + <span class="triangle red"></span> + <span>11%</span> + </div> + </div> + </el-card> + </div> + <div class="part"> + <div class="header-width-tab"> + <el-tabs class="tab-menu" v-model="hidDangerTab"> + <el-tab-pane label="闅愭偅浜嬩欢缁熻" name="hidDanderStatistic"></el-tab-pane> + <el-tab-pane label="闅愭偅浜嬩欢瓒嬪娍" name="hidDanderTrend"></el-tab-pane> + </el-tabs> + <div class="rt"> + <time-shortcut @actPickerChange="timeShortChange"></time-shortcut> + <el-date-picker + v-model="searchTime" + type="datetimerange" + size="small" + range-separator="鑷�" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + align="right" + ></el-date-picker> + </div> + </div> + <div class="statics"> + <div class="lt"> + <el-radio-group v-model="actHidDanderChart" size="mini"> + <el-radio-button label="bar">鏌辩姸鍥�</el-radio-button> + <el-radio-button label="pie">楗煎浘</el-radio-button> + </el-radio-group> + <Bar :options="optionsOfHidDangerBar" v-show="actHidDanderChart=='bar'"></Bar> + <Pie :options="optionsOfHidDangerPie" v-show="actHidDanderChart=='pie'"></Pie> + </div> + <div class="rt"> + <div class="header"> + <span class="title">閮ㄩ棬闅愭偅鏁伴噺鎺掑悕</span> + <el-select v-if="hidDangerTab=='hidDanderStatistic'" size="small"> + <el-option>涓搧涓�灞�</el-option> + </el-select> + </div> + <div class="rank-list"> + <div class="rank-item"> + <span class="rank-index">1</span> + <span class="name">鏈鸿締鍒嗗叕鍙�</span> + <span class="val">323,234</span> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</template> + +<script> +import timeShortcut from './timeShortcut'; +import Bar from './charts/bar'; +import Pie from './charts/pie'; +export default { + components: { timeShortcut, Bar, Pie }, + data () { + return { + actCardTab: 'dataStatistic', + hidDangerTab: 'hidDanderStatistic', + searchTime: [], + actHidDanderChart: 'bar', + optionsOfHidDangerBar: { + color: ['#9ed2f5'], + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + }, + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'], + axisTick: { + alignWithLabel: true + } + } + ], + yAxis: [ + { type: 'value' } + ], + series: [ + { + name: '鏁伴噺', + type: 'bar', + barWidth: '24%', + data: [270, 500, 300, 430, 620, 540] + } + ] + }, + optionsOfHidDangerPie: { + tooltip:{ + trigger: 'item', + formatter: '{a}<br/>{b}:{c} ({d}%)' + }, + legend: { + orient: 'vertical', + left: 10, + data: ['鏈福绗�', '鏈墜姣�', '鏈懠鍞�', '杩愯涓潯瑙�', '鏈鏌�', '鏈簲绛�'] + }, + series: [ + { + name:'寮傚父浜嬩欢', + type:'pie', + color: [], + radius: ['50%','70%'], + avoidLabelOverlap: false, + label:{ + show: false, + position: 'center' + }, + emphasis:{ + label:{ + show: true, + fontSize: '30', + fontWeight: 'bold' + } + }, + labelLine:{ + show: false + }, + data: [ + {value: 270,name:'鏈福绗�'}, + {value: 500,name:'鏈墜姣�'}, + {value: 300,name:'鏈懠鍞�'}, + {value: 430,name:'杩愯涓潯瑙�'}, + {value: 620,name:'鏈鏌�'}, + {value: 540,name:'鏈簲绛�'}, + ] + } + ] + } + } + }, + methods: { + timeShortChange (time) { + debugger + }, + } +} +</script> + +<style lang="scss"> +.guide-index { + .triangle { + width: 0; + height: 0; + border: 6px solid #ccc; + &.green { + border-color: #64de27; + border-top-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + } + &.red { + border-color: #f5222d; + border-bottom-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + } + } + .tab-menu { + .el-tabs__item { + padding: 0 30px !important; + height: 60px; + line-height: 60px; + } + } + .tab-content { + padding: 20px; + .card-view { + display: flex; + margin-right: -20px; + .el-card { + flex: 1; + margin-right: 20px; + text-align: left; + .el-card__body { + padding-bottom: 13px; + } + .title { + color: #999; + font-size: 14px; + display: flex; + justify-content: space-between; + } + .val { + font-size: 30px; + color: #000; + margin: 10px 0 14px; + } + .trend { + height: 40px; + color: #999; + } + .week-day-ratio { + display: flex; + align-items: center; + .week-ratio, + .day-ratio { + display: flex; + align-items: center; + } + } + .devide { + height: 1px; + background-color: #eee; + margin: 10px 0; + } + .detail { + display: flex; + } + } + } + .part { + padding: 10px 0; + .header-width-tab { + display: flex; + justify-content: space-between; + .rt { + display: flex; + padding-top: 20px; + } + } + .statics { + display: flex; + padding: 0 10px; + min-height: 400px; + .lt { + text-align: left; + flex: 1; + padding-right: 20px; + } + .rt { + text-align: left; + width: 400px; + .header { + display: flex; + .title { + font-size: 16px; + margin-right: 20px; + font-weight: bold; + } + } + .rank-list{ + padding: 10px 0; + .rank-item{ + height: 36px; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 14px; + color: #666; + .rank-index{ + width: 20px; + height: 20px; + line-height: 20px; + background: #eee; + color: #666; + border-radius: 50%; + text-align: center; + } + .name{ + width:200px; + } + } + } + } + } + } + } +} +</style> \ No newline at end of file diff --git a/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue index c1c0db1..afcc4d9 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/leftNav.vue @@ -12,7 +12,7 @@ :default-active="activeIndex" @select="handleSelect" > - <el-menu-item index="1"> + <el-menu-item index="guideIndex"> <i class="iconfont iconshouye"></i> <span slot="title">棣栭〉</span> </el-menu-item> diff --git a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue index 994abc3..4f1ca37 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue @@ -11,17 +11,18 @@ :data="treeData" node-key="id" default-expand-all - @node-click="checkNode" :expand-on-click-node="false" :check-on-click-node="true" :highlight-current="true" + @node-click="checkNode" + @node-contextmenu="nodeContextMenu" ></el-tree> <div class="menuList" v-show="showMenu" :style="{top:menuTop+'px',left:menuLeft+'px'}"> <ul> <li>鍒涘缓鍚岀骇鑺傜偣</li> <li>鍒犻櫎鑺傜偣</li> <li>閲嶅懡鍚嶈妭鐐�</li> - <li>鍏抽棴</li> + <li @click="showMenu = false">鍏抽棴</li> </ul> </div> </div> @@ -194,16 +195,17 @@ <div> <p class="tip"> *璇锋彁鍓嶆牴鎹枃浠舵ā鏉夸腑鐨勮姹傛敹闆嗕汉鍛樹俊鎭紝鍦ㄤ竴涓枃浠跺す涓瓨鏀句汉鍛樼収鐗囧拰EXCEL鏂囦欢 - (<a href="javascript:;" @mouseover="showDemo=true" @mouseout="showDemo=false">绀轰緥</a>),鐐瑰嚮 + ( + <a href="javascript:;" @mouseover="showDemo=true" @mouseout="showDemo=false">绀轰緥</a>),鐐瑰嚮 <a href="javascript:;">涓嬭浇妯℃澘.excel</a> - <img class="tip-demo" v-if="showDemo" :src="`${publicPath}images/shuohuang/tip.jpg`" alt=""> + <img class="tip-demo" v-if="showDemo" :src="`${publicPath}images/shuohuang/tip.jpg`" alt /> </p> <div class="flex-box"> <label>涓婁紶鏂囦欢:</label> - <el-button size="mini" type="primary" @click="uploadDirectoryTrigger" >鐐瑰嚮涓婁紶</el-button> - <input ref="directoryInput" @change="importDirectory" hidden type="file" webkitdirectory > + <el-button size="mini" type="primary" @click="uploadDirectoryTrigger">鐐瑰嚮涓婁紶</el-button> + <input ref="directoryInput" @change="importDirectory" hidden type="file" webkitdirectory /> <!-- <el-button size="mini" type="primary" @click="uploadExeclTrigger" style="margin-left:10px;">鐐瑰嚮涓婁紶Excel</el-button> - <input ref="excelInput" @change="importExecl" hidden type="file" accept=".xlsx"> --> + <input ref="excelInput" @change="importExecl" hidden type="file" accept=".xlsx">--> <!-- <el-upload class="upload-demo batch-upload" action="https://jsonplaceholder.typicode.com/posts/" @@ -216,7 +218,7 @@ > <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button> <div slot="tip" class="el-upload__tip"></div> - </el-upload> --> + </el-upload>--> </div> <el-table class="thbg" :data="batchImportTableData" fit> <el-table-column type="index" label="搴忓彿"></el-table-column> @@ -288,7 +290,12 @@ }, methods: { - + nodeContextMenu (e, data, node, comp) { + debugger + this.showMenu = true; + this.menuTop = e.pageY; + this.menuLeft = e.pageX; + }, checkOrgNode (a, b, c) { this.checkedOrg = a.id }, @@ -392,7 +399,7 @@ uploadPic () { }, - uploadDirectoryTrigger(){ + uploadDirectoryTrigger () { this.$refs['directoryInput'].click(); }, // uploadExeclTrigger(){ @@ -401,13 +408,13 @@ importDirectory () { //this.$refs['directoryInput'].files //鏂囦欢澶筸ap let formData = new FormData; - formData.append('File',this.$refs['directoryInput'].files) + formData.append('File', this.$refs['directoryInput'].files) debugger // uploadDirectory(formData).then(res=>{ // debugger - + // }) - + }, handleRemove () { @@ -429,14 +436,7 @@ this.$set(this.memberEditForm, 'Surface', res.data) }) }, - openMenuList (t, l, frame) { - this.showMenu = true; - this.menuTop = t; - this.menuLeft = l; - }, - closeMenuList () { - this.showMenu = false; - }, + deepNodeChildren (node) { if (node.ChildDept && node.ChildDept.length > 0) { return node.ChildDept.map(child => { @@ -575,15 +575,15 @@ } } } - .batch-import-dialog{ - .el-dialog__body{ + .batch-import-dialog { + .el-dialog__body { padding: 14px 20px; } - .tip{ + .tip { text-align: left; margin-bottom: 10px; position: relative; - .tip-demo{ + .tip-demo { position: absolute; width: 530px; z-index: 1000; @@ -598,7 +598,8 @@ z-index: 100; width: 180px; text-align: left; - border: 1px solid #ccc; + border: 1px solid #ddd; + box-shadow: 4px 4px 3px 0px rgba(0, 0, 0, 0.1); } .menuList li { line-height: 28px; @@ -607,7 +608,7 @@ background: #fff; } .menuList li:hover { - background: rgba(152, 170, 190, 0.7); + background: #ecf0fc; } .right { padding-left: 20px; diff --git a/src/pages/shuohuangMonitorAnalyze/components/timeShortcut.vue b/src/pages/shuohuangMonitorAnalyze/components/timeShortcut.vue new file mode 100644 index 0000000..cabb2cd --- /dev/null +++ b/src/pages/shuohuangMonitorAnalyze/components/timeShortcut.vue @@ -0,0 +1,83 @@ +<template> + <div class="time-shortcut"> + <ul> + <li :class="{act:actPicker=='today'}" @click="checkToday">浠婃棩</li> + <li :class="{act:actPicker=='week'}" @click="checkWeek">鏈懆</li> + <li :class="{act:actPicker=='month'}" @click="checkMonth">鏈湀</li> + <li :class="{act:actPicker=='year'}" @click="checkYear">鍏ㄥ勾</li> + </ul> + </div> +</template> + +<script> +export default { + data () { + return { + actPicker: 'today', + } + }, + watch: { + actPicker (n, o) { + let tempArr = []; + if (n == 'today') { + tempArr = this.checkToday() + } else if (n == 'week') { + tempArr = this.checkWeek(); + } else if (n == 'month') { + tempArr = this.checkMonth(); + } else if (n == 'year') { + tempArr = this.checkYear(); + } + this.$emit('actPickerChange', tempArr) + } + }, + methods: { + checkToday () { + this.actPicker = 'today'; + const start = new Date(); + const end = new Date(); + start.setHours(0, 0, 0); + return [start, end]; + }, + checkWeek () { + this.actPicker = 'week'; + const start = new Date(); + const end = new Date(); + start.setDate(start.getDate() - start.getDay() + 1); + start.setHours(0, 0, 0); + return [start, end]; + }, + checkMonth () { + this.actPicker = 'month'; + const start = new Date(); + const end = new Date(); + start.setDate(1); + start.setHours(0, 0, 0); + return [start, end]; + }, + checkYear () { + this.actPicker = 'year'; + const start = new Date(new Date().getFullYear(), 0); + const end = new Date(); + start.setHours(0, 0, 0); + return [start, end]; + } + } +} +</script> + +<style lang="scss"> +.time-shortcut { + ul { + display: flex; + li { + padding: 10px 14px; + font-size: 14px; + cursor: pointer; + &.act { + color: #409eff; + } + } + } +} +</style> \ No newline at end of file diff --git a/src/pages/shuohuangMonitorAnalyze/index/App.vue b/src/pages/shuohuangMonitorAnalyze/index/App.vue index d9c50e9..c6d0831 100644 --- a/src/pages/shuohuangMonitorAnalyze/index/App.vue +++ b/src/pages/shuohuangMonitorAnalyze/index/App.vue @@ -17,6 +17,7 @@ <transferMemo v-if="actPage=='transferMemo'"></transferMemo> <transferDeviceManage v-if="actPage=='transferDeviceManage'"></transferDeviceManage> <configManage v-if="actPage=='configManage'"></configManage> + <guideIndex v-if="actPage=='guideIndex'"></guideIndex> </div> </div> </div> @@ -31,8 +32,9 @@ import TransferMemo from '../components/transferMemo'; import TransferDeviceManage from '../components/transferDeviceManage'; import ConfigManage from '../components/configManage'; +import GuideIndex from '../components/guideIndex'; export default { - components: { LeftNav, TopNav, SearchForVideoAnalyze, MemberManage, TaskManage, TransferMemo, TransferDeviceManage, ConfigManage }, + components: { LeftNav, TopNav, SearchForVideoAnalyze, MemberManage, TaskManage, TransferMemo, TransferDeviceManage, ConfigManage, GuideIndex }, data () { return { isCollapse: false, diff --git a/src/pages/shuohuangMonitorAnalyze/index/main.ts b/src/pages/shuohuangMonitorAnalyze/index/main.ts index ddd090c..4297dbe 100644 --- a/src/pages/shuohuangMonitorAnalyze/index/main.ts +++ b/src/pages/shuohuangMonitorAnalyze/index/main.ts @@ -3,12 +3,13 @@ import Mixin from "./mixins"; import ElementUI from 'element-ui'; import moment from 'moment'; - +import echarts from 'echarts'; import 'element-ui/lib/theme-chalk/index.css'; import "@/assets/css/element-variables.scss"; Vue.use(ElementUI); Vue.mixin(Mixin); Vue.prototype.$moment = moment; +Vue.prototype.$echarts = echarts; new Vue({ el: '#app', render: h => h(App) -- Gitblit v1.8.0