Merge remote-tracking branch 'origin/0.8.X' into 0.8.X

klp-admin/src/main/resources/application-dev.yml

@@ -64,9 +64,9 @@ spring:
           driverClassName: com.mysql.cj.jdbc.Driver
           # jdbc 所有参数配置参考 https://lionli.blog.csdn.net/article/details/122018562
           # rewriteBatchedStatements=true 批处理优化 大幅提升批量插入更新删除性能(对数据库有性能损耗 使用批量操作应考虑性能问题)
-          url: jdbc:mysql://140.143.206.120:3306/klp-oa?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&autoReconnect=true&rewriteBatchedStatements=true&nullCatalogMeansCurrent=true
+          url: jdbc:mysql://140.143.206.120:13306/klp-oa?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&autoReconnect=true&rewriteBatchedStatements=true&nullCatalogMeansCurrent=true
           username: klp
-          password: KeLunPu123@
+          password: KeLunPu@123
         # 从库数据源
         slave:
           lazy: true

klp-pocket/src/main/java/com/klp/pocket/controller/Klptcm1ProPlantStateHistoryController.java

@@ -1,5 +1,11 @@
 package com.klp.pocket.controller;
 
+import com.klp.common.annotation.Log;
+import com.klp.common.annotation.RepeatSubmit;
+import com.klp.common.core.domain.R;
+import com.klp.common.core.validate.AddGroup;
+import com.klp.common.core.validate.EditGroup;
+import com.klp.common.enums.BusinessType;
 import lombok.RequiredArgsConstructor;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.validation.annotation.Validated;
@@ -10,6 +16,11 @@ import com.klp.pocket.domain.bo.Klptcm1ProPlantStateHistoryBo;
 import com.klp.pocket.service.IKlptcm1ProPlantStateHistoryService;
 import com.klp.common.core.page.TableDataInfo;
 
+import javax.validation.constraints.NotEmpty;
+import javax.validation.constraints.NotNull;
+import java.util.Arrays;
+import java.util.Date;
+
 /**
  * 历史
  *
@@ -32,4 +43,46 @@ public class Klptcm1ProPlantStateHistoryController extends BaseController {
         return iKlptcm1ProPlantStateHistoryService.queryPageList(bo, pageQuery);
     }
 
+    /**
+     * 获取历史详细信息
+     *
+     * @param INSDATE 主键
+     */
+    @GetMapping("/{INSDATE}")
+    public R<Klptcm1ProPlantStateHistoryVo> getInfo(@NotNull(message = "主键不能为空")
+                                                    @PathVariable Date INSDATE) {
+        return R.ok(iKlptcm1ProPlantStateHistoryService.queryById(INSDATE));
+    }
+
+    /**
+     * 新增历史
+     */
+    @Log(title = "历史", businessType = BusinessType.INSERT)
+    @RepeatSubmit()
+    @PostMapping()
+    public R<Void> add(@Validated(AddGroup.class) @RequestBody Klptcm1ProPlantStateHistoryBo bo) {
+        return toAjax(iKlptcm1ProPlantStateHistoryService.insertByBo(bo));
+    }
+
+    /**
+     * 修改历史
+     */
+    @Log(title = "历史", businessType = BusinessType.UPDATE)
+    @RepeatSubmit()
+    @PutMapping()
+    public R<Void> edit(@Validated(EditGroup.class) @RequestBody Klptcm1ProPlantStateHistoryBo bo) {
+        return toAjax(iKlptcm1ProPlantStateHistoryService.updateByBo(bo));
+    }
+
+    /**
+     * 删除历史
+     *
+     * @param INSDATEs 主键串
+     */
+    @Log(title = "历史", businessType = BusinessType.DELETE)
+    @DeleteMapping("/{INSDATEs}")
+    public R<Void> remove(@NotEmpty(message = "主键不能为空")
+                          @PathVariable Date[] INSDATEs) {
+        return toAjax(iKlptcm1ProPlantStateHistoryService.deleteWithValidByIds(Arrays.asList(INSDATEs), true));
+    }
 }

klp-pocket/src/main/java/com/klp/pocket/controller/Klptcm1ProStoppageController.java

@@ -1,5 +1,11 @@
 package com.klp.pocket.controller;
 
+import com.klp.common.annotation.Log;
+import com.klp.common.annotation.RepeatSubmit;
+import com.klp.common.core.domain.R;
+import com.klp.common.core.validate.AddGroup;
+import com.klp.common.core.validate.EditGroup;
+import com.klp.common.enums.BusinessType;
 import lombok.RequiredArgsConstructor;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.validation.annotation.Validated;
@@ -10,6 +16,10 @@ import com.klp.pocket.domain.bo.Klptcm1ProStoppageBo;
 import com.klp.pocket.service.IKlptcm1ProStoppageService;
 import com.klp.common.core.page.TableDataInfo;
 
+import javax.validation.constraints.NotEmpty;
+import javax.validation.constraints.NotNull;
+import java.util.Arrays;
+
 /**
  * 停机
  *
@@ -32,4 +42,46 @@ public class Klptcm1ProStoppageController extends BaseController {
         return iKlptcm1ProStoppageService.queryPageList(bo, pageQuery);
     }
 
+    /**
+     * 获取停机详细信息
+     *
+     * @param STOPID 主键
+     */
+    @GetMapping("/{STOPID}")
+    public R<Klptcm1ProStoppageVo> getInfo(@NotNull(message = "主键不能为空")
+                                           @PathVariable Long STOPID) {
+        return R.ok(iKlptcm1ProStoppageService.queryById(STOPID));
+    }
+
+    /**
+     * 新增停机
+     */
+    @Log(title = "停机", businessType = BusinessType.INSERT)
+    @RepeatSubmit()
+    @PostMapping()
+    public R<Void> add(@Validated(AddGroup.class) @RequestBody Klptcm1ProStoppageBo bo) {
+        return toAjax(iKlptcm1ProStoppageService.insertByBo(bo));
+    }
+
+    /**
+     * 修改停机
+     */
+    @Log(title = "停机", businessType = BusinessType.UPDATE)
+    @RepeatSubmit()
+    @PutMapping()
+    public R<Void> edit(@Validated(EditGroup.class) @RequestBody Klptcm1ProStoppageBo bo) {
+        return toAjax(iKlptcm1ProStoppageService.updateByBo(bo));
+    }
+
+    /**
+     * 删除停机
+     *
+     * @param STOPIDs 主键串
+     */
+    @Log(title = "停机", businessType = BusinessType.DELETE)
+    @DeleteMapping("/{STOPIDs}")
+    public R<Void> remove(@NotEmpty(message = "主键不能为空")
+                          @PathVariable Long[] STOPIDs) {
+        return toAjax(iKlptcm1ProStoppageService.deleteWithValidByIds(Arrays.asList(STOPIDs), true));
+    }
 }

klp-pocket/src/main/java/com/klp/pocket/service/IKlptcm1ProPlantStateHistoryService.java

@@ -5,6 +5,7 @@ import com.klp.pocket.domain.bo.Klptcm1ProPlantStateHistoryBo;
 import com.klp.common.core.page.TableDataInfo;
 import com.klp.common.core.domain.PageQuery;
 
+import java.util.Collection;
 import java.util.Date;
 import java.util.List;
 
@@ -31,4 +32,18 @@ public interface IKlptcm1ProPlantStateHistoryService {
      */
     List<Klptcm1ProPlantStateHistoryVo> queryList(Klptcm1ProPlantStateHistoryBo bo);
 
+    /**
+     * 新增历史
+     */
+    Boolean insertByBo(Klptcm1ProPlantStateHistoryBo bo);
+
+    /**
+     * 修改历史
+     */
+    Boolean updateByBo(Klptcm1ProPlantStateHistoryBo bo);
+
+    /**
+     * 校验并批量删除历史信息
+     */
+    Boolean deleteWithValidByIds(Collection<Date> ids, Boolean isValid);
 }

klp-pocket/src/main/java/com/klp/pocket/service/IKlptcm1ProStoppageService.java

@@ -5,6 +5,7 @@ import com.klp.pocket.domain.bo.Klptcm1ProStoppageBo;
 import com.klp.common.core.page.TableDataInfo;
 import com.klp.common.core.domain.PageQuery;
 
+import java.util.Collection;
 import java.util.List;
 
 /**
@@ -29,4 +30,19 @@ public interface IKlptcm1ProStoppageService {
      * 查询停机列表
      */
     List<Klptcm1ProStoppageVo> queryList(Klptcm1ProStoppageBo bo);
+
+    /**
+     * 新增停机
+     */
+    Boolean insertByBo(Klptcm1ProStoppageBo bo);
+
+    /**
+     * 修改停机
+     */
+    Boolean updateByBo(Klptcm1ProStoppageBo bo);
+
+    /**
+     * 校验并批量删除停机信息
+     */
+    Boolean deleteWithValidByIds(Collection<Long> ids, Boolean isValid);
 }

klp-pocket/src/main/java/com/klp/pocket/service/impl/Klptcm1ProPlantStateHistoryServiceImpl.java

@@ -1,5 +1,6 @@
 package com.klp.pocket.service.impl;
 
+import cn.hutool.core.bean.BeanUtil;
 import com.baomidou.dynamic.datasource.annotation.DS;
 import com.klp.common.core.page.TableDataInfo;
 import com.klp.common.core.domain.PageQuery;
@@ -14,6 +15,7 @@ import com.klp.pocket.domain.Klptcm1ProPlantStateHistory;
 import com.klp.pocket.mapper.Klptcm1ProPlantStateHistoryMapper;
 import com.klp.pocket.service.IKlptcm1ProPlantStateHistoryService;
 
+import java.util.Collection;
 import java.util.Date;
 import java.util.List;
 import java.util.Map;
@@ -169,4 +171,46 @@ public class Klptcm1ProPlantStateHistoryServiceImpl implements IKlptcm1ProPlantS
         lqw.eq(bo.getVALUE99() != null, Klptcm1ProPlantStateHistory::getValue99, bo.getVALUE99());
         return lqw;
     }
+
+    /**
+     * 新增历史
+     */
+    @Override
+    public Boolean insertByBo(Klptcm1ProPlantStateHistoryBo bo) {
+        Klptcm1ProPlantStateHistory add = BeanUtil.toBean(bo, Klptcm1ProPlantStateHistory.class);
+        validEntityBeforeSave(add);
+        boolean flag = baseMapper.insert(add) > 0;
+        if (flag) {
+            bo.setINSDATE(add.getInsdate());
+        }
+        return flag;
+    }
+
+    /**
+     * 修改历史
+     */
+    @Override
+    public Boolean updateByBo(Klptcm1ProPlantStateHistoryBo bo) {
+        Klptcm1ProPlantStateHistory update = BeanUtil.toBean(bo, Klptcm1ProPlantStateHistory.class);
+        validEntityBeforeSave(update);
+        return baseMapper.updateById(update) > 0;
+    }
+
+    /**
+     * 保存前的数据校验
+     */
+    private void validEntityBeforeSave(Klptcm1ProPlantStateHistory entity){
+        //TODO 做一些数据校验,如唯一约束
+    }
+
+    /**
+     * 批量删除历史
+     */
+    @Override
+    public Boolean deleteWithValidByIds(Collection<Date> ids, Boolean isValid) {
+        if(isValid){
+            //TODO 做一些业务上的校验,判断是否需要校验
+        }
+        return baseMapper.deleteBatchIds(ids) > 0;
+    }
 }

klp-pocket/src/main/java/com/klp/pocket/service/impl/Klptcm1ProStoppageServiceImpl.java

@@ -1,5 +1,6 @@
 package com.klp.pocket.service.impl;
 
+import cn.hutool.core.bean.BeanUtil;
 import com.baomidou.dynamic.datasource.annotation.DS;
 import com.klp.common.core.page.TableDataInfo;
 import com.klp.common.core.domain.PageQuery;
@@ -15,6 +16,7 @@ import com.klp.pocket.domain.Klptcm1ProStoppage;
 import com.klp.pocket.mapper.Klptcm1ProStoppageMapper;
 import com.klp.pocket.service.IKlptcm1ProStoppageService;
 
+import java.util.Collection;
 import java.util.List;
 import java.util.Map;
 
@@ -77,4 +79,45 @@ public class Klptcm1ProStoppageServiceImpl implements IKlptcm1ProStoppageService
         return lqw;
     }
 
+    /**
+     * 新增停机
+     */
+    @Override
+    public Boolean insertByBo(Klptcm1ProStoppageBo bo) {
+        Klptcm1ProStoppage add = BeanUtil.toBean(bo, Klptcm1ProStoppage.class);
+        validEntityBeforeSave(add);
+        boolean flag = baseMapper.insert(add) > 0;
+        if (flag) {
+            bo.setSTOPID(add.getStopid());
+        }
+        return flag;
+    }
+
+    /**
+     * 修改停机
+     */
+    @Override
+    public Boolean updateByBo(Klptcm1ProStoppageBo bo) {
+        Klptcm1ProStoppage update = BeanUtil.toBean(bo, Klptcm1ProStoppage.class);
+        validEntityBeforeSave(update);
+        return baseMapper.updateById(update) > 0;
+    }
+
+    /**
+     * 保存前的数据校验
+     */
+    private void validEntityBeforeSave(Klptcm1ProStoppage entity){
+        //TODO 做一些数据校验,如唯一约束
+    }
+
+    /**
+     * 批量删除停机
+     */
+    @Override
+    public Boolean deleteWithValidByIds(Collection<Long> ids, Boolean isValid) {
+        if(isValid){
+            //TODO 做一些业务上的校验,判断是否需要校验
+        }
+        return baseMapper.deleteBatchIds(ids) > 0;
+    }
 }

klp-ui/package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@babel/parser": "7.7.4",
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "bpmn-js-token-simulation": "0.10.0",

klp-ui/src/assets/styles/element-variables.scss

@@ -27,6 +27,6 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-:export {
+// :export {
-  theme: $--color-primary;
+//   theme: $--color-primary;
-}
+// }

klp-ui/src/main.js

@@ -3,6 +3,9 @@ import Vue from 'vue'
 import Cookies from 'js-cookie'
 import VueKonva from 'vue-konva';
 
+import * as echarts from 'echarts'
+import dataV from '@jiaminghi/data-view';
+
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
 
@@ -10,6 +13,9 @@ import vueFlvPlayer from 'vue-flv-player'
 
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/klp.scss' // klp css
+
+import '@/modules/dashboardBig/assets/scss/style.scss';
+
 import App from './App'
 import store from './store'
 import router from './router'
@@ -53,6 +59,8 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
+Vue.prototype.$echarts = echarts
+
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
@@ -68,6 +76,7 @@ Vue.use(vueFlvPlayer)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+Vue.use(dataV);
 Vue.use(VueKonva);
 DictData.install()
 

klp-ui/src/modules/dashboardBig/assets/scss/_variables.scss

@@ -0,0 +1,98 @@
+// 颜色
+$colors: (
+  "primary": #1A5CD7,
+  "info-1": #4394e4,
+  "info": #4b67af,
+  "white": #ffffff,
+  "light": #f9f9f9,
+  "grey-1": #999999,
+  "grey": #666666,
+  "dark-1": #5f5f5f,
+  "dark": #222222,
+  "black-1": #171823,
+  "black": #000000,
+  "icon": #5cd9e8
+);
+
+// 字体大小
+$base-font-size: 0.2rem;
+$font-sizes: (
+  xxs: 0.1,
+  //8px
+    xs: 0.125,
+  //10px
+    sm: 0.2875,
+  //12px
+    md: 0.1625,
+  //13px
+    lg: 0.175,
+  //14px
+    xl: 0.2,
+  //16px
+    xxl: 0.225,
+  //18px
+    xxxl: 0.25 //20px,,,,
+);
+
+// 宽高
+.w-100 {
+  width: 100%;
+}
+.h-100 {
+  height: 100%;
+}
+
+//flex
+.d-flex {
+  display: flex;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+$flex-jc: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly,
+);
+
+$flex-ai: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  stretch: stretch,
+);
+
+.flex-1 {
+  flex: 1;
+}
+
+//.mt-1 => margin top
+//spacing
+$spacing-types: (
+  m: margin,
+  p: padding,
+);
+$spacing-directions: (
+  t: top,
+  r: right,
+  b: bottom,
+  l: left,
+);
+$spacing-base-size: 0.5rem;
+$spacing-sizes: (
+  0: 0,
+  1: 0.5,
+  2: 1,
+  3: 1.5,
+  4: 2,
+  5: 2.5,
+);

klp-ui/src/modules/dashboardBig/assets/scss/index.scss

@@ -0,0 +1,144 @@
+#index {
+  color: #d3d6dd;
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  overflow: hidden;
+  
+  .bg {
+    width: 100%;
+    height: 100%;
+    padding: 16px 16px 0 16px;
+    background-image: url("../assets/pageBg.png");
+    background-size: cover;
+    background-position: center center;
+  }
+
+  .host-body {
+    .dv-dec-10,
+    .dv-dec-10-s {
+      width: 33.3%;
+      height: 5px;
+    }
+    .dv-dec-10-s {
+      transform: rotateY(180deg);
+    }
+    .dv-dec-8 {
+      width: 200px;
+      height: 50px;
+    }
+    .title {
+      position: relative;
+      width: 500px;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      .title-text {
+        font-size: 24px;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%);
+      }
+
+      .dv-dec-6 {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        width: 250px;
+        height: 8px;
+        transform: translate(-50%);
+      }
+    }
+
+    // 第二行
+    .aside-width {
+      width: 40%;
+    }
+    .react-r-s,
+    .react-l-s {
+      background-color: #0f1325;
+    }
+
+    // 平行四边形
+    .react-right {
+      &.react-l-s {
+        text-align: right;
+        width: 500px;
+      }
+      font-size: 18px;
+      width: 300px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(-45deg);
+
+      .react-after {
+        position: absolute;
+        right: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #0f1325;
+        transform: skewX(45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(45deg);
+      }
+    }
+
+    .react-left {
+      &.react-l-s {
+        width: 500px;
+        text-align: left;
+      }
+      font-size: 18px;
+      width: 300px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(45deg);
+      background-color: #0f1325;
+
+      .react-left {
+        position: absolute;
+        left: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #0f1325;
+        transform: skewX(-45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(-45deg);
+      }
+    }
+
+    .body-box {
+      margin-top: 16px;
+      display: flex;
+      flex-direction: column;
+
+      //下方区域的布局
+      .content-box {
+        display: grid;
+        grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
+      }
+
+      // 底部数据
+      .bottom-box {
+        margin-top: 10px;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+      }
+    }
+  }
+}

klp-ui/src/modules/dashboardBig/assets/scss/style.scss

@@ -0,0 +1,186 @@
+@import "./variables";
+
+//  全局样式
+* {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.2em;
+  background-color: #f1f1f1;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+a {
+  color: #343440;
+  text-decoration: none;
+}
+
+.clearfix {
+  &::after {
+    content: "";
+    display: table;
+    height: 0;
+    line-height: 0;
+    visibility: hidden;
+    clear: both;
+  }
+}
+
+//浮动
+.float-r {
+  float: right;
+}
+
+//浮动
+.float-l {
+  float: left;
+}
+
+// 字体加粗
+.fw-b {
+  font-weight: bold;
+}
+
+//文章一行显示，多余省略号显示
+.title-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bg-color-black {
+  background-color: rgba(19, 25, 47, 0.6);
+}
+
+.bg-color-blue {
+  background-color: #1a5cd7;
+}
+
+.colorBlack {
+  color: #272727 !important;
+
+  &:hover {
+    color: #272727 !important;
+  }
+}
+
+.colorGrass {
+  color: #33cea0;
+
+  &:hover {
+    color: #33cea0 !important;
+  }
+}
+
+.colorRed {
+  color: #ff5722;
+
+  &:hover {
+    color: #ff5722 !important;
+  }
+}
+
+.colorText {
+  color: #d3d6dd !important;
+
+  &:hover {
+    color: #d3d6dd !important;
+  }
+}
+
+.colorBlue {
+  color: #257dff !important;
+
+  &:hover {
+    color: #257dff !important;
+  }
+}
+
+//颜色
+@each $colorkey, $color in $colors {
+  .text-#{$colorkey} {
+    color: $color;
+  }
+
+  .bg-#{$colorkey} {
+    background-color: $color;
+  }
+}
+
+//对齐
+@each $var in (left, center, right) {
+  .text-#{$var} {
+    text-align: $var !important;
+  }
+}
+
+//flex
+@each $key, $value in $flex-jc {
+  .jc-#{$key} {
+    justify-content: $value;
+  }
+}
+
+@each $key, $value in $flex-ai {
+  .ai-#{$key} {
+    align-items: $value;
+  }
+}
+
+//字体
+@each $fontkey, $fontvalue in $font-sizes {
+  .fs-#{$fontkey} {
+    font-size: $fontvalue * $base-font-size;
+  }
+}
+
+//.mt-1 => margin top
+//spacing
+
+@each $typekey, $type in $spacing-types {
+  //.m-1
+  @each $sizekey, $size in $spacing-sizes {
+    .#{$typekey}-#{$sizekey} {
+      #{$type}: $size * $spacing-base-size;
+    }
+  }
+
+  //.mx-1
+  @each $sizekey, $size in $spacing-sizes {
+    .#{$typekey}x-#{$sizekey} {
+      #{$type}-left: $size * $spacing-base-size;
+      #{$type}-right: $size * $spacing-base-size;
+    }
+
+    .#{$typekey}y-#{$sizekey} {
+      #{$type}-top: $size * $spacing-base-size;
+      #{$type}-bottom: $size * $spacing-base-size;
+    }
+  }
+
+  //.mt-1
+  @each $directionkey, $direction in $spacing-directions {
+    @each $sizekey, $size in $spacing-sizes {
+      .#{$typekey}#{$directionkey}-#{$sizekey} {
+        #{$type}-#{$direction}: $size * $spacing-base-size;
+      }
+    }
+  }
+
+  .#{$typekey} {
+    #{$type}: 0;
+  }
+}

klp-ui/src/modules/dashboardBig/common/echart/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import tdTheme from './theme.json' // 引入默认主题
+import '../map/fujian.js'
+
+export default {
+  name: 'echart',
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.5rem'
+    },
+    options: {
+      type: Object,
+      default: ()=>({})
+    }
+  },
+  data () {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    options: {
+      handler (options) {
+        // 设置true清空echart缓存
+        this.chart.setOption(options, true)
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
+    this.initChart();
+  },
+  beforeDestroy () {
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart () {
+      // 初始化echart
+      this.chart = this.$echarts.init(this.$el, 'tdTheme')
+      this.chart.setOption(this.options, true)
+    }
+  }
+}
+</script>
+
+<style>
+</style>

klp-ui/src/modules/dashboardBig/common/echart/theme.json

@@ -0,0 +1,490 @@
+{
+  "color": [
+    "#2d8cf0",
+    "#19be6b",
+    "#ff9900",
+    "#E46CBB",
+    "#9A66E4",
+    "#ed3f14"
+  ],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {},
+  "title": {
+    "textStyle": {
+      "color": "#516b91"
+    },
+    "subtextStyle": {
+      "color": "#93b7e3"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": "2"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": "2"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "normal": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      },
+      "emphasis": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "emphasis": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "normal": {
+        "color": "#edafda",
+        "color0": "transparent",
+        "borderColor": "#d680bc",
+        "borderColor0": "#8fd3e8",
+        "borderWidth": "2"
+      }
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "normal": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "lineStyle": {
+      "normal": {
+        "width": 1,
+        "color": "#aaa"
+      }
+    },
+    "symbolSize": "6",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": [
+      "#2d8cf0",
+      "#19be6b",
+      "#f5ae4a",
+      "#9189d5",
+      "#56cae2",
+      "#cbb0e3"
+    ],
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "normal": {
+        "areaColor": "#f3f3f3",
+        "borderColor": "#516b91",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "areaColor": "rgba(165,231,240,1)",
+        "borderColor": "#516b91",
+        "borderWidth": 1
+      }
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#000"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "rgb(81,107,145)"
+        }
+      }
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#fff"
+      }
+    },
+    "splitLine": {
+      "show": false,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#cccccc"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#333"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "textStyle": {
+        "color": "#999999"
+      }
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": [
+          "#eeeeee"
+        ]
+      }
+    },
+    "splitArea": {
+      "show": false,
+      "areaStyle": {
+        "color": [
+          "rgba(250,250,250,0.05)",
+          "rgba(200,200,200,0.02)"
+        ]
+      }
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "normal": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "borderColor": "#666"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#fff"
+    }
+  },
+  "tooltip": {
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#ccc",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#ccc",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#8fd3e8",
+      "width": 1
+    },
+    "itemStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderWidth": 1
+      },
+      "emphasis": {
+        "color": "#8fd3e8"
+      }
+    },
+    "controlStyle": {
+      "normal": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      },
+      "emphasis": {
+        "color": "#8fd3e8",
+        "borderColor": "#8fd3e8",
+        "borderWidth": 0.5
+      }
+    },
+    "checkpointStyle": {
+      "color": "#8fd3e8",
+      "borderColor": "rgba(138,124,168,0.37)"
+    },
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#8fd3e8"
+        }
+      }
+    }
+  },
+  "visualMap": {
+    "color": [
+      "#516b91",
+      "#59c4e6",
+      "#a5e7f0"
+    ]
+  },
+  "dataZoom": {
+    "backgroundColor": "rgba(0,0,0,0)",
+    "dataBackgroundColor": "rgba(255,255,255,0.3)",
+    "fillerColor": "rgba(167,183,204,0.4)",
+    "handleColor": "#a7b7cc",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#333"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "normal": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      },
+      "emphasis": {
+        "textStyle": {
+          "color": "#eee"
+        }
+      }
+    }
+  }
+}

klp-ui/src/modules/dashboardBig/components/echart/bottom/bottomLeftChart/chart.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <!-- 年度开工率 -->
+    <Echart
+      :options="options"
+      id="bottomLeftChart"
+      height="480px"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '../../../../common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  watch: {
+    cdata: {
+      handler (newData) {
+        this.options = {
+          tooltip: {
+            trigger: "axis",
+            backgroundColor: "rgba(255,255,255,0.1)",
+            axisPointer: {
+              type: "shadow",
+              label: {
+                show: true,
+                backgroundColor: "#7B7DDC"
+              }
+            }
+          },
+          legend: {
+            data: ["已贯通", "计划贯通", "贯通率"],
+            textStyle: {
+              color: "#B4B4B4"
+            },
+            top: "0%"
+          },
+          grid: {
+            x: "8%",
+            width: "88%",
+            y: "4%"
+          },
+          xAxis: {
+            data: newData.category,
+            axisLine: {
+              lineStyle: {
+                color: "#B4B4B4"
+              }
+            },
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: [
+            {
+              splitLine: { show: false },
+              axisLine: {
+                lineStyle: {
+                  color: "#B4B4B4"
+                }
+              },
+
+              axisLabel: {
+                formatter: "{value} "
+              }
+            },
+            {
+              splitLine: { show: false },
+              axisLine: {
+                lineStyle: {
+                  color: "#B4B4B4"
+                }
+              },
+              axisLabel: {
+                formatter: "{value} "
+              }
+            }
+          ],
+          series: [
+            {
+              name: "贯通率",
+              type: "line",
+              smooth: true,
+              showAllSymbol: true,
+              symbol: "emptyCircle",
+              symbolSize: 8,
+              yAxisIndex: 1,
+              itemStyle: {
+                normal: {
+                  color: "#F02FC2"
+                }
+              },
+              data: newData.rateData
+            },
+            {
+              name: "已贯通",
+              type: "bar",
+              barWidth: 10,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 5,
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "#956FD4" },
+                    { offset: 1, color: "#3EACE5" }
+                  ])
+                }
+              },
+              data: newData.barData
+            },
+            {
+              name: "计划贯通",
+              type: "bar",
+              barGap: "-100%",
+              barWidth: 10,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: 5,
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "rgba(156,107,211,0.8)" },
+                    { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                    { offset: 1, color: "rgba(156,107,211,0.2)" }
+                  ])
+                }
+              },
+              z: -12,
+              data: newData.lineData
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+  },
+}
+</script>

klp-ui/src/modules/dashboardBig/components/echart/bottom/bottomLeftChart/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  data () {
+    return {
+      cdata: {
+        category: [
+          "市区",
+          "万州",
+          "江北",
+          "南岸",
+          "北碚",
+          "綦南",
+          "长寿",
+          "永川",
+          "璧山",
+          "江津",
+          "城口",
+          "大足",
+          "垫江",
+          "丰都",
+          "奉节",
+          "合川",
+          "江津区",
+          "开州",
+          "南川",
+          "彭水",
+          "黔江",
+          "石柱",
+          "铜梁",
+          "潼南",
+          "巫山",
+          "巫溪",
+          "武隆",
+          "秀山",
+          "酉阳",
+          "云阳",
+          "忠县",
+          "川东",
+          "检修"
+        ],
+        lineData: [
+          18092,
+          20728,
+          24045,
+          28348,
+          32808,
+          36097,
+          39867,
+          44715,
+          48444,
+          50415,
+          56061,
+          62677,
+          59521,
+          67560,
+          18092,
+          20728,
+          24045,
+          28348,
+          32808,
+          36097,
+          39867,
+          44715,
+          48444,
+          50415,
+          36097,
+          39867,
+          44715,
+          48444,
+          50415,
+          50061,
+          32677,
+          49521,
+          32808
+        ],
+        barData: [
+          4600,
+          5000,
+          5500,
+          6500,
+          7500,
+          8500,
+          9900,
+          12500,
+          14000,
+          21500,
+          23200,
+          24450,
+          25250,
+          33300,
+          4600,
+          5000,
+          5500,
+          6500,
+          7500,
+          8500,
+          9900,
+          22500,
+          14000,
+          21500,
+          8500,
+          9900,
+          12500,
+          14000,
+          21500,
+          23200,
+          24450,
+          25250,
+          7500
+        ],
+        rateData: []
+      }
+    };
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.setData();
+  },
+  methods: {
+    // 根据自己的业务情况修改
+    setData () {
+      for (let i = 0; i < this.cdata.barData.length -1; i++) {
+        let rate = this.cdata.barData[i] / this.cdata.lineData[i];
+        this.cdata.rateData.push(rate.toFixed(2));
+      }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

klp-ui/src/modules/dashboardBig/components/echart/bottom/bottomRightChart/chart.vue

@@ -0,0 +1,358 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="centreLeft1Chart"
+      height="480px"
+      width="100%"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '../../../../common/echart'
+export default {
+  data() {
+    return {
+      options: {},
+      // 定义颜色
+      colorList: {
+        linearYtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#f5b44d'
+            },
+            {
+              offset: 1,
+              color: '#28f8de'
+            }
+          ]
+        },
+        linearGtoB: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#43dfa2'
+            },
+            {
+              offset: 1,
+              color: '#28f8de'
+            }
+          ]
+        },
+        linearBtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#1c98e8'
+            },
+            {
+              offset: 1,
+              color: '#28f8de'
+            }
+          ]
+        },
+        areaBtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(35,184,210,.2)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(35,184,210,0)'
+            }
+          ]
+        }
+      }
+    }
+  },
+  components: {
+    Echart
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  watch: {
+    cdata: {
+      handler(newData) {
+        this.options = {
+          title: {
+            text: '',
+            textStyle: {
+              color: '#D3D6DD',
+              fontSize: 24,
+              fontWeight: 'normal'
+            },
+            subtext: newData.year + '/' + newData.weekCategory[6],
+            subtextStyle: {
+              color: '#fff',
+              fontSize: 16
+            },
+            top: 50,
+            left: 80
+          },
+          legend: {
+            top: 120,
+            left: 80,
+            orient: 'vertical',
+            itemGap: 15,
+            itemWidth: 12,
+            itemHeight: 12,
+            data: ['平均指标', '我的指标'],
+            textStyle: {
+              color: '#fff',
+              fontSize: 14
+            }
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          radar: {
+            center: ['68%', '27%'],
+            radius: '40%',
+            name: {
+              color: '#fff'
+            },
+            splitNumber: 8,
+            axisLine: {
+              lineStyle: {
+                color: this.colorList.linearYtoG,
+                opacity: 0.6
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: this.colorList.linearYtoG,
+                opacity: 0.6
+              }
+            },
+            splitArea: {
+              areaStyle: {
+                color: '#fff',
+                opacity: 0.1,
+                shadowBlur: 25,
+                shadowColor: '#000',
+                shadowOffsetX: 0,
+                shadowOffsetY: 5
+              }
+            },
+            indicator: [
+              {
+                name: '服务态度',
+                max: newData.maxData
+              },
+              {
+                name: '产品质量',
+                max: 10
+              },
+              {
+                name: '任务效率',
+                max: 12
+              },
+              {
+                name: '售后保障',
+                max: 3.5
+              }
+            ]
+          },
+          grid: {
+            left: 90,
+            right: 80,
+            bottom: 40,
+            top: '60%'
+          },
+          xAxis: {
+            type: 'category',
+            position: 'bottom',
+            axisLine: true,
+            axisLabel: {
+              color: 'rgba(255,255,255,.8)',
+              fontSize: 12
+            },
+            data: newData.weekCategory
+          },
+          // 下方Y轴
+          yAxis: {
+            name: '工单',
+            nameLocation: 'end',
+            nameGap: 24,
+            nameTextStyle: {
+              color: 'rgba(255,255,255,.5)',
+              fontSize: 14
+            },
+            max: newData.maxData,
+            splitNumber: 4,
+
+            axisLine: {
+              lineStyle: {
+                opacity: 0
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff',
+                opacity: 0.1
+              }
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,.8)',
+              fontSize: 12
+            }
+          },
+          series: [
+            {
+              name: '',
+              type: 'radar',
+              symbolSize: 0,
+              data: [
+                {
+                  value: newData.radarDataAvg[6],
+                  name: '平均指标',
+                  itemStyle: {
+                    normal: {
+                      color: '#f8d351'
+                    }
+                  },
+                  lineStyle: {
+                    normal: {
+                      opacity: 0
+                    }
+                  },
+                  areaStyle: {
+                    normal: {
+                      color: '#f8d351',
+                      shadowBlur: 25,
+                      shadowColor: 'rgba(248,211,81,.3)',
+                      shadowOffsetX: 0,
+                      shadowOffsetY: -10,
+                      opacity: 1
+                    }
+                  }
+                },
+                {
+                  value: newData.radarData[6],
+                  name: '我的指标',
+                  itemStyle: {
+                    normal: {
+                      color: '#43dfa2'
+                    }
+                  },
+                  lineStyle: {
+                    normal: {
+                      opacity: 0
+                    }
+                  },
+                  areaStyle: {
+                    normal: {
+                      color: this.colorList.linearGtoB,
+                      shadowBlur: 15,
+                      shadowColor: 'rgba(0,0,0,.2)',
+                      shadowOffsetX: 0,
+                      shadowOffsetY: 5,
+                      opacity: 0.8
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              name: '',
+              type: 'line',
+              smooth: true,
+              symbol: 'emptyCircle',
+              symbolSize: 8,
+              itemStyle: {
+                normal: {
+                  color: '#fff'
+                }
+              },
+              lineStyle: {
+                normal: {
+                  color: this.colorList.linearBtoG,
+                  width: 3
+                }
+              },
+              areaStyle: {
+                normal: {
+                  color: this.colorList.areaBtoG
+                }
+              },
+              data: newData.weekLineData,
+              lineSmooth: true,
+              markLine: {
+                silent: true,
+                data: [
+                  {
+                    type: 'average',
+                    name: '平均值'
+                  }
+                ],
+                precision: 0,
+                label: {
+                  normal: {
+                    formatter: '平均值: \n {c}'
+                  }
+                },
+                lineStyle: {
+                  normal: {
+                    color: 'rgba(248,211,81,.7)'
+                  }
+                }
+              },
+              tooltip: {
+                position: 'top',
+                formatter: '{c} m',
+                backgroundColor: 'rgba(28,152,232,.2)',
+                padding: 6
+              }
+            },
+            {
+              name: '占位背景',
+              type: 'bar',
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: '#000',
+                  opacity: 0
+                }
+              },
+              silent: true,
+              barWidth: '50%',
+              data: newData.weekMaxData,
+              animation: false
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+}
+</script>

klp-ui/src/modules/dashboardBig/components/echart/bottom/bottomRightChart/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  data () {
+    return {
+      drawTiming: null,
+      cdata: {
+        year: null,
+        weekCategory: [],
+        radarData: [],
+        radarDataAvg: [],
+        maxData: 12000,
+        weekMaxData: [],
+        weekLineData: []
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.drawTimingFn();
+  },
+  beforeDestroy () {
+    clearInterval(this.drawTiming);
+  },
+  methods: {
+    drawTimingFn () {
+      this.setData();
+      this.drawTiming = setInterval(() => {
+        this.setData();
+      }, 6000);
+    },
+    setData () {
+      // 清空轮询数据
+      this.cdata.weekCategory = [];
+      this.cdata.weekMaxData = [];
+      this.cdata.weekLineData = [];
+      this.cdata.radarData = [];
+      this.cdata.radarDataAvg = [];
+
+      let dateBase = new Date();
+      this.cdata.year = dateBase.getFullYear();
+      // 周数据
+      for (let i = 0; i < 7; i++) {
+        // 日期
+        let date = new Date();
+        this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
+
+        // 折线图数据
+        this.cdata.weekMaxData.push(this.cdata.maxData);
+        let distance = Math.round(Math.random() * 11000 + 500);
+        this.cdata.weekLineData.push(distance);
+
+        // 雷达图数据
+        // 我的指标
+        let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
+        let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
+        let hour = +(distance / 1000 / averageSpeed).toFixed(1);
+        let radarDayData = [distance, averageSpeed, maxSpeed, hour];
+        this.cdata.radarData.unshift(radarDayData);
+
+        // 平均指标
+        let distanceAvg = Math.round(Math.random() * 8000 + 4000);
+        let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
+        let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
+        let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
+        let radarDayDataAvg = [
+          distanceAvg,
+          averageSpeedAvg,
+          maxSpeedAvg,
+          hourAvg
+        ];
+        this.cdata.radarDataAvg.unshift(radarDayDataAvg);
+      }
+
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

klp-ui/src/modules/dashboardBig/components/echart/center/centerChartRate/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <!-- 通过率/达标率 -->
+    <Echart
+      :options="options"
+      :id="id"
+      height="100px"
+      width="100px"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '../../../../common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: "chartRate"
+    },
+    tips: {
+      type: Number,
+      required: true,
+      default: 50
+    },
+    colorObj: {
+      type: Object,
+      default: function () {
+        return {
+          textStyle: "#3fc0fb",
+          series: {
+            color: ["#00bcd44a", "transparent"],
+            dataColor: {
+              normal: "#03a9f4",
+              shadowColor: "#97e2f5"
+            }
+          }
+        };
+      }
+    }
+  },
+  watch: {
+    // tips 是会变更的数据，所以进行监听
+    tips: {
+      handler (newData) {
+        this.options = {
+          title:{
+            text: newData * 1 + "%",
+            x: "center",
+            y: "center",
+            textStyle: {
+              color: this.colorObj.textStyle,
+              fontSize: 16
+            }
+          },
+          series: [
+            {
+              type: "pie",
+              radius: ["75%", "80%"],
+              center: ["50%", "50%"],
+              hoverAnimation: false,
+              color: this.colorObj.series.color,
+              label: {
+                normal: {
+                  show: false
+                }
+              },
+              data: [
+                {
+                  value: newData,
+                  itemStyle: {
+                    normal: {
+                      color: this.colorObj.series.dataColor.normal,
+                      shadowBlur: 10,
+                      shadowColor: this.colorObj.series.dataColor.shadowColor
+                    }
+                  }
+                },
+                {
+                  value: 100 - newData
+                }
+              ]
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

klp-ui/src/modules/dashboardBig/components/echart/centerLeft/centerLeft1Chart/chart.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="centreLeft1Chart"
+      height="220px"
+      width="260px"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '../../../../common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  watch: {
+    cdata: {
+      handler (newData) {
+        this.options = {
+          color: [
+            "#37a2da",
+            "#32c5e9",
+            "#9fe6b8",
+            "#ffdb5c",
+            "#ff9f7f",
+            "#fb7293",
+            "#e7bcf3",
+            "#8378ea"
+          ],
+          tooltip: {
+            trigger: "item",
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+          },
+          toolbox: {
+            show: true
+          },
+          calculable: true,
+          legend: {
+            orient: "horizontal",
+            icon: "circle",
+            bottom: 0,
+            x: "center",
+            data: newData.xData,
+            textStyle: {
+              color: "#fff"
+            }
+          },
+          series: [
+            {
+              name: "通过率统计",
+              type: "pie",
+              radius: [10, 50],
+              roseType: "area",
+              center: ["50%", "40%"],
+              data: newData.seriesData
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

klp-ui/src/modules/dashboardBig/components/echart/centerLeft/centerLeft1Chart/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue';
+export default {
+  data () {
+    return {
+      cdata: {
+        xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
+        seriesData: [
+          { value: 10, name: "data1" },
+          { value: 5, name: "data2" },
+          { value: 15, name: "data3" },
+          { value: 25, name: "data4" },
+          { value: 20, name: "data5" },
+          { value: 35, name: "data6" }
+        ]
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

klp-ui/src/modules/dashboardBig/components/echart/centerLeft/centerLeft2Chart/chart.vue

@@ -0,0 +1,290 @@
+<template>
+  <div>
+    <Echart
+      id="centreLeft2Chart"
+      ref="centreLeft2ChartRef"
+      :options="options"
+      height="360px"
+      width="330px"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '../../../../common/echart';
+export default {
+  data() {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  watch: {
+    cdata: {
+      handler(newData) {
+        // 设置点的位置(经纬度)
+        const geoCoordMap = {
+          厦门市: [118.11022, 24.490474, 20],
+          福州市: [119.206239, 26.275302, 20],
+          泉州市: [118.589421, 24.908853, 20],
+          漳州市: [117.561801, 24.510897, 20],
+          龙岩市: [116.82978, 25.391603, 20],
+          莆田市: [119.007558, 25.591011, 20],
+          三明市: [117.435001, 26.465444, 20],
+          南平市: [118.178459, 27.535627, 20],
+          宁德市: [119.527082, 27.15924, 20],
+        };
+        let seriesData = [
+          {
+            name: '厦门市',
+          },
+          {
+            name: '福州市',
+          },
+          {
+            name: '泉州市',
+          },
+          {
+            name: '漳州市',
+          },
+          {
+            name: '龙岩市',
+          },
+          {
+            name: '莆田市',
+          },
+          {
+            name: '三明市',
+          },
+          {
+            name: '南平市',
+          },
+          {
+            name: '宁德市',
+          },
+        ];
+        let convertData = function (data) {
+          let scatterData = [];
+          for (var i = 0; i < data.length; i++) {
+            var geoCoord = geoCoordMap[data[i].name];
+            if (geoCoord) {
+              scatterData.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+              });
+            }
+          }
+          return scatterData;
+        };
+        this.options = {
+          showLegendSymbol: true,
+          tooltip: {
+            trigger: 'item',
+            textStyle: {
+              fontSize: 14,
+              lineHeight: 22,
+            },
+            position: point => {
+              // 固定在顶部
+              return [point[0] + 50, point[1] - 20];
+            },
+            // 如果需要自定义 tooltip样式，需要使用formatter
+            /*
+              formatter: params => {
+                return `<div style=""> ... </div>`
+              }
+            */
+          },
+          visualMap: {
+            min: 0,
+            max: 10,
+            show: false,
+            seriesIndex: 0,
+            // 颜色
+            inRange: {
+              color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
+            },
+          },
+          // 底部背景
+          geo: {
+            show: true,
+            aspectScale: 0.85, //长宽比
+            zoom: 1.2,
+            top: '10%',
+            left: '16%',
+            map: '福建',
+            roam: false,
+            itemStyle: {
+              normal: {
+                areaColor: 'rgba(0,0,0,0)',
+                shadowColor: 'rgba(7,114,204, .8)',
+                shadowOffsetX: 5,
+                shadowOffsetY: 5,
+              },
+              emphasis: {
+                areaColor: '#00aeef',
+              },
+            },
+          },
+          series: [
+            {
+              name: '相关指数',
+              type: 'map',
+              aspectScale: 0.85, //长宽比
+              zoom: 1.2,
+              mapType: '福建', // 自定义扩展图表类型
+              top: '10%',
+              left: '16%',
+              itemStyle: {
+                normal: {
+                  color: 'red',
+                  areaColor: 'rgba(19,54,162, .5)',
+                  borderColor: 'rgba(0,242,252,.3)',
+                  borderWidth: 1,
+                  shadowBlur: 7,
+                  shadowColor: '#00f2fc',
+                },
+                emphasis: {
+                  areaColor: '#4f7fff',
+                  borderColor: 'rgba(0,242,252,.6)',
+                  borderWidth: 2,
+                  shadowBlur: 10,
+                  shadowColor: '#00f2fc',
+                },
+              },
+              label: {
+                formatter: params => `${params.name}`,
+                show: true,
+                position: 'insideRight',
+                textStyle: {
+                  fontSize: 14,
+                  color: '#efefef',
+                },
+                emphasis: {
+                  textStyle: {
+                    color: '#fff',
+                  },
+                },
+              },
+              data: newData,
+            },
+            {
+              type: 'effectScatter',
+              coordinateSystem: 'geo',
+              symbolSize: 7,
+              effectType: 'ripple',
+              legendHoverLink: false,
+              showEffectOn: 'render',
+              rippleEffect: {
+                period: 4,
+                scale: 2.5,
+                brushType: 'stroke',
+              },
+              zlevel: 1,
+              itemStyle: {
+                normal: {
+                  color: '#99FBFE',
+                  shadowBlur: 5,
+                  shadowColor: '#fff',
+                },
+              },
+              data: convertData(seriesData),
+            },
+          ],
+        };
+        // 重新选择区域
+        this.handleMapRandomSelect();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    // 开启定时器
+    startInterval() {
+      const _self = this;
+      // 应通过接口获取配置时间，暂时写死5s
+      const time = 2000;
+      if (this.intervalId !== null) {
+        clearInterval(this.intervalId);
+      }
+      this.intervalId = setInterval(() => {
+        _self.reSelectMapRandomArea();
+      }, time);
+    },
+    // 重新随机选中地图区域
+    reSelectMapRandomArea() {
+      const length = 9;
+      this.$nextTick(() => {
+        try {
+          const map = this.$refs.centreLeft2ChartRef.chart;
+          let index = Math.floor(Math.random() * length);
+          while (index === this.preSelectMapIndex || index >= length) {
+            index = Math.floor(Math.random() * length);
+          }
+          map.dispatchAction({
+            type: 'mapUnSelect',
+            seriesIndex: 0,
+            dataIndex: this.preSelectMapIndex,
+          });
+          map.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: index,
+          });
+          map.dispatchAction({
+            type: 'mapSelect',
+            seriesIndex: 0,
+            dataIndex: index,
+          });
+          this.preSelectMapIndex = index;
+        } catch (error) {
+          console.log(error)
+        }
+      });
+    },
+    handleMapRandomSelect() {
+      this.$nextTick(() => {
+        try {
+          const map = this.$refs.centreLeft2ChartRef.chart;
+          const _self = this;
+          setTimeout(() => {
+            _self.reSelectMapRandomArea();
+          }, 0);
+          // 移入区域，清除定时器、取消之前选中并选中当前
+          map.on('mouseover', function (params) {
+            clearInterval(_self.intervalId);
+            map.dispatchAction({
+              type: 'mapUnSelect',
+              seriesIndex: 0,
+              dataIndex: _self.preSelectMapIndex,
+            });
+            map.dispatchAction({
+              type: 'mapSelect',
+              seriesIndex: 0,
+              dataIndex: params.dataIndex,
+            });
+            _self.preSelectMapIndex = params.dataIndex;
+          });
+          // 移出区域重新随机选中地图区域，并开启定时器
+          map.on('globalout', function () {
+            _self.reSelectMapRandomArea();
+            _self.startInterval();
+          });
+          this.startInterval();
+        } catch (error) {
+          console.log(error)
+        }
+      });
+    },
+  },
+};
+</script>

klp-ui/src/modules/dashboardBig/components/echart/centerLeft/centerLeft2Chart/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue';
+export default {
+  data () {
+    return {
+      cdata: [
+        {
+          // 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
+          name: '福州市',
+          value: 10,
+          elseData:{
+            // 这里放置地图 tooltip 里想显示的数据
+          }
+        },
+        {
+          name: '厦门市',
+          value: 9,
+        },
+        {
+          name: '漳州市',
+          value: 8,
+        },
+        {
+          name: '泉州市',
+          value: 7,
+        },
+        {
+          name: '三明市',
+          value: 6,
+        },
+        {
+          name: '莆田市',
+          value: 5,
+        },
+        {
+          name: '南平市',
+          value: 4,
+        },
+        {
+          name: '龙岩市',
+          value: 3,
+        },
+        {
+          name: '宁德市',
+          value: 2,
+        }
+      ]
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

klp-ui/src/modules/dashboardBig/components/echart/centerRight/centerRightChart/chart.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="centreRight2Chart1"
+      height="200px"
+      width="260px"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '../../../../common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  watch: {
+    cdata: {
+      handler (newData) {
+        // 固定样式数据
+        let lineStyle = {
+          normal: {
+            width: 1,
+            opacity: 0.5
+          }
+        };
+
+        this.options = {
+          radar: {
+            indicator: newData.indicatorData,
+            shape: "circle",
+            splitNumber: 5,
+            radius: ["0%", "65%"],
+            name: {
+              textStyle: {
+                color: "rgb(238, 197, 102)"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: [
+                  "rgba(238, 197, 102, 0.1)",
+                  "rgba(238, 197, 102, 0.2)",
+                  "rgba(238, 197, 102, 0.4)",
+                  "rgba(238, 197, 102, 0.6)",
+                  "rgba(238, 197, 102, 0.8)",
+                  "rgba(238, 197, 102, 1)"
+                ].reverse()
+              }
+            },
+            splitArea: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(238, 197, 102, 0.5)"
+              }
+            }
+          },
+          series: [
+            {
+              name: "北京",
+              type: "radar",
+              lineStyle: lineStyle,
+              data: newData.dataBJ,
+              symbol: "none",
+              itemStyle: {
+                normal: {
+                  color: "#F9713C"
+                }
+              },
+              areaStyle: {
+                normal: {
+                  opacity: 0.1
+                }
+              }
+            },
+            {
+              name: "上海",
+              type: "radar",
+              lineStyle: lineStyle,
+              data: newData.dataSH,
+              symbol: "none",
+              itemStyle: {
+                normal: {
+                  color: "#B3E4A1"
+                }
+              },
+              areaStyle: {
+                normal: {
+                  opacity: 0.05
+                }
+              }
+            },
+            {
+              name: "广州",
+              type: "radar",
+              lineStyle: lineStyle,
+              data: newData.dataGZ,
+              symbol: "none",
+              itemStyle: {
+                normal: {
+                  color: "rgb(238, 197, 102)"
+                }
+              },
+              areaStyle: {
+                normal: {
+                  opacity: 0.05
+                }
+              }
+            } //end
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>

klp-ui/src/modules/dashboardBig/components/echart/centerRight/centerRightChart/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue';
+export default {
+  data () {
+    return {
+      cdata: {
+        indicatorData: [
+          { name: "data1", max: 300 },
+          { name: "data2", max: 250 },
+          { name: "data3", max: 300 },
+          { name: "data4", max: 5},
+          { name: "data5", max: 200 },
+          { name: "data6", max: 100 }
+        ],
+        dataBJ: [
+          [94, 69, 114, 2.08, 73, 39, 22],
+          [99, 73, 110, 2.43, 76, 48, 23],
+          [31, 12, 30, 0.5, 32, 16, 24],
+          [42, 27, 43, 1, 53, 22, 25],
+          [154, 117, 157, 3.05, 92, 58, 26],
+          [234, 185, 230, 4.09, 123, 69, 27],
+          [160, 120, 186, 2.77, 91, 50, 28]
+        ],
+        dataGZ: [
+          [84, 94, 140, 2.238, 68, 18, 22],
+          [93, 77, 104, 1.165, 53, 7, 23],
+          [99, 130, 227, 3.97, 55, 15, 24],
+          [146, 84, 139, 1.094, 40, 17, 25],
+          [113, 108, 137, 1.481, 48, 15, 26],
+          [81, 48, 62, 1.619, 26, 3, 27],
+          [56, 48, 68, 1.336, 37, 9, 28]
+        ],
+        dataSH: [
+          [91, 45, 125, 0.82, 34, 23, 1],
+          [65, 27, 78, 0.86, 45, 29, 2],
+          [83, 60, 84, 1.09, 73, 27, 3],
+          [109, 81, 121, 1.28, 68, 51, 4],
+          [106, 77, 114, 1.07, 55, 51, 5],
+          [109, 81, 121, 1.28, 68, 51, 6],
+          [106, 77, 114, 1.07, 55, 51, 7]
+        ]
+      }
+    }
+  },
+  components: {
+    Chart,
+  }
+}
+</script>

klp-ui/src/modules/dashboardBig/utils/drawMixin.js

@@ -0,0 +1,57 @@
+// 屏幕适配 mixin 函数
+
+// * 默认缩放值
+const scale = {
+  width: '1',
+  height: '1',
+}
+
+// * 设计稿尺寸（px）
+const baseWidth = 1920
+const baseHeight = 1080
+
+// * 需保持的比例（默认1.77778）
+const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+
+export default {
+  data() {
+    return {
+      // * 定时函数
+      drawTiming: null
+    }
+  },
+  mounted () {
+    this.calcRate()
+    window.addEventListener('resize', this.resize)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.resize)
+  },
+  methods: {
+    calcRate () {
+      const appRef = this.$refs["appRef"]
+      if (!appRef) return 
+      // 当前宽高比
+      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
+      if (appRef) {
+        if (currentRate > baseProportion) {
+          // 表示更宽
+          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
+          scale.height = (window.innerHeight / baseHeight).toFixed(5)
+          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+        } else {
+          // 表示更高
+          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
+          scale.width = (window.innerWidth / baseWidth).toFixed(5)
+          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+        }
+      }
+    },
+    resize () {
+      clearTimeout(this.drawTiming)
+      this.drawTiming = setTimeout(() => {
+        this.calcRate()
+      }, 200)
+    }
+  },
+}

klp-ui/src/modules/dashboardBig/utils/index.js

@@ -0,0 +1,51 @@
+/**
+ * @param {Function} fn 防抖函数
+ * @param {Number} delay 延迟时间
+ */
+export function debounce(fn, delay) {
+  var timer;
+  return function () {
+    var context = this;
+    var args = arguments;
+    clearTimeout(timer);
+    timer = setTimeout(function () {
+      fn.apply(context, args);
+    }, delay);
+  };
+}
+
+/**
+ * @param {date} time 需要转换的时间
+ * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
+ */
+export function formatTime(time, fmt) {
+  if (!time) return '';
+  else {
+    const date = new Date(time);
+    const o = {
+      'M+': date.getMonth() + 1,
+      'd+': date.getDate(),
+      'H+': date.getHours(),
+      'm+': date.getMinutes(),
+      's+': date.getSeconds(),
+      'q+': Math.floor((date.getMonth() + 3) / 3),
+      S: date.getMilliseconds(),
+    };
+    if (/(y+)/.test(fmt))
+      fmt = fmt.replace(
+        RegExp.$1,
+        (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+      );
+    for (const k in o) {
+      if (new RegExp('(' + k + ')').test(fmt)) {
+        fmt = fmt.replace(
+          RegExp.$1,
+          RegExp.$1.length === 1
+            ? o[k]
+            : ('00' + o[k]).substr(('' + o[k]).length)
+        );
+      }
+    }
+    return fmt;
+  }
+}

klp-ui/src/modules/dashboardBig/utils/resizeMixin.js

@@ -0,0 +1,33 @@
+// 混入代码 resize-mixins.js
+// 改成 Scale 缩放之后，没有使用这个代码，但是保留
+import { debounce } from '@/utils';
+const resizeChartMethod = '$__resizeChartMethod';
+
+export default {
+  data() {
+    // 在组件内部将图表 init 的引用映射到 chart 属性上
+    return {
+      chart: null,
+    };
+  },
+  created() {
+    window.addEventListener('resize', this[resizeChartMethod], false);
+  },
+  activated() {
+    // 防止 keep-alive 之后图表变形
+    if (this.chart) {
+      this.chart.resize()
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('reisze', this[resizeChartMethod]);
+  },
+  methods: {
+    // 防抖函数来控制 resize 的频率
+    [resizeChartMethod]: debounce(function() {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }, 300),
+  },
+};

klp-ui/src/modules/dashboardBig/views/bottomLeft.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="bottomLeft">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">数据统计图</span>
+        </div>
+      </div>
+      <div>
+        <BottomLeftChart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BottomLeftChart from '../components/echart/bottom/bottomLeftChart'
+export default {
+  components: {
+    BottomLeftChart
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 520px;
+$box-width: 100%;
+#bottomLeft {
+  padding: 20px 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 35px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>

klp-ui/src/modules/dashboardBig/views/bottomRight.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="bottomRight">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-area" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">工单修复以及满意度统计图</span>
+          <div class="decoration2">
+            <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <BottomRightChart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BottomRightChart from "../components/echart/bottom/bottomRightChart";
+export default {
+  components: {
+    BottomRightChart
+  }
+};
+</script>
+
+<style lang="scss" class>
+$box-height: 520px;
+$box-width: 100%;
+#bottomRight {
+  padding: 14px 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  //下滑线动态
+  .decoration2 {
+    position: absolute;
+    right: 0.125rem;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>

klp-ui/src/modules/dashboardBig/views/center.vue

@@ -0,0 +1,283 @@
+<template>
+  <div id="center">
+    <div class="up">
+      <div
+        class="bg-color-black item"
+        v-for="item in titleItem"
+        :key="item.title"
+      >
+        <p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
+        <div>
+          <dv-digital-flop
+            class="dv-dig-flop ml-1 mt-2 pl-3"
+            :config="item.number"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="down">
+      <div class="ranking bg-color-black">
+        <span>
+          <icon name="chart-pie" class="text-icon"></icon>
+        </span>
+        <span class="fs-xl text mx-2 mb-1 pl-3">年度负责人组件达标榜</span>
+        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
+      </div>
+      <div class="percent">
+        <div class="item bg-color-black">
+          <span>今日任务通过率</span>
+          <CenterChart
+            :id="rate[0].id"
+            :tips="rate[0].tips"
+            :colorObj="rate[0].colorData"
+          />
+        </div>
+        <div class="item bg-color-black">
+          <span>今日任务达标率</span>
+          <CenterChart
+            :id="rate[1].id"
+            :tips="rate[1].tips"
+            :colorObj="rate[1].colorData"
+          />
+        </div>
+        <div class="water">
+          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CenterChart from '../components/echart/center/centerChartRate'
+
+export default {
+  data() {
+    return {
+      titleItem: [
+        {
+          title: '今年累计任务建次数',
+          number: {
+            number: [120],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '本月累计任务次数',
+          number: {
+            number: [18],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今日累计任务次数',
+          number: {
+            number: [2],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今年失败任务次数',
+          number: {
+            number: [14],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今年成功任务次数',
+          number: {
+            number: [106],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        },
+        {
+          title: '今年达标任务个数',
+          number: {
+            number: [100],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
+            }
+          }
+        }
+      ],
+      ranking: {
+        data: [
+          {
+            name: '周口',
+            value: 55
+          },
+          {
+            name: '南阳',
+            value: 120
+          },
+          {
+            name: '西峡',
+            value: 78
+          },
+          {
+            name: '驻马店',
+            value: 66
+          },
+          {
+            name: '新乡',
+            value: 80
+          },
+          {
+            name: '新乡2',
+            value: 80
+          },
+          {
+            name: '新乡3',
+            value: 80
+          },
+          {
+            name: '新乡4',
+            value: 80
+          },
+          {
+            name: '新乡5',
+            value: 80
+          },
+          {
+            name: '新乡6',
+            value: 80
+          }
+        ],
+        carousel: 'single',
+        unit: '人'
+      },
+      water: {
+        data: [24, 45],
+        shape: 'roundRect',
+        formatter: '{value}%',
+        waveNum: 3
+      },
+      // 通过率和达标率的组件复用数据
+      rate: [
+        {
+          id: 'centerRate1',
+          tips: 60,
+          colorData: {
+            textStyle: '#3fc0fb',
+            series: {
+              color: ['#00bcd44a', 'transparent'],
+              dataColor: {
+                normal: '#03a9f4',
+                shadowColor: '#97e2f5'
+              }
+            }
+          }
+        },
+        {
+          id: 'centerRate2',
+          tips: 40,
+          colorData: {
+            textStyle: '#67e0e3',
+            series: {
+              color: ['#faf3a378', 'transparent'],
+              dataColor: {
+                normal: '#ff9800',
+                shadowColor: '#fcebad'
+              }
+            }
+          }
+        }
+      ]
+    }
+  },
+  components: {
+    CenterChart
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#center {
+  display: flex;
+  flex-direction: column;
+  .up {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    .item {
+      border-radius: 6px;
+      padding-top: 8px;
+      margin-top: 8px;
+      width: 32%;
+      height: 70px;
+      .dv-dig-flop {
+        width: 150px;
+        height: 30px;
+      }
+    }
+  }
+  .down {
+    padding: 6px 4px;
+    padding-bottom: 0;
+    width: 100%;
+    display: flex;
+    height: 255px;
+    justify-content: space-between;
+    .bg-color-black {
+      border-radius: 5px;
+    }
+    .ranking {
+      padding: 10px;
+      width: 59%;
+      .dv-scr-rank-board {
+        height: 225px;
+      }
+    }
+    .percent {
+      width: 40%;
+      display: flex;
+      flex-wrap: wrap;
+      .item {
+        width: 50%;
+        height: 120px;
+        span {
+          margin-top: 8px;
+          font-size: 14px;
+          display: flex;
+          justify-content: center;
+        }
+      }
+      .water {
+        width: 100%;
+        .dv-wa-le-po {
+          height: 120px;
+        }
+      }
+    }
+  }
+}
+</style>

klp-ui/src/modules/dashboardBig/views/centerLeft1.vue

@@ -0,0 +1,169 @@
+<template>
+  <div id="centerLeft1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">任务通过率</span>
+          <dv-decoration-3 class="dv-dec-3" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+        <CenterLeft1Chart />
+      </div>
+      <!-- 4个主要的数据 -->
+      <div class="bottom-data">
+        <div
+          class="item-box mt-2"
+          v-for="(item, index) in numberData"
+          :key="index"
+        >
+          <div class="d-flex">
+            <span class="coin">￥</span>
+            <dv-digital-flop class="dv-digital-flop" :config="item.number" />
+          </div>
+          <p class="text" style="text-align: center;">
+            {{ item.text }}
+            <span class="colorYellow">(件)</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CenterLeft1Chart from '../components/echart/centerLeft/centerLeft1Chart'
+export default {
+  data() {
+    return {
+      numberData: [
+        {
+          number: {
+            number: [15],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
+          },
+          text: '今日构建总量'
+        },
+        {
+          number: {
+            number: [1144],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
+          },
+          text: '总共完成数量'
+        },
+        {
+          number: {
+            number: [361],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
+          },
+          text: '正在编译数量'
+        },
+        {
+          number: {
+            number: [157],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
+          },
+          text: '未通过数量'
+        }
+      ]
+    }
+  },
+  components: {
+    CenterLeft1Chart
+  },
+  mounted() {
+    this.changeTiming()
+  },
+  methods: {
+    changeTiming() {
+      setInterval(() => {
+        this.changeNumber()
+      }, 3000)
+    },
+    changeNumber() {
+      this.numberData.forEach((item, index) => {
+        item.number.number[0] += ++index
+        item.number = { ...item.number }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-width: 300px;
+$box-height: 410px;
+
+#centerLeft1 {
+  padding: 16px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 10px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .dv-dec-3 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+
+  .bottom-data {
+    .item-box {
+      & > div {
+        padding-right: 5px;
+      }
+      font-size: 14px;
+      float: right;
+      position: relative;
+      width: 50%;
+      color: #d3d6dd;
+      .dv-digital-flop {
+        width: 120px;
+        height: 30px;
+      }
+      // 金币
+      .coin {
+        position: relative;
+        top: 6px;
+        font-size: 20px;
+        color: #ffc107;
+      }
+      .colorYellow {
+        color: yellowgreen;
+      }
+      p {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

klp-ui/src/modules/dashboardBig/views/centerLeft2.vue

@@ -0,0 +1,59 @@
+<template>
+  <div id="centerLeft1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-pie" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">地图数据</span>
+          <dv-decoration-1 class="dv-dec-1" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+        <CenterLeft2Chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CenterLeft2Chart from "../components/echart/centerLeft/centerLeft2Chart";
+export default {
+  components: {
+    CenterLeft2Chart
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#centerLeft1 {
+  $box-width: 300px;
+  $box-height: 410px;
+  padding: 16px;
+  height: $box-height;
+  min-width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .dv-dec-1 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>

klp-ui/src/modules/dashboardBig/views/centerRight1.vue

@@ -0,0 +1,76 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-line" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">任务完成排行榜</span>
+        </div>
+      </div>
+      <div class="d-flex jc-center body-box">
+        <dv-scroll-board class="dv-scr-board" :config="config" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      config: {
+        header: ['组件', '分支', '覆盖率'],
+        data: [
+          ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+          ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+          ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+          ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+          ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+          ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+          ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+          ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+          ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+          ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+        ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [50],
+        align: ['center']
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 410px;
+$box-width: 300px;
+#centerRight1 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 270px;
+      height: 340px;
+    }
+  }
+}
+</style>

klp-ui/src/modules/dashboardBig/views/centerRight2.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="centerRight2">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="align-left" class="text-icon"></icon>
+        </span>
+        <span class="fs-xl text mx-2">产品销售渠道分析</span>
+      </div>
+      <div class="d-flex ai-center flex-column body-box">
+        <dv-capsule-chart class="dv-cap-chart" :config="config" />
+        <centerRight2Chart1 />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import centerRight2Chart1 from '../components/echart/centerRight/centerRightChart'
+
+export default {
+  data() {
+    return {
+      config: {
+        data: [
+          {
+            name: '南阳',
+            value: 167
+          },
+          {
+            name: '周口',
+            value: 67
+          },
+          {
+            name: '漯河',
+            value: 123
+          },
+          {
+            name: '郑州',
+            value: 55
+          },
+          {
+            name: '西峡',
+            value: 98
+          }
+        ]
+      }
+    }
+  },
+  components: { centerRight2Chart1 }
+}
+</script>
+
+<style lang="scss" scoped>
+#centerRight2 {
+  $box-height: 410px;
+  $box-width: 340px;
+  padding: 5px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    padding: 5px;
+    height: $box-height;
+    width: $box-width;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-cap-chart {
+      width: 100%;
+      height: 160px;
+    }
+  }
+}
+</style>

klp-ui/src/modules/dashboardBig/views/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <div id="index" ref="appRef">
+    <div class="bg">
+      <dv-loading v-if="loading">Loading...</dv-loading>
+      <div v-else class="host-body">
+        <div class="d-flex jc-center">
+          <dv-decoration-10 class="dv-dec-10" />
+          <div class="d-flex jc-center">
+            <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
+            <div class="title">
+              <span class="title-text">大数据可视化平台</span>
+              <dv-decoration-6
+                class="dv-dec-6"
+                :reverse="true"
+                :color="['#50e3c2', '#67a1e5']"
+              />
+            </div>
+            <dv-decoration-8
+              class="dv-dec-8"
+              :reverse="true"
+              :color="decorationColor"
+            />
+          </div>
+          <dv-decoration-10 class="dv-dec-10-s" />
+        </div>
+
+        <!-- 第二行 -->
+        <div class="d-flex jc-between px-2">
+          <div class="d-flex aside-width">
+            <div class="react-left ml-4 react-l-s">
+              <span class="react-left"></span>
+              <span class="text">数据分析1</span>
+            </div>
+            <div class="react-left ml-3">
+              <span class="text">数据分析2</span>
+            </div>
+          </div>
+          <div class="d-flex aside-width">
+            <div class="react-right bg-color-blue mr-3">
+              <span class="text fw-b">vue-big-screen</span>
+            </div>
+            <div class="react-right mr-4 react-l-s">
+              <span class="react-after"></span>
+              <span class="text"
+                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
+              >
+            </div>
+          </div>
+        </div>
+
+        <div class="body-box">
+          <!-- 第三行数据 -->
+          <div class="content-box">
+            <div>
+              <dv-border-box-12>
+                <centerLeft1 />
+              </dv-border-box-12>
+            </div>
+            <div>
+              <dv-border-box-12>
+                <centerLeft2 />
+              </dv-border-box-12>
+            </div>
+            <!-- 中间 -->
+            <div>
+              <center />
+            </div>
+            <!-- 中间 -->
+            <div>
+              <centerRight2 />
+            </div>
+            <div>
+              <dv-border-box-13>
+                <centerRight1 />
+              </dv-border-box-13>
+            </div>
+          </div>
+
+          <!-- 第四行数据 -->
+          <div class="bottom-box">
+            <dv-border-box-13>
+              <bottomLeft />
+            </dv-border-box-13>
+            <dv-border-box-12>
+              <bottomRight />
+            </dv-border-box-12>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import drawMixin from "../utils/drawMixin";
+import { formatTime } from '../utils/index.js'
+import centerLeft1 from './centerLeft1'
+import centerLeft2 from './centerLeft2'
+import centerRight1 from './centerRight1'
+import centerRight2 from './centerRight2'
+import center from './center'
+import bottomLeft from './bottomLeft'
+import bottomRight from './bottomRight'
+
+export default {
+  mixins: [ drawMixin ],
+  data() {
+    return {
+      timing: null,
+      loading: true,
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+      decorationColor: ['#568aea', '#000000']
+    }
+  },
+  components: {
+    centerLeft1,
+    centerLeft2,
+    centerRight1,
+    centerRight2,
+    center,
+    bottomLeft,
+    bottomRight
+  },
+  mounted() {
+    this.timeFn()
+    this.cancelLoading()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    timeFn() {
+      this.timing = setInterval(() => {
+        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
+        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
+        this.dateWeek = this.weekday[new Date().getDay()]
+      }, 1000)
+    },
+    cancelLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../assets/scss/index.scss';
+</style>

klp-ui/src/views/dashboard/demo.vue

@@ -0,0 +1,11 @@
+<template>
+  <Home></Home>
+</template>
+
+<script>
+import Home from '@/modules/dashboardBig/views/index.vue'
+
+export default {
+  components: { Home },
+}
+</script>

klp-ui/src/views/login.vue

@@ -1,13 +1,25 @@
 <template>
   <div class="login-page">
-    <div class="login-left">
+    <div class="login-box">
-      <div class="login-logo">
+      <div class="login-left">
-        <img src="../assets/logo/logo.png" alt="logo" class="logo-img" />
+
-        <div class="login-title">科伦普综合办公系统</div>
+        <div class="login-title-welcome">
+          <img src="../assets/logo/logo.png" alt="logo" class="logo-img" />
+          <span class="login-title">欢迎使用科伦普综合办公系统</span>
+        </div>
+        <p>
+          嘉祥科伦普重工有限公司是山东省重点工程项目，是济宁市工程之一，也是科伦普产品结构调整重要的工程项目。工程采用了外方技术总负责、关键设备整体引进、点菜集成、国内技术总成、自主创新、单体设备引进等多种建设方
+          案，保证了技术先进和人才的培养，确保工程投产后达产达效。
+        </p>
+        <p>
+          科伦普冷轧重工有限公司是设计年产量150万 吨，能向广大用户提供热轧酸洗、热轧镀锌、冷硬、罩式退火、冷轧镀锌、铝锌合金、锌铝合金、锌铝镁、镀铬等各大类产品。产品覆盖东北、华北、华东、华南等地区。
+        </p>
       </div>
-      <div class="login-box">
+
-        <div class="login-title-welcome">欢迎使用科伦普综合办公系统</div>
+      <div class="login-right">
+        
         <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+          <h2>登录</h2>
           <el-form-item prop="username">
             <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
               <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
@@ -30,25 +42,25 @@
           </el-form-item>
           <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
           <el-form-item style="width:100%;">
-            <el-button :loading="loading" size="medium" type="primary" style="width:100%; height: 40px; font-size: 16px;"
+            <el-button :loading="loading" size="medium" type="primary"
-              @click.native.prevent="handleLogin">
+              style="width:100%; height: 40px; font-size: 16px;" @click.native.prevent="handleLogin">
               <span v-if="!loading">登 录</span>
               <span v-else>登 录 中...</span>
             </el-button>
           </el-form-item>
         </el-form>
-      </div>
+        <!-- <div class="login-illustration">
-    </div>
-    <div class="login-right">
-      <div class="login-illustration">
         <img src="https://sf3-scmcdn-cn.feishucdn.com/goofy/ee/suite/passport/static/login/img/light.ba71f7a1.png"
           alt="illustration" class="illustration-img" />
         <div class="login-slogan">
           <div class="slogan-title">先进团队，先用科伦普</div>
           <div class="slogan-desc">人、事、信息，一处搞定</div>
         </div>
+      </div> -->
       </div>
     </div>
+
+
   </div>
 </template>
 
@@ -154,27 +166,52 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
 // 引入全局主题变量，假设你有全局的variables.scss定义了以下变量
-$--color-background: #f5f5f5; 
+$--color-background: #f5f5f5;
 $--color-text-primary: #111;
 $--color-text-secondary: #b6bdc5;
 $--border-color-light: #4c5057;
 $--color-primary: #657b96;
-$--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
+$--metal-gradient-light: linear-gradient(145deg, #f5f5f550, #ffffff50);
 
 .login-page {
   display: flex;
   height: 100vh;
-  background: $--color-background; // 改用全局深色背景变量
+  justify-content: center;
+  align-items: center;
+  background: url('../assets/images/login.jpg'); // 金属渐变背景
 }
 
-.login-logo {
+.login-box {
+  width: 50%;
+  height: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.login-left,
+.login-right {
+  // flex: 1;
+  height: 100%;
+  padding: 20px;
+}
+
+.login-left {
+  flex: 4;
+  background-color: #637288;
+  display: flex;
+  flex-direction: column;
+  // box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // 增加阴影增强质感
+  p {
+    text-indent: 2em;
+  }
+}
+
+.login-title-welcome {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
-  position: absolute;
-  top: 24px;
-  left: 24px;
 
   .logo-img {
     width: 64px;
@@ -182,40 +219,15 @@ $--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
   }
 
   .login-title {
-    font-size: 22px;
+    font-size: 20px ;
     color: $--color-text-primary; // 白色文字
   }
 }
 
-.login-left {
-  flex: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: $--metal-gradient-light; // 金属渐变背景
-  position: relative;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // 增加阴影增强质感
-}
-
-.login-box {
-  width: 400px;
-  padding: 40px 32px 32px 32px;
-  border-radius: 12px;
-  box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.2);
-  background: $--color-background; // 深色背景
-}
-
-.login-title-welcome {
-  font-size: 22px;
-  font-weight: 600;
-  color: $--color-text-primary; // 白色文字
-  text-align: left;
-  margin-bottom: 24px;
-}
-
 .login-form {
   .el-input {
     margin-top: 20px;
+
     input {
       height: 40px !important;
       color: $--color-text-primary; // 白色文字
@@ -239,6 +251,7 @@ $--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
   width: 33%;
   height: 40px;
   float: right;
+
   img {
     cursor: pointer;
     vertical-align: middle;
@@ -249,6 +262,7 @@ $--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
   width: 100%;
   height: 40px;
   opacity: 0.8;
+
   &:hover {
     opacity: 1;
   }
@@ -265,11 +279,11 @@ $--metal-gradient-light: linear-gradient(145deg, #f5f5f5, #fff);
 }
 
 .login-right {
-  flex: 1;
+  flex: 3;
+  background: #ffffff; // 金属渐变背景
   display: flex;
   justify-content: center;
   align-items: center;
-  background: $--metal-gradient-light; // 金属渐变背景
 }
 
 .login-illustration {

klp-ui/src/views/wms/coil/box.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="statistics-container">
+  <div class="statistics-container" v-loading="loading">
     <!-- 统计方式选择 -->
     <el-form inline>
       <el-form-item label="统计方式" prop="statType">
@@ -100,8 +100,11 @@
               <el-table-column prop="warehouseName" label="仓库名称" align="center" min-width="150"></el-table-column>
               <el-table-column prop="currentCoilNo" label="当前卷号" align="center" min-width="120"></el-table-column>
               <el-table-column prop="enterCoilNo" label="入场卷号" align="center" min-width="180"></el-table-column>
-              <el-table-column prop="grossWeight" label="毛重(kg)" align="center" min-width="100"></el-table-column>
+              <el-table-column label="库区" align="center" prop="itemType">
-              <el-table-column prop="netWeight" label="净重(kg)" align="center" min-width="100"></el-table-column>
+                <template slot-scope="scope">
+                  {{ scope.row.itemType == 'product' ? '成品' : '原料' }}
+                </template>
+              </el-table-column>
               <el-table-column label="物料信息" align="center" min-width="250">
                 <template slot-scope="scope">
                   <ProductInfo v-if="scope.row.itemType === 'product'" :productId="scope.row.itemId">
@@ -116,13 +119,8 @@
                   </RawMaterialInfo>
                 </template>
               </el-table-column>
-              <el-table-column prop="coilStatus" label="状态" align="center" min-width="100">
+              <el-table-column prop="grossWeight" label="毛重(kg)" align="center" min-width="100"></el-table-column>
-                <template slot-scope="scope">
+              <el-table-column prop="netWeight" label="净重(kg)" align="center" min-width="100"></el-table-column>
-                  <el-tag :type="getCoilStatusTagType(scope.row.coilStatus)">
-                    {{ formatCoilStatus(scope.row.coilStatus) }}
-                  </el-tag>
-                </template>
-              </el-table-column>
             </el-table>
           </el-skeleton>
 
@@ -160,6 +158,7 @@ export default {
         itemType: undefined,
         itemId: undefined,
       },
+      loading: false,
       list: [],
       // 科技风配色方案（蓝色系为主，体现科技感）
       techColors: [
@@ -209,17 +208,20 @@ export default {
   },
   methods: {
     getList() {
+      this.loading = true;
       if (this.queryParams.statType === '1') {
         // 物料统计：仓库字段无效，以物料为核心
         getMaterialCoilDistributionByType(this.queryParams).then(res => {
           this.list = res.data || [];
           this.updateCharts();
+          this.loading = false;
         })
       } else if (this.queryParams.statType === '2') {
         // 仓库统计：物料字段无效，以仓库为核心
         getMaterialCoilDistributionByWarehouse(this.queryParams).then(res => {
           this.list = res.data || [];
           this.updateCharts();
+          this.loading = false;
         })
       }
     },
@@ -279,11 +281,11 @@ export default {
             warehouseId: item.warehouseId,
             warehouseName: item.warehouseName,
             itemStyle: { color: this.getTechColor(index) },
-            children: [{
+            // children: [{
-              name: `卷数: ${item.coilCount}`,
+            //   name: `卷数: ${item.coilCount}`,
-              value: item.coilCount,
+            //   value: item.coilCount,
-              itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
+            //   itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
-            }]
+            // }]
           }))
         };
       }

klp-ui/src/views/wms/coil/panels/base.vue

@@ -51,20 +51,11 @@
       <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo" />
       <el-table-column label="当前钢卷号" align="center" prop="currentCoilNo" />
       <el-table-column label="厂家原料卷号" align="center" prop="supplierCoilNo" />
-      <el-table-column label="数据类型" align="center" prop="dataType">
+      <el-table-column label="库区" align="center" prop="itemType">
         <template slot-scope="scope">
-          {{ scope.row.dataType == 0 ? '历史数据' : '当前数据' }}
+          {{ scope.row.itemType == 'product' ? '成品' : '原料' }}
         </template>
       </el-table-column>
-      <el-table-column label="二维码" v-if="qrcode">
-        <template slot-scope="scope">
-          <QRCode v-if="scope.row.dataType == 1" :content="scope.row.qrcodeRecordId" :size="50" />
-        </template>
-      </el-table-column>
-      <el-table-column label="班组" align="center" prop="team" />
-      <el-table-column label="毛重" align="center" prop="grossWeight" />
-      <el-table-column label="净重" align="center" prop="netWeight" />
-      <el-table-column label="仓库" align="center" prop="warehouseName" />
       <el-table-column label="物品" align="center" prop="itemName">
         <template slot-scope="scope">
           <ProductInfo v-if="scope.row.itemType == 'product'" productId="scope.row.itemId">
@@ -79,6 +70,21 @@
           </RawMaterialInfo>
         </template>
       </el-table-column>
+      <el-table-column label="数据类型" align="center" prop="dataType">
+        <template slot-scope="scope">
+          {{ scope.row.dataType == 0 ? '历史数据' : '当前数据' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="二维码" v-if="qrcode">
+        <template slot-scope="scope">
+          <QRCode v-if="scope.row.dataType == 1" :content="scope.row.qrcodeRecordId" :size="50" />
+        </template>
+      </el-table-column>
+      <el-table-column label="班组" align="center" prop="team" />
+      <el-table-column label="毛重" align="center" prop="grossWeight" />
+      <el-table-column label="净重" align="center" prop="netWeight" />
+      <el-table-column label="仓库" align="center" prop="warehouseName" />
+      
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -114,8 +120,8 @@
         <el-form-item label="班组" prop="team">
           <el-input v-model="form.team" placeholder="请输入班组" />
         </el-form-item>
-        <el-form-item label="物品类型" prop="itemType">
+        <el-form-item label="库区" prop="itemType">
-          <el-select v-model="form.itemType" placeholder="请选择物品类型">
+          <el-select v-model="form.itemType" placeholder="请选择库区">
             <el-option label="成品" value="product" />
             <el-option label="原料" value="raw_material" />
           </el-select>

klp-wms/src/main/java/com/klp/service/impl/WmsMaterialCoilServiceImpl.java

@@ -260,6 +260,7 @@ public class WmsMaterialCoilServiceImpl implements IWmsMaterialCoilService {
             recordBo.setQrcodeType(0L);
             recordBo.setIsEnabled(0L);
             recordBo.setSize(200L);
+            recordBo.setStatus(1); // 1=当前有效码
 
             WmsGenerateRecordVo record = generateRecordService.insertByBo(recordBo);
             return record.getRecordId();
@@ -362,8 +363,19 @@ public class WmsMaterialCoilServiceImpl implements IWmsMaterialCoilService {
             throw new RuntimeException("原钢卷不存在");
         }
 
-        // 1. 更新二维码，添加操作记录
+        // 判断warehouseId是否发生变化
-        updateQrcodeContent(oldCoil.getQrcodeRecordId(), bo);
+        boolean warehouseChanged = bo.getWarehouseId() != null && 
+                                   !bo.getWarehouseId().equals(oldCoil.getWarehouseId());
+        
+        Long qrcodeRecordId;
+        if (warehouseChanged) {
+            // 如果库区发生变化，生成新的二维码
+            qrcodeRecordId = generateQrcodeForUpdate(oldCoil, bo);
+        } else {
+            // 如果库区未变化，更新原二维码内容
+            updateQrcodeContent(oldCoil.getQrcodeRecordId(), bo);
+            qrcodeRecordId = oldCoil.getQrcodeRecordId();
+        }
 
         // 2. 将原数据更新为历史数据（data_type=0）
         LambdaUpdateWrapper<WmsMaterialCoil> updateWrapper = new LambdaUpdateWrapper<>();
@@ -375,12 +387,10 @@ public class WmsMaterialCoilServiceImpl implements IWmsMaterialCoilService {
         WmsMaterialCoil newCoil = BeanUtil.toBean(bo, WmsMaterialCoil.class);
         newCoil.setCoilId(null); // 清空ID，让数据库自动生成新的ID
         newCoil.setDataType(1); // 设置为当前数据
-        newCoil.setQrcodeRecordId(oldCoil.getQrcodeRecordId()); // 继承二维码ID
+        newCoil.setQrcodeRecordId(qrcodeRecordId); // 使用新的或原有的二维码ID
 
-        // 确保关键字段不丢失
+        // 确保关键字段不丢失（入场钢卷号始终不变）
-        if (newCoil.getEnterCoilNo() == null) {
+        newCoil.setEnterCoilNo(oldCoil.getEnterCoilNo()); // 入场钢卷号始终不变
-            newCoil.setEnterCoilNo(oldCoil.getEnterCoilNo());
-        }
         if (newCoil.getSupplierCoilNo() == null) {
             newCoil.setSupplierCoilNo(oldCoil.getSupplierCoilNo()); // 保留厂家原料卷号
         }
@@ -395,10 +405,83 @@ public class WmsMaterialCoilServiceImpl implements IWmsMaterialCoilService {
         boolean flag = baseMapper.insert(newCoil) > 0;
         if (flag) {
             bo.setCoilId(newCoil.getCoilId());
+            // 如果生成了新二维码，更新二维码中的coilId
+            if (warehouseChanged) {
+                updateQrcodeCoilId(qrcodeRecordId, newCoil.getCoilId());
+            }
         }
         return flag;
     }
 
+    /**
+     * 生成二维码（更新时库区变化）
+     */
+    private Long generateQrcodeForUpdate(WmsMaterialCoil oldCoil, WmsMaterialCoilBo bo) {
+        try {
+            // 1. 将原二维码标记为历史码（status = 0）
+            if (oldCoil.getQrcodeRecordId() != null) {
+                WmsGenerateRecordBo oldQrBo = new WmsGenerateRecordBo();
+                oldQrBo.setRecordId(oldCoil.getQrcodeRecordId());
+                oldQrBo.setStatus(0); // 0=历史码
+                generateRecordService.updateByBo(oldQrBo);
+            }
+
+            Map<String, Object> contentMap = new HashMap<>();
+            String currentCoilNo = bo.getCurrentCoilNo() != null ? bo.getCurrentCoilNo() : oldCoil.getCurrentCoilNo();
+
+            contentMap.put("enter_coil_no", oldCoil.getEnterCoilNo()); // 入场钢卷号（始终不变）
+            contentMap.put("current_coil_no", currentCoilNo); // 当前钢卷号
+            contentMap.put("coil_id", "null"); // 钢卷ID（更新时暂时为null，插入后更新）
+
+            // 复制原钢卷的历史steps
+            List<Map<String, Object>> steps = new ArrayList<>();
+            if (oldCoil.getQrcodeRecordId() != null) {
+                WmsGenerateRecordVo oldRecord = generateRecordService.queryById(oldCoil.getQrcodeRecordId());
+                if (oldRecord != null) {
+                    ObjectMapper objectMapper = new ObjectMapper();
+                    @SuppressWarnings("unchecked")
+                    Map<String, Object> oldContentMap = objectMapper.readValue(oldRecord.getContent(), Map.class);
+                    @SuppressWarnings("unchecked")
+                    List<Map<String, Object>> oldSteps = (List<Map<String, Object>>) oldContentMap.get("steps");
+                    if (oldSteps != null) {
+                        steps.addAll(oldSteps);
+                    }
+                }
+            }
+
+            // 添加更新步骤（库区变化）
+            Map<String, Object> updateStep = new HashMap<>();
+            updateStep.put("step", steps.size() + 1);
+            updateStep.put("action", "更新");
+            updateStep.put("operation", "库区变更");
+            updateStep.put("old_warehouse_id", String.valueOf(oldCoil.getWarehouseId()));
+            updateStep.put("new_warehouse_id", String.valueOf(bo.getWarehouseId()));
+            updateStep.put("old_coil_id", String.valueOf(oldCoil.getCoilId()));
+            updateStep.put("current_coil_no", currentCoilNo);
+            updateStep.put("operator", LoginHelper.getUsername()); // 操作者
+            steps.add(updateStep);
+
+            contentMap.put("steps", steps);
+
+            ObjectMapper objectMapper = new ObjectMapper();
+            String contentJson = objectMapper.writeValueAsString(contentMap);
+
+            // 2. 生成新的二维码（status = 1）
+            WmsGenerateRecordBo recordBo = new WmsGenerateRecordBo();
+            recordBo.setContent(contentJson);
+            recordBo.setSerialNumber(oldCoil.getEnterCoilNo() + "-W" + bo.getWarehouseId()); // 使用入场钢卷号+库区ID作为编号
+            recordBo.setQrcodeType(0L);
+            recordBo.setIsEnabled(0L);
+            recordBo.setSize(200L);
+            recordBo.setStatus(1); // 1=当前有效码
+
+            WmsGenerateRecordVo record = generateRecordService.insertByBo(recordBo);
+            return record.getRecordId();
+        } catch (Exception e) {
+            throw new RuntimeException("生成更新二维码失败: " + e.getMessage());
+        }
+    }
+
     /**
      * 批量更新（分卷/合卷）
      */
@@ -586,6 +669,7 @@ public class WmsMaterialCoilServiceImpl implements IWmsMaterialCoilService {
             recordBo.setQrcodeType(0L);
             recordBo.setIsEnabled(0L);
             recordBo.setSize(200L);
+            recordBo.setStatus(1); // 1=当前有效码
 
             WmsGenerateRecordVo record = generateRecordService.insertByBo(recordBo);
             return record.getRecordId();
@@ -680,6 +764,7 @@ public class WmsMaterialCoilServiceImpl implements IWmsMaterialCoilService {
             recordBo.setQrcodeType(0L);
             recordBo.setIsEnabled(0L);
             recordBo.setSize(200L);
+            recordBo.setStatus(1); // 1=当前有效码
 
             WmsGenerateRecordVo record = generateRecordService.insertByBo(recordBo);
             return record.getRecordId();