驾驶舱组件初始提交

whyczyk

2021-03-05 1cc7efa65a4193908d6ad19c6d6ff064eac66a74

驾驶舱组件初始提交

 package-lock.json

Diff too large

 package.json

@@ -8,8 +8,15 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
    "element-ui": "^2.13.2",
    "echarts": "^5.0.2",
    "postcss-px2rem": "^0.3.0",
    "vue-draggable-resizable": "^2.2.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",

 public/theme/normal.css

New file
@@ -0,0 +1,69 @@
.el-menu-item,
.el-submenu__title {
    color: #ffffff;
    height: 38px;
    line-height: 38px;
    padding-left: 20px !important;
}

.el-submenu {
    margin-bottom: 30px;
}

.el-submenu .el-menu-item {
    height: auto;
    line-height: 1.4;
    padding-left: 20px !important;
    padding-top: 8px;
    padding-bottom: 8px;
}

.el-submenu__title {
    background-color: #5257b2;
    border-radius: 4px;
}

.el-submenu__title:hover,
.el-submenu.is-opened .el-submenu__title {
    background-color: #222767;
}

.el-submenu.is-opened .el-submenu__title::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: 6px solid #727ef4;
    border-bottom: 6px solid transparent;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -4px;
}

.el-submenu__title i {
    color: #ffffff;
}

.el-menu-item i {
    color: #5257b2;
}

.el-submenu .el-menu {
    background-color: transparent;
}

.el-menu-item:focus,
.el-menu-item:hover,
.el-menu-item.is-active {
    outline: 0;
    background-color: #57f8ff;
    color: #212465;
}

.el-menu-item:focus i,
.el-menu-item:hover i,
.el-menu-item.is-active i {
    color: #212465;
}

 src/App.vue

@@ -1,28 +1,12 @@
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  #app {
    box-sizing: border-box;
    height: 100vh;
  }
</style>

 src/assets/css/basic.css

New file
@@ -0,0 +1,192 @@
/*basic.css - Written by douchaoyang in September 2015*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
    margin: 0;
    padding: 0;
}

body,
button,
input,
select,
textarea {
    font-family: "Microsoft Yahei", arial;
}

body {
    overflow: hidden;
}

em,
strong,
th,
i {
    font-style: normal;
    font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

a {
    text-decoration: none;
    cursor: pointer;
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ol,
ul,
li {
    list-style: none;
}

fieldset,
img {
    border: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow: hidden;
}

.clearfix {
    *zoom: 1;
}

/*basic end*/
section::-webkit-scrollbar,
div::-webkit-scrollbar {
    /* 滚动条整体样式 */
    width: 3px;
    height: 10px;
}

section::-webkit-scrollbar-thumb,
div::-webkit-scrollbar-thumb {
    /* 滚动条里面小方块 */
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #02b0bd;
}

section::-webkit-scrollbar-track,
div::-webkit-scrollbar-track {
    /* 滚动条里面轨道 */
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #003d64;
}

* {
    box-sizing: border-box;
}

html,
body {
    background-color: #171350;
    color: #ffffff;
}

body {
    margin: 0;
    color: #fff;
}

/* my page */
.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #031D67;
}

.page-content {
    flex: 1;
    overflow-y: auto;
}

.page-header {
    top: 0;
    z-index: 1;
}

/* page animate */
.Router {
    position: absolute;
    width: 100%;
    transition: all .3s ease;
}

.slide-left-enter,
.slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100% 0);
}

/* bg-color */
.bg-white {
    background-color: #FFFFFF;
}

/* echarts css */
.echarts-wrapper,
.echarts-content {
    width: 100%;
    height: 100%;
}

.active.draggable.resizable.vdr {
    border: none;
}

.active.draggable.resizable.vdr .handle {
    border-radius: 50%;
}

 src/assets/images/404.jpg

 src/assets/images/bg-box.png

 src/assets/images/login.jpg

 src/assets/images/page-bg.png

 src/assets/images/rectifier-img.png

 src/assets/js/chartFontsize.js

New file
@@ -0,0 +1,6 @@
export const chartFontsize = (res) => {
  let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  if (!clientWidth) return;
  let fontSize = clientWidth / 1920;
  return res * fontSize;
}

 src/assets/js/rem.js

New file
@@ -0,0 +1,14 @@
/* eslint-disable */ ;
(function (doc, win) {
    let docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            let clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            let fontSize = 20 * (clientWidth / 1920);
            docEl.style.fontSize = fontSize + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

 src/assets/logo.png

Binary files differ

 src/components/HelloWorld.vue

File was deleted

 src/components/LayoutBox.vue

New file
@@ -0,0 +1,133 @@
<template>
  <div class="layout-box-container">
    <div class="layout-box-wrapper">
      <div class="layout-box-radius tl"></div>
      <div class="layout-box-radius tr"></div>
      <div class="layout-box-radius bl"></div>
      <div class="layout-box-radius br"></div>
      <div class="layout-box-header">
        <div class="layout-rect left"></div>
        <div class="header-text-wrapper">
          <div class="header-text">{{title}}</div>
        </div>
        <div class="layout-rect right"></div>
      </div>
      <div class="layout-box-body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LayoutBox",
  props: {
    title: {
      type: String,
      default: "无"
    }
  },
  data() {
    return {}
  }
}
</script>

<style scoped>
.layout-box-container {
  height: 100%;
  box-sizing: border-box;
  padding-top: 22px;
}
.layout-box-wrapper {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  background-color: #021651;
  border-radius: 12px;
  border: 1px solid #073980;
}
.layout-box-radius {
  position: absolute;
  width: 22px;
  height: 22px;
}
.layout-box-radius.tl {
  top: -1px;
  left: -1px;
  border-top: 2px solid #00B2E0;
  border-left: 2px solid #00B2E0;
  border-top-left-radius: 11px;
}
.layout-box-radius.tr {
  top: -1px;
  right: -1px;
  border-top: 2px solid #00B2E0;
  border-right: 2px solid #00B2E0;
  border-top-right-radius: 11px;
}
.layout-box-radius.br {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid #00B2E0;
  border-right: 2px solid #00B2E0;
  border-bottom-right-radius: 11px;
}
.layout-box-radius.bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 2px solid #00B2E0;
  border-left: 2px solid #00B2E0;
  border-bottom-left-radius: 11px;
}
.layout-box-header {
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  width: 100%;
  text-align: center;
}
.layout-rect {
  display: inline-block;
  width: 60px;
  height: 4px;
  background-color: #00B2E0;
}
.layout-rect.left {
  margin-right: 16px;
}
.layout-rect.right {
  margin-left: 16px;
}
.header-text-wrapper {
  position: relative;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  padding: 4px 24px;
  z-index: 1;
}
.header-text {
  position: relative;
  z-index: 1;
}
.header-text-wrapper:after {
  position: absolute;
  display: block;
  content: " ";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: skew(15deg);
  background-color: #083880;
  z-index: 0;
}
.layout-box-body {
  padding: 16px 4px 4px 4px;
  box-sizing: border-box;
  height: 100%;
}
</style>

 src/components/charts/abeamProChart.vue

New file
@@ -0,0 +1,194 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  //引入chart字体自适应
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  export default {
    name: "abeamProChart",
    chart: "",
    chartData: [],
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
        let dataColor = sendData.color;
        let bgColor = sendData.bgColor;
        let yData = sendData.yData;
        let radius = this.$refs.chart.clientHeight / 3 - 7;
        let data = sendData.data;
        let max = data[0];
        data.map(item => {
          if (item > max) {
            max = item;
          }
        });
        max = max - (max % 10) + 20;
        let maxData = []
        data.map(() => {
          maxData.push(max)
        });
        let option = {
          grid: {
            left: '2%',
            right: '5%',
            bottom: '0',
            top: '0',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },
            formatter: function (params) {
              return params[0].name + ' : ' + params[0].value
            }
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: chartFontsize(12),
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
          },
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: chartFontsize(12),
              },
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: yData
          }],
          series: [{
              name: '金额',
              type: 'bar',
              zlevel: 1,
              itemStyle: {
                color: function (params) {
                  return dataColor[params.dataIndex];
                },
                barBorderRadius: [0, radius, radius, 0],
              },
              barWidth: radius,
              barCategoryGap: "0%",
              data: data
            },
            {
              "name": "",
              type: 'pictorialBar',
              barCategoryGap: "0%",
              symbolPosition: 'end',
              symbolSize: [radius, radius],
              zlevel: 2,
              tooltip: {
                show: false
              },
              label: {
                normal: {
                  show: true,
                  position: 'insideRight',
                  fontSize: chartFontsize(20),
                  color: '#021750'
                }
              },
              itemStyle: {
                color: function (params) {
                  return dataColor[params.dataIndex];
                },
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
                shadowOffsetX: -2
              },
              color: "#26B2E8",
              data: data
            },
            {
              name: '背景',
              type: 'bar',
              barCategoryGap: "0%",
              barGap: '-100%',
              barWidth: radius,
              data: maxData,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return bgColor[params.dataIndex];
                  },
                }
              },
            },
          ]
        };
        // 设置配置项
        this.setOption(option);
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          this.setData(this.$options.chartData);
        }, 300)
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      window.removeEventListener('resize', this.resize);
    }
  }
</script>

<style scoped>

</style>

 src/components/charts/imgPieChart.vue

New file
@@ -0,0 +1,195 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  //引入chart字体自适应
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  const pieImg = require('../../assets/images/rectifier-img.png');
  export default {
    name: "imgPieChart",
    chart: "",
    chartData: [],
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
        let imgWidth = this.$refs.chart.clientWidth * 0.14;
        let imgheight = imgWidth / 0.82;
        let centerx = this.$refs.chart.clientWidth / 2;
        let centery = this.$refs.chart.clientHeight / 2;
        let option = {
          color: ['#f3535f', '#7fc57c', '#ffcb29', '#f67f21'],
          graphic: [{
            zlevel: 5,
            type: 'image',
            left: centerx - imgWidth / 2,
            top: centery - imgheight / 2,
            bounding: 'raw',
            style: {
              image: pieImg,
              width: imgWidth,
              height: imgheight,
            }
          }],

          series: [{
              name: '业务警种',
              type: 'pie',
              radius: ['35%', '65%'],
              itemStyle: {
                normal: {
                  borderColor: '#021651',
                  borderWidth: 6,
                }
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 0,
                  lineStyle: {
                    color: '#007ed3'
                  }
                }
              },
              label: {
                formatter: function (params) {
                  return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}';
                },
                distanceToLabelLine: 0,
                rich: {
                  yellow: {
                    color: "#f67f21",
                    fontSize: chartFontsize(16),
                    fontWeight: '600',
                    padding: [chartFontsize(4), 0, 0, 0],
                    align: 'center'
                  },
                  white: {
                    color: "#ffffff",
                    align: 'center',
                    fontSize: chartFontsize(12),
                    padding: chartFontsize(4)
                  },
                  hr: {
                    borderColor: '#007ed3',
                    width: '100%',
                    borderWidth: 1,
                    height: 0,
                  }
                }
              },
              data: sendData,
              zlevel: 1
            },
            {
              name: '',
              type: 'pie',
              radius: '50%',
              hoverAnimation: false,
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgba(7,56,128,0.2)'
                }
              },
              zlevel: 2
            },
            {
              name: '',
              type: 'pie',
              radius: '46%',
              hoverAnimation: false,
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: '#00b2e0'
                }
              },
              zlevel: 3
            },
            {
              name: '',
              type: 'pie',
              radius: '35%',
              hoverAnimation: false,
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: '#ffffff'
                }
              },
              zlevel: 4
            },
          ]
        };
        // 设置配置项
        this.setOption(option);
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          this.setData(this.$options.chartData);
        }, 300)
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      window.removeEventListener('resize', this.resize);
    }
  }
</script>

<style scoped>

</style>

 src/components/charts/latticeBar.vue

New file
@@ -0,0 +1,191 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  export default {
    name: "latticeBar",
    chart: "",
    chartData: [],
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        console.log(sendData)
        this.$options.chartData = sendData;
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (item) {
              let str = item[0].axisValueLabel + '<br />';
              item.map(jtem => {
                if (jtem.seriesName !== 'bg') {
                  str += jtem.seriesName + ': ' + jtem.data + '<br />'
                }
              });
              return str
            }
          },
          legend: {
            top: '2%',
            textStyle: {
              color: '#ffffff',
            },
            data: ['访问量', '订单量']
          },
          grid: {
            top: 40,
            right: 20,
            left: 50,
            bottom: 30
          },
          xAxis: [{
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#007ed3'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: chartFontsize(12),
              interval: 0
            }
          }],
          yAxis: [{
            max: 200,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#007ed3'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#FFFFFF',
                fontSize: chartFontsize(12),
              },
            },
          }],
          series: []
        };

        let max;
        sendData.series.map(item => {
          max = item.data[0];
          item.data.map(jtem => {
            if (jtem > max) {
              max = jtem;
            }
          })
        });
        option.yAxis[0].max = max;
        option.xAxis[0].data = sendData.xData;
        let legendData = [];
        sendData.series.map(item => {
          legendData.push(item.name);
        })
        option.legend.data = legendData;
        for (let i = 0; i < sendData.series.length; i++) {
          let maxArr = [];
          sendData.series[i].data.map(() => {
            maxArr.push(max)
          })
          let plusMinus = (i % 2);
          let offset;
          if (plusMinus == 0) {
            offset = '-65%'
          } else if (plusMinus == 1) {
            offset = '65%'
          }
          option.series.push({
            name: sendData.series[i].name,
            type: 'pictorialBar',
            symbol: 'roundRect',
            itemStyle: {
              color: sendData.series[i].color
            },
            symbolRepeat: true,
            symbolSize: ["16%", "4%"],
            symbolMargin: 2,
            symbolPosition: 'start',
            symbolOffset: [offset, 0],
            z: -20,
            data: sendData.series[i].data,
          });
          option.series.push({
            name: 'bg',
            type: 'pictorialBar',
            symbol: 'roundRect',
            itemStyle: {
              color: '#052b6c'
            },
            symbolRepeat: true,
            symbolSize: ["16%", "4%"],
            symbolMargin: 2,
            symbolPosition: 'start',
            symbolOffset: [offset, 0],
            z: -30,
            data: maxArr
          });
        }
        console.log(this)
        // 设置配置项
        this.setOption(option);
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          this.setData(this.$options.chartData);
        }, 300)
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      window.removeEventListener('resize', this.resize);
    }
  }
</script>

<style scoped>

</style>

 src/components/charts/prossPieChart.vue

New file
@@ -0,0 +1,193 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  //引入chart字体自适应
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  export default {
    name: "prossPieChart",
    chart: "",
    chartData: [],
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
        let color = sendData.color;
        let data = sendData.data;
        let text;
        if (sendData.unit) {
          text = sendData.data + sendData.unit;
        } else {
          text = sendData.data
        }
        let title = sendData.title;
        let option = {
          title: {
            text: '{a|' + title + '}',
            x: 'center',
            bottom: '2%',
            textStyle: {
              rich: {
                a: {
                  fontSize: chartFontsize(16),
                  color: '#ffffff'
                },
              }
            },
            zlevel: 4
          },
          polar: {
            radius: ['65%', '57%'],
            center: ['50%', '40%'],
          },
          angleAxis: {
            max: 100,
            show: false,
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,

            },
            axisTick: {
              show: false
            },
          },
          series: [{
              name: '',
              type: 'pie',
              radius: '75%',
              center: ['50%', '40%'],
              hoverAnimation: false,
              data: [{
                value: data,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: color
                }
              },
              zlevel: 1
            }, {
              name: '',
              type: 'pie',
              radius: '61%',
              center: ['50%', '40%'],
              hoverAnimation: false,
              data: [{
                value: data,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: 'transparent',
                  borderType: 'dashed',
                  borderColor: '#ffffff'
                }
              },
              zlevel: 2
            },
            {
              name: '',
              type: 'pie',
              radius: '61%',
              center: ['50%', '40%'],
              hoverAnimation: false,
              data: [{
                value: data,
                name: text
              }],
              label: {
                normal: {
                  show: true,
                  position: "center",
                  fontSize: chartFontsize(24),
                  fontWeight: '600',
                  color: '#ffffff'
                }
              },
              itemStyle: {
                normal: {
                  color: color,
                }
              },
              zlevel: 3
            }, {
              name: '',
              type: 'bar',
              center: ['50%', '40%'],
              roundCap: true,
              data: [data],
              coordinateSystem: 'polar',
              itemStyle: {
                normal: {
                  color: '#ffffff',
                }
              },
              zlevel: 4
            },
          ]
        };
        // 设置配置项
        this.setOption(option);
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          this.setData(this.$options.chartData);
        }, 300)
      },
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      window.removeEventListener('resize', this.resize);
    }
  }
</script>

<style scoped>

</style>

 src/components/charts/triangleBarChart.vue

New file
@@ -0,0 +1,191 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">

    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  //引入chart字体自适应
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  export default {
    name: "triangleBarChart",
    chart: "",
    chartData: [],
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
        let inData = []
        sendData.data.map(item => {
          inData.push(item - 10);
        })
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (item) {
              let str = item[0].axisValueLabel;
              item.map(jtem => {
                if (jtem.seriesName == 'outData') {
                  str += ':' + jtem.data
                }
              });
              return str
            }
          },
          grid: {
            top: 40,
            right: 20,
            left: 50,
            bottom: 30
          },
          xAxis: [{
            type: 'category',
            data: sendData.xData,
            axisLine: {
              lineStyle: {
                color: '#022664'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: chartFontsize(12),
              interval: 0
            }
          }, {
            show: false,
            type: 'category',
            data: sendData.xData,
            axisLine: {
              lineStyle: {
                color: '#022664'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: chartFontsize(12),
              interval: 0
            }
          }],
          yAxis: [{
            splitLine: {
              lineStyle: {
                color: '#022664'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#022664'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#FFFFFF',
                fontSize: chartFontsize(12)
              },
            },
          }],
          series: [{
            name: 'outData',
            type: 'pictorialBar',
            xAxisIndex: 0,
            data: sendData.data,
            barCategoryGap: "0%",
            barWidth: '50%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z',
            zlevel: 2,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                    offset: 0,
                    color: "#65B3AD"
                  },
                  {
                    offset: 1,
                    color: "#9EFFDA"
                  }
                ]),
                opacity: 0.48
              },
            },
          }, {
            name: 'inData',
            type: 'pictorialBar',
            xAxisIndex: 1,
            data: inData,
            barCategoryGap: "0%",
            barWidth: '30%',
            symbol: 'path://d="M150 50 L130 130 L170 130  Z',
            zlevel: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                    offset: 0,
                    color: "#65B3AD"
                  },
                  {
                    offset: 1,
                    color: "#9EFFDA"
                  }
                ]),
                opacity: 1
              },
            },
          }]
        };
        // 设置配置项
        this.setOption(option);
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          this.setData(this.$options.chartData);
        }, 300)
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      window.removeEventListener('resize', this.resize);
    }
  }
</script>

<style scoped>

</style>

 src/main.js

@@ -1,8 +1,30 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/css/basic.css'
import '../public/theme/normal.css'

import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
import VueDraggableResizable from "vue-draggable-resizable";
Vue.component('vue-draggable-resizable', VueDraggableResizable);

import '@/assets/js/rem.js'


Vue.use(ElementUI, {
  zIndex: 99
});

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
  router,
  store,
  render: function (h) {
    return h(App)
  }
}).$mount('#app')

 src/pages/index.vue

New file
@@ -0,0 +1,188 @@
<template>
  <div class="pageWarp">
    <vue-draggable-resizable :w="340" :h="210" @dragging="onDrag" @resizing="onResize" :parent="true"
      style="transition: none; will-change: transform;">
      <layout-box title="放电和充电电流">
        <lattice-bar id="latticeBar" ref="latticeBar"></lattice-bar>
      </layout-box>
    </vue-draggable-resizable>

    <!-- <div class="chartCon">
      <layout-box title="整流器">
        <img-pie-chart id="ImgPieChart" ref="ImgPieChart"></img-pie-chart>
      </layout-box>
    </div>
    <div class="chartCon">
      <layout-box title="电池组">
        <triangle-bar-chart id="TriangleBarChart" ref="TriangleBarChart"></triangle-bar-chart>
      </layout-box>
    </div>
    <div class="chartCon">
      <layout-box title="电池状态">
        <div class="flexCon">
          <div class="con">
            <abeam-pro-chart id="AbeamProChart" ref="AbeamProChart"></abeam-pro-chart>
          </div>
        </div>
      </layout-box>
    </div>
    <div class="chartCon">
      <layout-box title="电源状态">
        <div class="chartItem">
          <pross-pie-chart id="ProssPieChart1" ref="ProssPieChart1"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="ProssPieChart2" ref="ProssPieChart2"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="ProssPieChart3" ref="ProssPieChart3"></pross-pie-chart>
        </div>
        <div class="chartItem">
          <pross-pie-chart id="ProssPieChart4" ref="ProssPieChart4"></pross-pie-chart>
        </div>
      </layout-box>
    </div> -->
  </div>
</template>

<script>
  import VueDraggableResizable from 'vue-draggable-resizable'
  import LayoutBox from "@/components/LayoutBox";
  import latticeBar from '../components/charts/latticeBar.vue'
  // import ImgPieChart from '../components/charts/imgPieChart.vue';
  // import TriangleBarChart from '../components/charts/triangleBarChart.vue';
  // import AbeamProChart from '../components/charts/abeamProChart.vue';
  // import ProssPieChart from '../components/charts/prossPieChart.vue';

  export default {
    components: {
      VueDraggableResizable,
      LayoutBox,
      latticeBar,
      // ImgPieChart,
      // TriangleBarChart,
      // AbeamProChart,
      // ProssPieChart,
    },
    data() {
      return {
        width: 0,
        height: 0,
        x: 0,
        y: 0
      }
    },
    mounted() {
      this.$refs.latticeBar.setData({
        xData: ['高告警数量', '告警总数', '告警总数比例', '告警机房总数', '告警机房数比例'],
        series: [{
          name: '放电',
          data: [120, 220, 150, 80, 70],
          color: '#90ec7d'
        }, {
          name: '充电',
          data: [80, 160, 120, 310, 50],
          color: '#ff6b6b'
        }]
      });
      this.$refs.latticeBar.resize();

      // this.$refs.ImgPieChart.setData([{
      //     value: 30,
      //     name: '整流器交流异常'
      //   },
      //   {
      //     value: 22,
      //     name: '整流器过流'
      //   },
      //   {
      //     value: 120,
      //     name: '总故障'
      //   },
      //   {
      //     value: 50,
      //     name: '整流器欠压'
      //   },
      // ]);
      // this.$refs.TriangleBarChart.setData({
      //   xData: ['熔断', '电压低', '下电', '充电过流'],
      //   data: [35, 72, 55, 45]
      // });
      // this.$refs.AbeamProChart.setData({
      //   yData: ['浮充数量', '放电数量', '充电数量'],
      //   color: ['#f58881', '#b4d465', '#ffcb29'],
      //   bgColor: ['rgba(245,136,129,0.35)', 'rgba(255,255,255,0.35)', 'rgba(255,203,41,0.35)'],
      //   data: [32, 15, 20]
      // });
      // this.$refs.ProssPieChart1.setData({
      //   title: '交流停电数量',
      //   data: 56,
      //   color: '#37a9b3'
      // });
      // this.$refs.ProssPieChart2.setData({
      //   title: '机房告警数',
      //   data: 12,
      //   color: '#f3535f'
      // });
      // this.$refs.ProssPieChart3.setData({
      //   title: '直流电压超限数',
      //   data: 21,
      //   unit: '%',
      //   color: '#ff8b00'
      // });
      // this.$refs.ProssPieChart4.setData({
      //   title: '负载熔断数量',
      //   data: 8,
      //   color: '#757ffb'
      // });
    },
    methods: {
      onResize: function (x, y, width, height) {
        this.$refs.latticeBar.resize();
        this.x = x
        this.y = y
        this.width = width
        this.height = height
      },
      onDrag: function (x, y) {
        this.x = x
        this.y = y
      }
    }
  }
</script>

<style scoped>
  .pageWarp {
    width: 100%;
    height: 100%;
  }

  .chartCon {
    width: 33.33%;
    height: 50%;
    padding: 10px;
    float: left;
    box-sizing: border-box;
  }

  .flexCon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flexCon .con {
    width: 100%;
    height: 60%;
  }

  .chartCon .chartItem {
    width: 50%;
    height: 48%;
    float: left;
    margin-bottom: 2%;
  }
</style>

 src/router/index.js

New file
@@ -0,0 +1,11 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter);

const router = new VueRouter({
  routes
});

export default router;

 src/router/routes.js

New file
@@ -0,0 +1,5 @@
export default [{
    path: '/',
    meta: {},
    component: (resolve) => require(['@/pages/index.vue'], resolve)
}, ];

 src/store/index.js

New file
@@ -0,0 +1,15 @@
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

 vue.config.js

New file
@@ -0,0 +1,20 @@
const px2rem = require('postcss-px2rem')

const postcss = px2rem({
    remUnit: 20 //基准大小 baseSize，需要和rem.js中相同
});

module.exports = {
    publicPath: './',
    productionSourceMap: false,
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    postcss
                ]
            }
        }
    },
}