Browse Source

<feat>:暂存部分代码,明天完成大屏

master
黄潇军 3 months ago
parent
commit
834c40691c
  1. 7
      packages/robot-system/src/config/app/develop.js
  2. 6
      packages/robot-system/src/config/app/proxy.js
  3. 168
      packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/MapComponent.vue
  4. 348
      packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/index.vue
  5. 13
      packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/route.js
  6. 14
      packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/index.vue
  7. 10
      packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/route.js
  8. 13
      packages/robot-system/src/modules/RobotSystemManage/index.vue
  9. 14
      packages/robot-system/src/modules/RobotSystemManage/lang.js
  10. 10
      packages/robot-system/src/modules/RobotSystemManage/route.js
  11. 41
      packages/robot-system/src/modules/systemCheckout/index.vue
  12. 107
      packages/robot-system/vue.config.js

7
packages/robot-system/src/config/app/develop.js

@ -1,10 +1,10 @@ @@ -1,10 +1,10 @@
/*
* @Author: zhong_m
* @Date: 2021-12-06 11:33:20
* @LastEditTime: 2025-05-26 16:31:07
* @LastEditors: 江荣宝 jiangrongbao@bysoft.com
* @LastEditTime: 2025-08-25 16:44:00
* @LastEditors: XiaoJun
* @Description: 开发配置用于开发调试
* @FilePath: \central-system\src\config\app\develop.js
* @FilePath: /pv-system-monorepo/packages/robot-system/src/config/app/develop.js
*/
module.exports = {
@ -18,6 +18,7 @@ module.exports = { @@ -18,6 +18,7 @@ module.exports = {
* @type {boolean} true | false
* @description 是否加载本地 路由|权限
*/
// localRoute: true,
localRoute: false,
/**

6
packages/robot-system/src/config/app/proxy.js

@ -1,10 +1,10 @@ @@ -1,10 +1,10 @@
/*
* @Author: zhong_m
* @Date: 2022-10-10 09:14:24
* @LastEditTime: 2025-08-15 10:00:11
* @LastEditTime: 2025-08-25 14:53:20
* @LastEditors: XiaoJun
* @Description: 代理设置,开发环境默认baseUrl为/api如需代理至其它地址请在默认代理前设置路径,修改后需重启项目
* @FilePath: /front/src/config/app/proxy.js
* @FilePath: /pv-system-monorepo/packages/robot-system/src/config/app/proxy.js
*/
module.exports = {
@ -44,7 +44,7 @@ module.exports = { @@ -44,7 +44,7 @@ module.exports = {
console.error('代理错误:', err);
},
onProxyRes: (proxyRes, req, res) => {
console.log('代理响应:', req.url, proxyRes.statusCode);
// console.log('代理响应:', req.url, proxyRes.statusCode);
}
},
'/filePreview': {

168
packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/MapComponent.vue

@ -0,0 +1,168 @@ @@ -0,0 +1,168 @@
<template>
<div id="map" style="height: 100%; width: 100%; overflow: hidden"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
/**
* props.rectangles: Array<{ id, name, status, geomWkt }>
* - geomWkt: "POLYGON((lng lat,lng lat,...))"
* - status: 施工中 | 已施工 | 未施工 | 故障 | 运行中 | 停机
*/
const STATUS_STYLE = {
施工中: { stroke: 'rgba(41,169,253,1)', fill: 'rgba(41,169,253,0.45)' },
已施工: { stroke: 'rgba(82,196,26,1)', fill: 'rgba(82,196,26,0.45)' },
未施工: { stroke: 'rgba(250,173,20,1)', fill: 'rgba(250,173,20,0.45)' },
故障: { stroke: 'rgba(219,77,77,1)', fill: 'rgba(219,77,77,0.6)' },
运行中: { stroke: 'rgba(19,194,194,1)', fill: 'rgba(19,194,194,0.45)' },
停机: { stroke: 'rgba(99,99,99,1)', fill: 'rgba(0,0,0,0.45)' }
};
export default {
name: 'TaskMapPolygon',
props: {
rectangles: {
type: Array,
default: () => []
}
},
data() {
return {
map: null,
AMapIns: null,
polygons: [],
texts: [],
pointAll: { lng: [], lat: [] }
};
},
watch: {
rectangles: {
immediate: true,
deep: true,
handler(val) {
if (this.map && val?.length) {
this.clearLayers();
this.formatData(val);
}
}
}
},
mounted() {
this.initAMap();
},
beforeUnmount() {
this.map?.destroy();
},
methods: {
initAMap() {
const map_center = JSON.parse(this.$storage.get('map_center') || 'null');
let defaultCenterPoint = [121.5563, 32.107];
if (map_center) {
defaultCenterPoint = map_center.find((el) => el.key == 'default')?.value || defaultCenterPoint;
}
window._AMapSecurityConfig = { securityJsCode: '5869fe06ab3640b49006f4ec5e595e9f' };
AMapLoader.load({
key: '3758e4530242ba6282c77f96ea69262d',
version: '2.0',
plugins: ['AMap.MouseTool', 'AMap.Scale', 'AMap.Text']
})
.then((AMap) => {
this.AMapIns = AMap;
this.map = new AMap.Map('map', {
viewMode: '2D',
zoom: 12,
center: defaultCenterPoint
});
if (this.rectangles?.length) {
this.formatData(this.rectangles);
}
})
.catch(console.error);
},
clearLayers() {
if (!this.map) return;
this.map.remove(this.polygons);
this.map.remove(this.texts);
this.polygons = [];
this.texts = [];
this.pointAll = { lng: [], lat: [] };
},
formatData(data = []) {
// WKT -> AMap path使
const list = (data || []).map((item, index) => {
const raw = (item.geomWkt || '')
.replace(/POLYGON\(\(/i, '')
.replace(/\)\)$/i, '')
.trim();
const points = raw.split(',');
const path = [];
for (let i = 0; i < points.length; i++) {
const parts = points[i].trim().split(/\s+/);
const lng = Number(parts[0]);
const lat = Number(parts[1]);
if (isNaN(lng) || isNaN(lat)) continue;
this.pointAll.lng.push(lng);
this.pointAll.lat.push(lat);
path.push([lng, lat]);
}
return { ...item, path, index };
});
list.forEach((it) => this.createPolygon(it));
//
if (this.polygons.length) {
// padding: [top, right, bottom, left]
this.map.setFitView(this.polygons, false, [60, 60, 60, 60]);
}
},
createPolygon(item) {
const { path, status, name } = item;
const style = STATUS_STYLE[status] || STATUS_STYLE['未施工'];
const polygon = new this.AMapIns.Polygon({
path,
strokeColor: style.stroke,
strokeWeight: 2,
strokeOpacity: 1,
strokeStyle: 'solid',
fillColor: style.fill,
fillOpacity: 0.45,
cursor: 'pointer',
zIndex: 50
});
console.log(polygon, 'polygon');
this.map.add(polygon);
this.polygons.push(polygon);
//
const text = new this.AMapIns.Text({
text: name || '',
anchor: 'center',
style: { 'background-color': 'transparent', border: 'none', color: '#ffffff', 'font-size': '12px' }
});
//
const mid = path[Math.floor(path.length / 2)] || path[0];
if (mid) text.setPosition(mid);
text.setMap(this.map);
this.texts.push(text);
// hover
polygon.on('mouseover', () => {
polygon.setOptions({ fillOpacity: 0.55 });
});
polygon.on('mouseout', () => {
polygon.setOptions({ fillOpacity: 0.35 });
});
}
}
};
</script>
<style scoped lang="scss">
#map {
width: 100%;
height: 100%;
}
</style>

348
packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/index.vue

@ -0,0 +1,348 @@ @@ -0,0 +1,348 @@
<template>
<div class="task-screen">
<div class="map-wrap">
<MapComponent :rectangles="rectangles" />
<div class="legend">
<div class="legend-item" v-for="(item, i) in legends" :key="i">
<span class="dot" :style="{ background: item.color }"></span>
<span class="text">{{ item.label }}</span>
</div>
</div>
</div>
<div class="side left">
<div class="panel">
<div class="panel-title">
<img class="titleIcon" :src="titleIcon" />
<span>工区统计</span>
<span class="more">更多</span>
</div>
<div class="progress-group">
<div class="progress-row">
<div class="label">工区总进度</div>
<div class="value">{{ areaProgress }}%</div>
</div>
<fks-progress :percentage="areaProgress" :stroke-width="8" color="#4dabf7" />
<div class="progress-sub">
<div class="sub-row" v-for="(p, pi) in subProgress" :key="pi">
<div class="name">{{ p.name }}</div>
<div class="bar">
<fks-progress :percentage="p.value" :stroke-width="6" :show-text="false" color="#91c9ff" />
</div>
<div class="num">{{ p.value }}</div>
</div>
</div>
</div>
<fks-table :data="areaTable" border height="280">
<fks-table-column type="index" label="#" width="50" />
<fks-table-column prop="name" label="工区名称" min-width="90" />
<fks-table-column prop="pile" label="桩条安装进度(%)" width="140" />
<fks-table-column prop="module" label="组件安装进度(%)" width="140" />
<fks-table-column prop="owner" label="负责安环" width="90" />
<fks-table-column prop="year" label="10号车" width="80" />
</fks-table>
</div>
<div class="panel">
<div class="panel-title">
<img class="titleIcon" :src="titleIcon" />
<span>材料统计</span>
<span class="more">更多</span>
</div>
<fks-table :data="materialTable" border height="300">
<fks-table-column prop="name" label="材料名称" min-width="100" />
<fks-table-column prop="used" label="当日消耗量" width="120" />
<fks-table-column prop="stock" label="库存量" width="100" />
</fks-table>
</div>
</div>
<div class="side right">
<div class="panel">
<div class="panel-title">
<img class="titleIcon" :src="titleIcon" />
<span>设备信息</span>
<span class="more">更多</span>
</div>
<div class="kpibox">
<div class="kpi">
<div class="kpi-label">当前设备在线数量</div>
<div class="kpi-value">{{ deviceStats.online }}</div>
</div>
<div class="kpi">
<div class="kpi-label">组件设备</div>
<div class="kpi-value">{{ deviceStats.component }}</div>
</div>
<div class="kpi">
<div class="kpi-label">当前设备安装数量</div>
<div class="kpi-value">{{ deviceStats.installing }}</div>
</div>
<div class="kpi">
<div class="kpi-label">组件安装数</div>
<div class="kpi-value">{{ deviceStats.moduleInstalled }}</div>
</div>
</div>
<fks-table :data="deviceTable" border height="280">
<fks-table-column prop="id" label="设备ID" width="80" />
<fks-table-column prop="area" label="所属工区" width="90" />
<fks-table-column prop="team" label="工作小组" width="100" />
<fks-table-column prop="dayWork" label="当日工作量" width="110" />
<fks-table-column prop="runtime" label="运行时长(h)" width="110" />
</fks-table>
</div>
<div class="panel">
<div class="panel-title">
<img class="titleIcon" :src="titleIcon" />
<span>报警信息</span>
<span class="more">更多</span>
</div>
<fks-table :data="alarmTable" border height="300">
<fks-table-column prop="code" label="报警编号" width="100" />
<fks-table-column prop="device" label="设备编号" width="100" />
<fks-table-column prop="desc" label="报警内容" min-width="140" />
<fks-table-column prop="time" label="报警时间" width="160" />
</fks-table>
</div>
</div>
</div>
</template>
<script>
import Mix from '@/mixins/module';
import MapComponent from './MapComponent.vue';
export default {
name: 'TaskScreenView',
mixins: [Mix],
components: { MapComponent },
data() {
return {
titleIcon: require('@/assets/img/Automated/titleIcon1.png'),
areaProgress: 30,
subProgress: [
{ name: '桩条安装进度(%)', value: 10 },
{ name: '组件安装进度(%)', value: 10 }
],
areaTable: [
{ name: 'xxx', pile: 10, module: 10, owner: '10号车', year: '10号车' },
{ name: 'xxx', pile: 10, module: 10, owner: '10号车', year: '10号车' },
{ name: 'xxx', pile: 10, module: 10, owner: '10号车', year: '10号车' },
{ name: 'xxx', pile: 10, module: 10, owner: '10号车', year: '10号车' },
{ name: 'xxx', pile: 10, module: 10, owner: '10号车', year: '10号车' },
{ name: 'xxx', pile: 10, module: 10, owner: '10号车', year: '10号车' }
],
materialTable: [
{ name: 'xxx', used: 128, stock: 3 },
{ name: 'xxx', used: 64, stock: 4 },
{ name: 'xxx', used: 325, stock: 5 },
{ name: 'xxx', used: 1900, stock: 5 },
{ name: 'xxx', used: 1900, stock: 5 },
{ name: 'xxx', used: 1900, stock: 5 }
],
deviceStats: {
online: 2234,
component: 2234,
installing: 2234,
moduleInstalled: 2234
},
deviceTable: [
{ id: '001', area: 'xxx', team: 'xxx', dayWork: 128, runtime: 18 },
{ id: '002', area: 'xxx', team: 'xxx', dayWork: 325, runtime: 18 },
{ id: '003', area: 'xxx', team: 'xxx', dayWork: 1900, runtime: 18 },
{ id: '004', area: 'xxx', team: 'xxx', dayWork: 1900, runtime: 18 },
{ id: '005', area: 'xxx', team: 'xxx', dayWork: 325, runtime: 18 }
],
alarmTable: [
{ code: 'A001', device: 'xxx', desc: '报警内容', time: '2024-01-01 12:01' },
{ code: 'A002', device: 'xxx', desc: '报警内容', time: '2024-01-01 12:10' },
{ code: 'A003', device: 'xxx', desc: '报警内容', time: '2024-01-01 12:35' },
{ code: 'A004', device: 'xxx', desc: '报警内容', time: '2024-01-01 12:58' }
],
rectangles: [
// 西
{ id: '1', name: '西湖区', status: '施工中', geomWkt: 'POLYGON((120.0000 30.1500,120.2500 30.1500,120.2500 30.3700,120.0000 30.3700,120.0000 30.1500))' },
//
{ id: '2', name: '拱墅区', status: '已施工', geomWkt: 'POLYGON((120.0900 30.3000,120.2300 30.3000,120.2300 30.4200,120.0900 30.4200,120.0900 30.3000))' },
//
{ id: '3', name: '上城区', status: '未施工', geomWkt: 'POLYGON((120.1400 30.2000,120.2600 30.2000,120.2600 30.3100,120.1400 30.3100,120.1400 30.2000))' },
//
{ id: '4', name: '滨江区', status: '故障', geomWkt: 'POLYGON((120.0900 30.1400,120.2700 30.1400,120.2700 30.2400,120.0900 30.2400,120.0900 30.1400))' },
//
{ id: '5', name: '萧山区', status: '运行中', geomWkt: 'POLYGON((120.1800 30.0200,120.5300 30.0200,120.5300 30.3300,120.1800 30.3300,120.1800 30.0200))' },
//
{ id: '6', name: '余杭区', status: '停机', geomWkt: 'POLYGON((119.8000 30.1800,120.1000 30.1800,120.1000 30.5000,119.8000 30.5000,119.8000 30.1800))' }
],
legends: [
{ label: '施工中', color: '#3fa7ff' },
{ label: '已施工', color: '#52c41a' },
{ label: '未施工', color: '#faad14' },
{ label: '故障', color: '#ff4d4f' },
{ label: '运行中', color: '#13c2c2' },
{ label: '停机', color: '#bfbfbf' }
]
};
}
};
</script>
<style scoped lang="scss">
.task-screen {
position: relative;
display: flex;
height: 100%;
width: 100%;
background: #0b1535;
}
.map-wrap {
position: relative;
flex: 1;
min-height: 600px;
}
.legend {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 12px;
display: flex;
align-items: center;
padding: 8px 12px;
background: rgba(0, 12, 32, 0.7);
border: 1px solid rgba(91, 166, 255, 0.35);
border-radius: 6px;
.legend-item {
display: flex;
align-items: center;
margin: 0 10px;
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 6px;
}
.text {
color: #cfe6ff;
font-size: 12px;
}
}
}
.side {
width: 360px;
padding: 12px;
box-sizing: border-box;
.panel + .panel {
margin-top: 12px;
}
}
.left {
position: absolute;
left: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.right {
position: absolute;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.panel {
background: rgba(0, 12, 32, 0.7);
border: 1px solid rgba(91, 166, 255, 0.35);
border-radius: 8px;
padding: 12px;
.panel-title {
display: flex;
align-items: center;
justify-content: space-between;
color: #cfe6ff;
font-size: 14px;
margin-bottom: 10px;
.titleIcon {
width: 18px;
height: 18px;
margin-right: 6px;
}
span {
display: inline-flex;
align-items: center;
}
.more {
color: #6bb1ff;
cursor: pointer;
font-size: 12px;
}
}
}
.progress-group {
margin-bottom: 12px;
.progress-row {
display: flex;
justify-content: space-between;
color: #cfe6ff;
margin-bottom: 6px;
.label {
font-size: 13px;
}
.value {
font-size: 13px;
}
}
.progress-sub {
margin-top: 8px;
.sub-row {
display: grid;
grid-template-columns: 120px 1fr 36px;
align-items: center;
color: #cfe6ff;
font-size: 12px;
margin-bottom: 6px;
.name {
opacity: 0.85;
}
.bar {
padding: 0 8px;
}
.num {
text-align: right;
}
}
}
}
.kpibox {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 8px;
margin-bottom: 12px;
.kpi {
background: rgba(8, 26, 58, 0.7);
border: 1px solid rgba(91, 166, 255, 0.25);
border-radius: 6px;
padding: 10px 8px;
.kpi-label {
color: #94b8ff;
font-size: 12px;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kpi-value {
color: #e8f3ff;
font-weight: 600;
font-size: 18px;
line-height: 1.2;
}
}
}
</style>

13
packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/TaskScreenView/route.js

@ -0,0 +1,13 @@ @@ -0,0 +1,13 @@
const route =
{
path: '/ScreenViewManage',
name: 'ScreenViewManage',
component: () => import('./index.vue'),
title: 'SECOND_MENU_ROBOT_TASK_SCREEN_VIEW', // 使用翻译键
meta: {
title: 'SECOND_MENU_ROBOT_TASK_SCREEN_VIEW' // 也在meta中使用翻译键
}
}
export default route

14
packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/index.vue

@ -0,0 +1,14 @@ @@ -0,0 +1,14 @@
<template>
<router-view class="main-wrapper" />
</template>
<script>
import Mix from '@/mixins/module'
export default {
name: 'RobotSystemManage',
mixins: [Mix],
beforeDestroy() {}
}
</script>
<style scoped>
</style>

10
packages/robot-system/src/modules/RobotSystemManage/ScreenViewManage/route.js

@ -0,0 +1,10 @@ @@ -0,0 +1,10 @@
const route =
{
path: '/ScreenViewManage',
name: 'ScreenViewManage',
component: () => import('./index.vue'),
title: 'ScreenViewManage',
}
export default route

13
packages/robot-system/src/modules/RobotSystemManage/index.vue

@ -0,0 +1,13 @@ @@ -0,0 +1,13 @@
<template>
<router-view class="main-wrapper" />
</template>
<script>
import Mix from '@/mixins/module';
export default {
name: 'RobotSystemManage',
mixins: [Mix],
beforeDestroy() {}
};
</script>
<style scoped></style>

14
packages/robot-system/src/modules/RobotSystemManage/lang.js

@ -0,0 +1,14 @@ @@ -0,0 +1,14 @@
/*
* @Author: 你的名字
* @Date: 2025-01-XX
* @Description: 运输安装管理系统国际化
*/
export default {
// 主系统
PUTMS: '运输安装管理系统',
// 一级菜单
FIRST_MENU_ROBOT_SCREEN_VIEW_MANAGE: '大屏管理',
// 二级菜单
SECOND_MENU_ROBOT_TASK_SCREEN_VIEW: '任务大屏'
};

10
packages/robot-system/src/modules/RobotSystemManage/route.js

@ -0,0 +1,10 @@ @@ -0,0 +1,10 @@
const route =
{
path: '/RobotSystemManage',
name: 'RobotSystemManage',
component: () => import('./index.vue'),
title: 'RobotSystemManage',
}
export default route

41
packages/robot-system/src/modules/systemCheckout/index.vue

@ -48,26 +48,26 @@ export default { @@ -48,26 +48,26 @@ export default {
// },
{
id: 2,
zh: '打桩生产<br>管控系统',
zh: '机器人远程<br>管控系统',
en: 'APICMS',
icon: image2,
path:'/AutomatedPileInsertionConstructionManagementSubsystem'
},
{
id: 3,
zh: '产线生产<br>管控系统',
en: 'PAPPMS',
icon: image3,
path:'/PhotovoltaicAssemblyProjectProductionManagementSubsystem'
},
{
id: 4,
zh: '运输安装<br>管控系统',
en: 'PUTMS',
icon: image4,
path:'/PhotovoltaicUnitTransportationManagementSubsystem'
path:'/RobotSystemManage'
},
// {
// id: 3,
// zh: '线<br>',
// en: 'PAPPMS',
// icon: image3,
// path:'/PhotovoltaicAssemblyProjectProductionManagementSubsystem'
// },
// {
// id: 4,
// zh: '<br>',
// en: 'PUTMS',
// icon: image4,
// path:'/PhotovoltaicUnitTransportationManagementSubsystem'
// },
// {
// id: 5,
// zh: '<br>',
// en: 'PUIACMS',
@ -107,9 +107,10 @@ export default { @@ -107,9 +107,10 @@ export default {
getRouter().then(res=>{
let isRouter = ""
res.data.forEach(ele => {
if(ele.title == this.name){
isRouter = ele.path
}
isRouter = ele.path
// if(ele.title == this.name){
// isRouter = ele.path
// }
});
if(isRouter){
this.$router.replace({ path: isRouter })
@ -232,6 +233,8 @@ export default { @@ -232,6 +233,8 @@ export default {
return tree;
},
changeSystem(path,name) {
console.log(path,name)
debugger
if(name){
localStorage.setItem('systemname',name.replace(/<br>/g, ''))

107
packages/robot-system/vue.config.js

@ -1,17 +1,17 @@ @@ -1,17 +1,17 @@
'use strict'
const path = require('path')
const config = require('./src/config')
const TerserPlugin = require('terser-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
'use strict';
const path = require('path');
const config = require('./src/config');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
function resolve (dir) {
return path.join(__dirname, dir)
function resolve(dir) {
return path.join(__dirname, dir);
}
const name = config.title || 'Fawkes' // page title
const name = config.title || 'Fawkes'; // page title
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For Example, Mac: sudo npm run
const port = 9528 // dev port
const port = 9528; // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
/**
@ -51,7 +51,8 @@ module.exports = { @@ -51,7 +51,8 @@ module.exports = {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
devtool: process.env.NODE_ENV === 'production' ? '' : 'eval-source-map',
// devtool: 'source-map',
// devtool: process.env.NODE_ENV === 'production' ? '' : 'eval-source-map',
resolve: {
alias: {
'@': resolve('src'),
@ -62,37 +63,33 @@ module.exports = { @@ -62,37 +63,33 @@ module.exports = {
'crypto-js': path.resolve(process.cwd(), 'node_modules', 'crypto-js')
}
},
module: {
},
optimization: {
minimizer: [
new TerserPlugin({
//采用多进程打包
parallel: 4,
terserOptions: {
compress: {
// 去除debug、console
warnings: true,
drop_debugger: true,
drop_console: true
}
}
})
]
}
module: {}
// optimization: {
// minimizer: [
// new TerserPlugin({
// //采用多进程打包
// parallel: 4,
// terserOptions: {
// compress: {
// // 去除debug、console
// warnings: true,
// drop_debugger: true,
// drop_console: true
// }
// }
// })
// ]
// }
},
chainWebpack (config) {
chainWebpack(config) {
// config
// .plugin('webpack-bundle-analyzer')
// .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
// .end()
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
config.plugins.delete('preload'); // TODO: need test
config.plugins.delete('prefetch'); // TODO: need test
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/assets/svg'))
.end()
config.module.rule('svg').exclude.add(resolve('src/assets/svg')).end();
config.module
.rule('icons')
.test(/\.svg$/)
@ -103,13 +100,13 @@ module.exports = { @@ -103,13 +100,13 @@ module.exports = {
.options({
symbolId: 'icon-[name]'
})
.end()
.end();
// 单独处理组件库样式
const css = config.module.rule('css').toConfig()
const useable = { ...css.oneOf[3], test: /fawkes-lib.+\.css$/i }
useable.use = [...useable.use]
useable.use[0] = { loader: 'style-loader', options: { injectType: 'singletonStyleTag' } }
config.module.rule('css').merge({ oneOf: [useable] })
const css = config.module.rule('css').toConfig();
const useable = { ...css.oneOf[3], test: /fawkes-lib.+\.css$/i };
useable.use = [...useable.use];
useable.use[0] = { loader: 'style-loader', options: { injectType: 'singletonStyleTag' } };
config.module.rule('css').merge({ oneOf: [useable] });
// style - loader覆盖默认loader实现样式动态加载可控
/**
* const css = config.module.rule('css').toConfig()
@ -125,18 +122,18 @@ module.exports = { @@ -125,18 +122,18 @@ module.exports = {
.use('vue-loader')
.loader('vue-loader')
.tap((options) => {
options.compilerOptions.preserveWhitespace = true
options.compilerOptions.preserveWhitespace = true;
options.compilerOptions.directives = {
html (node, directiveMeta) {
html(node, directiveMeta) {
(node.props || (node.props = [])).push({
name: 'innerHTML',
value: `$xss(_s(${directiveMeta.value}))`
})
});
}
}
return options
};
return options;
})
.end()
.end();
// VueFilenameInjector(config, {
// propName: '__source' // default
@ -152,7 +149,7 @@ module.exports = { @@ -152,7 +149,7 @@ module.exports = {
deleteOriginalAssets: false
})
)
.end()
.end();
// config
// .plugin('ScriptExtHtmlWebpackPlugin')
// .after('html')
@ -177,12 +174,12 @@ module.exports = { @@ -177,12 +174,12 @@ module.exports = {
reuseExistingChunk: true
}
}
}
config.optimization.splitChunks(group)
};
config.optimization.splitChunks(group);
console.log(config.optimization.splitChunks)
config.optimization.runtimeChunk('single')
config.optimization.minimize(true) // 代码压缩
})
console.log(config.optimization.splitChunks);
config.optimization.runtimeChunk('single');
// config.optimization.minimize(true) // 代码压缩
});
}
}
};

Loading…
Cancel
Save