大屏引入3d地球,左侧结构编写
This commit is contained in:
411
src/views/gisHome/component/leftMain.vue
Normal file
411
src/views/gisHome/component/leftMain.vue
Normal file
@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<div class="situation">
|
||||
<div class="main">
|
||||
<div class="title">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/images/ligner.png" alt="" />
|
||||
<div class="w100% flex justify-between items-center">
|
||||
<div class="subTitle flex items-center">
|
||||
<img src="@/assets/images/jigong.png" alt="" />
|
||||
<span>人员情况</span>
|
||||
</div>
|
||||
<div class="hint">PERSONNEL SITUATION</div>
|
||||
</div>
|
||||
<div class="mark"></div>
|
||||
</div>
|
||||
<div class="ligner"></div>
|
||||
</div>
|
||||
<div class="cardList">
|
||||
<div class="card">
|
||||
<div class="iconImg">
|
||||
<img src="@/assets/images/Attendancerate.png" alt="" />
|
||||
</div>
|
||||
<p>总人数</p>
|
||||
<div class="peopleNum"><span>259</span>人</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="iconImg">
|
||||
<img src="@/assets/images/attendanceperson.png" alt="" />
|
||||
</div>
|
||||
<p>出勤人</p>
|
||||
<div class="peopleNum"><span>259</span>人</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="iconImg">
|
||||
<img src="@/assets/images/Attendancerate.png" alt="" />
|
||||
</div>
|
||||
<p>出勤率</p>
|
||||
<div class="peopleNum"><span>100</span>%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/images/ligner.png" alt="" />
|
||||
<div class="flex justify-between w100% items-center">
|
||||
<div class="subTitle flex items-center">
|
||||
<img src="@/assets/images/Machinery.png" alt="" />
|
||||
<span>机械情况</span>
|
||||
</div>
|
||||
<div class="hint">MECHANICAL CONDITION</div>
|
||||
</div>
|
||||
<div class="mark"></div>
|
||||
</div>
|
||||
<div class="ligner"></div>
|
||||
</div>
|
||||
<div class="machinery" id="machineryMain"></div>
|
||||
<div class="title">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/images/ligner.png" alt="" />
|
||||
<div class="flex justify-between w100% items-center">
|
||||
<div class="subTitle flex items-center">
|
||||
<img src="@/assets/images/order.png" alt="" />
|
||||
<span>材料情况</span>
|
||||
</div>
|
||||
<div class="hint">MATERIAL STATUS</div>
|
||||
</div>
|
||||
<div class="mark"></div>
|
||||
</div>
|
||||
<div class="ligner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topleft"></div>
|
||||
<div class="bottomright"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
type EChartsOption = echarts.EChartsOption;
|
||||
|
||||
const initMachinerycharts = () => {
|
||||
var chartDom = document.getElementById('machineryMain');
|
||||
var myMachineryChart = echarts.init(chartDom);
|
||||
var option: EChartsOption;
|
||||
|
||||
// prettier-ignore
|
||||
let dataAxis = ['水泥机', '搅拌机', '拖拉机', '推土机', '推土机', '推土机','推土机', ];
|
||||
// prettier-ignore
|
||||
let data = [11, 23, 21, 20, 22, 24, 24];
|
||||
|
||||
option = {
|
||||
title: {
|
||||
subtext: '单位：台数'
|
||||
},
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
top: '45px',
|
||||
bottom: '50px'
|
||||
},
|
||||
xAxis: {
|
||||
data: dataAxis,
|
||||
axisLabel: {
|
||||
// inside: true,
|
||||
color: 'rgba(202, 218, 226, 1)'
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
z: 10
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999'
|
||||
},
|
||||
min: 0,
|
||||
max: 40,
|
||||
interval: 10,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(108, 128, 151, 0.3)',
|
||||
width: 1,
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
type: 'slider',
|
||||
xAxisIndex: 0,
|
||||
// 滚动条背景颜色
|
||||
backgroundColor: 'rgba(8, 14, 15, 1)',
|
||||
// 选中区域的背景颜色
|
||||
fillerColor: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(67, 226, 203, 1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(21, 181, 230, 1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
|
||||
// 手柄大小
|
||||
handleSize: 0,
|
||||
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
|
||||
moveHandleSize: 0, //移动手柄的大小
|
||||
// 滚动条高度
|
||||
height: 10,
|
||||
borderRadius: 8,
|
||||
// 滚动条与图表的距离
|
||||
bottom: 10,
|
||||
start: 0,
|
||||
// 计算初始结束百分比
|
||||
end: (6 / data.length) * 100
|
||||
}
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(25, 181, 251, 1)' },
|
||||
{ offset: 1, color: 'rgba(67, 158, 255, 0)' }
|
||||
])
|
||||
},
|
||||
barWidth: '13px',
|
||||
data: data
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myMachineryChart.setOption(option);
|
||||
};
|
||||
|
||||
const initOrderChart = () => {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// Use axis to trigger tooltip
|
||||
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu'],
|
||||
axisLabel: {
|
||||
formatter: function (value, index) {
|
||||
return '<img src="http://zmkg.cqet.top:8899/assets/product-BhSC5hsV.png" />' + value; // 不进行任何格式化
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '入库量',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
itemStyle: {
|
||||
color: 'rgba(67, 226, 203, 1)'
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 302, 301, 334],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideBottomRight',
|
||||
distance: 52,
|
||||
align: 'left',
|
||||
verticalAlign: 'middle',
|
||||
rotate: 0,
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '领用量',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
itemStyle: {
|
||||
color: 'rgba(31, 189, 237, 1)'
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134],
|
||||
barWidth: '3px'
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initMachinerycharts();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../css/gis.scss';
|
||||
|
||||
#machineryMain {
|
||||
width: 421px;
|
||||
height: vh(222);
|
||||
margin-left: 14px;
|
||||
margin-bottom: vh(30);
|
||||
}
|
||||
.title {
|
||||
> img {
|
||||
width: 14px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
img {
|
||||
width: 18.8px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
text-shadow: 0px 0px 8px rgba(2, 3, 7, 0.35);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(204, 204, 204, 0.5);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.mark {
|
||||
width: 2px;
|
||||
height: vh(14);
|
||||
background: rgba(67, 226, 203);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ligner {
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent 0%, #43e2cb 90%);
|
||||
margin-left: 14px;
|
||||
}
|
||||
}
|
||||
.situation {
|
||||
width: 449px;
|
||||
height: vh(927);
|
||||
background: rgb(1, 26, 33, 0.4);
|
||||
backdrop-filter: blur(8px);
|
||||
position: absolute;
|
||||
top: vh(122);
|
||||
left: 21px;
|
||||
.main {
|
||||
padding-top: vh(30);
|
||||
|
||||
.cardList {
|
||||
padding: 0 20px;
|
||||
margin-top: vh(20);
|
||||
margin-bottom: vh(30);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.card {
|
||||
border: 1px dashed rgba(67, 226, 203, 0.3);
|
||||
width: 112px;
|
||||
height: vh(155);
|
||||
padding-top: vh(15);
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
|
||||
img {
|
||||
width: 44px;
|
||||
height: vh(44);
|
||||
margin-bottom: vh(20);
|
||||
}
|
||||
|
||||
> p {
|
||||
font-size: 14px;
|
||||
margin-top: 0;
|
||||
margin-bottom: vh(10);
|
||||
font-family: '思源黑体';
|
||||
}
|
||||
|
||||
.peopleNum {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
|
||||
text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 1);
|
||||
color: rgba(230, 247, 255, 1);
|
||||
|
||||
span {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 2px;
|
||||
background: linear-gradient(to bottom right, #43e2cb 0%, transparent 50%);
|
||||
-webkit-mask:
|
||||
linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
mask-composite: exclude;
|
||||
opacity: 0.4;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.topleft {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
background-image: url('@/assets/images/topleft.png');
|
||||
}
|
||||
|
||||
.bottomright {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-image: url('@/assets/images/bottomright.png');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
35
src/views/gisHome/component/map.vue
Normal file
35
src/views/gisHome/component/map.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="ol-map" id="olMap"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// const sdk = ref(null);
|
||||
const createEarth = () => {
|
||||
window.sdk = new YJ.YJEarth('olMap');
|
||||
YJ.Global.setDefaultView(sdk, {
|
||||
destination: { lng: 100, lat: 30, alt: 22099000 },
|
||||
orientation: {
|
||||
heading: 0.0,
|
||||
pitch: -90.0,
|
||||
roll: 0.0
|
||||
}
|
||||
});
|
||||
YJ.Global.CesiumContainer(sdk, {
|
||||
compass: false // 罗盘
|
||||
});
|
||||
new YJ.Tools(sdk).flyHome(0);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await YJ.on();
|
||||
createEarth();
|
||||
console.log(YJ);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ol-map {
|
||||
width: 100%;
|
||||
height: calc(100vh - 123px);
|
||||
}
|
||||
</style>
|
||||
7
src/views/gisHome/component/rightMain.vue
Normal file
7
src/views/gisHome/component/rightMain.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div class="management"></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -23,69 +23,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="content px-5">
|
||||
<div class="situation">
|
||||
<div class="main">
|
||||
<div class="title">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/images/ligner.png" alt="" />
|
||||
<div class="w100% flex justify-between items-center">
|
||||
<div class="subTitle flex items-center">
|
||||
<img src="@/assets/images/jigong.png" alt="" />
|
||||
<span>人员情况</span>
|
||||
</div>
|
||||
<div class="hint">PERSONNEL SITUATION</div>
|
||||
</div>
|
||||
<div class="mark"></div>
|
||||
</div>
|
||||
<div class="ligner"></div>
|
||||
</div>
|
||||
<div class="cardList">
|
||||
<div class="card">
|
||||
<div class="iconImg">
|
||||
<img src="@/assets/images/Attendancerate.png" alt="" />
|
||||
</div>
|
||||
<p>总人数</p>
|
||||
<div class="peopleNum"><span>259</span>人</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="iconImg">
|
||||
<img src="@/assets/images/attendanceperson.png" alt="" />
|
||||
</div>
|
||||
<p>出勤人</p>
|
||||
<div class="peopleNum"><span>259</span>人</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="iconImg">
|
||||
<img src="@/assets/images/Attendancerate.png" alt="" />
|
||||
</div>
|
||||
<p>出勤率</p>
|
||||
<div class="peopleNum"><span>100</span>%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="flex items-center">
|
||||
<img src="@/assets/images/ligner.png" alt="" />
|
||||
<div class="flex justify-between w100% items-center">
|
||||
<div class="subTitle flex items-center">
|
||||
<img src="@/assets/images/Machinery.png" alt="" />
|
||||
<span>机械情况</span>
|
||||
</div>
|
||||
<div class="hint">MECHANICAL CONDITION</div>
|
||||
</div>
|
||||
<div class="mark"></div>
|
||||
</div>
|
||||
<div class="ligner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topleft"></div>
|
||||
<div class="bottomright"></div>
|
||||
</div>
|
||||
<div class="management"></div>
|
||||
<Map></Map>
|
||||
<leftMain></leftMain>
|
||||
<RightMain></RightMain>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
<script lang="ts" setup>
|
||||
import LeftMain from './component/leftMain.vue';
|
||||
import Map from './component/map.vue';
|
||||
import RightMain from './component/rightMain.vue';
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './css/gis.scss';
|
||||
@ -95,49 +44,6 @@
|
||||
// background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
> img {
|
||||
width: 14px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
img {
|
||||
width: 18.8px;
|
||||
height: 20px;
|
||||
margin-right: vw(10);
|
||||
}
|
||||
|
||||
span {
|
||||
text-shadow: 0px 0px 8px rgba(2, 3, 7, 0.35);
|
||||
font-size: vw(20);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(204, 204, 204, 0.5);
|
||||
margin-right: vw(20);
|
||||
}
|
||||
|
||||
.mark {
|
||||
width: vw(2);
|
||||
height: vh(14);
|
||||
background: rgba(67, 226, 203);
|
||||
margin-right: vw(10);
|
||||
}
|
||||
|
||||
.ligner {
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent 0%, #43e2cb 90%);
|
||||
margin-left: vw(14);
|
||||
}
|
||||
}
|
||||
|
||||
.robotocondensed {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px;
|
||||
@ -154,95 +60,4 @@
|
||||
color: rgba(230, 247, 255, 1);
|
||||
font-family: '思源黑体';
|
||||
}
|
||||
|
||||
.situation {
|
||||
width: vw(449);
|
||||
height: vh(927);
|
||||
background: rgb(1, 26, 33, 0.4);
|
||||
border: 2px solid #000000;
|
||||
position: relative;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
.main {
|
||||
padding-top: vh(30);
|
||||
|
||||
.cardList {
|
||||
padding: 0 vw(20);
|
||||
margin-top: vh(20);
|
||||
margin-bottom: vh(30);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.card {
|
||||
border: 1px dashed rgba(67, 226, 203, 0.3);
|
||||
width: vw(112);
|
||||
height: vh(155);
|
||||
padding-top: vh(15);
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
|
||||
img {
|
||||
width: vw(44);
|
||||
height: vh(44);
|
||||
margin-bottom: vh(20);
|
||||
}
|
||||
|
||||
> p {
|
||||
font-size: vw(14);
|
||||
margin-top: 0;
|
||||
margin-bottom: vw(10);
|
||||
font-family: '思源黑体';
|
||||
}
|
||||
|
||||
.peopleNum {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
|
||||
text-shadow: 0px 1.24px 6.21px rgba(0, 190, 247, 1);
|
||||
color: rgba(230, 247, 255, 1);
|
||||
|
||||
span {
|
||||
font-size: vw(24);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 2px;
|
||||
background: linear-gradient(to bottom right, #43e2cb 0%, transparent 50%);
|
||||
-webkit-mask:
|
||||
linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
mask-composite: exclude;
|
||||
opacity: 0.4;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.topleft {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
background-image: url('@/assets/images/topleft.png');
|
||||
}
|
||||
|
||||
.bottomright {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-image: url('@/assets/images/bottomright.png');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user