设备看板

src/views/business/deviceManagement/components/CarouselTabl.vue

@@ -0,0 +1,50 @@
+<template>
+    <div style="width: 98%;height: 98%;background-color: rgba(6,30,93,.5);overflow: hidden;padding: 1%;">
+        <div class="title" style="vertical-align: top; height: 10%;font-size: 24px;color: white;font-weight:600;">{{ title }}</div>
+        <div v-show="showChart" style="width:100%;height: 89%;display: flex;justify-content: center;background-color: #06163f;">
+            <dv-scroll-board :config="configData" style="width:100%;height:100%" />
+        </div>
+        <div v-if="!showChart" style="background: #061237;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
+            <div style="color: #c7c7c7">目前无数据</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: Object,
+        },
+        title: {
+            type: String,
+            default: ''
+        }
+    },
+    data () {
+        return {
+            configData: {},
+            showChart: true
+        }
+    },
+    watch: {
+        value: {
+            handler (newVal, oldVal) {
+                this.configData = { ...newVal }
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    mounted () {
+        const this_ = this
+        if (this_.value[0] == 999) {
+            this.showChart = false
+            return
+        }
+    }
+
+}
+</script>
+<style lang="scss" module>
+</style>

src/views/business/deviceManagement/components/barChart.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="statisticsPage" :style="{width:width,height:height}">
+    <!-- <div style="height:8%;font-size:28px;font-weight: 600;"> {{title}} </div> -->
+    <!-- <div style="height:90%;display:flex;justify-content: space-between;"> -->
+      <div :id="'staff'+id" :style="{height:'100%'}"/>
+    <!-- </div> -->
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+  import { getFormatDate } from '../utils/config.js'
+  export default {
+    components: {
+    },
+    props: {
+      value: {
+        type: Array,
+      },
+      width:{
+        type:String,
+        default:"100%"
+      },
+      height:{
+        type:String,
+        default: "100%"
+      },
+      id:{
+        type:Number,
+        default:0
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+      colorw:{
+        type:String,
+        default:'#fff'
+      },
+      title:{
+        type: String
+      },
+      data: {
+        type: Array,
+      }
+    },
+    data () {
+      return {
+        correspondence: {
+          numO: '1年以下',
+          numOT: '1-3年',
+          numTF: '3-5年',
+          numF: '5年以上',
+        },
+        color: ['rgb(78,203,115)', 'rgb(251,211,55)', 'rgb(16,142,233)']
+      }
+    },
+    watch: {
+        value: {
+            handler () {
+                this.drawLine()
+            },
+            deep: true
+        }
+    },
+    mounted(){
+      setTimeout(() => {
+        this.drawLine()
+      }, 100);
+    },
+    methods: {
+      drawLine(){
+        const that = this
+        let xData = []
+        for (const key in this.value[0]) {
+          // if (this.value[0].hasOwnProperty.call(object, key)) {
+            xData.push(key)
+          // }
+        }
+        
+        let serArr = []
+        for (let i = 1; i < xData.length; i++) {
+          let ser = {
+            name: '',
+            type: 'bar',
+            barWidth: 10,
+            color: ''
+          }
+          ser.name = xData[i]
+          ser.color = this.color[i-1]
+          serArr.push(ser)
+        }
+        let staff = echarts.init(document.getElementById('staff'+this.id))
+        let option
+        option = {
+          title: {
+            text: this.title,
+            left: 'left',
+            textStyle:{ fontSize:24,color: this.colorw }
+          },
+          grid: {
+            left: '3%',
+            right: '1%',
+            bottom: '20%',
+            top: '10%'
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              crossStyle: {
+                color: '#999'
+              }
+            },
+            formatter: function (params) {
+              let str = `${that.value[params[0].dataIndex].org}`
+              params.forEach(item =>{
+                let nameNum = ''
+                nameNum = that.correspondence[item.seriesName]
+                str += `<br /> ${item.marker} ${nameNum}  ${item.data[item.seriesName]}`
+              })
+              return str
+            }
+          },
+          legend: {
+            data: xData,
+            textStyle: {
+              color: '#fff'
+            },
+            icon: 'circle',
+            bottom: 0,
+            formatter: function (name) {
+              return that.correspondence[name]
+            }
+          },
+          dataset: {
+            dimensions: xData,
+            source: this.value
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: true,
+            axisLabel: {
+                color: '#fff'
+            },
+            axisTick: {
+              alignWithLabel: true
+            }
+          },
+          yAxis: {
+            type: 'value',
+            axisLabel: {
+                color: '#fff'
+            },
+            splitLine:{
+              show:true,
+              lineStyle:{
+                  type: [15,8],
+                  color: ['#fff'],
+              }
+            }
+          },
+          series: serArr
+       };
+       option && staff.setOption(option);
+      },
+    }
+  }
+</script>
+<style scoped>
+  /* #zlmbPie:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  } */
+  .statisticsPage{
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      /* padding: 1%; */
+      /* background-color: rgba(6, 30, 93, 0.5); */
+  }
+</style>

src/views/business/deviceManagement/components/barCharto.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="statisticsPage" :style="{width:width,height:height}">
+    <!-- <div style="height:8%;font-size:28px;font-weight: 600;"> {{title}} </div> -->
+    <!-- <div style="height:90%;display:flex;justify-content: space-between;"> -->
+      <div :id="'staff'+id" :style="{height:'100%'}"/>
+    <!-- </div> -->
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+  import { getFormatDate } from '../utils/config.js'
+  export default {
+    components: {
+    },
+    props: {
+      value: {
+        type: Array,
+      },
+      width:{
+        type:String,
+        default:"100%"
+      },
+      height:{
+        type:String,
+        default: "100%"
+      },
+      id:{
+        type:Number,
+        default:0
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+      colorw:{
+        type:String,
+        default:'#fff'
+      },
+      title:{
+        type: String
+      },
+      data: {
+        type: Array,
+      }
+    },
+    data () {
+      return {
+        correspondence: {
+          numO: '1年以下',
+          numOT: '1-3年',
+          numTF: '3-5年',
+          numF: '5年以上',
+          numAll: '设备总数',
+          numR: '良好数',
+          numS: '停用数',
+          numP: '待处理',
+          numC: '已完成',
+          numJ: '计划数',
+          numW: '完成数',
+        },
+        // color: ['rgb(78,203,115)', 'rgb(251,211,55)', 'rgb(16,142,233)']
+        color: ['#5470c6', '#339933', '#FF0033', 'rgb(251,211,55)']
+      }
+    },
+    watch: {
+        value: {
+            handler () {
+                this.drawLine()
+            },
+            deep: true
+        }
+    },
+    mounted(){
+      setTimeout(() => {
+        this.drawLine()
+      }, 100);
+    },
+    methods: {
+      drawLine(){
+        const that = this
+        let xData = []
+        for (const key in this.value[0]) {
+          // if (this.value[0].hasOwnProperty.call(object, key)) {
+            xData.push(key)
+          // }
+        }
+        
+        let serArr = []
+        for (let i = 1; i < xData.length; i++) {
+          let ser = {
+            name: '',
+            type: 'bar',
+            barWidth: 10,
+            color: ''
+          }
+          ser.name = xData[i]
+          ser.color = this.color[i-1]
+          serArr.push(ser)
+        }
+        let staff = echarts.init(document.getElementById('staff'+this.id))
+        let option
+
+        option = {
+          title: {
+            text: this.title,
+            left: 'left',
+            textStyle:{ fontSize:24,color: this.colorw }
+          },
+          legend: {
+            left: 'left',
+            top: '40',
+            textStyle: {
+              color: '#fff'
+            },
+            formatter: function (name) {
+              return that.correspondence[name]
+            }
+          },
+          grid: { // 让图表占满容器
+              top: '80px',
+              left: '65px',
+              right: '60px',
+              bottom: '40px'
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              crossStyle: {
+                color: '#999'
+              }
+            },
+            formatter: function (params) {
+              let str = `${that.value[params[0].dataIndex].org}`
+              params.forEach(item =>{
+                let nameNum = ''
+                nameNum = that.correspondence[item.seriesName]
+                str += `<br /> ${item.marker} ${nameNum}  ${item.data[item.seriesName]}`
+              })
+              return str
+            }
+          },
+          dataset: {
+            dimensions: xData,
+            source: this.value
+          },
+          xAxis: {
+            type: 'category',
+            axisLabel: {
+              color: '#fff',
+              interval: 0,
+              rotate: 20
+            }
+          },
+          yAxis: {
+            axisLabel: {
+              color: '#fff'
+            },
+            // interval: interval
+          },
+          series: serArr
+        }
+       option && staff.setOption(option);
+      },
+    }
+  }
+</script>
+<style scoped>
+  /* #zlmbPie:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  } */
+  .statisticsPage{
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      padding: 1%;
+      /* background-color: rgba(6, 30, 93, 0.5); */
+  }
+</style>

src/views/business/deviceManagement/components/entirety.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="statisticsPage" :style="{width:width,height:height}">
+    <div class="titleSty">{{title}}</div>
+    <div class="bodySty">
+      <div class="valueSty" v-for="(m,n) in value" :key="'value'+n">
+        <div class="itemSty" v-for="(item, i) in m" :key="'m'+i">
+          <div class="sumSty" v-if="i=='sum'">
+            <div>
+              <div class="circleSty">
+                <svg t="1723529040934" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="17522" width="30" height="30"><path d="M784 128H240C152 128 80 200 80 288v448c0 88 72 160 160 160h544c88 0 160-72 160-160V288c0-88-72-160-160-160z m96 480H592c-52.8 0-96-43.2-96-96s43.2-96 96-96h288v192zM592 352c-88 0-160 72-160 160s72 160 160 160h288v64c0 52.8-43.2 96-96 96H240c-52.8 0-96-43.2-96-96V288c0-52.8 43.2-96 96-96h544c52.8 0 96 43.2 96 96v64H592z" fill="#ffffff" p-id="17523"></path><path d="M592 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#ffffff" p-id="17524"></path></svg>
+              </div>
+            </div>
+            <div>
+              <div>{{captionArr[n]}}</div>
+              <div style="font-size:28px;">{{item}}</div>
+            </div>
+          </div>
+          <div class="mySty" v-else>
+            <div>{{captionArr[i]}}</div>
+            <div v-for="(t, e) in item" :key="'item'+e">{{captionArr[e]}}{{t}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      value: {
+        type: Object,
+      },
+      width:{
+        type:String,
+        default:"100%"
+      },
+      height:{
+        type:String,
+        default: "100%"
+      },
+      id:{
+        type:Number,
+        default:0
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+      colorw:{
+        type:String,
+        default:'#fff'
+      },
+      title:{
+        type: String
+      }
+    },
+    data () {
+      return {
+        captionArr:{
+          totality: '当前设备总数',
+          calibrate: '校准设备数',
+          upkeep: '保养设备数',
+          month: '本月',
+          year: '本年',
+          add: '新增',
+          outService: '停用',
+          scrap: '报废',
+          calibrateNum: '已校准',
+          upkeep: '已保养',
+          unUpkeep: '未保养'
+        }
+      }
+    },
+    watch: {
+        value: {
+            handler () {
+                // this.drawLine()
+            },
+            deep: true
+        }
+    },
+    mounted(){
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .statisticsPage{
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      padding: 1%;
+      .titleSty{
+        width: 100%;
+        height: 15%;
+        font-size: 24px;
+        font-weight: 600;
+      }
+      .bodySty{
+        width: 100%;
+        height: 80%;
+        display: flex;
+        .valueSty{
+          width: 33%;
+          margin: 1%;
+          padding: 1%;
+          border: solid 1px rgb(233, 233, 233);
+          border-radius: 10px;
+          display: flex;
+          flex-flow: column;
+          .itemSty{
+            display: flex;
+          }
+          .itemSty:first-child{
+            height: 50%;
+          }
+          .itemSty:nth-child(2){
+            height: 25%;
+          }
+          .itemSty:nth-child(3){
+            height: 25%;
+          }
+          .sumSty{
+            width: 100%;
+            display: flex;
+            justify-content: space-evenly;
+            align-items: center;
+            .circleSty{
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border-radius: 200px;
+              padding: 15px;
+              background-color: rgb(16, 142, 255);
+            }
+          }
+          .mySty{
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+          }
+        }
+      }
+      padding: 1%;
+      /* background-color: rgba(6, 30, 93, 0.5); */
+  }
+</style>

src/views/business/deviceManagement/components/getPieView.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="statisticsPage" :style="{width:width,height:height}">
+        <div :id="'mid'+id" :style="{height:'100%'}"/>
+    </div>
+    <!-- <div class="pieView">
+        <div style="  height:14%;line-height:30px;text-align: left;padding-left: 10px;color: white;">
+            {{ title || "" }}
+        </div>
+        <div v-show="showChart" style="width: 100%; height: 86%; display: inline-block; overflow: hidden">
+            <div :id="'mid'+id" style="width: 100%; height: 95%; overflow: hidden" />
+        </div>
+        <div v-if="!showChart" style="background: #061237;width: 100%;height: 70%;display: flex;justify-content: center;align-items: center;">
+            <div style="color: #c7c7c7">目前无数据</div>
+        </div>
+    </div> -->
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+    props: {
+        value: {
+            type: Array,
+            default: {}
+        },
+        width:{
+            type:String,
+            default:"100%"
+        },
+        height:{
+            type:String,
+            default: "100%"
+        },
+        title:{
+            type: String
+        },
+        id:{
+            type:Number,
+            default:0
+        },
+        colorw:{
+            type:String,
+            default:'#fff'
+        },
+    },
+    data () {
+        return {
+            showChart: true
+        }
+    },
+    watch: {
+        value: {
+            handler (newVal, oldVal) {
+                this.getMiddleLeft()
+            },
+            deep: true
+        }
+    },
+    mounted () {
+        const this_ = this
+        setTimeout(() => {
+            this_.getMiddleLeft()
+        }, 100);
+    },
+    methods: {
+        getMiddleLeft () {
+            const chartDom = document.getElementById('mid'+this.id)
+            let myChart = echarts.init(chartDom)
+            const radius = window.innerWidth > 1600 ? '60%' : '45%'
+            let option
+            option = {
+                title: {
+                    text: this.title,
+                    left: 'left',
+                    textStyle:{ fontSize:24,color: this.colorw }
+                },
+                color: ['#339933', '#3366CC', '#FF9933', '#FFFF00'],
+                tooltip: {
+                    trigger: 'item',
+                    formatter: '{d}%'
+                },
+                label: {
+                    formatter: '{c}，{d}%\n{b}',
+                    edgeDistance: '20%',
+                    color: '#fff',
+                    fontSize: '12px'
+                },
+
+                legend: {
+                    show: true,
+                    // orient: 'vertical',
+                    itemGap: 6,
+                    z: 3,
+                    left: 'left',
+                    top: '45',
+                    textStyle: {
+                        color: '#fff'
+                    }
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: radius,
+                        center: ['50%', '60%'],
+                        data: this.value,
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        },
+                        labelLine: {
+                            distanceToLabelLine: 0
+                        }
+                    }
+                ]
+            }
+            myChart.setOption(option)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.pieView {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: rgba(6, 30, 93, 0.5);
+}
+.statisticsPage{
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    padding: 1%;
+    // background-color: rgba(6, 30, 93, 0.5);
+}
+</style>

src/views/business/deviceManagement/components/pieChart.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="statisticsPage" :style="{width:width,height:height}">
+    <div :id="'pie'+id" :style="{height:'100%'}"/>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+  import {GetTotality} from '../utils/config'
+  export default {
+    props: {
+      value: {
+        type: Array,
+      },
+      width:{
+        type:String,
+        default:"100%"
+      },
+      height:{
+        type:String,
+        default: "100%"
+      },
+      id:{
+        type:Number,
+        default:0
+      },
+      click:{
+        type:String,
+        default:'true'
+      },
+      colorw:{
+        type:String,
+        default:'#fff'
+      },
+      title:{
+        type: String
+      }
+    },
+    data () {
+      return {
+      }
+    },
+    watch: {
+        value: {
+            handler () {
+                this.drawLine()
+            },
+            deep: true
+        }
+    },
+    mounted(){
+      setTimeout(() => {
+        this.drawLine()
+      }, 100);
+      
+    },
+    methods: {
+      drawLine(){
+        const totality = GetTotality(this.value)
+        const that = this
+        let pie = echarts.init(document.getElementById('pie'+this.id))
+        let option;
+        option = {
+          title: {
+            text: this.title,
+            left: 'left',
+            textStyle:{ fontSize:24,color: this.colorw }
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          legend:{
+            type: 'scroll',
+            selectedMode: false,
+            orient: 'vertical',
+            itemWidth: 18, // 图例标记的图形宽度，默认为24
+            itemHeight: 18, // 图例标记的图形高度，默认为18
+            icon: 'circle',
+            right: '0',
+            top: '45',
+            formatter: function (name) {
+                let mid = that.value.find(i => i.name === name)
+                let rate = ((mid.value/totality)*100).toFixed(2)
+                let str = `{a|${name}} | {b|${rate}%}{c|${mid.value}}`
+                return str
+            },
+            textStyle: {
+              
+              color: '#fff',
+              // align: 'right',
+              rich: {
+                a: {
+                  width:120,
+                  align: 'left',
+                  fontSize: 16
+                },
+                b: {
+                  width:60,
+                  align: 'right',
+                  fontSize: 16,
+                  fontWeight: 300
+                },
+                c: {
+                  width:50,
+                  align: 'right',
+                  fontSize: 16
+                }
+              }
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: ['45%', '70%'],
+              center: ['20%', '55%'],
+              label: {
+                show: false,
+                formatter: (data, type) => {
+                  let str = `{a|总培训数}\n\n {b|${totality}}` //这里对不同的内容进行标识 a，b，或者可以随便自己起个别的名字
+                  return str;
+                },
+                rich: { //在rich中对两个标识进行样式修改
+                  a: {
+                    fontSize: 16,
+                    fontWeight: 300
+                  },
+                  b: {
+                    fontSize: 28
+                  }
+                },
+                color: this.colorw,
+                position: 'center'
+              },
+              data: this.value,
+              labelLine: {
+                normal: {
+                    show: false,
+                },
+              },
+              // emphasis: {
+              //   label: {
+              //     show: true,
+              //     fontSize: '12px'
+              //   },
+              //   itemStyle: {
+              //     shadowBlur: 10,
+              //     shadowOffsetX: 0,
+              //     shadowColor: 'rgba(0, 0, 0, 0.5)'
+              //   }
+              // }
+            }
+          ]
+       }
+       option && pie.setOption(option);
+      }
+    }
+  }
+</script>
+<style scoped>
+  /* #zlmbPie:hover{
+    transition: all 0.5s;
+    transform:scale(1.03);
+  } */
+  .statisticsPage{
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      padding: 1%;
+      /* background-color: rgba(6, 30, 93, 0.5); */
+  }
+</style>

src/views/business/deviceManagement/constants/option.js

@@ -0,0 +1,349 @@
+import * as echarts from 'echarts'
+
+const rowLimit = (params, max) => {
+    let result = ''
+    // 一行显示几个字
+    const rowMax = max
+    const rowNumber = Math.ceil(params.length / rowMax)
+    // 超过 3 个字换行
+    if (params.length > 3) {
+        for (let p = 0; p < rowNumber; p++) {
+            let tempStr = ''
+            const start = p * rowMax
+            const end = start + rowMax
+            if (p === rowNumber - 1) {
+                tempStr = params.substring(start, params.length)
+            } else {
+                tempStr = params.substring(start, end) + '\n'
+            }
+            result += tempStr
+        }
+    } else {
+        result = params
+    }
+    return result
+}
+
+const basicChart = {
+    title: {
+        show: true,
+        text: '',
+        subtext: '',
+        textStyle: {
+            color: '#fff',
+            fontSize: 24,
+            fontWeight: '600'
+        },
+        subtextStyle: {
+            color: '#fff',
+            fontSize: 14,
+            fontWeight: '400',
+            align: 'center'
+        },
+        textAlign: 'center',
+        left: '50%',
+        top: '5px'
+    },
+    grid: {
+        top: '80px',
+        bottom: '30px'
+    },
+    xAxis: {
+        type: 'category',
+        data: [],
+        axisTick: {
+            alignWithLabel: true
+        },
+        axisLabel: {
+            style: {
+                fill: '#fff'
+            },
+            formatter (params) {
+                return rowLimit(params, 4)
+            }
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        }
+    },
+    yAxis: {
+        type: 'value',
+        name: '',
+        nameTextStyle: {
+            color: '#fff',
+            fontSize: 14
+        },
+        splitLine: {
+            show: false
+        },
+        axisLine: {
+            lineStyle: {
+                color: '#fff'
+            }
+        }
+    },
+    series: [{
+        type: 'line',
+        name: '合格率',
+        data: [],
+        markLine: {
+            data: [
+                {
+                    yAxis: '',
+                    tooltip: {
+                        formatter: ''
+                    },
+                    label: {
+                        show: true, position: 'inside',
+                        color: '#83bff6',
+                        formatter: ''
+                    },
+                    lineStyle: {
+                        color: '#ff4757',
+                        type: 'dashed'
+                    }
+                }
+            ]
+        },
+        itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#83bff6' },
+                { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: '#188df0' }
+            ])
+        },
+        emphasis: {
+            itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#2378f7' },
+                    { offset: 0.7, color: '#2378f7' },
+                    { offset: 1, color: '#83bff6' }
+                ])
+            }
+        },
+        label: {
+            show: true,
+            position: 'top',
+            textStyle: {
+                color: '#fff',
+                fontSize: 14
+            },
+            formatter (params) {
+                return params.value ? params.value : ''
+            }
+        }
+    }],
+    tooltip: {
+        show: true,
+        trigger: 'axis',
+        formatter: '指标详情<br/>{b}月：{c}'
+    }
+}
+
+export const colors = [
+    '#d20962',
+    '#f47721',
+    '#7ac143',
+    '#00a78e',
+    '#00bce4',
+    '#7d3f98',
+    '#037ef3',
+    '#f85a40',
+    '#00c16e',
+    '#12CBC4',
+    '#b4a996',
+    '#7552cc',
+    '#67809f',
+    '#f19066'
+]
+
+export function* getRandomColor (shuffledColors) {
+    let index = 0
+    while (index < shuffledColors.length) {
+        yield shuffledColors[index]
+        index++
+    }
+}
+
+export const monthChartOption = basicChart
+
+export const quarterChartOption = {
+    ...basicChart,
+    series: [{
+        type: 'bar',
+        name: '',
+        data: [],
+        markLine: {
+            data: [
+                {
+                    yAxis: '',
+                    tooltip: {
+                        formatter: ''
+                    },
+                    label: {
+                        show: true, position: 'inside',
+                        color: '#83bff6',
+                        formatter: ''
+                    },
+                    lineStyle: {
+                        color: '#ff4757',
+                        type: 'dashed'
+                    }
+                }
+            ]
+        },
+        itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#83bff6' },
+                { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: '#188df0' }
+            ])
+        },
+        emphasis: {
+            itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#2378f7' },
+                    { offset: 0.7, color: '#2378f7' },
+                    { offset: 1, color: '#83bff6' }
+                ])
+            }
+        },
+        label: {
+            show: true,
+            position: 'top',
+            textStyle: {
+                color: '#fff',
+                fontSize: 14
+            },
+            formatter (params) {
+                return params.value ? params.value : ''
+            }
+        }
+    }],
+    tooltip: {
+        show: true,
+        trigger: 'axis',
+        formatter: '指标详情<br/>{b}：{c}'
+    }
+}
+
+export const yearChartOption = {
+    ...basicChart,
+    series: [{
+        type: 'bar',
+        name: '',
+        data: [],
+        markLine: {
+            data: [
+                {
+                    yAxis: '',
+                    tooltip: {
+                        formatter: ''
+                    },
+                    label: {
+                        show: true, position: 'inside',
+                        color: '#83bff6',
+                        formatter: ''
+                    },
+                    lineStyle: {
+                        color: '#ff4757',
+                        type: 'dashed'
+                    }
+                }
+            ]
+        },
+        itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#83bff6' },
+                { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: '#188df0' }
+            ])
+        },
+        emphasis: {
+            itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: '#2378f7' },
+                    { offset: 0.7, color: '#2378f7' },
+                    { offset: 1, color: '#83bff6' }
+                ])
+            }
+        },
+        label: {
+            show: true,
+            position: 'top',
+            textStyle: {
+                color: '#fff',
+                fontSize: 14
+            },
+            formatter (params) {
+                return params.value ? params.value : ''
+            }
+        }
+    }],
+    tooltip: {
+        show: true,
+        trigger: 'axis',
+        formatter: '指标详情<br/>{b}年度：{c}'
+    }
+}
+
+export const lineChartOption = {
+    ...basicChart,
+    grid: {
+        top: '80px',
+        bottom: '30px',
+        left: '30px',
+        right: '30px'
+    }
+}
+
+export const barChartOption = {
+    ...basicChart,
+    grid: {
+        top: '80px',
+        bottom: '30px',
+        left: '30px',
+        right: '30px'
+    },
+    series: [
+        {
+            type: 'bar',
+            name: '中位数',
+            data: [],
+            barMaxWidth: '35px',
+            barStyle: {
+                fill: 'rgba(0, 186, 255, 0.4)'
+            },
+            itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#83bff6" },
+                    { offset: 0.5, color: "#188df0" },
+                    { offset: 1, color: "#188df0" },
+                ])
+            },
+            emphasis: {
+                itemStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: "#2378f7" },
+                        { offset: 0.7, color: "#2378f7" },
+                        { offset: 1, color: "#83bff6" },
+                    ])
+                }
+            },
+            label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                    color: '#fff',
+                    fontSize: 14
+                },
+                formatter (params) {
+                    return params.value ? params.value : ''
+                }
+            }
+        },
+        ...basicChart.series
+    ]
+}

src/views/business/deviceManagement/constants/simulated.js

@@ -0,0 +1,293 @@
+export const distributionDataObj = [
+    {
+        name: '检验系统',
+        value: 178
+    },
+    {
+        name: '通用设备',
+        value: 145
+    },
+    {
+        name: '软件',
+        value: 0
+    },
+    {
+        name: '信息系统',
+        value: 1
+    }
+]
+
+export const numDistributionDataObj = [
+    {
+        name: '临检组',
+        value: 40
+    },
+    {
+        name: '生化组',
+        value: 20
+    },
+    {
+        name: '免疫组',
+        value: 20
+    },
+    {
+        name: '微生物组',
+        value: 20
+    }
+]
+export const lifeTimeData = [
+    {
+        org: '生化组',
+        numO: 60,
+        numOT: 40,
+        numTF: 20,
+        numF: 20
+    },
+    {
+        org: '免疫组',
+        numO: 60,
+        numOT: 40,
+        numTF: 20,
+        numF: 20
+    },
+    {
+        org: '临检组',
+        numO: 60,
+        numOT: 40,
+        numTF: 20,
+        numF: 20
+    },
+    {
+        org: '微生物组',
+        numO: 60,
+        numOT: 40,
+        numTF: 20,
+        numF: 20
+    },
+    {
+        org: '检验科',
+        numO: 60,
+        numOT: 40,
+        numTF: 20,
+        numF: 20
+    }
+]
+export const intactData = [
+    {
+        org: '生化组',
+        numAll: 60,
+        numR: 40,
+        numS: 20
+    },
+    {
+        org: '免疫组',
+        numAll: 60,
+        numR: 40,
+        numS: 20
+    },
+    {
+        org: '临检组',
+        numAll: 60,
+        numR: 40,
+        numS: 20
+    },
+    {
+        org: '微生物组',
+        numAll: 60,
+        numR: 40,
+        numS: 20
+    }
+]
+export const completeData = [
+    {
+        org: '生化组',
+        numP: 60,
+        numC: 40
+    },
+    {
+        org: '免疫组',
+        numP: 60,
+        numC: 40
+    },
+    {
+        org: '临检组',
+        numP: 60,
+        numC: 40
+    },
+    {
+        org: '微生物组',
+        numP: 60,
+        numC: 40
+    },
+    {
+        org: '检验科',
+        numP: 60,
+        numC: 40
+    }
+]
+export const verificationData = [
+    {
+        org: '生化组',
+        numJ: 60,
+        numW: 40
+    },
+    {
+        org: '免疫组',
+        numJ: 60,
+        numW: 40
+    },
+    {
+        org: '临检组',
+        numJ: 60,
+        numW: 40
+    },
+    {
+        org: '微生物组',
+        numJ: 60,
+        numW: 40
+    },
+    {
+        org: '检验科',
+        numJ: 60,
+        numW: 40
+    }
+]
+export const scrapData = [
+    [
+        "微生物组",
+        "游标卡尺",
+        "JYK-1690",
+        "停用"
+    ],
+    [
+        "微生物组",
+        "生物安全柜",
+        "JYK-1688",
+        "停用"
+    ],
+    [
+        "微生物组",
+        "医用离心机",
+        "JYK-1682",
+        "停用"
+    ],
+    [
+        "微生物组",
+        "生物安全柜",
+        "JYK-1689",
+        "停用"
+    ],
+    [
+        "免疫组",
+        "医用离心机",
+        "JYK-1692",
+        "停用"
+    ],
+    [
+        "免疫组",
+        "数显混匀器",
+        "JYK-1691",
+        "停用"
+    ],
+    [
+        "生化组",
+        "笔式电导率测定仪",
+        "JYK-1679",
+        "停用"
+    ],
+    [
+        "生化组",
+        "Beckman Coulter IMMAGE 800特定蛋白分析仪",
+        "JYK-1594",
+        "停用"
+    ],
+    [
+        "临检组",
+        "显微镜",
+        "JYK-0453",
+        "停用"
+    ],
+    [
+        "临检组",
+        "自动染色仪",
+        "JYK-0447",
+        "停用"
+    ],
+    [
+        "临检组",
+        "检验分析用纯水设备",
+        "JYK-1663",
+        "停用"
+    ],
+    [
+        "临检组",
+        "超纯水机",
+        "JYK-0456",
+        "停用"
+    ],
+    [
+        "临检组",
+        "干式荧光免疫分析仪",
+        "JYK-0434",
+        "停用"
+    ],
+    [
+        "临检组",
+        "全自动血细胞分析仪",
+        "JYK-0420",
+        "停用"
+    ],
+    [
+        "临检组",
+        "尿液分析仪",
+        "JYK-0449",
+        "停用"
+    ]
+]
+export const entiretyData = {
+    totality:{
+        sum: 50,
+        month: {
+            add: 10,
+            outService: 10,
+            scrap: 10
+        },
+        year: {
+            add: 10,
+            outService: 10,
+            scrap: 10
+        }
+    },
+    calibrate:{
+        sum: 50,
+        month: {
+            calibrateNum: 10,
+            outService: 10
+        },
+        year: {
+            calibrateNum: 10,
+            outService: 10
+        }
+    },
+    upkeep:{
+        sum: 50,
+        month: {
+            upkeep: 10,
+            unUpkeep: 10
+        },
+        year: {
+            upkeep: 10,
+            unUpkeep: 10
+        }
+    }
+}
+export default {
+    distributionDataObj,
+    numDistributionDataObj,
+    lifeTimeData,
+    intactData,
+    completeData,
+    verificationData,
+    scrapData,
+    entiretyData
+}

src/views/business/deviceManagement/index.vue

@@ -0,0 +1,398 @@
+<template>
+    <div :class="$style.content">
+        <dv-full-screen-container>
+            <!-- 头部内容 -->
+            <div :class="$style.header">
+                <dv-decoration-8 :class="$style.left" />
+                <dv-decoration-5 :class="$style.center" :dur="5" />
+                <dv-decoration-8 :class="$style.right" :reverse="true" />
+                <div :class="$style.title">{{ title }}</div>
+                <div :class="$style.back" @click.prevent="goBack()">
+                    <dv-border-box-8>返回</dv-border-box-8>
+                </div>
+            </div>
+            <!-- 图表区域 -->
+            <dv-border-box-1>
+                <div class="vessel">
+                    <div class="area">
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:32%;">
+                            <middleCard v-if="mergeData[0].numData.length>0" v-model="mergeData[0].numData" :title="mergeData[0].title" :width="'98%'" :height="'98%'" />
+                        </dv-border-box-7>
+                        <dv-decoration-2 :key="`line1`" :dur="6" style="width:100%;height:2%;" />
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:32%;">
+                            <pie-chart v-if="mergeData[1].numData.length>0" :title="mergeData[1].title" v-model="mergeData[1].numData" :width="'98%'" :height="'98%'" :id="1"/>
+                        </dv-border-box-7>
+                        <dv-decoration-2 :key="`line2`" :dur="6" style="width:100%;height:2%;" />
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:32%;">
+                            <bar-chart v-if="mergeData[2].numData.length>0" :title="mergeData[2].title" v-model="mergeData[2].numData" :width="'98%'" :height="'98%'" :id="1" />
+                        </dv-border-box-7>
+                    </div>
+                    <dv-decoration-2 :key="`line3`" :reverse="true" :dur="6" style="width:1%;height:100%;" />
+                    <div class="area midArea">
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:42%;">
+                            <entirety :title="mergeData[7].title" v-model="mergeData[7].numData" :width="'98%'" :height="'98%'"/>
+                        </dv-border-box-7>
+                        <dv-decoration-2 :key="`line5`" :dur="6" style="width:100%;height:2%;" />
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:56.26%;">
+                            <bar-chart v-if="mergeData[3].numData.length>0" :title="mergeData[3].title" v-model="mergeData[3].numData" :width="'98%'" :height="'98%'" :id="2" />
+                        </dv-border-box-7>
+                    </div>
+                    <dv-decoration-2 :key="`line4`" :reverse="true" :dur="6" style="width:1%;height:100%;" />
+                    <div class="area">
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:32%;">
+                            <bar-chart v-if="mergeData[4].numData.length>0" :title="mergeData[4].title" v-model="mergeData[4].numData" :width="'98%'" :height="'98%'" :id="3" />
+                        </dv-border-box-7>
+                        <dv-decoration-2 :key="`line1`" :dur="6" style="width:100%;height:2%;" />
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:32%;">
+                            <bar-chart v-if="mergeData[5].numData.length>0" :title="mergeData[5].title" v-model="mergeData[5].numData" :width="'98%'" :height="'98%'" :id="4" />
+                        </dv-border-box-7>
+                        <dv-decoration-2 :key="`line1`" :dur="6" style="width:100%;height:2%;" />
+                        <dv-border-box-7 :color="['rgb(22,47,98)', 'rgba(116, 142, 194, 1)']" backgroundColor="rgba(6, 30, 93, 0.5)" style="width:100%;height:32%;">
+                            <CarouselTabl v-if="mergeData[6].numData.data.length>0" :title="mergeData[6].title" v-model="mergeData[6].numData"/> 
+                        </dv-border-box-7>
+                    </div>
+                </div>
+            </dv-border-box-1>
+        </dv-full-screen-container>
+    </div>
+</template>
+<script>
+import screenfull from 'screenfull'
+import dataobj from './constants/simulated.js'
+export default {
+    components: {
+        barChart: () => import('./components/barCharto.vue'),
+        PieChart: () => import('./components/pieChart.vue'),
+        middleCard: () => import('./components/getPieView'),
+        CarouselTabl: () => import('./components/CarouselTabl'),
+        entirety: () => import('./components/entirety'),
+    },
+    data () {
+        const { deptList = [] } = this.$store.getters || {}
+        let chooseDept = deptList.filter(e => e.depth == 4)
+        chooseDept.unshift({positionId: " ",positionName: "全科室"})
+        return {
+            deptList,
+            chooseDept,
+            deptVal: ' ',
+            level: '',
+            title: '设备管理看板',
+            fontSize: 18,
+            show: true,
+            hoverClassAdd:'w',
+            mergeData:[
+                {
+                    title: '检验科各型设备分布情况',
+                    numData: dataobj.distributionDataObj
+                },
+                {
+                    title: '各组设备总数分布情况',
+                    numData: dataobj.numDistributionDataObj
+                },
+                {
+                    title: '部门设备寿命情况统计',
+                    numData: dataobj.lifeTimeData
+                },
+                {
+                    title: '各部门设备完好情况',
+                    numData: dataobj.intactData
+                },
+                {
+                    title: '各部门设备维护完成情况',
+                    numData: dataobj.completeData
+                },
+                {
+                    title: '各部门设备检定/校准完成情况',
+                    numData: dataobj.verificationData
+                },
+                {
+                    title: '检验科设备停用/报废列表',
+                    numData: {
+                        header: ['部门', '设备名称', '设备编号', '状态'],
+                        data: dataobj.scrapData,
+                        columnWidth: ['120', '250', '180', '110'],
+                        rowNum: 5
+                    }
+                },
+                {
+                    title: '设备整体情况',
+                    numData: dataobj.entiretyData
+                }
+            ]
+        }
+    },
+    created () {
+        // 默认全屏展示
+        if (screenfull.isEnabled && !screenfull.isFullscreen) {
+            screenfull.request()
+        }
+
+        this.updateAll()
+    },
+    beforeDestroy () {
+        if (screenfull.isFullscreen) {
+            screenfull.toggle()
+        }
+        // this.clenUp()
+    },
+    methods: {
+        initializeData () {
+            const w = window.innerWidth
+            const { first = '', second = '' } = this.$store.getters.level || {}
+            this.level = second || first
+            this.fontSize = w >= 1600 ? 20 : w > 1366 && w < 1600 ? 18 : 16
+        },
+        updateAll () {
+            this.initializeData()
+        },
+        updatePart () {
+
+        },
+        async fetchData () {
+        },
+        goBack () {
+            this.$router.back(-1)
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+    ::v-deep .el-button--text {
+        color: #FFFFFF;
+        padding: 5px 5px;
+        border-radius: 4px;
+    }
+    .hoverClass{
+        background: #1892ea;
+        border-color: #1892ea;
+        color: #FFFFFF;
+    }
+</style>
+<style lang="scss" module>
+    .content {
+        width: 100%;
+        height: 100%;
+        background-color: #030409;
+        position: absolute;
+        color: #fff;
+        z-index: 999;
+        :global {
+            #dv-full-screen-container {
+                background-image: url('~@/assets/images/screen/bg.png');
+                background-size: 100% 100%;
+                box-shadow: 0 0 3px blue;
+                display: flex;
+                flex-direction: column;
+            }
+            .dv-border-box-1 .border-box-content{
+                height: 98%;
+                .vessel{
+                    width: 98%;
+                    height: 98%;
+                    padding: 1% 1% 0 1%;
+                    display: flex;
+                    flex-flow: wrap;
+                    justify-content: space-evenly;
+                    align-content: space-evenly;
+                    .area{
+                        width: 30%;
+                        height: 100%;
+                        .dv-border-box-7{
+                            .border-box-content{
+                                width:100%;
+                                height:100%;
+                            }
+                        }
+                    }
+                    .midArea{
+                        width: 37%;
+                    }
+                }
+            }
+            .main-content {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .block-left-right-content {
+                flex: 1;
+                display: flex;
+                margin-top: 0.8%;
+            }
+
+            .block-top-bottom-content {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                box-sizing: border-box;
+                padding-left: 0.8%;
+            }
+
+            .block-top-content {
+                height: 55%;
+                display: flex;
+                flex-grow: 0;
+                box-sizing: border-box;
+                padding-bottom: 0.8%;
+            }
+        }
+        .header {
+            position: relative;
+            width: 100%;
+            height: 90px;
+            display: flex;
+            justify-content: space-between;
+            flex-shrink: 0;
+            .left, .right {
+                width: 25%;
+                height: 60px;
+            }
+            .center {
+                width: 40%;
+                height: 60px;
+                margin-top: 30px;
+            }
+            .title {
+                position: absolute;
+                font-size: 30px;
+                font-weight: bold;
+                left: 50%;
+                top: 15px;
+                transform: translateX(-50%);
+            }
+            .daterange, .cycle, .back, .parse {
+                width: 8%;
+                // max-width: 180px;
+                cursor: pointer;
+                height: 2.825rem;
+                line-height: 2.825rem;
+                text-align: center;
+                margin-top: 2%;
+                flex: 1;
+                position: absolute;
+                color: #ffffff;
+            }
+            .daterange {
+                width: 10%;
+                right: 80%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                :global {
+                    .el-input--small .el-input__inner {
+                        width: 100% !important;
+                        background: rgba(255, 255, 255, 0);
+                        border: none;
+                        color: #fff;
+                        font-size: 16px;
+                        cursor: pointer;
+                        // padding-left: 0;
+                        padding-right: 0;
+                    }
+                    .el-select--small .el-input .el-input__inner {
+                        width: 100% !important;
+                        background: rgba(255, 255, 255, 0);
+                        border: none;
+                        color: #fff;
+                        font-size: 12px;
+                        cursor: pointer;
+                        // padding-left: 0;
+                        padding-right: 0;
+                    }
+                    .el-input__inner {
+                        width: 100% !important;
+                        background: rgba(255, 255, 255, 0);
+                        border: none;
+                        font-size: 16px;
+                        cursor: pointer;
+                        // padding-left: 0;
+                        padding-right: 0;
+                        .el-range-input {
+                            background: rgba(255, 255, 255, 0);
+                            color: #fff;
+                        }
+                        .el-input__icon {
+                            color: #fff;
+                        }
+                        .el-range-separator{
+                            color: #fff;
+                        }
+                    }
+                    .el-cascader .el-input--suffix .el-input__inner{
+                        font-size: 12px;
+                        color: #fff;
+                    }
+                }
+            }
+            .cycle {
+                display: flex;
+                min-width: 150px;
+                justify-content: flex-end;
+                // width: 125px;
+                right: 75%;
+                padding-left: 10px;
+                color: #fff;
+                font-size: 22px;
+                font-weight: 400;
+                :global {
+                    .el-dropdown {
+                        width: calc(100% - 52px);
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        .el-dropdown-link {
+                            text-align: center;
+                        }
+                    }
+                }
+            }
+            .back {
+                width: 5%;
+                left: calc(75% + 80px);
+            }
+            .parse {
+                width: 2%;
+                left: 75%;
+                align-items: center;
+                padding: 5px;
+                > img {
+                    height: calc(100% - 10px);
+                }
+            }
+            @media only screen and (max-width: 1680px) {
+                .daterange, .cycle, .back, .parse {
+                    height: 2.5rem;
+                    line-height: 2.5rem;
+                    margin-top: 2.5%;
+                }
+                .daterange {
+                    right: 79%;
+                }
+                .cycle {
+                    width: 5%;
+                    min-width: 120px;
+                    font-size: 18px;
+                    font-weight: normal;
+                }
+                .back {
+                    left: calc(75% + 60px);
+                }
+            }
+            @media only screen and (max-width: 1366px) {
+                .daterange {
+                    right: 78%;
+                }
+                .cycle {
+                    right: 70%;
+                    min-width: 140px;
+                    font-size: 16px;
+                    font-weight: normal;
+                }
+                .back {
+                    left: calc(75% + 50px);
+                }
+            }
+        }
+    }
+</style>

src/views/business/deviceManagement/utils/config.js

@@ -0,0 +1,72 @@
+export const GetPercent = (num, total)=> {
+    /// <summary>
+    /// 求百分比
+    /// </summary>
+    /// <param name="num">当前数</param>
+    /// <param name="total">总数</param>
+    num = parseFloat(num);
+    total = parseFloat(total);
+    if (isNaN(num) || isNaN(total)) {
+        return "-";
+    }
+    return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00)+"%";
+}
+export const GetMax = (arr)=> {
+    let max = 1;
+    if(arr ==undefined)
+        return 1;
+
+    arr.forEach(v => {
+        if (max<v) {
+          max = v;
+        }
+      })
+   return max;
+}
+
+export const GetTotality = (arr)=> {
+    let mid = 0;
+    if(arr == undefined)
+        return mid;
+
+    arr.forEach(v => {
+        mid += v.value
+    })
+   return mid;
+}
+
+// 时间格式化
+export const getFormatDate = (type, start, length, date = new Date()) => {
+    const now = new Date(new Date(date).getTime())
+    // eslint-disable-next-line
+    if (now == 'Invalid Date') {
+        console.log('非法日期，无法格式化')
+        return date
+    }
+    const year = now.getFullYear()
+    const month = now.getMonth() + 1
+    const day = now.getDate()
+    const hours = now.getHours()
+    const minutes = now.getMinutes()
+    const seconds = now.getSeconds()
+    // 补零
+    const padZero = (num) => {
+        return num.toString().padStart(2, '0')
+    }
+    // 默认返回String类型
+    let result = `${year}-${padZero(month)}-${padZero(day)} ${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`
+    switch (type) {
+        case 'string':
+            result = `${year}-${padZero(month)}-${padZero(day)} ${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`
+            break
+        case 'cn':
+            result = `${year}年${padZero(month)}月${padZero(day)}日 ${padZero(hours)}时${padZero(minutes)}分${padZero(seconds)}秒`
+            break
+        case 'number':
+            result = `${year}${padZero(month)}${padZero(day)}${padZero(hours)}${padZero(minutes)}${padZero(seconds)}`
+            break
+        default:
+            break
+    }
+    return result.slice(start, length || result.length)
+}