【无标题】

<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

})