堡座BI
This commit is contained in:
parent
0439473f59
commit
bbc17ce1c5
File diff suppressed because it is too large
Load Diff
|
|
@ -3,6 +3,7 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"dev": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
|
|
@ -10,11 +11,14 @@
|
|||
"dependencies": {
|
||||
"@jiaminghi/data-view": "^2.4.4",
|
||||
"axios": "^1.6.2",
|
||||
"echarts": "^5.5.1",
|
||||
"chart.js": "^4.4.7",
|
||||
"echarts": "^5.6.0",
|
||||
"element-ui": "^2.15.14",
|
||||
"less": "^3.9.0",
|
||||
"less-loader": "^5.0.0",
|
||||
"vue": "^2.6.10",
|
||||
"vue-seamless-scroll": "^1.1.23"
|
||||
"vue-seamless-scroll": "^1.1.23",
|
||||
"vuedraggable": "^2.24.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.8.0",
|
||||
|
|
|
|||
10
src/App.vue
10
src/App.vue
|
|
@ -1,15 +1,10 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<datav />
|
||||
<datav />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
//永盛版本
|
||||
//import datav from './components/datav/index.vue'
|
||||
|
||||
//堡座demo版本
|
||||
import datav from './components/baozuo-demo/index.vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -17,8 +12,7 @@ export default {
|
|||
components: {
|
||||
datav
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
24
src/api.js
24
src/api.js
|
|
@ -1,6 +1,8 @@
|
|||
import axios from 'axios'
|
||||
|
||||
const api = {
|
||||
|
||||
|
||||
// 定义API接口地址
|
||||
// baseURL: process.env.NODE_ENV === 'production' ? '/api/' : 'http://localhost:3000/',
|
||||
// GET请求示例
|
||||
|
|
@ -8,8 +10,8 @@ const api = {
|
|||
baseURL2: 'http://39.101.165.228:9001',
|
||||
|
||||
//永盛
|
||||
_baseURL: 'http://123.207.37.67:9001',
|
||||
_baseURL2: 'http://123.207.37.67:9001',
|
||||
baseURL2: 'http://123.207.37.67:9001',
|
||||
baseURL22: 'http://123.207.37.67:9001',
|
||||
|
||||
|
||||
get (url) {
|
||||
|
|
@ -23,24 +25,34 @@ const api = {
|
|||
})
|
||||
},
|
||||
// POST请求示例
|
||||
post (url, data) {
|
||||
post (url, data, token) {
|
||||
const headers = {}
|
||||
if (token) {
|
||||
headers['Token'] = token
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
axios({
|
||||
method: 'post',
|
||||
url: this.baseURL + url,
|
||||
data: data
|
||||
data: data,
|
||||
headers: headers
|
||||
})
|
||||
.then(response => resolve(response.data))
|
||||
.catch(error => reject(error))
|
||||
})
|
||||
},
|
||||
// POST请求示例
|
||||
post2 (url, data) {
|
||||
post2 (url, data, token) {
|
||||
const headers = {}
|
||||
if (token) {
|
||||
headers['Token'] = token
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
axios({
|
||||
method: 'post',
|
||||
url: this.baseURL2 + url,
|
||||
data: data
|
||||
data: data,
|
||||
headers: headers
|
||||
})
|
||||
.then(response => resolve(response.data))
|
||||
.catch(error => reject(error))
|
||||
|
|
|
|||
|
|
@ -1,14 +1,22 @@
|
|||
<template>
|
||||
<div class="bottom-charts">
|
||||
<div class="bc-chart-item" v-if="isChange">
|
||||
<div class="bcci-header">机芯派工单执行进度</div>
|
||||
<dv-scroll-board :config="config1" style="height:90%;margin-left: 2%;width:96%" />
|
||||
<div style="width: 100%;" v-if="dataType == '整机'">
|
||||
<div class="bc-chart-item">
|
||||
<div class="bcci-header">整机派工单执行进度</div>
|
||||
<dv-scroll-board :config="config3" style="height:90%;margin-left: 2%;width:96%" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" /> -->
|
||||
<div style="width: 100%;" v-else>
|
||||
<div class="bc-chart-item" v-if="isChange">
|
||||
<div class="bcci-header">机芯派工单执行进度</div>
|
||||
<dv-scroll-board :config="config1" style="height:90%;margin-left: 2%;width:96%" />
|
||||
</div>
|
||||
<!-- <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" /> -->
|
||||
|
||||
<div class="bc-chart-item" v-if="!isChange">
|
||||
<div class="bcci-header">盖板派工单执行进度</div>
|
||||
<dv-scroll-board :config="config2" style="height:90%;margin-left: 2%;width:96%" />
|
||||
<div class="bc-chart-item" v-if="!isChange">
|
||||
<div class="bcci-header">盖板派工单执行进度</div>
|
||||
<dv-scroll-board :config="config2" style="height:90%;margin-left: 2%;width:96%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -21,7 +29,12 @@ export default {
|
|||
components: {
|
||||
LabelTag
|
||||
},
|
||||
props: {
|
||||
dataType: {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let _this = this;
|
||||
function generateRandomData(N, title) {
|
||||
const data = [];
|
||||
let date = new Date(); // 从今天的日期开始
|
||||
|
|
@ -75,32 +88,48 @@ export default {
|
|||
const completionRate2 = Math.floor(Math.random() * 100);
|
||||
const completionRate3 = Math.floor(Math.random() * 100);
|
||||
const newDataItem = [];
|
||||
// 创建新的数据项
|
||||
if(title === 'U1机芯'){
|
||||
if(_this.dataType == '整机') {
|
||||
newDataItem = [
|
||||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
title, // 固定值
|
||||
formattedDate, // 日期
|
||||
orderQuantity, // 订单量
|
||||
completionRate, // 完成率
|
||||
createProgressCircle(100),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(0),
|
||||
completedQuantity // 完成数量
|
||||
];
|
||||
}else{
|
||||
newDataItem = [
|
||||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
title, // 固定值
|
||||
formattedDate, // 日期
|
||||
orderQuantity, // 订单量
|
||||
completionRate, // 完成率
|
||||
createProgressCircle(100),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(0),
|
||||
completedQuantity // 完成数量
|
||||
];
|
||||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
title, // 固定值
|
||||
formattedDate, // 日期
|
||||
orderQuantity, // 订单量
|
||||
completionRate, // 完成率
|
||||
createProgressCircle(100),
|
||||
createProgressCircle(100),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(completionRate2),
|
||||
completedQuantity // 完成数量
|
||||
];
|
||||
}
|
||||
// 创建新的数据项
|
||||
else if (title === 'U1机芯') {
|
||||
newDataItem = [
|
||||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
title, // 固定值
|
||||
formattedDate, // 日期
|
||||
orderQuantity, // 订单量
|
||||
completionRate, // 完成率
|
||||
createProgressCircle(100),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(0),
|
||||
completedQuantity // 完成数量
|
||||
];
|
||||
} else {
|
||||
newDataItem = [
|
||||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
title, // 固定值
|
||||
formattedDate, // 日期
|
||||
orderQuantity, // 订单量
|
||||
completionRate, // 完成率
|
||||
createProgressCircle(100),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(completionRate2),
|
||||
createProgressCircle(0),
|
||||
completedQuantity // 完成数量
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -112,34 +141,43 @@ export default {
|
|||
return data;
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
isChange: true,
|
||||
config1: {
|
||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度','组装','QC','老化','剩下数量'],
|
||||
header:['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '组装', 'QC', '老化', '剩下数量'],
|
||||
data: generateRandomData(60, 'U1机芯'),
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
headerHeight: 50,
|
||||
columnWidth: [80, 300],
|
||||
align: ['center'],
|
||||
waitTime: 30000,
|
||||
//waitTime: 300000,
|
||||
},
|
||||
|
||||
config2: {
|
||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度','组装','安规','综合测试','老化','剩下数量'],
|
||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '组装', '安规', '综合测试', '老化', '剩下数量'],
|
||||
data: generateRandomData(30, 'U1盖板'),
|
||||
headerHeight: 50,
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
columnWidth: [80, 300],
|
||||
align: ['center']
|
||||
},
|
||||
|
||||
config3: {
|
||||
|
||||
header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '上陶瓷', '气密性QC', '整机组装', '功能QC', '全外观QC', '包装'] ,
|
||||
data: generateRandomData(30, 'U1C智能坐便器[220V]'),
|
||||
headerHeight: 50,
|
||||
index: true,
|
||||
columnWidth: [80, 300],
|
||||
align: ['center']
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let that = this;
|
||||
timer = setInterval(()=>{
|
||||
timer = setInterval(() => {
|
||||
that.isChange = !that.isChange
|
||||
},60000)
|
||||
}, 60000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(timer)
|
||||
|
|
@ -187,17 +225,19 @@ export default {
|
|||
left: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.circle-progress {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
// background: conic-gradient(from 90deg at 50% 50%, transparent 0, rgba(18, 3, 117, 0.107) 0);
|
||||
transition: all 0.5s ease;
|
||||
border: 6px solid;
|
||||
}
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
// background: conic-gradient(from 90deg at 50% 50%, transparent 0, rgba(18, 3, 117, 0.107) 0);
|
||||
transition: all 0.5s ease;
|
||||
border: 6px solid;
|
||||
}
|
||||
|
||||
.circle-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -206,18 +246,21 @@ export default {
|
|||
font-size: 0.16rem;
|
||||
color: #333;
|
||||
}
|
||||
.circle-img{
|
||||
|
||||
.circle-img {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
background-image: url('./img/icon_success.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size:contain;
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.ceil{
|
||||
font-size: 0.2rem;
|
||||
|
||||
.ceil,
|
||||
.header-item {
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,202 @@
|
|||
<template>
|
||||
<div class="center-cmp">
|
||||
<div class="cc-header" v-if="false">
|
||||
<dv-decoration-1 style="width:200px;height:50px;" />
|
||||
</div>
|
||||
|
||||
<div class="cc-details">
|
||||
<div>本月总产量</div>
|
||||
<div class="card">1</div>
|
||||
<div class="card">1</div>
|
||||
<div class="card">3</div>
|
||||
<div class="card">7</div>
|
||||
</div>
|
||||
|
||||
<div class="cc-main-container">
|
||||
<div class="ccmc-left">
|
||||
<div class="station-info">
|
||||
本月派工数<span class="station-value">1120</span>
|
||||
</div>
|
||||
<div class="station-info">
|
||||
本月未完成派工数<span class="station-value">600</span>
|
||||
</div>
|
||||
<div class="station-info">
|
||||
本月派工完成率<span class="station-value">60%</span>
|
||||
</div>
|
||||
<div class="station-info">
|
||||
保养台数<span class="station-value">32/40</span>
|
||||
</div>
|
||||
<div class="station-info" v-if="dataType !=='整机'">
|
||||
机芯备料进度<span class="station-value">45/122</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dv-active-ring-chart class="ccmc-middle" :config="config" />
|
||||
|
||||
<div class="ccmc-right">
|
||||
<div class="station-info">
|
||||
今天产量 <span class="station-value">60</span>
|
||||
</div>
|
||||
<div class="station-info">
|
||||
直通率 <span class="station-value">93%</span>
|
||||
</div>
|
||||
<div class="station-info">
|
||||
今日不良数 <span class="station-value">2</span>
|
||||
</div>
|
||||
<div class="station-info">
|
||||
返工数 <span class="station-value">2</span>
|
||||
</div>
|
||||
<div class="station-info" v-if="dataType =='整机'">
|
||||
整机备料进度<span class="station-value">54/145</span>
|
||||
</div>
|
||||
<div class="station-info" v-else>
|
||||
盖板备料进度<span class="station-value">68/168</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LabelTag :config="labelConfig" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LabelTag from './LabelTag'
|
||||
|
||||
export default {
|
||||
name: 'CenterCmp',
|
||||
components: {
|
||||
LabelTag
|
||||
},
|
||||
props: {
|
||||
dataType: {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
config: {
|
||||
data:
|
||||
[
|
||||
{
|
||||
name: '机芯缺陷占比',
|
||||
value: 42
|
||||
},
|
||||
{
|
||||
name: '盖板缺陷占比',
|
||||
value: 58
|
||||
}
|
||||
],
|
||||
color: ['#00baff', '#3de7c9', '#ffc530', '#469f4b'],
|
||||
lineWidth: 30,
|
||||
radius: '55%',
|
||||
activeRadius: '60%'
|
||||
},
|
||||
|
||||
labelConfig: {
|
||||
data: ['机芯缺陷占比', '盖板缺陷占比' ]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.center-cmp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.station-value{
|
||||
color: #0777e0;margin-left: 4px;
|
||||
}
|
||||
.cc-header {
|
||||
height: 70px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.cc-details {
|
||||
height: 120px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
align-items: center;
|
||||
|
||||
.card {
|
||||
background-color: rgba(4,49,128,.6);
|
||||
color: #08e5ff;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
font-size: 45px;
|
||||
font-weight: bold;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-main-container {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.ccmc-middle {
|
||||
width: 50%;
|
||||
height: 90%;
|
||||
|
||||
.active-ring-name {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ccmc-left, .ccmc-right {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
|
||||
span {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.station-info {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.ccmc-left {
|
||||
align-items: flex-end;
|
||||
|
||||
margin-top: -100px;
|
||||
span {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ccmc-right {
|
||||
align-items: flex-start;
|
||||
margin-top: -100px;
|
||||
span {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-tag {
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 30px;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,34 +14,20 @@
|
|||
|
||||
<div class="cc-main-container">
|
||||
<div class="ccmc-left">
|
||||
<div class="station-info">
|
||||
本月派工数<span>1120</span>
|
||||
</div>
|
||||
<div class="station-info">
|
||||
本月未完成派工数<span>600</span>
|
||||
</div>
|
||||
<div class="station-info">
|
||||
本月派工完成率<span>60%</span>
|
||||
</div>
|
||||
<div class="station-info">
|
||||
保养台数<span>32/40</span>
|
||||
<div class="station-info" v-for="(item, index) in leftData" :key="index">
|
||||
<img :src="item.icon" alt="icon" class="station-icon">
|
||||
<div class="station-name">{{ item.name }}</div>
|
||||
<div class="station-value">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dv-active-ring-chart class="ccmc-middle" :config="config" />
|
||||
|
||||
<div class="ccmc-right">
|
||||
<div class="station-info">
|
||||
<span>60</span>今天产量
|
||||
</div>
|
||||
<div class="station-info">
|
||||
<span>20%</span>直通率
|
||||
</div>
|
||||
<div class="station-info">
|
||||
<span>4</span>今日不良数
|
||||
</div>
|
||||
<div class="station-info">
|
||||
<span>5</span>返工数
|
||||
<div class="station-info" v-for="(item, index) in rightData" :key="index">
|
||||
<img :src="item.icon" alt="icon" class="station-icon">
|
||||
<div class="station-name">{{ item.name }}</div>
|
||||
<div class="station-value">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -58,7 +44,58 @@ export default {
|
|||
components: {
|
||||
LabelTag
|
||||
},
|
||||
props: {
|
||||
dataType: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
// 定义原始数据
|
||||
const originalLeftData = [
|
||||
{ icon: require(`@/img/icons/1.png`), name: '本月派工数', value: '1120' },
|
||||
{ icon: require(`@/img/icons/2.png`), name: '本月未完成派工数', value: '600' },
|
||||
{ icon: require(`@/img/icons/3.png`), name: '本月派工完成率', value: '60%' }
|
||||
];
|
||||
|
||||
const originalRightData = [
|
||||
{ icon: require(`@/img/icons/6.png`), name: '今天产量', value: '60' },
|
||||
{ icon: require(`@/img/icons/7.png`), name: '直通率', value: '93%' },
|
||||
{ icon: require(`@/img/icons/8.png`), name: '今日不良数', value: '2' }
|
||||
];
|
||||
|
||||
// 将数值加倍（支持多次加倍）
|
||||
const doubleValue = (value) => {
|
||||
if (typeof value === 'string' && !isNaN(value)) {
|
||||
return (parseFloat(value) * 2).toString();
|
||||
} else if (typeof value === 'string' && value.includes('%')) {
|
||||
return `${(parseFloat(value) * 2)}%`;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
// 第一次加倍
|
||||
const doubledLeftData = originalLeftData.map(item => ({
|
||||
...item,
|
||||
value: doubleValue(item.value)
|
||||
}));
|
||||
|
||||
const doubledRightData = originalRightData.map(item => ({
|
||||
...item,
|
||||
value: doubleValue(item.value)
|
||||
}));
|
||||
|
||||
// 第二次加倍
|
||||
const quadrupledLeftData = doubledLeftData.map(item => ({
|
||||
...item,
|
||||
value: doubleValue(item.value)
|
||||
}));
|
||||
|
||||
const quadrupledRightData = doubledRightData.map(item => ({
|
||||
...item,
|
||||
value: doubleValue(item.value)
|
||||
}));
|
||||
|
||||
return {
|
||||
config: {
|
||||
data: [
|
||||
|
|
@ -78,8 +115,11 @@ export default {
|
|||
},
|
||||
|
||||
labelConfig: {
|
||||
data: ['机芯缺陷占比', '盖板缺陷占比' ]
|
||||
}
|
||||
data: ['机芯缺陷占比', '盖板缺陷占比']
|
||||
},
|
||||
|
||||
leftData: quadrupledLeftData,
|
||||
rightData: quadrupledRightData
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -94,6 +134,26 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.station-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.station-name {
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.station-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #0777e0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cc-header {
|
||||
height: 70px;
|
||||
display: flex;
|
||||
|
|
@ -128,7 +188,7 @@ export default {
|
|||
display: flex;
|
||||
|
||||
.ccmc-middle {
|
||||
width: 50%;
|
||||
width: 33%;
|
||||
height: 90%;
|
||||
|
||||
.active-ring-name {
|
||||
|
|
@ -137,38 +197,26 @@ export default {
|
|||
}
|
||||
|
||||
.ccmc-left, .ccmc-right {
|
||||
width: 25%;
|
||||
width: 33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
|
||||
span {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
align-items: center;
|
||||
|
||||
.station-info {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ccmc-left {
|
||||
align-items: flex-end;
|
||||
|
||||
span {
|
||||
margin-left: 20px;
|
||||
}
|
||||
margin-top: -100px;
|
||||
}
|
||||
|
||||
.ccmc-right {
|
||||
align-items: flex-start;
|
||||
|
||||
span {
|
||||
margin-right: 20px;
|
||||
}
|
||||
margin-top: -100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,30 @@
|
|||
<template>
|
||||
<div id="rose-chart">
|
||||
<div id="rose-chart" style="flex:1" >
|
||||
<div :id="pieId" class="pie-chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
function getRecentWeekDates() {
|
||||
const dates = [];
|
||||
const today = new Date();
|
||||
|
||||
for (let i = 6; i >= 0; i--) {
|
||||
const date = new Date(today);
|
||||
date.setDate(today.getDate() - i);
|
||||
|
||||
const month = date.getMonth() + 1; // 月份从0开始，所以要加1
|
||||
const day = date.getDate();
|
||||
|
||||
// 格式化为 'MM-DD'
|
||||
const formattedDate = `${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
|
||||
dates.push(formattedDate);
|
||||
}
|
||||
|
||||
return dates;
|
||||
}
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
|
|
@ -14,6 +34,8 @@ export default {
|
|||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
},
|
||||
dataType: {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -29,17 +51,17 @@ export default {
|
|||
this.option = {
|
||||
title: {
|
||||
text: '近一周产量趋势',
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['机芯1线', '机芯2线', '盖板线', '整机线'],
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
data: this.dataType == '整机' ? ['整机线'] : ['机芯1线', '机芯2线', '盖板线'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
|
|
@ -51,47 +73,52 @@ export default {
|
|||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
data: ['12-06', '12-07', '12-08', '12-09', '12-10', '12-11', '12-12']
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
data: getRecentWeekDates()
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '机芯1线',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '机芯2线',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [150, 142, 111, 114, 120, 120, 110]
|
||||
},
|
||||
{
|
||||
name: '盖板线',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [130, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: '整机线',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [133, 162, 191, 134, 130, 230, 310]
|
||||
}
|
||||
]
|
||||
series:
|
||||
this.dataType == '整机' ?
|
||||
[
|
||||
{
|
||||
name: '整机线',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [133, 162, 191, 134, 130, 230, 310]
|
||||
}
|
||||
] :
|
||||
[
|
||||
|
||||
{
|
||||
name: '机芯1线',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '机芯2线',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [150, 142, 111, 114, 120, 120, 110]
|
||||
},
|
||||
{
|
||||
name: '盖板线',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [130, 232, 201, 154, 190, 330, 410]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(this.option);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,10 +1,27 @@
|
|||
<template>
|
||||
<div id="rose-chart2">
|
||||
<div id="rose-chart2" style="flex:1" >
|
||||
<div :id="pieId" class="pie-chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
function getRecentSixMonths() {
|
||||
const months = [];
|
||||
const today = new Date();
|
||||
|
||||
for (let i = 5; i >= 0; i--) {
|
||||
const date = new Date(today);
|
||||
date.setMonth(today.getMonth() - i);
|
||||
|
||||
const month = date.getMonth() + 1; // 月份从0开始，所以要加1
|
||||
|
||||
// 格式化为 'X月'
|
||||
const formattedMonth = `${month}月`;
|
||||
months.push(formattedMonth);
|
||||
}
|
||||
|
||||
return months;
|
||||
}
|
||||
import * as echarts from 'echarts';
|
||||
export default {
|
||||
name: 'RoseChart',
|
||||
|
|
@ -14,6 +31,8 @@ export default {
|
|||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
},
|
||||
dataType: {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -41,7 +60,7 @@ export default {
|
|||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['机芯1线', '机芯2线', '盖板线'],
|
||||
data: this.dataType == '整机' ?['机芯1线', '机芯2线', '盖板线'] : ['整机线'],
|
||||
textStyle:{
|
||||
color:'#fff'
|
||||
}
|
||||
|
|
@ -58,7 +77,7 @@ export default {
|
|||
}
|
||||
},
|
||||
// prettier-ignore
|
||||
data: ['6月', '7月', '8月', '9月', '10月', '11月'],
|
||||
data:getRecentSixMonths(),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -71,7 +90,27 @@ export default {
|
|||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
series:
|
||||
this.dataType == '整机' ?
|
||||
[
|
||||
{
|
||||
name: '整机线',
|
||||
type: 'bar',
|
||||
data: [
|
||||
75, 65, 68, 69, 40, 82
|
||||
],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
},
|
||||
markLine: {
|
||||
data: [{ type: 'average', name: 'Avg' }]
|
||||
}
|
||||
}
|
||||
]:
|
||||
[
|
||||
{
|
||||
name: '机芯1线',
|
||||
type: 'bar',
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'RightChart1',
|
||||
props: {
|
||||
dataType: {
|
||||
}
|
||||
},
|
||||
data () {
|
||||
function generateRandomData(N, title) {
|
||||
const data = [];
|
||||
|
|
@ -26,7 +30,7 @@ export default {
|
|||
|
||||
// 创建新的数据项
|
||||
const newDataItem = [
|
||||
`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
//`PS-${formattedDate2}${String(i).padStart(3, '0')}`, // 编号
|
||||
title, // 固定值
|
||||
orderQuantity, // 订单量
|
||||
completedQuantity // 完成数量
|
||||
|
|
@ -39,12 +43,21 @@ export default {
|
|||
}
|
||||
return data;
|
||||
}
|
||||
let data = [];
|
||||
|
||||
['U1电源线压板', '接地线[160mm]', '硅胶管[4*7，50cm,棕色]', '卡箍[内径7.5mm]', '防倒流器[进气口倾斜45度]', '硅胶管[5*8,90mm]', '卡箍[内径7.5mm]', '夜灯[灯光蓝色,360±5mm长度,2P黄色插头]', '卡箍[内径7.5mm]', 'U1烘干上壳', '扎带[3*10]', '即热器电源线[24cm]', '发热丝[220V]', '大泵电源线[连接线,450mm]', '脚感[连接线,600mm]', '硅胶管[4*7,120mm]', '卡箍[内径7.5mm]', '进水2分管[900mm]', '分配阀[2进4出,1直3弯]', '气泵[线长40cm,减震棉2mm]', '盘头自攻螺丝[4*30,304不锈钢,平尾]', '盘头机牙螺丝[4*6,带垫片,430不锈钢]', 'U1线卡', '漏保电源线[220V,10A]', '硅胶管[4*7,230mm]', '盘头机牙螺丝[4*6,带垫片,430不锈钢]', '风机', '硅胶管[4*7,150mm]', '水杀菌[线长度220mm±5mm]', '硅胶管[4*7,120mm]', '硅胶管[4*7,140mm]', '出泡头[带10cm硅胶管]', '即热器', 'U1气泵压板', '减压阀', '主控板', '喷杆[35电机,塑料喷杆,硅胶管140mm]', 'U1单边水箱防水罩', '接地铜片[20*20]', '盘头自攻螺丝[4*10,430不锈钢]', '盘头自攻螺丝[4*9,430不锈钢,平尾]', 'U1底座[白色]', 'U1烘干下壳'].forEach(a=>{
|
||||
|
||||
data = [...data,...generateRandomData(1, a)];
|
||||
})
|
||||
|
||||
return {
|
||||
config: {
|
||||
header: ['工单号', '物料名称', '备料数', '欠数料'],
|
||||
data: generateRandomData(60, 'U1电源线压板'),
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
header: [
|
||||
//'工单号',
|
||||
'物料名称', '备料数', '欠数料'],
|
||||
data: data,
|
||||
index: false,
|
||||
columnWidth: [300],
|
||||
align: ['center']
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -9,38 +9,34 @@
|
|||
<dv-border-box-1 class="main-container" style="height: 50%;">
|
||||
|
||||
|
||||
<div class="rmc-top-container">
|
||||
|
||||
<dv-border-box-3 class="rmctc-left-container" style="height:100%" >
|
||||
<Left-Chart-1 :pieId="'leftchar1'" style="height:50%" />
|
||||
<Left-Chart-2 :pieId="'leftchar2'" style="height:40%;margin-top: 10%;" />
|
||||
<div class="rmc-top-container" v-if="switchType == 1">
|
||||
<dv-border-box-3 class="rmctc-left-container" style="height:100%;display: flex;">
|
||||
<Left-Chart-1 :dataType="dataType" :pieId="'leftchar1'"/>
|
||||
<Left-Chart-2 :dataType="dataType" :pieId="'leftchar2'" />
|
||||
</dv-border-box-3>
|
||||
<dv-border-box-3 class="rmctc-middle-container">
|
||||
|
||||
<Center-Cmp />
|
||||
|
||||
</dv-border-box-3>
|
||||
|
||||
<div class="rmctc-right-container">
|
||||
<div class="rmctc-right-container" v-if="false" >
|
||||
<dv-border-box-3 class="rmctc-chart-1">
|
||||
|
||||
<Right-Chart-1 />
|
||||
|
||||
<Right-Chart-1 :dataType="dataType" />
|
||||
</dv-border-box-3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rmc-top-container" v-if="switchType == 2">
|
||||
<dv-border-box-3 class="rmctc-middle-container">
|
||||
<Center-Cmp :dataType="dataType" />
|
||||
</dv-border-box-3>
|
||||
</div>
|
||||
|
||||
</dv-border-box-1>
|
||||
|
||||
|
||||
<dv-border-box-4 class="rmc-bottom-container" style="height: 45%;">
|
||||
<dv-border-box-4 class="rmc-bottom-container" style="height: 45%;">
|
||||
|
||||
<Bottom-Charts />
|
||||
<Bottom-Charts :dataType="dataType" />
|
||||
|
||||
</dv-border-box-4>
|
||||
</dv-border-box-4>
|
||||
|
||||
</dv-full-screen-container>
|
||||
</div>
|
||||
</dv-full-screen-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -56,6 +52,7 @@ import BottomCharts from './BottomCharts'
|
|||
|
||||
export default {
|
||||
name: 'DataView',
|
||||
|
||||
components: {
|
||||
topHeader,
|
||||
LeftChart1,
|
||||
|
|
@ -64,8 +61,27 @@ export default {
|
|||
RightChart1,
|
||||
BottomCharts
|
||||
},
|
||||
created() {
|
||||
// 获取 URL 查询参数并设置 dataType
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
const dataTypeParam = queryParams.get('q');
|
||||
|
||||
if (dataTypeParam === '1') {
|
||||
this.dataType = '整机';
|
||||
} else {
|
||||
this.dataType = ''; // 如果不是 '1'，则设置为空
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
this.switchType = this.switchType == 1 ? 2 : 1
|
||||
}, 1000099); // 10000 毫秒 = 10 秒
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
dataType:'',
|
||||
dataType2:'整机',
|
||||
switchType: 2
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -129,24 +145,26 @@ export default {
|
|||
|
||||
.rmc-top-container {
|
||||
height: 100%;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.rmctc-left-container {
|
||||
width: 25%;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.border-box-content {
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
.rmctc-middle-container {
|
||||
width: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rmctc-right-container {
|
||||
width: 25%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.rmc-bottom-container {
|
||||
|
|
@ -154,7 +172,7 @@ export default {
|
|||
|
||||
}
|
||||
|
||||
.rmctc-chart-1 {
|
||||
.rmctc-chart-1 {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div class="bar-chart" ref="chart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'BarChart',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
mockData: {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.chart.setOption(this.mockData)
|
||||
window.addEventListener('resize', this.resizeHandler)
|
||||
},
|
||||
resizeHandler() {
|
||||
this.chart.resize()
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.resizeHandler)
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bar-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import BarChart from './BarChart.vue'
|
||||
import StackedBarChart from './StackedBarChart.vue'
|
||||
|
||||
export default {
|
||||
BarChart,
|
||||
StackedBarChart
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import BarChart from './barChart.vue'
|
||||
import StackedBarChart from './barChart.vue'
|
||||
import DynamicBarChart from './barChart.vue'
|
||||
import PieChart from './roseChart.vue'
|
||||
import RingChart from './roseChart.vue'
|
||||
import RoseChart from './roseChart.vue'
|
||||
import LineChart from './scrollBoard.vue'
|
||||
import AreaChart from './scrollBoard.vue'
|
||||
import StackedLineChart from './scrollBoard.vue'
|
||||
|
||||
export default {
|
||||
BarChart,
|
||||
StackedBarChart,
|
||||
DynamicBarChart,
|
||||
PieChart,
|
||||
RingChart,
|
||||
RoseChart,
|
||||
LineChart,
|
||||
AreaChart,
|
||||
StackedLineChart
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
29
src/main.js
29
src/main.js
|
|
@ -1,5 +1,7 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
|
||||
import './assets/common.less'
|
||||
|
||||
|
|
@ -9,18 +11,19 @@ import api from './api'
|
|||
|
||||
Vue.config.productionTip = false
|
||||
Vue.prototype.$api = api
|
||||
function resizeFont() {
|
||||
const designWidth = 1920; // 设计稿宽度，例如iPhone 6的宽度
|
||||
const maxWidth = 1920; // 最大支持宽度
|
||||
const screenWidth = Math.min(window.innerWidth, maxWidth);
|
||||
const scale = screenWidth / designWidth;
|
||||
document.documentElement.style.fontSize = `${100 * scale}px`;
|
||||
}
|
||||
// 初始调用
|
||||
resizeFont();
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', resizeFont);
|
||||
let fontSize = function(res) {
|
||||
Vue.use(ElementUI)
|
||||
function resizeFont() {
|
||||
const designWidth = 1920; // 设计稿宽度，例如iPhone 6的宽度
|
||||
const maxWidth = 1920; // 最大支持宽度
|
||||
const screenWidth = Math.min(window.innerWidth, maxWidth);
|
||||
const scale = screenWidth / designWidth;
|
||||
document.documentElement.style.fontSize = `${100 * scale}px`;
|
||||
}
|
||||
// 初始调用
|
||||
resizeFont();
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', resizeFont);
|
||||
let fontSize = function (res) {
|
||||
let clientWidth =
|
||||
window.innerWidth ||
|
||||
document.documentElement.clientWidth ||
|
||||
|
|
@ -32,7 +35,7 @@ let fontSize = function(res) {
|
|||
Vue.prototype.$fontSize = fontSize
|
||||
Vue.use(dataV)
|
||||
Vue.use(scroll)
|
||||
Vue.use(scroll,{componentName: 'scroll-seamless'})
|
||||
Vue.use(scroll, { componentName: 'scroll-seamless' })
|
||||
new Vue({
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Designer from '@/pages/bi/designer.vue'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
mode: 'history',
|
||||
routes: [
|
||||
{
|
||||
path: '/designer',
|
||||
name: 'Designer',
|
||||
component: Designer
|
||||
}
|
||||
]
|
||||
})
|
||||
Loading…
Reference in New Issue