Merge remote-tracking branch 'origin/0.8.X' into 0.8.X
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
BIN
klp-ui/src/assets/images/login.jpg
Normal file
BIN
klp-ui/src/assets/images/login.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 680 KiB |
@@ -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 {
|
||||
theme: $--color-primary;
|
||||
}
|
||||
// :export {
|
||||
// theme: $--color-primary;
|
||||
// }
|
||||
|
||||
@@ -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()
|
||||
|
||||
|
||||
BIN
klp-ui/src/modules/dashboardBig/assets/logo.png
Normal file
BIN
klp-ui/src/modules/dashboardBig/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
klp-ui/src/modules/dashboardBig/assets/pageBg.png
Normal file
BIN
klp-ui/src/modules/dashboardBig/assets/pageBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
98
klp-ui/src/modules/dashboardBig/assets/scss/_variables.scss
Normal file
98
klp-ui/src/modules/dashboardBig/assets/scss/_variables.scss
Normal file
@@ -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,
|
||||
);
|
||||
144
klp-ui/src/modules/dashboardBig/assets/scss/index.scss
Normal file
144
klp-ui/src/modules/dashboardBig/assets/scss/index.scss
Normal file
@@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
186
klp-ui/src/modules/dashboardBig/assets/scss/style.scss
Normal file
186
klp-ui/src/modules/dashboardBig/assets/scss/style.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
66
klp-ui/src/modules/dashboardBig/common/echart/index.vue
Normal file
66
klp-ui/src/modules/dashboardBig/common/echart/index.vue
Normal file
@@ -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>
|
||||
490
klp-ui/src/modules/dashboardBig/common/echart/theme.json
Normal file
490
klp-ui/src/modules/dashboardBig/common/echart/theme.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
48
klp-ui/src/modules/dashboardBig/common/map/fujian.js
Normal file
48
klp-ui/src/modules/dashboardBig/common/map/fujian.js
Normal file
File diff suppressed because one or more lines are too long
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
57
klp-ui/src/modules/dashboardBig/utils/drawMixin.js
Normal file
57
klp-ui/src/modules/dashboardBig/utils/drawMixin.js
Normal file
@@ -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)
|
||||
}
|
||||
},
|
||||
}
|
||||
51
klp-ui/src/modules/dashboardBig/utils/index.js
Normal file
51
klp-ui/src/modules/dashboardBig/utils/index.js
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
33
klp-ui/src/modules/dashboardBig/utils/resizeMixin.js
Normal file
33
klp-ui/src/modules/dashboardBig/utils/resizeMixin.js
Normal file
@@ -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),
|
||||
},
|
||||
};
|
||||
52
klp-ui/src/modules/dashboardBig/views/bottomLeft.vue
Normal file
52
klp-ui/src/modules/dashboardBig/views/bottomLeft.vue
Normal file
@@ -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>
|
||||
60
klp-ui/src/modules/dashboardBig/views/bottomRight.vue
Normal file
60
klp-ui/src/modules/dashboardBig/views/bottomRight.vue
Normal file
@@ -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>
|
||||
283
klp-ui/src/modules/dashboardBig/views/center.vue
Normal file
283
klp-ui/src/modules/dashboardBig/views/center.vue
Normal file
@@ -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>
|
||||
169
klp-ui/src/modules/dashboardBig/views/centerLeft1.vue
Normal file
169
klp-ui/src/modules/dashboardBig/views/centerLeft1.vue
Normal file
@@ -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>
|
||||
59
klp-ui/src/modules/dashboardBig/views/centerLeft2.vue
Normal file
59
klp-ui/src/modules/dashboardBig/views/centerLeft2.vue
Normal file
@@ -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>
|
||||
76
klp-ui/src/modules/dashboardBig/views/centerRight1.vue
Normal file
76
klp-ui/src/modules/dashboardBig/views/centerRight1.vue
Normal file
@@ -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>
|
||||
80
klp-ui/src/modules/dashboardBig/views/centerRight2.vue
Normal file
80
klp-ui/src/modules/dashboardBig/views/centerRight2.vue
Normal file
@@ -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>
|
||||
153
klp-ui/src/modules/dashboardBig/views/index.vue
Normal file
153
klp-ui/src/modules/dashboardBig/views/index.vue
Normal file
@@ -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>
|
||||
0
klp-ui/src/views/dashboard/body.vue
Normal file
0
klp-ui/src/views/dashboard/body.vue
Normal file
11
klp-ui/src/views/dashboard/demo.vue
Normal file
11
klp-ui/src/views/dashboard/demo.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<Home></Home>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Home from '@/modules/dashboardBig/views/index.vue'
|
||||
|
||||
export default {
|
||||
components: { Home },
|
||||
}
|
||||
</script>
|
||||
@@ -1,13 +1,25 @@
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-left">
|
||||
<div class="login-logo">
|
||||
<img src="../assets/logo/logo.png" alt="logo" class="logo-img" />
|
||||
<div class="login-title">科伦普综合办公系统</div>
|
||||
</div>
|
||||
<div class="login-box">
|
||||
<div class="login-title-welcome">欢迎使用科伦普综合办公系统</div>
|
||||
<div class="login-left">
|
||||
|
||||
<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-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;"
|
||||
@click.native.prevent="handleLogin">
|
||||
<el-button :loading="loading" size="medium" type="primary"
|
||||
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>
|
||||
<div class="login-right">
|
||||
<div class="login-illustration">
|
||||
<!-- <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>
|
||||
|
||||
@@ -159,22 +171,47 @@ $--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 {
|
||||
|
||||
@@ -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 prop="netWeight" label="净重(kg)" align="center" min-width="100"></el-table-column>
|
||||
<el-table-column label="库区" align="center" prop="itemType">
|
||||
<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">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="getCoilStatusTagType(scope.row.coilStatus)">
|
||||
{{ formatCoilStatus(scope.row.coilStatus) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="grossWeight" label="毛重(kg)" align="center" min-width="100"></el-table-column>
|
||||
<el-table-column prop="netWeight" label="净重(kg)" align="center" min-width="100"></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: [{
|
||||
name: `卷数: ${item.coilCount}`,
|
||||
value: item.coilCount,
|
||||
itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
|
||||
}]
|
||||
// children: [{
|
||||
// name: `卷数: ${item.coilCount}`,
|
||||
// value: item.coilCount,
|
||||
// itemStyle: { color: this.getTechColor(index + 1).replace('rgb', 'rgba').replace(')', ', 0.7)') }
|
||||
// }]
|
||||
}))
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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-select v-model="form.itemType" placeholder="请选择物品类型">
|
||||
<el-form-item label="库区" prop="itemType">
|
||||
<el-select v-model="form.itemType" placeholder="请选择库区">
|
||||
<el-option label="成品" value="product" />
|
||||
<el-option label="原料" value="raw_material" />
|
||||
</el-select>
|
||||
|
||||
@@ -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是否发生变化
|
||||
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();
|
||||
|
||||
Reference in New Issue
Block a user