<template>
<div class="app-container">
<el-row class="form-wrap">
<el-form :inline="true" size="small" label-width="120px">
<el-form-item label="车载">
<el-select filterable v-model="formParam.deviceId" @change="changeWeightConfig">
<el-option v-for="item in deviceList" :value="item.id" :label="item.name" :key="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="上传车载硬件数据">
<el-upload
class="upload-hardware"
ref="hardware-upload"
action="/standard/log/analyse"
:headers="upload.headers"
:on-success="uploadSuccess"
:on-error="uploadError"
:auto-upload="false"
:limit="1">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</el-upload>
</el-form-item>
</el-form>
</el-row>
<el-row style="margin-top: 40px;">
<v-chart :options="option" style="width:100%; height:600px"/>
</el-row>
</div>
</template>
<script>
import _ from 'lodash'
import ECharts from 'vue-echarts'
import 'echarts'
import * as auth from '@/utils/auth'
import { list } from '@/api/basis/car/car.js'
export default {
components: {
'v-chart': ECharts
},
data() {
return {
option: {
title: {
text: '硬件数据监控'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false
}
},
legend: {
data: ['X坐标', 'Y坐标', 'Z坐标']
},
xAxis: {
axisLabel: {
rotate: -30,
fontSize: 9
},
data: []
},
yAxis: [{
name: '坐标(mm)',
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
},
min: 0
}, {
name: '重量',
boundaryGap: [0, '100%'],
type: 'value',
splitLine: {
show: false
},
min: 0
}],
dataZoom: [{
type: 'inside',
xAxisIndex: 0
}, {
type: 'slider',
xAxisIndex: 0,
height: 20,
bottom: 5,
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '120%'
}],
series: [{
name: 'X坐标',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: []
}, {
name: 'Y坐标',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: []
}, {
name: 'Z坐标',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: []
}, {
name: '重量',
type: 'line',
showSymbol: false,
hoverAnimation: false,
yAxisIndex: 1,
data: [],
markLine: {
silent: true,
data: [{
yAxis: 920
}, {
yAxis: 1000
}]
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(88,160,253,1)'
}, {
offset: 0.5, color: 'rgba(88,160,253,0.7)'
}, {
offset: 1, color: 'rgba(88,160,253,0)'
}]
}
}
},
lineStyle: {
normal: {
color: 'rgba(88,160,253,1)'
}
}
}]
},
formParam: {
deviceId: ''
},
upload: {
headers: {
'x-access-token': auth.getToken()
}
},
deviceList: []
}
},
created() {
this.getDeviceList()
},
methods: {
changeWeightConfig() {
const device = _.find(this.deviceList, { 'id': this.formParam.deviceId })
const config = JSON.parse(device.config)
const nullWeight = config.nullWeight
const upWeight = config.nullWeight * config.upWeightPercent
const weight = _.find(this.option.series, (s) => s.name === '重量')
weight.markLine.data = [{ yAxis: nullWeight }, { yAxis: upWeight }]
},
async getDeviceList() {
try {
const { datas } = await list({})
this.deviceList = datas
} catch (e) {
console.error(e)
}
},
submitUpload() {
this.$refs['hardware-upload'].submit()
},
uploadSuccess(resp, file, fileList) {
console.log(resp)
this.option.xAxis.data = resp.d
_.find(this.option.series, (s) => s.name === 'X坐标').data = resp.x
_.find(this.option.series, (s) => s.name === 'Y坐标').data = resp.y
_.find(this.option.series, (s) => s.name === 'Z坐标').data = resp.z
_.find(this.option.series, (s) => s.name === '重量').data = resp.w
},
uploadError(err) {
const resp = JSON.parse(err.message)
this.$notify({
title: '失败',
message: '上传失败:' + resp.returnMsg,
type: 'error',
duration: 2000
})
}
}
}
</script>
-------------------------
/**
* 根据用户的权限菜单数组 生成对应的菜单
* @param moduleList
* @returns {Array}
*/
export function genAsyncRouter(moduleList) {
const routers = []
moduleList.forEach(module => {
const router = {
path: '/' + module.moduleCode,
component: Layout,
name: module.moduleName0,
meta: { title: module.moduleName0, icon: 'example', code: module.moduleCode }
}
if (module.children && module.children.length) {
router.children = []
module.children.forEach(cModule => {
const suRouter = {
path: cModule.moduleCode,
name: cModule.moduleCode,
meta: { title: cModule.moduleName0, icon: 'table', code: cModule.moduleCode }
}
// 设置菜单类型
if (cModule.functionType === 1) {
suRouter.path = cModule.url
suRouter.type = 'report'
} else {
if (viewComponents[cModule.moduleCode]) {
suRouter.component = viewComponents[cModule.moduleCode]
} else {
suRouter.redirect = '/404'
}
}
// 设置隐藏
if (cModule.visible === 0) {
suRouter.hidden = true
}
router.children.push(suRouter)
})
}
routers.push(router)
})
// 最后加上 404 页面
routers.push({ path: '*', redirect: '/404', hidden: true })
return routers
}
export default new Router({
// mode: 'history', //后端支持可开
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})