修改界面显示

master
夜笙歌 1 year ago
parent 11ae5f376e
commit 6eb9292614

@ -48,6 +48,8 @@
"js-beautify": "1.13.0",
"js-cookie": "3.0.1",
"jsencrypt": "3.0.0-rc.1",
"less": "^4.2.0",
"less-loader": "5.0.0",
"nprogress": "0.2.0",
"quill": "1.3.7",
"screenfull": "5.0.2",

Binary file not shown.

After

Width:  |  Height:  |  Size: 468 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

@ -72,7 +72,11 @@ export default {
childrenMenus() {
var childrenMenus = [];
this.routers.map((router) => {
for (var item in router.children) {
for (let item in router.children) {
if(typeof router.children[item] !== 'object'){
// console.log('router.children[item]',router.children[item])
continue;
}
if (router.children[item].parentPath === undefined) {
if(router.path === "/") {
router.children[item].path = "/" + router.children[item].path;
@ -154,6 +158,8 @@ export default {
}
});
}
console.log(this.childrenMenus)
console.log(routes)
if(routes.length > 0) {
this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
} else {
@ -161,6 +167,7 @@ export default {
}
},
ishttp(url) {
console.trace()
return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
}
},

@ -289,7 +289,6 @@ export default {
return 'red'
} else if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 2) {
return 'yellow'
} else {
return '#66c8ff'
}

File diff suppressed because it is too large Load Diff

@ -0,0 +1,142 @@
<template>
<div class="app-container">
<div class="title">澳柯玛智慧绿色智能制造工厂</div>
<div class="title1">首个商用智慧大规模个性化定制的智能互联工厂</div>
<div class="box1">
<img src="../../assets/model/factoryIntroduction/img1.jpg" alt="" style="height: calc(38vh - 16px)">
</div>
<div class="box2">
<img src="../../assets/model/factoryIntroduction/img.png" alt="" style="height: 38vh">
</div>
<div class="box3">
<img src="../../assets/model/factoryIntroduction/bg2.png" alt="" style="width: 80%;margin-left: 10%">
<div class="boxTitle"> </div>
<p>1. 国家发改委批复的基于工业互联网平台的智能制造示范项目</p>
<p>2. 青岛市先进制造业智能家电产业集群项目</p>
<p>3. 西海岸新区高端制造业+人工智能试点示范项目</p>
</div>
<div class="box4">
<img src="../../assets/model/factoryIntroduction/bg2.png" alt="" style="width: 80%;margin-left: 10%">
<div class="boxTitle"> </div>
<p>自主可控工业互联网平台大数据分析数字孪生制造执行MES数据采集与监控控制SCADA智能化仓储物流WMS质量分析SPC数字化研发PLM能源管理EMS视觉检测</p>
<p>16条智能化生产线40台工业机器人钣金全自动成型门体立体库</p>
</div>
<div class="exit" @click="exitFun"></div>
</div>
</template>
<script>
export default {
name: "Liner",
props:{
exit:{
type:Function,
default:null
}
},
data() {
return {}
},
mounted() {
},
methods: {
exitFun(){
this.exit()
}
}
}
</script>
<style scoped>
.app-container {
background-image: url("~@/assets/model/factoryIntroduction/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.title {
position: absolute;
top: 5%;
transform: translateX(-50%);
left: 50%;
color: red;
font-size: 2.7vw;
font-weight: 800;
}
.title1 {
position: absolute;
top: 20%;
left: 5%;
font-size: 1.3vw;
font-weight: bold;
color: rgb(32, 56, 100);
}
.box1 {
position: absolute;
top: 25%;
left: 5%;
padding: 8px;
background-color: #fff;
box-shadow: 2px 2px 10px 3px #ccc;
}
.box2 {
position: absolute;
top: 25%;
right: 5%;
}
.box3 {
position: absolute;
top: 65%;
left: 5%;
width: 43%;
height: 30%;
}
.box4 {
position: absolute;
top: 65%;
right: 5%;
width: 43%;
height: 30%;
}
.box3 .boxTitle, .box4 .boxTitle {
color: red;
font-weight: bold;
font-size: 1.3vw;
position: absolute;
top: 5%;
left: 50%;
transform: translateX(-50%);
}
.box3 p, .box4 p {
color: rgb(32, 56, 100);
font-size: 1.3vw;
line-height: 1.5vw;
font-weight: bold;
}
.exit{
background-image: url("~@/assets/model/factoryIntroduction/exit.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 1%;
right: 1%;
font-weight: bold;
width: 2vw;
height: 2vw;
color: #e7b219;
}
</style>

@ -1,10 +1,71 @@
<template>
<div class="app-container">
<div id="container" class="container"></div>
<div class="tool">
<el-row>
<el-col :span="3">
<div class="toolItem" @click="click1('factoryIntroduction')">
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
<div class="grid-content bg-purple">工厂介绍</div>
</div>
</el-col>
<el-col :span="3">
<div class="toolItem" @click="click1('productDistribution')">
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
<div class="grid-content bg-purple-light">产品分布</div>
</div>
</el-col>
<el-col :span="3">
<div class="toolItem" @click="click1('数据中心')">
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
<div class="grid-content bg-purple">数据中心</div>
</div>
</el-col>
<el-col :span="3">
<div class="toolItem" @click="click1('现场直播')">
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
<div class="grid-content bg-purple">现场直播</div>
</div>
</el-col>
<el-col :span="3">
<div class="toolItem" @click="click1('工艺流程')">
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
<div class="grid-content bg-purple-light">工艺流程</div>
</div>
</el-col>
<el-col :span="3">
<div class="toolItem" @click="click1('生产')">
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
<div class="grid-content bg-purple">生产</div>
</div>
</el-col>
<el-col :span="3">
<div class="toolItem" @click="click1('质量')">
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
<div class="grid-content bg-purple-light">质量</div>
</div>
</el-col>
<el-col :span="3">
<div class="toolItem" @click="click1('厂房视角')">
<i class="el-icon-s-tools" style="font-size:2.2vw"></i>
<div class="grid-content bg-purple-light">设备</div>
</div>
</el-col>
</el-row>
</div>
<transition name="children">
<factory-introduction :exit="exit" v-if="show === 'factoryIntroduction'"/>
</transition>
<transition name="children">
<product-distribution :exit="exit" v-if="show === 'productDistribution'"/>
</transition>
</div>
</template>
<script>
import factoryIntroduction from './factoryIntroduction'
import productDistribution from './productDistribution'
const isAMRT = () => {
return new Promise((resolve, reject) => {
@ -21,9 +82,14 @@ const isAMRT = () => {
export default {
name: "Model",
components: {
factoryIntroduction,
productDistribution
},
data() {
return {
viewer: null
viewer: null,
show: '',
}
},
async mounted() {
@ -36,21 +102,21 @@ export default {
console.log(AMRT)
let num = 0
let modelArr = [
'1720315475507941376',
'1720315479907766272',
'1720315484513112064',
'1720315500866703360',
'1720315558030872576',
'1720315596551360512',
'1720315644550975488',
'1720315648946606080',
'1720315687114772480',
'1720315691422322688',
'1720315722275622912',
'1720315729129115648',
'1720315768454909952',
'1720316275214913536',
'1720316297822212096',
// '1720315475507941376',
// '1720315479907766272',
// '1720315484513112064',
// '1720315500866703360',
// '1720315558030872576',
// '1720315596551360512',
// '1720315644550975488',
// '1720315648946606080',
// '1720315687114772480',
// '1720315691422322688',
// '1720315722275622912',
// '1720315729129115648',
// '1720315768454909952',
// '1720316275214913536',
// '1720316297822212096',
]
modelArr.forEach(e => {
let model = viewer.loadModel(e, {
@ -80,10 +146,17 @@ export default {
// viewer.controls.startAutoRotate(1)
},
methods: {}
methods: {
click1(e) {
this.show = e
},
exit(){
this.show = ''
}
}
};
</script>
<style scoped>
<style lang="less" scoped>
* {
margin: 0;
padding: 0
@ -94,4 +167,43 @@ export default {
height: 100vh
}
.tool {
position: absolute;
width: 60%;
height: 20vh;
top: 80%;
left: 50%;
transform: translateX(-50%);
text-align: center;
font-size: 1vw;
.toolItem:hover {
transform: scale(1.2);
}
}
.app-container {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.children-enter-active {
animation: children-in 1s;
}
.children-leave-active {
animation: children-in 1s reverse;
}
@keyframes children-in {
0% {
opacity: 0;
left: -100%;
}
100% {
opacity: 1;
left: 0;
}
}
</style>

@ -0,0 +1,236 @@
<template>
<div class="app-container">
<div class="exit" @click="exitFun"></div>
<div class="top">澳柯玛商用冷链产品在国内市场占有率达
<span style="color:#ffd202;font-weight: bold"> 51%</span>
连续三年保持行业第一冷藏展示柜荣膺工信部
<span style="color:#ffd202;font-weight: bold"> 中国制造业单项冠军产品</span>
获得了国内外众多品牌客户的高度认可成为冰淇淋饮料速冻乳业啤酒以及零售行业等数千家食品快消与流通行业用户的首选冷链设备供应商目前已接入平台的设备达
<span style="color:#ffd202;font-weight: bold"> 911706</span>
</div>
<div class="headline1">产品分布情况分析</div>
<div class="headline2">产品区划大数据</div>
<div class="chart1">
<Chart ref="chart1"></Chart>
</div>
<div class="chart2"></div>
</div>
</template>
<script>
import Chart from "@/components/board/Chart";
import chinaMap from './china.json'
import * as echarts from "echarts";
export default {
name: "Liner",
components: {
Chart
},
props: {
exit: {
type: Function,
default: null
}
},
data() {
return {
chartData: [...(chinaMap.features.map(e => {
return {
name: e.properties.name,
value: Math.random() * 200
}
})), {
name: '南海诸岛',
value: Math.random() * 200
}],
}
},
mounted() {
echarts.registerMap('china', chinaMap);
this.$refs.chart1.setData({
visualMap: {
// show: false,
min: 0,
max: 200,
left: 'left',
top: 'bottom',
calculable: true,
seriesIndex: [1],
textStyle: {
color: "#FFFF",
},
inRange: {
color: ['#dbac00', '#cf0000'] // 绿
}
},
geo: {
show: true,
map: 'china',
zoom: 1.2,
label: {
normal: {
show: true,
formatter: (e) => {
console.log(e.name)
return `${this.chartData.find(val => val.name === e.name).value.toFixed(0)}\n${e.name}`
},
textStyle: {
color: '#fff'
}
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series: [
{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: (val) => {
return val[2] / 10;
},
label: {
normal: {
formatter: (e) => {
return e.data.name
},
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
map: 'china',
geoIndex: 0,
zoom: 1.6,
aspectScale: 0.75, //
showLegendSymbol: false, // legend
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
// animation: false,
data: this.chartData
},
]
})
},
methods: {
exitFun() {
this.exit()
}
}
}
</script>
<style scoped>
.app-container {
background-color: #021e31;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.top {
position: absolute;
background-image: url("~@/assets/model/productDistribution/bg1.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 90%;
top: 15%;
left: 5%;
font-size: 1.2vw;
color: #05c4ec;
padding: 12px
}
.exit {
background-image: url("~@/assets/model/factoryIntroduction/exit.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 1%;
right: 1%;
font-weight: bold;
width: 2vw;
height: 2vw;
color: #e7b219;
}
.headline1 {
position: absolute;
top: 28%;
left: 5%;
border-left: 3px solid #0251d1;
padding-left: 12px;
height: 1.5vw;
line-height: 1.5vw;
font-size: 1vw;
color: #fff;
font-weight: bold;
}
.headline2 {
position: absolute;
top: 28%;
left: 70%;
border-left: 3px solid #0251d1;
padding-left: 12px;
height: 1.5vw;
line-height: 1.5vw;
font-size: 1vw;
color: #fff;
font-weight: bold;
}
.chart1 {
position: absolute;
top: 32%;
left: 5%;
width: 63%;
height: 65%;
}
.chart2 {
background-image: url("~@/assets/model/productDistribution/right.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 32%;
left: 70%;
width: 36vh;
height: 66vh;
}
</style>
Loading…
Cancel
Save