合并了第5组的前端，优化了项目结构

package.json

@@ -7,13 +7,21 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@antv/data-set": "^0.11.8",
+    "ant-design-vue": "^1.7.8",
     "axios": "^0.21.4",
     "core-js": "^2.6.5",
+    "echarts": "^5.2.2",
+    "less-loader": "5.0.0",
     "element-ui": "^2.15.2",
     "node-modules": "^1.0.1",
     "vue": "^2.6.10",
     "vue-axios": "^3.3.7",
     "vue-cookie": "^1.1.4",
+    "vue-codemirror": "^4.0.6",
+    "vue-echarts": "^6.0.0",
+    "vue-infinite-scroll": "^2.0.2",
+    "vue-loader": "^15.9.8",
     "vue-drag-resize": "^1.5.4",
     "vue-draggable-resizable": "^2.3.0",
     "vue-router": "^3.0.3",

src/components/transportation/configImg/card/ChartCard.vue

@@ -0,0 +1,78 @@
+<template>
+  <a-card :="lloadingoading" :body-style="{padding: '20px 24px 8px'}" :bordered="false">
+    <div class="chart-card-header">
+      <div class="meta">
+        <span class="chart-card-title">{{title}}</span>
+        <span class="chart-card-action">
+        <slot name="action"></slot>
+      </span>
+      </div>
+      <div class="total"><span>{{total}}</span></div>
+    </div>
+    <div class="chart-card-content">
+      <div class="content-fix">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="chart-card-footer">
+      <slot name="footer"></slot>
+    </div>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'ChartCard',
+  props: ['title', 'total', 'loading']
+}
+</script>
+
+<style scoped>
+  .chart-card-header{
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+  }
+  .chart-card-header .meta{
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    color: '#F56F53';
+    font-size: 16px;
+    line-height: 16px;
+  }
+  .chart-card-action{
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  .total {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    margin-top: 0px;
+    margin-bottom: 0;
+    font-size: 30px;
+    line-height: 38px;
+    height: 80px;
+  }
+  .chart-card-footer{
+    /* border-top: 1px solid @border-color-base; */
+    padding-top: 0px;
+    margin-top: 0px;
+  }
+  .chart-card-content{
+    margin-bottom: 20px;
+    position: relative;
+    height: 200px;
+    width: 100%;
+  }
+  .chart-card-content .content-fix{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+</style>

src/components/transportation/configImg/chart/Bar.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="bar">
+    <h4>{{title}}</h4>
+    <div class="chart">
+      <v-chart :force-fit="true" height="312" :data="data" :padding="[24, 0, 0, 0]">
+        <v-tooltip />
+        <v-axis />
+        <v-bar position="x*y"/>
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+
+const data = []
+for (let i = 1; i < 12; i += 1) {
+  data.push({
+    x: `${i + 1}月`,
+    y: Math.floor(Math.random() * 1000) + 200
+  })
+}
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+export default {
+  name: 'Bar',
+  props: ['title'],
+  data () {
+    return {
+      data,
+      scale,
+      tooltip
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .bar{
+    position: relative;
+    .chart{
+    }
+  }
+</style>

src/components/transportation/configImg/chart/MiniArea.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="mini-chart">
+    <div class="chart-content" :style="{height: 46}">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
+        <v-tooltip />
+        <v-smooth-area position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import {format} from 'date-fns'
+
+const data = []
+const beginDay = new Date().getTime()
+
+const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
+for (let i = 0; i < fakeY.length; i += 1) {
+  data.push({
+    x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
+    y: fakeY[i]
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+
+export default {
+  name: 'MiniArea',
+  data () {
+    return {
+      data,
+      scale,
+      tooltip,
+      height: 100
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .mini-chart {
+    position: relative;
+    width: 100%
+  }
+  .mini-chart .chart-content{
+    position: absolute;
+    bottom: -28px;
+    width: 100%;
+  }
+</style>

src/components/transportation/configImg/chart/MiniBar.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="mini-chart">
+    <div class="chart-content" :style="{height: 46}">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
+        <v-tooltip />
+        <v-bar position="x*y" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import {format} from 'date-fns'
+
+const data = []
+const beginDay = new Date().getTime()
+
+const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
+for (let i = 1; i < fakeY.length; i += 1) {
+  data.push({
+    x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
+    y: fakeY[i]
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+
+export default {
+  name: 'MiniBar',
+  data () {
+    return {
+      data,
+      scale,
+      tooltip,
+      height: 100
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "index.less";
+</style>

src/components/transportation/configImg/chart/MiniProgress.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="mini-progress">
+    <a-tooltip :title="'目标值：' + target + '%'">
+      <div class="target" :style="{left: target + '%'}">
+        <span :style="{backgroundColor: color}" />
+        <span :style="{backgroundColor: color}" />
+      </div>
+    </a-tooltip>
+    <div class="wrap">
+      <div class="progress" :style="{backgroundColor: color, width: percent + '%', height: height}" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MiniProgress',
+  props: ['target', 'color', 'percent', 'height']
+}
+</script>
+
+<style lang="less"  scoped>
+  .mini-progress {
+    padding: 5px 0;
+    position: relative;
+    width: 100%;
+    .wrap {
+      background-color: @layout-bg-color;
+      position: relative;
+    }
+    .progress {
+      transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
+      border-radius: 1px 0 0 1px;
+      background-color: #13C2C2;
+      width: 0;
+      height: 100%;
+    }
+    .target {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      span {
+        border-radius: 100px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 4px;
+        width: 2px;
+      }
+      span:last-child {
+        top: auto;
+        bottom: 0;
+      }
+    }
+  }
+</style>

src/components/transportation/configImg/chart/Radar.vue

@@ -0,0 +1,80 @@
+<template>
+    <v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
+      <v-tooltip  />
+      <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
+      <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
+      <v-legend dataKey="user" marker="circle" :offset="30" />
+      <v-coord type="polar" radius="0.8" />
+      <v-line position="item*score" color="user" :size="2" />
+      <v-point position="item*score" color="user" :size="4" shape="circle" />
+    </v-chart>
+</template>
+
+<script>
+const DataSet = require('@antv/data-set')
+
+const sourceData = [
+  {item: '引用', a: 70, b: 30, c: 40},
+  {item: '口碑', a: 60, b: 70, c: 40},
+  {item: '产量', a: 50, b: 60, c: 40},
+  {item: '贡献', a: 40, b: 50, c: 40},
+  {item: '热度', a: 60, b: 70, c: 40},
+  {item: '引用', a: 70, b: 50, c: 40}
+]
+
+const dv = new DataSet.View().source(sourceData)
+dv.transform({
+  type: 'fold',
+  fields: ['a', 'b', 'c'],
+  key: 'user',
+  value: 'score'
+})
+
+const scale = [{
+  dataKey: 'score',
+  min: 0,
+  max: 80
+}]
+
+const data = dv.rows
+
+const axis1Opts = {
+  dataKey: 'item',
+  line: null,
+  tickLine: null,
+  grid: {
+    lineStyle: {
+      lineDash: null
+    },
+    hideFirstLine: false
+  }
+}
+const axis2Opts = {
+  dataKey: 'score',
+  line: null,
+  tickLine: null,
+  grid: {
+    type: 'polygon',
+    lineStyle: {
+      lineDash: null
+    }
+  }
+}
+
+export default {
+  name: 'Radar',
+  data () {
+    return {
+      sourceData,
+      data,
+      axis1Opts,
+      axis2Opts,
+      scale
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/transportation/configImg/chart/RankingList.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="rank">
+    <h4 class="title">{{title}}</h4>
+    <ul class="list">
+      <li :key="index" v-for="(item, index) in list">
+        <span :class="index < 3 ? 'active' : null">{{index + 1}}</span>
+        <span >{{item.name}}</span>
+        <span >{{item.total}}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RankingList',
+  props: ['title', 'list']
+}
+</script>
+
+<style lang="less" scoped>
+  .rank{
+    padding: 0 32px 32px 72px;
+    .title{
+    }
+    .list{
+      margin: 25px 0 0;
+      padding: 0;
+      list-style: none;
+      li {
+        margin-top: 16px;
+        span {
+          color: @text-color-second;
+          font-size: 14px;
+          line-height: 22px;
+        }
+        span:first-child {
+          background-color: @layout-bg-color;
+          border-radius: 20px;
+          display: inline-block;
+          font-size: 12px;
+          font-weight: 600;
+          margin-right: 24px;
+          height: 20px;
+          line-height: 20px;
+          width: 20px;
+          text-align: center;
+        }
+        span.active {
+          background-color: #314659 !important;
+          color: @text-color-inverse !important;
+        }
+        span:last-child {
+          float: right;
+        }
+      }
+    }
+  }
+</style>

src/components/transportation/configImg/chart/Trend.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="chart-trend">
+    {{term}}
+    <span>{{rate}}%</span>
+    <span :class="['chart-trend-icon', trend]" style=""><a-icon :type="'caret-' + trend" /></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Trend',
+  props: {
+    term: {
+      type: String,
+      required: true
+    },
+    target: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    value: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    isIncrease: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    percent: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    scale: {
+      type: Number,
+      required: false,
+      default: 2
+    }
+  },
+  data () {
+    return {
+      trend: this.isIncrease ? 'up' : 'down',
+      rate: this.percent
+    }
+  },
+  created () {
+    this.trend = this.caulateTrend()
+    this.rate = this.caulateRate()
+  },
+  methods: {
+    caulateRate () {
+      return (this.percent === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percent).toFixed(this.scale)
+    },
+    caulateTrend () {
+      let isIncrease = this.isIncrease === null ? this.value >= this.target : this.isIncrease
+      return isIncrease ? 'up' : 'down'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chart-trend{
+    display: inline-block;
+    font-size: 14px;
+    .chart-trend-icon{
+      font-size: 12px;
+      &.up{
+        color: @red-6;
+      }
+      &.down{
+        color: @green-6;
+      }
+    }
+  }
+</style>

src/components/transportation/configImg/chart/index.less

@@ -0,0 +1,9 @@
+.mini-chart{
+  position: relative;
+  width: 100%;
+  .chart-content{
+    position: absolute;
+    bottom: -28px;
+    width: 100%;
+  }
+}

src/components/transportation/configImg/chart/myBar.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="mini-chart">
+    <div class="chart-content" :style="{height: 100}">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[5, 18, 65, 22.3]">
+        <v-tooltip />
+        <v-legend />
+        <v-axis />
+        <v-bar position="x*y" color="name" :adjust="adjust" />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+import {format} from 'date-fns'
+
+const data = []
+const beginDay = new Date().getTime()
+
+const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
+for (let i = 0; i < fakeY.length; i += 1) {
+  data.push({
+    x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
+    y: fakeY[i]
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+
+export default {
+  name: 'MiniBar',
+  data () {
+    return {
+      data,
+      scale,
+      tooltip,
+      height: 100
+    }
+  }
+}*/
+  const DataSet = require('@antv/data-set');
+
+  const sourceData = [
+    { name: '闲置状态', '西大五-1.0m': 11, '3701': 21, '2501': 22, '西大五-1.6m': 23, '西17-1.6m': 22, '西1.6m': 25 },
+    { name: '通讯故障', '西大五-1.0m': 20, '3701': 23, '2501': 29, '西大五-1.6m': 27, '西17-1.6m': 29, '西1.6m': 21 },
+    { name: '其他故障', '西大五-1.0m': 18, '3701': 28, '2501': 15, '西大五-1.6m': 21, '西17-1.6m': 24, '西1.6m': 28 },
+  ];
+
+  const dv = new DataSet.View().source(sourceData);
+  dv.transform({
+    type: 'fold',
+    fields: ['西大五-1.0m', '3701', '2501', '西大五-1.6m', '西17-1.6m', '西1.6m'],
+    key: 'x',
+    value: 'y',
+  });
+  const data = dv.rows;
+
+  export default {
+    data() {
+      return {
+        data,
+        height: 290,
+        adjust: [{
+          type: 'dodge',
+          marginRatio: 1 / 32,
+        }],
+      };
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+@import "index.less";
+</style>

src/components/transportation/configImg/chart/myLine.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="mini-chart">
+    <div class="chart-content" :style="{height: 200}">
+      <v-chart :force-fit="true" :height="height" :data="data" :padding="[5, 18, 65, 29.3]"  :scale="scale">
+        <v-tooltip />
+        <v-legend />
+        <v-axis />
+        <v-point position="month*temperature" color="city" shape="circle" />
+        <v-smooth-line position="month*temperature" color="city" shape="smooth"  />
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+const DataSet = require('@antv/data-set');
+
+const sourceData = [
+  { month: '7/1', '西大五-1.0m': 0.94, '3701': 0.96, '2501': 0.82, '西大五-1.6m': 0.87, '西17-1.6m': 0.85, '西1.6m': 0.87 },
+  { month: '7/2', '西大五-1.0m': 0.91, '3701': 0.81, '2501': 0.75, '西大五-1.6m': 0.86, '西17-1.6m': 0.90, '西1.6m': 0.93 },
+  { month: '7/3', '西大五-1.0m': 0.52, '3701': 0.75, '2501': 0.52, '西大五-1.6m': 0.89, '西17-1.6m': 0.89, '西1.6m': 0.92 },
+  { month: '7/4', '西大五-1.0m': 0.45, '3701': 0.53, '2501': 0.78, '西大五-1.6m': 0.99, '西17-1.6m': 0.84, '西1.6m': 0.95 },
+  { month: '7/5', '西大五-1.0m': 0.43, '3701': 0.95, '2501': 0.97, '西大五-1.6m': 0.65, '西17-1.6m': 0.97, '西1.6m': 0.91 },
+  { month: '7/6', '西大五-1.0m': 0.55, '3701': 0.84, '2501': 0.91, '西大五-1.6m': 0.76, '西17-1.6m': 0.85, '西1.6m': 0.90 },
+  { month: '7/7', '西大五-1.0m': 0.29, '3701': 0.93, '2501': 0.83, '西大五-1.6m': 0.78, '西17-1.6m': 0.98, '西1.6m': 0.94 },
+  { month: '7/8', '西大五-1.0m': 0.53, '3701': 0.62, '2501': 0.96, '西大五-1.6m': 0.89, '西17-1.6m': 0.96, '西1.6m': 0.83 },
+  { month: '7/9', '西大五-1.0m': 0.37, '3701': 0.81, '2501': 0.94, '西大五-1.6m': 0.95, '西17-1.6m': 0.91, '西1.6m': 0.81 },
+  { month: '7/10', '西大五-1.0m': 0.45, '3701': 0.39, '2501': 0.85, '西大五-1.6m': 0.92, '西17-1.6m': 0.84, '西1.6m': 0.88 }
+];
+// , Tokyo: 0.94, London: 0.96, Tokyo: 0.94, London: 0.96, Tokyo: 0.94
+const dv = new DataSet.View().source(sourceData);
+dv.transform({
+  type: 'fold',
+  fields: ['西大五-1.0m', '3701', '2501', '西大五-1.6m', '西17-1.6m', '西1.6m'],
+  key: 'city',
+  value: 'temperature',
+});
+const data = dv.rows;
+
+const scale = [{
+  dataKey: 'month',
+  min: 0,
+  max: 1,
+}];
+
+export default {
+  data() {
+    return {
+      data,
+      scale,
+      height: 290,
+    };
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "index.less";
+</style>

src/main.js

@@ -6,8 +6,13 @@ import ElementUI from 'element-ui';
 import VueCookie from 'vue-cookie'  
 import axios from "axios";
 import VueAxios from 'vue-axios'
+import Antd from 'ant-design-vue'
+
+
+
 import 'element-ui/lib/theme-chalk/index.css';
 import './assets/css/global.css'
+import 'ant-design-vue/dist/antd.css'
 
 import {postRequest} from "./utils/api";
 import {putRequest} from "./utils/api";
@@ -23,7 +28,6 @@ Vue.prototype.postRequest = postRequest;
 Vue.prototype.putRequest = putRequest;
 Vue.prototype.deleteRequest = deleteRequest;
 Vue.prototype.getRequest = getRequest;
-Vue.prototype.postKeyValueRequest = postKeyValueRequest;
 
 
 Vue.prototype.$echarts = window.echarts
@@ -32,6 +36,7 @@ Vue.config.productionTip = false
 Vue.use(VueAxios,axios)
 Vue.use(ElementUI, { size: 'small' });
 Vue.use(VueCookie)
+Vue.use(Antd)
 new Vue({
     router,
     store,

src/router/index.js

@@ -158,6 +158,20 @@ export default new Router({
                 component: () =>
                     import ('../views/transportation/transportation.vue'),
                 hidden: false,
+                children: [
+                    {
+                        path: 'mainpage',
+                        name: '主页面',
+                        hidden: false,
+                        component: () => import('@/views/transportation/configImg/analysis'),
+                    },
+                    {
+                        path: 'belt/:id/:title',
+                        name: '皮带',
+                        hidden: false,
+                        component: () => import('@/views/transportation/configImg/belt'),
+                    }
+                ],
             }, {
                 path: '/coalCentral',
                 name: ' 煤中央皮带',

src/views/transportation/configImg/analysis/AlarmMsg.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <a-table
+      :columns="columns"
+      :data-source="data"
+      :scroll="{ x: 1500, y: 300 }"
+    >
+    </a-table>
+  </div>
+</template>
+<script>
+const columns = [
+  {
+    title: "报警日期",
+    width: 150,
+    dataIndex: "date",
+    key: "name",
+    fixed: "left",
+  },
+  {
+    title: "报警时间",
+    width: 100,
+    dataIndex: "time",
+    key: "age",
+    fixed: "left",
+  },
+  { title: "报警类型", dataIndex: "alarmType", key: "1", width: 150 },
+  { title: "报警信息", dataIndex: "message", key: "2", width: 150 },
+  { title: "报警值", dataIndex: "alarmValue", key: "3", width: 150 },
+  { title: "解决时间", dataIndex: "solvedTime", key: "4", width: 150 },
+  { title: "备注", dataIndex: "remark", key: "5", width: 150 },
+];
+
+export default {
+  name: "AlarmMsg",
+  data() {
+    return {
+      data: [],
+      alarmStatisticWebsocketUrl: "ws://106.12.123.152:8080/ws/alarmstati",
+      getHistroyUrl: "https://service-j79v4brc-1301774019.gz.apigw.tencentcs.com/release/helloworld-1640223752",
+      columns,
+    };
+  },
+  methods: {
+    alarmSocket() {
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持socket");
+      } else {
+        this.socket = new WebSocket(this.alarmStatisticWebsocketUrl);
+        this.socket.onopen = this.open;
+        this.socket.onerror = this.error;
+        this.socket.onmessage = this.getAlarmMessage;
+      }
+    },
+    open() {
+      console.log("socket连接成功");
+    },
+    error() {
+      console.log("连接错误");
+    },
+    getAlarmMessage(msg) {
+      let item = JSON.parse(msg.data);
+      console.log("接收到来自服务器的消息：", item.data);
+      if (item.error_code === 0) {
+        console.log(item.data);
+        let date = new Date();
+        this.data.unshift({
+          date: `${date.getFullYear()}年${
+            date.getMonth() + 1
+          }月${date.getDate()}日`,
+          time: `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`,
+          alarmType: this.getAlarmType(item.data.alarm_type_code),
+          message: item.data.message,
+          alarmValue: item.data.alarm_value,
+          solvedTime: item.data.solved_time || "未解决",
+          remark: item.data.remark,
+        });
+      }
+    },
+    getAlarmType(code) {
+      const TYPES = [
+        "业务-一般",
+        "业务-中等",
+        "业务-严重",
+        "系统-一般",
+        "系统-中等",
+        "系统-严重",
+      ];
+      let i;
+      if (typeof code === "number") {
+        i = code;
+      } else if (typeof code === "string") {
+        i = parseInt(code);
+      }
+      return TYPES[code] || "未知错误";
+    },
+    close() {
+      console.log("socket已经关闭");
+    },
+    async setHistory() {
+      await fetch(this.getHistroyUrl)
+        .then((result) => result.json())
+        .then((result) => {
+          if(result.error_code === 0){
+            this.data = result.data;
+          }
+        })
+    },
+  },
+  mounted() {
+    this.setHistory();
+    this.alarmSocket();
+  },
+};
+</script>
+<style scoped>
+</style>

src/views/transportation/configImg/analysis/Analysis.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="analysis">
+    <a-card :loading="loading" :bordered="true" bodyStyle="padding:0">
+      <a-row style="margin: 0 -12px">
+        <a-col
+          style="padding: 0 12px"
+          :xl="16"
+          :lg="24"
+          :md="24"
+          :sm="24"
+          :xs="24"
+        >
+          <a-card
+            :loading="loading"
+            :bordered="false"
+            style="margin-top: 24px"
+            title="皮带状态"
+          >
+            <a-space slot="extra">
+              <span
+                ><a-icon
+                  type="sync"
+                  style="color: green; font-size: 21px"
+                  spin
+                />运行中</span
+              >
+              <span
+                ><a-icon
+                  type="alert"
+                  style="color: red; font-size: 20px"
+                />警告</span
+              >
+              <span
+                ><a-icon
+                  type="question-circle"
+                  style="color: #ffd700; font-size: 22px"
+                />故障</span
+              >
+              <span><a-icon type="stop" style="font-size: 22px" />已停止</span>
+            </a-space>
+            <belt-overview></belt-overview>
+            <work-face></work-face>
+          </a-card>
+        </a-col>
+        <a-col
+          style="padding: 0 12px"
+          :xl="8"
+          :lg="24"
+          :md="24"
+          :sm="24"
+          :xs="24"
+        >
+          <chart-card :loading="loading" :title="'故障统计(10天)'">
+            <a-tooltip slot="action">
+              <a-icon type="info-circle-o" />
+            </a-tooltip>
+            <div>
+              <my-bar />
+            </div>
+          </chart-card>
+          <chart-card :loading="loading" :title="'单皮带传送效率(10天)'">
+            <a-tooltip slot="action">
+              <a-icon type="info-circle-o" />
+            </a-tooltip>
+            <div>
+              <my-line />
+            </div>
+          </chart-card>
+        </a-col>
+      </a-row>
+    </a-card>
+    <a-card
+      :loading="loading"
+      :bordered="true"
+      style="margin-top: 24px"
+      title="运行提示"
+      :bodyStyle="{padding:0}"
+      :headStyle="{backgroundColor:'#1890ff',color:'white'}"
+    >
+      <running-msg></running-msg>
+    </a-card>
+    <a-card
+      :loading="loading"
+      :bordered="true"
+      style="margin-top: 24px"
+      title="报警统计"
+      bodyStyle="padding:0"
+      headStyle="background-color:#1890ff;color:white"
+    >
+      <alarm-msg> </alarm-msg>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import ChartCard from "@/components/transportation/configImg/card/ChartCard";
+import myBar from "@/components/transportation/configImg/chart/myBar";
+import myLine from "@/components/transportation/configImg/chart/myLine";
+import BeltOverview from "./BeltOverview";
+import RunningMsg from "./RunningMsg.vue";
+import AlarmMsg from "./AlarmMsg.vue";
+import WorkFace from "./WorkFace.vue";
+
+export default {
+  name: "Analysis",
+  data() {
+    return {
+      loading: true,
+    };
+  },
+  created() {
+    setTimeout(() => (this.loading = !this.loading), 1000);
+  },
+  components: {
+    WorkFace,
+    AlarmMsg,
+    RunningMsg,
+    BeltOverview,
+    ChartCard,
+    myBar,
+    myLine,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.extra-wrap {
+  .extra-item {
+    display: inline-block;
+    margin-right: 24px;
+    a:not(:first-child) {
+      margin-left: 24px;
+    }
+  }
+}
+@media screen and (max-width: 992px) {
+  .extra-wrap .extra-item {
+    display: none;
+  }
+}
+@media screen and (max-width: 576px) {
+  .extra-wrap {
+    display: none;
+  }
+}
+</style>

src/views/transportation/configImg/analysis/BeltItem.vue

@@ -0,0 +1,87 @@
+<template>
+    <div @click="viewDetail" class="item" :style="`transform:rotate(${rvalue}deg)`">
+        <div class="text" :style="`color: ${color}`" >
+            <slot></slot>{{title}}
+        </div>
+        <img style="width: auto; height: auto; max-width: 100%; max-height: 100%;" src="@/assets/img/arrow.png" />
+        <div class="belt">
+            <div class="yellow-wrap">
+                <div class="left-circle"></div>
+                <div class="right-circle"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    name: "BeltItem",
+    props: {
+        'title': String,
+        'src': String,
+        'rvalue': String,
+        'color': {
+            type: String,
+            default: "black"
+        },
+        "id": Number, 
+    },
+    methods: {
+        viewDetail(){
+            this.$emit("click", this.id, this.title);
+        },
+    },  
+}
+</script>
+
+<style scoped>
+.item {
+    margin-left: 5px;
+}
+
+.item{
+    width: 150px;
+}
+
+.text {
+    font-size: 13px;
+    line-height: 10px;
+    width: 100%;
+    text-align: center;
+}
+
+.arrow {
+    width: 100%;
+}
+
+.belt {
+    display: flex;
+    width: 100%;
+    height: 15px;
+    border-radius: 7.5px;
+    background: #629dd0;
+    justify-content: center;
+    align-items: center;
+    z-index: -1;
+}
+
+.yellow-wrap{
+    display: flex;
+    width: 90%;
+    height: 50%;
+    border-radius: 6px;
+    border: 1px solid #ffe59a;
+    background-color: #629dd0;
+    /* background-color: #629dd0; */
+    justify-content:space-between;
+    align-items: center;
+}
+
+.yellow-wrap div{
+    height: 7.5px;
+    width: 7.5px;
+    border-radius: 3.75px;
+    background-color: #ffe59a;
+}
+
+</style>

src/views/transportation/configImg/analysis/BeltOverview.vue

@@ -0,0 +1,97 @@
+<template>
+    <div>
+        <div class="BeltOverview">
+
+            <belt-item @click="viewDetail" title="西大五1.0m皮带" id="1">
+                <a-icon type="sync" style="color:green; font-size:21px"  spin/>
+            </belt-item>
+
+            <belt-item @click="viewDetail" title="3701巷顺槽皮带" id="2">
+                <a-icon type="sync" style="color:green; font-size:21px" spin />
+            </belt-item>
+
+            <div style="margin-top: 180px;margin-left:-50px">
+                <belt-item @click="viewDetail" title="2501巷顺槽皮带" id="3" rvalue="-90" >
+                    <a-icon type="sync" style="color:green; font-size:21px" spin />
+                </belt-item>
+            </div>
+
+            <div style="margin-left:-30px">
+                <belt-item @click="viewDetail" title="西1.6m巷顺槽皮带" id="4" color="red">
+                    <a-icon type="alert" style="color:red;font-size:20px"/>
+                </belt-item>
+            </div>
+
+            <div class="meicang">
+                煤仓
+            </div>
+
+            <div style="margin-top: 110px">
+                <belt-item @click="viewDetail" title="西巷171.6皮带" id="5" rvalue="-45">
+                    <a-icon type="sync" style="color:green; font-size:21px" spin />
+                </belt-item>
+            </div>
+
+            <belt-item @click="viewDetail" title="西1.6m皮带" id="6">
+                <a-icon type="sync" style="color:green; font-size:21px" spin />
+            </belt-item>
+
+            <div style="margin-bottom: 120px;margin-left: -50px">
+                <belt-item @click="viewDetail" title="主斜井皮带" id="7" rvalue="-90">
+                    <a-icon type="sync" style="color:green; font-size:21px" spin />
+                </belt-item>
+            </div>
+            <div style="margin-bottom: 420px;margin-left:-100px">
+                <belt-item @click="viewDetail" title="101皮带" id="8" rvalue="-45" color="#FFD700">
+                    <a-icon type="question-circle" style="color:#FFD700; font-size:22px" />
+                </belt-item>
+            </div>
+
+            <div style="margin-bottom: 600px;margin-left:-18px">
+                <belt-item @click="viewDetail" title="102皮带" id="9" rvalue="-25">
+                    <a-icon type="sync" style="color:green; font-size:21px" spin />
+                </belt-item>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import BeltItem from "./BeltItem.vue"
+
+export default {
+    name: "BeltOverview",
+    props: ['title'],
+    components: {BeltItem},
+    methods: {
+        viewDetail(id, title) {
+            console.log(123);
+            this.$router.push({
+                path: `/transportation/belt/${id}/${title}`,
+            })
+        }
+    },
+    
+}
+</script>
+
+<style scoped>
+.BeltOverview {
+    display: flex;
+    justify-content: flex-start;
+    align-items:center;
+}
+.meicang {
+    width: 39px;
+    height: 150px;
+    background-color: #629dd0;
+    /* color: white; */
+    border-radius: 6px;
+    font-size: 12px;
+    line-height: 78px;
+    text-align: center;
+    margin-top: 120px;
+    margin-left: 21px;
+}
+
+</style>

src/views/transportation/configImg/analysis/RunningMsg.vue

@@ -0,0 +1,94 @@
+<template>
+   <div
+    v-infinite-scroll="handleInfiniteOnLoad"
+    :infinite-scroll-distance="5"
+    class="demo-infinite-container"
+  >
+    <a-list size="small" :data-source="data" item-layout="vertical">
+      <a-list-item slot="renderItem" slot-scope="item" style>
+        <a-list-item-meta :description="item.time"> 
+        </a-list-item-meta>
+        <div>{{item.message}}</div>
+      </a-list-item>
+    </a-list>
+  </div>
+</template>
+<script>
+import infiniteScroll from 'vue-infinite-scroll';
+export default {
+    name: "RunningMsg",
+    directives: { infiniteScroll },
+    data() {
+        return {
+            loading: false,
+            busy: false,
+            data: [],
+            path:"ws://124.71.174.198:8080/ws/runningmsg",
+            socket:"",
+        }
+    },
+    mounted () {
+        // 初始化
+        this.init()
+    },
+    methods:{
+        handleInfiniteOnLoad() {
+            const data = this.data;
+            if (data.length > 5) {
+                this.busy = true;
+                return;
+            }
+        },
+        init() {
+            if(typeof(WebSocket) === "undefined"){
+                alert("您的浏览器不支持socket")
+            }else{
+                // 实例化socket
+                this.socket = new WebSocket(this.path)
+                // 监听socket连接
+                this.socket.onopen = this.open
+                // 监听socket错误信息
+                this.socket.onerror = this.error
+                // 监听socket消息
+                this.socket.onmessage = this.getMessage
+            }
+        },
+        open() {
+            console.log("socket连接成功");
+        },
+        error() {
+            console.log("连接错误");
+        },
+        getMessage(msg) {
+            let item = JSON.parse(msg.data);
+            if(item.error_code == 0){
+                this.data.unshift(item.data);
+            }
+            console.log(msg.data)
+        },
+        send() {
+        },
+        close() {
+            console.log("socket已经关闭")
+        }
+    },
+    destroyed () {
+        // 销毁监听
+        this.socket.onclose = this.close
+    },
+    created(){
+        fetch("http://124.71.174.198:8080/api/runningmsg")
+        .then(response => response.json())
+        .then(result => this.data = result.data)
+        .catch(error => console.log('error', error));    
+    }
+}
+</script>
+<style scoped>
+.demo-infinite-container{
+  border-radius: 4px;
+  overflow: auto;
+  padding: 8px 24px;
+  height: 300px;
+}
+</style>

src/views/transportation/configImg/analysis/WorkFace.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="work-face">
+    <a-space>
+      <a-icon type="control" style="font-size: 20px" />
+      <span>工作面信息：</span>
+      <span :key="index" v-for="(i, index) in states">
+        {{ i.name }}：
+        <a-tooltip>
+          <template slot="title">
+            <span v-if="i.state === '0' || i.state === 0"
+              ><a-icon
+                type="sync"
+                style="color: green; font-size: 21px"
+                spin
+              />正常运行中</span
+            >
+            <span v-else
+              ><a-icon
+                type="stop"
+                style="color: red; font-size: 22px"
+              />该部分已停止</span
+            >
+          </template>
+          <a-tag :color="getColorString(i.state)" style="font-size: 15px">{{
+            getStateString(i.state)
+          }}</a-tag>
+        </a-tooltip>
+      </span>
+    </a-space>
+  </div>
+</template>
+<script>
+const states = [
+  {
+    name: "破碎机",
+    state: 0,
+  },
+  {
+    name: "转载机",
+    state: 0,
+  },
+  {
+    name: "顺槽皮带",
+    state: 0,
+  },
+  {
+    name: "前刮板",
+    state: 0,
+  },
+  {
+    name: "后刮板",
+    state: 0,
+  },
+];
+export default {
+  name: "WorkFace",
+  data() {
+    return {
+      websocketUrl: "ws://106.12.123.152:8080/ws/workface",
+      states,
+    };
+  },
+  methods: {
+    init() {
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持socket");
+      } else {
+        // 实例化socket
+        this.socket = new WebSocket(this.websocketUrl);
+        // 监听socket连接
+        this.socket.onopen = this.open;
+        // 监听socket错误信息
+        this.socket.onerror = this.error;
+        // 监听socket消息
+        this.socket.onmessage = this.getMessage;
+      }
+    },
+    open() {
+      console.log("socket连接成功");
+    },
+    error() {
+      console.log("连接错误");
+    },
+    getMessage(msg) {
+      let item = JSON.parse(msg.data);
+      console.log("接收到来自服务器的消息：", item.data);
+      if (item.error_code === 0) {
+        const data = item.data;
+        this.states = [
+          {
+            name: "破碎机",
+            state: parseInt(data.posui),
+          },
+          {
+            name: "转载机",
+            state: parseInt(data.zhuanzai),
+          },
+          {
+            name: "顺槽皮带",
+            state: parseInt(data.shuncao),
+          },
+          {
+            name: "前刮板",
+            state: parseInt(data.qianguaban),
+          },
+          {
+            name: "后刮板",
+            state: parseInt(data.houguaban),
+          },
+        ];
+      }
+    },
+    send() {},
+    close() {
+      console.log("socket已经关闭");
+    },
+    workfaceWebsocket: function () {
+      this.ws = new WebSocket(this.websocketUrl);
+      //监听是否连接成功
+      this.ws.onopen = () => {
+        console.log("ws连接状态：" + this.ws.readyState);
+      };
+      //接听服务器发回的信息并处理展示
+      this.ws.onmessage = (res) => {
+        const item = JSON.parse(res.data);
+        console.log("接收到来自服务器的消息：", item.data);
+        if (item.error_code === 0) {
+          const data = item.data;
+          this.states = [
+            {
+              name: "破碎机",
+              state: data.posui,
+            },
+            {
+              name: "转载机",
+              state: data.zhuanzai,
+            },
+            {
+              name: "顺槽皮带",
+              state: data.shuncao,
+            },
+            {
+              name: "前刮板",
+              state: data.qianguaban,
+            },
+            {
+              name: "后刮板",
+              state: data.houguaban,
+            },
+          ];
+        }
+      };
+      //监听连接关闭事件
+      this.ws.onclose = () => {
+        //监听整个过程中websocket的状态
+        console.log("ws连接状态：" + this.ws.readyState);
+      };
+      //监听并处理error事件
+      this.ws.onerror = function (error) {
+        console.log(error);
+      };
+    },
+    getStateString(state) {
+      if ((state === 0) | (state === "0")) {
+        return "运行中";
+      } else if (state === 1 || state === "1") {
+        return "已停止";
+      }
+    },
+    getColorString(state) {
+      if ((state === 0) | (state === "0")) {
+        return "green";
+      } else if (state === 1 || state === "1") {
+        return "#ef0200";
+      }
+    },
+  },
+  mounted() {
+    this.init();
+    // this.workfaceWebsocket();
+  },
+};
+</script>
+<style>
+.work-face {
+  font-size: 16px;
+}
+</style>

src/views/transportation/configImg/analysis/index.js

@@ -0,0 +1,2 @@
+import Analysis from './Analysis'
+export default Analysis

src/views/transportation/configImg/belt/Analysis.vue

@@ -0,0 +1,301 @@
+<template>
+  <div class="analysis">
+    <a-row>
+      <a-col :sm="24" :md="12" :xl="12">
+        <h2 style="text-align: center;">{{this.$route.params.title}}</h2>
+        <img
+          src="@/assets/img/20211209164229.png"
+        />
+      </a-col>
+
+      <a-col :sm="24" :md="12" :xl="12">
+        <div class="contour">
+          <div style="height: 80px">
+            <span class="info">
+              <div>撕裂</div>
+              <div class="waring1" v-if="circle1 == 1"></div>
+              <div class="waring" v-if="circle1 == 0"></div>
+            </span>
+            <span class="info">
+              <div>闭锁</div>
+              <div class="waring" v-if="circle2 == 1"></div>
+              <div class="waring1" v-if="circle2 == 0"></div>
+            </span>
+            <span class="info">
+              <div>跑偏</div>
+              <div class="waring" v-if="circle3 == 1"></div>
+              <div class="waring1" v-if="circle3 == 0"></div>
+            </span>
+            <span class="info">
+              <div>烟雾</div>
+              <div class="waring" v-if="circle4 == 1"></div>
+              <div class="waring1" v-if="circle4 == 0"></div>
+            </span>
+            <span class="info">
+              <div>堆煤</div>
+              <div class="waring" v-if="circle5 == 1"></div>
+              <div class="waring1" v-if="circle5 == 0"></div>
+            </span>
+          </div>
+          <div style="height: 200px">
+            <span class="info">
+              <div>速度</div>
+              <div class="waring" v-if="circle6 == 1"></div>
+              <div class="waring1" v-if="circle6 == 0"></div>
+            </span>
+            <span class="info">
+              <div>温度</div>
+              <div class="waring" v-if="circle7 == 1"></div>
+              <div class="waring1" v-if="circle7 == 0"></div>
+            </span>
+            <span class="info">
+              <div>打滑</div>
+              <div class="waring" v-if="circle8 == 1"></div>
+              <div class="waring1" v-if="circle8 == 0"></div>
+            </span>
+            <span class="info">
+              <div>纵撕</div>
+              <div class="waring" v-if="circle9 == 1"></div>
+              <div class="waring1" v-if="circle9 == 0"></div>
+            </span>
+            <span class="info">
+              <div>断带</div>
+              <div class="waring" v-if="circle10 == 1"></div>
+              <div class="waring1" v-if="circle10 == 0"></div>
+            </span>
+          </div>
+        </div>
+      </a-col>
+    </a-row>
+
+    <a-card :loading="loading" style="margin-top: 24px" :bordered="false">
+      <div class="salesCard">
+        <a-row>
+          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+            <a-card
+              :bodyStyle="{display: 'flex', justifyContent: 'center',alignItems: 'center'}"
+            >
+              <chart-1 ref="chart1" />
+            </a-card>
+          </a-col>
+          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+            <a-card
+              :bodyStyle="{display: 'flex', justifyContent: 'center',alignItems: 'center'}"
+            >
+              <chart-2 ref="chart2" />
+            </a-card>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+            <a-card
+              :bodyStyle="{display: 'flex', justifyContent: 'center',alignItems: 'center'}"
+            >
+              <chart-3 ref="chart3" />
+            </a-card>
+          </a-col>
+          <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+            <a-card
+              :bodyStyle="{display: 'flex', justifyContent: 'center',alignItems: 'center'}"
+            >
+              <chart-4 ref="chart4" />
+            </a-card>
+          </a-col>
+        </a-row>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import Chart1 from "./Chart1.vue";
+import Chart2 from "./Chart2.vue";
+import Chart3 from "./Chart3.vue";
+import Chart4 from "./Chart4.vue";
+
+export default {
+  name: "Analysis",
+  data() {
+    return {
+      path: "ws://124.71.174.198:8080/ws/belt/",
+      beltId: 1,
+      isFirst: 1,
+      ws: {},
+      circle1: 1,
+      circle2: 1,
+      circle3: 1,
+      circle4: 1,
+      circle5: 1,
+      circle6: 1,
+      circle7: 1,
+      circle8: 1,
+      circle9: 1,
+      circle10: 1,
+      //rankList,
+      loading: true,
+    };
+  },
+  methods: {
+    change_color: function () {
+      this.circle1 = Math.round(Math.random() * 2) % 2;
+      this.circle2 = Math.round(Math.random() * 2) % 2;
+      this.circle3 = Math.round(Math.random() * 2) % 2;
+      this.circle4 = Math.round(Math.random() * 2) % 2;
+      this.circle5 = Math.round(Math.random() * 2) % 2;
+      this.circle6 = Math.round(Math.random() * 2) % 2;
+      this.circle7 = Math.round(Math.random() * 2) % 2;
+      this.circle8 = Math.round(Math.random() * 2) % 2;
+      this.circle9 = Math.round(Math.random() * 2) % 2;
+      this.circle10 = Math.round(Math.random() * 2) % 2;
+    },
+    //websocket连接后端数据改变颜色
+    //1：为绿色，0：为红色
+    changecolor_websocket: function () {
+      this.ws = new WebSocket(this.path);
+      //监听是否连接成功
+      this.ws.onopen = () => {
+        console.log("ws连接状态：" + this.ws.readyState);
+      };
+      //接听服务器发回的信息并处理展示
+      this.ws.onmessage = (res) => {
+        console.log("接收到来自服务器的消息：");
+        console.log(res.data);
+        this.circle1 = res.data[0];
+        this.circle2 = res.data[1];
+        this.circle3 = res.data[2];
+        this.circle4 = res.data[3];
+        this.circle5 = res.data[4];
+        this.circle6 = res.data[5];
+        this.circle7 = res.data[6];
+        this.circle8 = res.data[7];
+        this.circle9 = res.data[8];
+        this.circle10 = res.data[9];
+      };
+      //监听连接关闭事件
+      this.ws.onclose = () => {
+        //监听整个过程中websocket的状态
+        console.log("ws连接状态：" + this.ws.readyState);
+      };
+      //监听并处理error事件
+      this.ws.onerror = function (error) {
+        console.log(error);
+      };
+    },
+    init() {
+      if (typeof WebSocket === "undefined") {
+        alert("您的浏览器不支持socket");
+      } else {
+        this.socket = new WebSocket(this.path);
+        this.socket.onopen = this.open;
+        this.socket.onerror = this.error;
+        this.socket.onmessage = this.getMessage;
+      }
+    },
+    open() {
+      console.log("socket连接成功");
+    },
+    error() {
+      console.log("连接错误");
+    },
+    getMessage(msg) {
+      let item = JSON.parse(msg.data);
+      if(this.isFirst === 1){
+        this.isFirst = 0;
+        return;
+      }
+      if (item.error_code === 0 && this.isFirst === 0) {
+        console.log(item.data);
+        const {
+          datetime,
+          dianjicurrent,
+          pressure,
+          speed,
+          bpqcurrent,
+        } = item.data;
+        let postdatetime = datetime.split('.')[0]
+        this.$refs.chart1.addData(postdatetime, dianjicurrent);
+        this.$refs.chart2.addData(postdatetime, pressure);
+        this.$refs.chart3.addData(postdatetime, speed);
+        this.$refs.chart4.addData(postdatetime, bpqcurrent);
+      }
+    },
+    send() {},
+    close() {
+      console.log("socket已经关闭");
+    },
+  },
+  created() {
+    setTimeout(() => (this.loading = !this.loading), 1000);
+    setInterval(this.change_color, 5000);
+    this.$refs.chart1.test();
+  },
+  components: {
+    Chart1,
+    Chart2,
+    Chart3,
+    Chart4,
+  },
+  destroyed() {
+    this.socket.onclose = this.close;
+  },
+  mounted() {
+    const beltId = this.$route.params.id;
+    this.path = this.path + beltId;
+    this.init();
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.extra-wrap {
+  .extra-item {
+    display: inline-block;
+    margin-right: 24px;
+
+    a:not(:first-child) {
+      margin-left: 24px;
+    }
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .extra-wrap .extra-item {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .extra-wrap {
+    display: none;
+  }
+}
+
+.info {
+  float: left;
+  margin: 10px;
+}
+
+.contour {
+  outline-style: dotted;
+  outline-color: gray;
+  height: 200px;
+  width: 400px;
+  margin: 20px 0px 50px 60px;
+}
+
+.waring {
+  width: 60px;
+  height: 60px;
+  background-color: #009966;
+  border-radius: 50%;
+  float: left;
+}
+
+.waring1 {
+  width: 60px;
+  height: 60px;
+  background-color: #ff0000;
+  border-radius: 50%;
+  float: left;
+}
+</style>

src/views/transportation/configImg/belt/Chart1.vue

@@ -0,0 +1,203 @@
+<template>
+  <div ref="testLine" id="testLine" style="width: 600px; height: 300px"></div>
+</template>
+
+<script>
+import moment from "moment";
+
+let date = new Date();
+const dateDelta = new Date(1000);
+let data = [];
+const getDateString = (date) => {
+  return `${date.getFullYear()}-${
+    date.getMonth() + 1
+  }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+};
+for (let i = 1; i < 30; i++) {
+  const singleDate = new Date(date - dateDelta * i);
+  data.unshift({
+    name: singleDate.toString(),
+    value: [getDateString(singleDate), 155.8+18.8*Math.random(1)],
+  });
+}
+
+const type = "disk";
+const unit = "m/s";
+
+export default {
+  name: "DisplayDraw",
+  data() {
+    return {
+      path: "url", //修改地址
+      ws: {}, //保存websocket对象
+      data: data,
+      i: 31,
+      oneDay: 24 * 3600 * 1000,
+      myChart: null,
+      date: date,
+      dateDelta: dateDelta,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          backgroundColor: "#fff",
+          padding: 10,
+          textStyle: {
+            fontSize: 12,
+            color: "#152934",
+            lineHeight: 24,
+          },
+          extraCssText:
+            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
+          formatter: (params) => {
+            var result = `电机电流${params[0].data[0]} <br/>`;
+            params.map((item) => {
+              result += `${
+                isNaN(item.value[1]) ? "-" : item.value[1]
+              } m/s</br>`;
+            });
+            return result;
+          },
+        },
+        yAxis: [
+          {
+            boundaryGap: [0, "100%"],
+            name: "m/s",
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#5A6872",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            type: "time", // x轴为 时间轴
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#5A6872",
+              fontSize: 11,
+              rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: data.map(function (item) {
+              return item[0];
+            }),
+          },
+        ],
+        title: {
+          text: "皮带电机电流曲线",
+          padding: [5, 230],
+        },
+        color: ["#41D6C3", "#5AAAFA"],
+        series: [
+          {
+            name: "m/s",
+            type: "line",
+            symbol: "none",
+            markPoint: {
+              label: {
+                normal: {
+                  show: true,
+                  backgroundColor: "#fff",
+                  position: "top",
+                  color: "#5AAAFA",
+                  borderColor: "rgba(90,170,250,0.3)",
+                  borderWidth: 1,
+                  padding: 8,
+                  formatter: `{b}: {c} ${unit}`,
+                },
+              },
+              symbol: "circle",
+              itemStyle: {
+                normal: {
+                  borderColor: "rgba(90,170,250,0.3)",
+                  borderWidth: 15,
+                },
+              },
+              symbolSize: 7,
+              data: [{ type: "max", name: "Max" }],
+            },
+            lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
+            areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
+            // connectNulls: true,
+            data: data,
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    extendXaxis() {
+      let ydata = null;
+      this.date = moment(this.date).add(1, "s").toDate();
+      let tmp = this.data;
+      tmp.shift();
+      tmp.push({
+        name: this.date.toString(),
+        value: [this.getDateString(this.date), ydata],
+      });
+      this.myChart.setOption({
+        series: [
+          {
+            data: tmp,
+          },
+        ],
+      });
+      this.data = tmp;
+      console.log(11);
+    },
+    addData(date, value) {
+      let tmp = this.data;
+      tmp.shift();
+      tmp.push({
+        name: date,
+        value: [date, value],
+      });
+      this.myChart.setOption({
+        series: [
+          {
+            data: tmp,
+          },
+        ],
+      });
+      this.data = tmp;
+    },
+    getDateString(date) {
+      return `${date.getFullYear()}-${
+        date.getMonth() + 1
+      }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+    },
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+    console.log(data);
+    // setInterval(this.extendXaxis, 1000);
+  },
+};
+</script>
+
+<style>
+</style>
+

src/views/transportation/configImg/belt/Chart2.vue

@@ -0,0 +1,204 @@
+<template>
+  <div ref="testLine" id="testLine" style="width: 600px; height: 300px"></div>
+</template>
+
+<script>
+import moment from "moment";
+
+let date = new Date();
+const dateDelta = new Date(1000);
+let data = [];
+
+const getDateString = (date) => {
+  return `${date.getFullYear()}-${
+    date.getMonth() + 1
+  }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+};
+for (let i = 1; i < 30; i++) {
+  const singleDate = new Date(date - dateDelta * i);
+  data.unshift({
+    name: singleDate.toString(),
+    value: [getDateString(singleDate), 0.7+0.05*Math.random(1)],
+  });
+}
+
+const type = "disk";
+const unit = "m/s";
+
+export default {
+  name: "DisplayDraw",
+  data() {
+    return {
+      path: "url", //修改地址
+      ws: {}, //保存websocket对象
+      data: data,
+      i: 31,
+      oneDay: 24 * 3600 * 5000,
+      myChart: null,
+      date: date,
+      dateDelta: dateDelta,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          backgroundColor: "#fff",
+          padding: 10,
+          textStyle: {
+            fontSize: 12,
+            color: "#152934",
+            lineHeight: 24,
+          },
+          extraCssText:
+            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
+          formatter: (params) => {
+            var result = `电机电流${params[0].data[0]} <br/>`;
+            params.map((item) => {
+              result += `${
+                isNaN(item.value[1]) ? "-" : item.value[1]
+              } m/s</br>`;
+            });
+            return result;
+          },
+        },
+        yAxis: [
+          {
+            boundaryGap: [0, "100%"],
+            name: "m/s",
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#5A6872",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            type: "time", // x轴为 时间轴
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#5A6872",
+              fontSize: 11,
+              rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: data.map(function (item) {
+              return item[0];
+            }),
+          },
+        ],
+        title: {
+          text: "皮带电机电流曲线",
+          padding: [5, 230],
+        },
+        color: ["#41D6C3", "#5AAAFA"],
+        series: [
+          {
+            name: "m/s",
+            type: "line",
+            symbol: "none",
+            markPoint: {
+              label: {
+                normal: {
+                  show: true,
+                  backgroundColor: "#fff",
+                  position: "top",
+                  color: "#5AAAFA",
+                  borderColor: "rgba(90,170,250,0.3)",
+                  borderWidth: 1,
+                  padding: 8,
+                  formatter: `{b}: {c} ${unit}`,
+                },
+              },
+              symbol: "circle",
+              itemStyle: {
+                normal: {
+                  borderColor: "rgba(90,170,250,0.3)",
+                  borderWidth: 15,
+                },
+              },
+              symbolSize: 7,
+              data: [{ type: "max", name: "Max" }],
+            },
+            lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
+            areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
+            // connectNulls: true,
+            data: data,
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    extendXaxis() {
+      let ydata = null;
+      this.date = moment(this.date).add(1, "s").toDate();
+      let tmp = this.data;
+      tmp.shift();
+      tmp.push({
+        name: this.date.toString(),
+        value: [this.getDateString(this.date), ydata],
+      });
+      this.myChart.setOption({
+        series: [
+          {
+            data: tmp,
+          },
+        ],
+      });
+      this.data = tmp;
+      console.log(11);
+    },
+    addData(date, value) {
+      let tmp = this.data;
+      tmp.shift();
+      tmp.push({
+        name: date,
+        value: [date, value],
+      });
+      this.myChart.setOption({
+        series: [
+          {
+            data: tmp,
+          },
+        ],
+      });
+      this.data = tmp;
+    },
+    getDateString(date) {
+      return `${date.getFullYear()}-${
+        date.getMonth() + 1
+      }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+    },
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+    console.log(data);
+    // setInterval(this.extendXaxis, 1000);
+  },
+};
+</script>
+
+<style>
+</style>
+

src/views/transportation/configImg/belt/Chart3.vue

@@ -0,0 +1,203 @@
+<template>
+  <div ref="testLine" id="testLine" style="width: 600px; height: 300px"></div>
+</template>
+
+<script>
+import moment from "moment";
+
+let date = new Date();
+const dateDelta = new Date(1000);
+let data = [];
+const getDateString = (date) => {
+  return `${date.getFullYear()}-${
+    date.getMonth() + 1
+  }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+};
+for (let i = 1; i < 30; i++) {
+  const singleDate = new Date(date - dateDelta * i);
+  data.unshift({
+    name: singleDate.toString(),
+    value: [getDateString(singleDate), 3+0.5*Math.random(1)],
+  });
+}
+
+const type = "disk";
+const unit = "m/s";
+
+export default {
+  name: "DisplayDraw",
+  data() {
+    return {
+      path: "url", //修改地址
+      ws: {}, //保存websocket对象
+      data: data,
+      i: 31,
+      oneDay: 24 * 3600 * 1000,
+      myChart: null,
+      date: date,
+      dateDelta: dateDelta,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          backgroundColor: "#fff",
+          padding: 10,
+          textStyle: {
+            fontSize: 12,
+            color: "#152934",
+            lineHeight: 24,
+          },
+          extraCssText:
+            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
+          formatter: (params) => {
+            var result = `电机电流${params[0].data[0]} <br/>`;
+            params.map((item) => {
+              result += `${
+                isNaN(item.value[1]) ? "-" : item.value[1]
+              } m/s</br>`;
+            });
+            return result;
+          },
+        },
+        yAxis: [
+          {
+            boundaryGap: [0, "100%"],
+            name: "m/s",
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#5A6872",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            type: "time", // x轴为 时间轴
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#5A6872",
+              fontSize: 11,
+              rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: data.map(function (item) {
+              return item[0];
+            }),
+          },
+        ],
+        title: {
+          text: "皮带电机电流曲线",
+          padding: [5, 230],
+        },
+        color: ["#41D6C3", "#5AAAFA"],
+        series: [
+          {
+            name: "m/s",
+            type: "line",
+            symbol: "none",
+            markPoint: {
+              label: {
+                normal: {
+                  show: true,
+                  backgroundColor: "#fff",
+                  position: "top",
+                  color: "#5AAAFA",
+                  borderColor: "rgba(90,170,250,0.3)",
+                  borderWidth: 1,
+                  padding: 8,
+                  formatter: `{b}: {c} ${unit}`,
+                },
+              },
+              symbol: "circle",
+              itemStyle: {
+                normal: {
+                  borderColor: "rgba(90,170,250,0.3)",
+                  borderWidth: 15,
+                },
+              },
+              symbolSize: 7,
+              data: [{ type: "max", name: "Max" }],
+            },
+            lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
+            areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
+            // connectNulls: true,
+            data: data,
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    extendXaxis() {
+      let ydata = null;
+      this.date = moment(this.date).add(1, "s").toDate();
+      let tmp = this.data;
+      tmp.shift();
+      tmp.push({
+        name: this.date.toString(),
+        value: [this.getDateString(this.date), ydata],
+      });
+      this.myChart.setOption({
+        series: [
+          {
+            data: tmp,
+          },
+        ],
+      });
+      this.data = tmp;
+      console.log(11);
+    },
+    addData(date, value) {
+      let tmp = this.data;
+      tmp.shift();
+      tmp.push({
+        name: date,
+        value: [date, value],
+      });
+      this.myChart.setOption({
+        series: [
+          {
+            data: tmp,
+          },
+        ],
+      });
+      this.data = tmp;
+    },
+    getDateString(date) {
+      return `${date.getFullYear()}-${
+        date.getMonth() + 1
+      }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+    },
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+    console.log(data);
+    // setInterval(this.extendXaxis, 1000);
+  },
+};
+</script>
+
+<style>
+</style>
+

src/views/transportation/configImg/belt/Chart4.vue

@@ -0,0 +1,203 @@
+<template>
+  <div ref="testLine" id="testLine" style="width: 600px; height: 300px"></div>
+</template>
+
+<script>
+import moment from "moment";
+
+let date = new Date();
+const dateDelta = new Date(1000);
+let data = [];
+const getDateString = (date) => {
+  return `${date.getFullYear()}-${
+    date.getMonth() + 1
+  }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+};
+for (let i = 1; i < 30; i++) {
+  const singleDate = new Date(date - dateDelta * i);
+  data.unshift({
+    name: singleDate.toString(),
+    value: [getDateString(singleDate), 80+15*Math.random(1)],
+  });
+}
+
+const type = "disk";
+const unit = "m/s";
+
+export default {
+  name: "DisplayDraw",
+  data() {
+    return {
+      path: "url", //修改地址
+      ws: {}, //保存websocket对象
+      data: data,
+      i: 31,
+      oneDay: 24 * 3600 * 1000,
+      myChart: null,
+      date: date,
+      dateDelta: dateDelta,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          backgroundColor: "#fff",
+          padding: 10,
+          textStyle: {
+            fontSize: 12,
+            color: "#152934",
+            lineHeight: 24,
+          },
+          extraCssText:
+            "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 0;",
+          formatter: (params) => {
+            var result = `电机电流${params[0].data[0]} <br/>`;
+            params.map((item) => {
+              result += `${
+                isNaN(item.value[1]) ? "-" : item.value[1]
+              } m/s</br>`;
+            });
+            return result;
+          },
+        },
+        yAxis: [
+          {
+            boundaryGap: [0, "100%"],
+            name: "m/s",
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "dotted",
+                color: "rgba(155, 155, 155, 0.5)",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#5A6872",
+              fontSize: 11,
+            },
+            axisTick: { show: false },
+            type: "value",
+          },
+        ],
+        xAxis: [
+          {
+            type: "time", // x轴为 时间轴
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: { width: 0 },
+            },
+            axisLabel: {
+              color: "#5A6872",
+              fontSize: 11,
+              rotate: 30,
+            },
+            axisTick: { show: false },
+            boundaryGap: false,
+            data: data.map(function (item) {
+              return item[0];
+            }),
+          },
+        ],
+        title: {
+          text: "皮带电机电流曲线",
+          padding: [5, 230],
+        },
+        color: ["#41D6C3", "#5AAAFA"],
+        series: [
+          {
+            name: "m/s",
+            type: "line",
+            symbol: "none",
+            markPoint: {
+              label: {
+                normal: {
+                  show: true,
+                  backgroundColor: "#fff",
+                  position: "top",
+                  color: "#5AAAFA",
+                  borderColor: "rgba(90,170,250,0.3)",
+                  borderWidth: 1,
+                  padding: 8,
+                  formatter: `{b}: {c} ${unit}`,
+                },
+              },
+              symbol: "circle",
+              itemStyle: {
+                normal: {
+                  borderColor: "rgba(90,170,250,0.3)",
+                  borderWidth: 15,
+                },
+              },
+              symbolSize: 7,
+              data: [{ type: "max", name: "Max" }],
+            },
+            lineStyle: { normal: { color: "#5AAAFA", width: 1 } },
+            areaStyle: { normal: { color: "#5AAAFA", opacity: 0.5 } },
+            // connectNulls: true,
+            data: data,
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    extendXaxis() {
+      let ydata = null;
+      this.date = moment(this.date).add(1, "s").toDate();
+      let tmp = this.data;
+      tmp.shift();
+      tmp.push({
+        name: this.date.toString(),
+        value: [this.getDateString(this.date), ydata],
+      });
+      this.myChart.setOption({
+        series: [
+          {
+            data: tmp,
+          },
+        ],
+      });
+      this.data = tmp;
+      console.log(11);
+    },
+    addData(date, value) {
+      let tmp = this.data;
+      tmp.shift();
+      tmp.push({
+        name: date,
+        value: [date, value],
+      });
+      this.myChart.setOption({
+        series: [
+          {
+            data: tmp,
+          },
+        ],
+      });
+      this.data = tmp;
+    },
+    getDateString(date) {
+      return `${date.getFullYear()}-${
+        date.getMonth() + 1
+      }-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+    },
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(this.$refs.testLine);
+    this.myChart.setOption(this.option);
+    console.log(data);
+    // setInterval(this.extendXaxis, 1000);
+  },
+};
+</script>
+
+<style>
+</style>
+

src/views/transportation/configImg/belt/i18n-search.js

@@ -0,0 +1,31 @@
+module.exports = {
+  messages: {
+    CN: {
+      search: '搜索用户数',
+      capita: '人均搜索次数',
+      rank: '排名',
+      keyword: '搜索关键词',
+      count: '用户数',
+      range: '周涨幅',
+      introduce: '指标说明'
+    },
+    HK: {
+      search: '搜索用戶數',
+      capita: '人均搜索次數',
+      rank: '排名',
+      keyword: '搜索關鍵詞',
+      count: '用戶數',
+      range: '周漲幅',
+      introduce: '指標說明'
+    },
+    US: {
+      search: 'Search Users',
+      capita: 'Per Capita Search',
+      rank: 'Rank',
+      keyword: 'Keyword',
+      users: 'Users',
+      range: 'Weekly Range',
+      introduce: 'Introduce'
+    },
+  }
+}

src/views/transportation/configImg/belt/i18n.js

@@ -0,0 +1,77 @@
+module.exports = {
+  messages: {
+    CN: {
+      introduce: '指标说明',
+      totalSales: '总销售额',
+      visits: '访问量',
+      payments: '支付笔数',
+      operating: '运营活动效果',
+      wow: '同周比',
+      dod: '日环比',
+      sales: '销售额',
+      daily: '日均',
+      day: '今日',
+      week: '本周',
+      month: '本月',
+      year: '本年',
+      search: '热门搜索',
+      proportion: '销售额占比',
+      conversion: '转化率',
+      trend: '趋势',
+      ranking: '排行榜',
+      all: '全渠道',
+      online: '线上',
+      stores: '门店',
+      curve1: '皮带电机电流曲线',
+      curve2: '皮带减压机油压曲线',
+      curve3: '皮带速度曲线',
+      curve4: '皮带变频器电流曲线',
+    },
+    HK: {
+      introduce: '指標說明',
+      totalSales: '總銷售額',
+      visits: '訪問量',
+      payments: '支付筆數',
+      operating: '運營活動效果',
+      wow: '通周比',
+      dod: '日環比',
+      sales: '銷售額',
+      daily: '日均',
+      day: '今日',
+      week: '本週',
+      month: '本月',
+      year: '本年',
+      search: '熱門搜索',
+      proportion: '銷售額佔比',
+      conversion: '轉化率',
+      trend: '趨勢',
+      ranking: '排行榜',
+      all: '全渠道',
+      online: '線上',
+      stores: '門店',
+    },
+    US: {
+      introduce: 'Introduce',
+      totalSales: 'Total Sales',
+      visits: 'Visits',
+      payments: 'Payments',
+      operating: 'Operational Effect',
+      wow: 'WoW Change',
+      dod: 'DoD Change',
+      sales: 'Sales',
+      daily: 'Daily',
+      day: 'All Day',
+      week: 'All Week',
+      month: 'All Month',
+      year: 'All Year',
+      search: 'Hot Search',
+      proportion: 'The Proportion Of Sales',
+      conversion: 'Conversion Rate',
+      trend: 'Trend',
+      ranking: 'Ranking',
+      all: 'All',
+      online: 'Online',
+      stores: 'Stores',
+    }
+  }
+}

src/views/transportation/configImg/belt/index.js

@@ -0,0 +1,2 @@
+import Analysis from './Analysis'
+export default Analysis

src/views/transportation/transportation.vue

@@ -8,6 +8,9 @@
         <el-tab-pane label="数据标准" name="second">
           <dataStandard></dataStandard>
         </el-tab-pane>
+        <el-tab-pane label="组态图" name="third">
+          <router-view></router-view>
+        </el-tab-pane>
       </el-tabs>
     </div>
   
@@ -28,7 +31,11 @@
         },
         methods: {
             handleClick(tab, event) {
-                console.log(tab, event);
+                if(tab.name == "third"){
+                  this.$router.push({
+                    path: "/transportation/mainpage"
+                  })
+                }
             }
         },
         components: {

src/views/ventilate/dataDetail/dataDetail_graph.vue

@@ -8,7 +8,7 @@
 		</el-select>
         <el-row>
           <el-col :span="12" class="col1">
-              <el-card class="box-card" v-for="(item,index) in mpArray">
+              <el-card class="box-card" v-for="(item,index) in mpArray" :key="index">
                   <mpGraph :beforeData='item.before'
                            :afterData='item.after'
                            :xTime='item.time'

vue.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+    lintOnSave: false,
     devServer: {
         host: 'localhost',
         port: 8082,