wangqiujuan0808
/
bw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页

main
wangqiujuan0808 2023-12-09 14:05:55 +08:00
parent 34f1b1c11f
commit 14b51f2e43
22 changed files with 209 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/biaoti.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/images/top_banner_deep.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/assets/images/weixuanzhong.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
src/assets/images/xuanzhong.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

4
src/assets/styles/index.scss
View File

@ -126,7 +126,9 @@ aside {
// height: 80px;
}
.mr10 {
margin-right: 10px;
}
.components-container {
margin: 30px 50px;
position: relative;

1
src/components/SizeSelect/index.vue
View File

@ -41,5 +41,6 @@ function handleSetSize(size) {
font-size: 18px;
line-height: 50px;
padding-right: 7px;
color: #fff;
}
</style>

10
src/layout/components/Navbar.vue
View File

@ -138,9 +138,8 @@ function setLayout() {
.right-menu {
float: right;
height: 100%;
line-height: 50px;
display: flex;
color: #fff;
&:focus {
outline: none;
}
@ -150,9 +149,10 @@ function setLayout() {
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66;
color: #fff;
vertical-align: text-bottom;
display: flex;
align-items: center;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
@ -164,7 +164,7 @@ function setLayout() {
}
.avatar-container {
margin-right: 40px;
margin-right: 10px;
.avatar-wrapper {
margin-top: 5px;

40
src/layoutMain/components/Navbar.vue
View File

@ -2,7 +2,7 @@
<div class="navbar">
<!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> -->
<div class="left">
<img src="@/assets/logo/logo.png" alt="dark" />
<!-- <img src="@/assets/logo/logo.png" alt="dark" /> -->
<span>
百威管理系统
</span>
@ -13,11 +13,8 @@
<div class="right-menu">
<template v-if="appStore.device !== 'mobile'">
<p class="time">
<font> {{ time }} </font>
<div class="currentTime-week">
<div>{{ currentTime }}</div>
<div>{{ week }}</div>
</div>
<font class="mr10"> {{ time }} </font><div class="mr10">{{ currentTime }}</div> <div class="mr10">{{ week }}</div>
</p>
<!-- <header-search id="header-search" class="right-menu-item" />
@ -165,18 +162,22 @@ function setLayout() {
<style lang='scss' scoped>
.navbar {
height: 50px;
height: 70px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
// background: #202a60;
display: flex;
justify-content: space-between;
background: url('@/assets/images/top_banner_deep.png') no-repeat #202a60;
.left {
width: 33%;
display: flex;
align-items: center;
// display: flex;
// align-items: center;
padding-left: 20px;
color: #fff;
font-size: 20px;
line-height: 50px;
height: 100%;
img {
height: 98%;
@ -189,6 +190,8 @@ function setLayout() {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 30px;
}
.right-menu {
@ -202,18 +205,17 @@ function setLayout() {
display: flex;
align-items: center;
height: 100%;
font {
font-size: 30px;
}
.currentTime-week {
height: 100%;
height: 70%;
margin: 0 10px;
>div {
width: 100%;
height: 50% !important;
height: 40% !important;
display: flex !important;
align-items: center !important;
justify-content: center;
@ -252,9 +254,8 @@ function setLayout() {
.right-menu {
float: right;
height: 100%;
line-height: 50px;
display: flex;
color: #fff;
&:focus {
outline: none;
}
@ -264,9 +265,10 @@ function setLayout() {
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66;
color: #fff;
vertical-align: text-bottom;
display: flex;
align-items: center;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
@ -278,7 +280,7 @@ function setLayout() {
}
.avatar-container {
margin-right: 40px;
margin-right: 10px;
.avatar-wrapper {
margin-top: 5px;

5
src/views/bim/bimHome/components/3DChart.js
View File

@ -1,5 +1,6 @@
let color= ['#007d7b', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#E91E63', '#9C27B0', '#673AB7']
// let color= ['#007d7b', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#E91E63', '#9C27B0', '#673AB7']
let color = ['#f46464', '#7bddf5', '#f5ef7b', '#f57bcc']
const getPie3D = (pieData, internalDiameterRatio, rateName) => {
// internalDiameterRatio:透明的空心占比
const series = []
@ -52,7 +53,7 @@ const getPie3D = (pieData, internalDiameterRatio, rateName) => {
// const newColor = _.cloneDeep(color)
// newColor.splice(0, 1)
const newColor = [color[0], color[1], color[5],color[6]]
const newColor = color;
series.push({
type: 'pie',

9
src/views/bim/bimHome/components/DeviceEvent.vue
View File

@ -33,7 +33,7 @@ const data = reactive({
content: '设备完成巡检计划',
time: '下午',
timestamp: '20:46',
color: '#0bbd87',
color: '#87efd0e9',
icon: MoreFilled,
type: 'primary',
size: 'large'
@ -42,7 +42,7 @@ const data = reactive({
content: '设备发生故障：电流过大',
time: '下午',
timestamp: '18:46',
color: '#e54c44',
color: '#f28680',
type: 'danger',
icon: Warning,
size: 'large'
@ -51,7 +51,7 @@ const data = reactive({
content: '设备保养周期剩余3天',
time: '上午',
timestamp: '11:46',
color: '#31bdb4',
color: '#6eebe3',
icon: MoreFilled,
type: 'primary',
size: 'large'
@ -75,7 +75,8 @@ const openDialog = () => {
display: flex;
flex-direction: column;
align-items: center;
color: #3cbfdf;
// color: #006b86;
color: #6eebe3;
:deep(.border-box-content) {
padding: 10px;

18
src/views/bim/bimHome/components/MenuTab.vue
View File

@ -44,16 +44,22 @@ const changeMenu = (index) => {
align-items: center;
>div {
color: #2ebfdf;
width: 150px;
border: 1px solid #2ebfdf;
line-height: 45px;
text-align: center;
color: #ffff;
width: 178px;
height: 64px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-weight: 600;
cursor: pointer;
background: url(@/assets/images/weixuanzhong.png) center center no-repeat;
background-size: 100% 100%;
}
.activateTab {
color: #fcab27;
background-size: 100% 100%;
background: url(@/assets/images/xuanzhong.png) center center no-repeat;
}
}
</style>

10
src/views/bim/bimHome/components/RealInfoDialog.vue
View File

@ -64,7 +64,7 @@ const data = reactive({
content: '设备完成巡检计划',
time: '2023年',
timestamp: '12月3日',
color: '#0bbd87',
color: '#87efd0e9',
icon: MoreFilled,
type: 'primary',
size: 'large'
@ -73,7 +73,7 @@ const data = reactive({
content: '设备发生故障：电流过大',
time: '2023年',
timestamp: '12月5日',
color: '#e54c44',
color: '#f28680',
type: 'danger',
icon: Warning,
size: 'large'
@ -82,7 +82,7 @@ const data = reactive({
content: '设备保养周期剩余3天',
time: '2023年',
timestamp: '12月6日',
color: '#31bdb4',
color: '#6eebe3',
icon: MoreFilled,
type: 'primary',
size: 'large'
@ -91,7 +91,7 @@ const data = reactive({
content: '设备完成巡检计划',
time: '2023年',
timestamp: '12月20日',
color: '#0bbd87',
color: '#87efd0e9',
icon: MoreFilled,
type: 'primary',
size: 'large'
@ -100,7 +100,7 @@ const data = reactive({
content: '设备发生故障：电流过大',
time: '2023年',
timestamp: '12月23日',
color: '#e54c44',
color: '#f28680',
type: 'danger',
icon: Warning,
size: 'large'

19
src/views/bim/bimHome/components/ThreeView.vue
View File

@ -115,12 +115,15 @@ const cleanColor = () => {
})
}
const init = () => {
scene = new THREE.Scene("#00ffff");
const texture = new THREE.TextureLoader().load(homeIcon);
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture
scene.environment = texture
// scene = new THREE.Scene("#00ffff");
// const texture = new THREE.TextureLoader().load(homeIcon);
// texture.mapping = THREE.EquirectangularReflectionMapping;
// scene.background = texture
// scene.environment = texture
scene = new THREE.Scene();
console.log(123,props.background);
scene.background = new THREE.Color(props.background);
const canvas = document.querySelector("#three");
var cubeLoader = new THREE.CubeTextureLoader();
// 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景
@ -132,7 +135,7 @@ const init = () => {
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.25, 2000)
// 将摄像机对准场景的中心
camera.position.set(-192.936, 180.990, -28.179);
camera.position.set(-92.936, 180.990, -28.179);
camera.lookAt(scene.position);
// 创建控件对象
orbit = new OrbitControls(camera, renderer.domElement);
@ -140,11 +143,11 @@ const init = () => {
setTimeout(function () {
orbit.autoRotate = false;
}, 7000);
renderer.setClearColor(new THREE.Color("#0e0934"));
// renderer.setClearColor(new THREE.Color("#0e0934"));
renderer.setSize(window.innerWidth, window.innerHeight);
// 环境光 光源颜色从0x444444更改为0x888888,可以看到threejs场景中的网格模型表面变的更亮。
// intensity 强度属性0.5
var alight = new THREE.AmbientLight(props.light, 0.5);
var alight = new THREE.AmbientLight(props.light, 1);
alight.name = "aLight";
scene.add(alight);
};

8
src/views/bim/bimHome/components/TopDiv.vue
View File

@ -15,10 +15,12 @@ const props = defineProps({
width: 360px;
height: 56px;
background-size: 100% 100% !important;
background: url(@/assets/images/top.png) no-repeat;
background: url(@/assets/images/biaoti.png) no-repeat;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
margin-bottom: 5px;
padding-left: 24px;
color: #fff;
font-weight: 800
}
</style>

4
src/views/bim/bimHome/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<!-- 场景模型 -->
<ThreeView background="#353535" light="0xffffff" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
<ThreeView background="#202a60" light="0xfffafa" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
<!-- <ThreeModel /> -->
<!-- 底部菜单 -->
<MenuTab @changeMenu="changeMenu"></MenuTab>
@ -126,6 +126,6 @@ const viewDetail = (val) => {
.app-container {
position: relative;
width: 100%;
height: 900px;
height: calc(100vh - 70px);
}
</style>

39
src/views/components/Bar.vue
View File

@ -1,7 +1,9 @@
<template>
<div class="bar-div" id="bar">
<dv-border-box-12 class="bar-div">
<div id="bar">
</div>
</div>
</dv-border-box-12>
</template>
<script setup>
import * as echarts from "echarts";
@ -27,7 +29,14 @@ const getCharts = () => {
type: 'shadow'
}
},
legend: {},
legend: {
textStyle: {
color: "#ffff",
fontFamily: "Alibaba PuHuiTi",
fontSize: 14,
fontWeight: 400,
},
},
grid: {
left: '1%',
right: '8%',
@ -43,6 +52,16 @@ const getCharts = () => {
width: 1
}
},
axisLabel: {
textStyle: {
color: "#fff", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
splitLine: {
// 网格线
show: false,
},
show: true,
maxInterval: 50000 //值坐标最大的数值间隔 最小同样min
}
@ -69,6 +88,12 @@ const getCharts = () => {
width: 2
}
},
axisLabel: {
textStyle: {
color: "#fff", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
position: 'left',
}
],
@ -113,4 +138,10 @@ const getCharts = () => {
option && myChart.setOption(option);
}
}
</script>
</script>
<style lang="scss" scoped>
#bar {
width: 100%;
height:100%;
}
</style>

49
src/views/components/Device.vue
View File

@ -1,15 +1,17 @@
<template>
<div class="device-div">
<div v-for="(item, index) of deviceList" :key="index">
<img :src="item.imgUrl" alt="" width="60">
<font class="num" :style="{'color': item.color}">{{ item.num }}</font>
<span>{{ item.name }}</span>
<dv-border-box-12 class="device-div">
<div class="device-list">
<div v-for="(item, index) of deviceList" :key="index">
<img :src="item.imgUrl" alt="" width="60">
<font class="num" :style="{ 'color': item.color }">{{ item.num }}</font>
<span>{{ item.name }}</span>
</div>
</div>
</div>
</dv-border-box-12>
</template>
<script setup>
import IconBy from '@/assets/images/icon-by.png';
import IconWx from '@/assets/images/icon-wx.png';
import IconWx from '@/assets/images/icon-wx.png';
import IconXj from '@/assets/images/icon-xj.png';
import IconPd from '@/assets/images/icon-pd.png';
const deviceList = [
@ -41,21 +43,30 @@ const deviceList = [
</script>
<style lang="scss" scoped>
.device-div {
display: flex;
justify-content: space-around;
align-items: center;
>div {
width: 24%;
height:80%;
// border: 1px solid red;
.device-list {
width:100%;
height:100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 10px 0;
.num {
font-size: 48px;
>div {
width: 24%;
height: 80%;
// border: 1px solid red;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 0;
color: #fff;
.num {
font-size: 48px;
}
}
}
}
</style>

47
src/views/components/Line.vue
View File

@ -1,7 +1,8 @@
<template>
<div class="line-div" id="line">
<dv-border-box-12 class="line-div">
<div id="line"></div>
</div>
</dv-border-box-12>
</template>
<script setup>
import * as echarts from "echarts";
@ -27,7 +28,14 @@ const getCharts = () => {
type: 'shadow'
}
},
legend: {},
legend: {
textStyle: {
color: "#ffff",
fontFamily: "Alibaba PuHuiTi",
fontSize: 14,
fontWeight: 400,
},
},
grid: {
top: '24%',
left: '5%',
@ -45,6 +53,16 @@ const getCharts = () => {
width: 1
}
},
splitLine: {
// 网格线
show: false,
},
axisLabel: {
textStyle: {
color: "#fff", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
show: true,
maxInterval: 50000 //值坐标最大的数值间隔 最小同样min
}
@ -52,7 +70,7 @@ const getCharts = () => {
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
show: true,
lineStyle: {
@ -64,13 +82,19 @@ const getCharts = () => {
},
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
show: true,
lineStyle: {
width: 2
}
},
axisLabel: {
textStyle: {
color: "#fff", //X轴字体颜色
fontSize: "12", //X轴字体大小
},
},
position: 'bottom',
}
],
@ -78,8 +102,9 @@ const getCharts = () => {
{
name: '生产数据',
type: 'bar',
barWidth: 18,
// xAxisIndex:1,
data: [182, 234, 290, 104, 131, 100,182, 234, 290, 104, 131, 100],
data: [182, 234, 290, 104, 131, 100, 182, 234, 290, 104, 131, 100],
itemStyle: {
normal: {
label: {
@ -96,7 +121,7 @@ const getCharts = () => {
name: '销售数据',
type: 'line',
// xAxisIndex:1,
data: [193, 234, 310, 121, 134, 181,193, 234, 310, 121, 134, 181],
data: [193, 234, 310, 121, 134, 181, 193, 234, 310, 121, 134, 181],
itemStyle: {
normal: {
label: {
@ -115,4 +140,10 @@ const getCharts = () => {
option && myChart.setOption(option);
}
}
</script>
</script>
<style lang="scss" scoped>
#line {
width: 100%;
height:100%;
}
</style>

11
src/views/components/Map.vue
View File

@ -88,7 +88,7 @@ const getCharts = () => {
label: {
emphasis: {
show: false
}
},
}
// itemStyle: {
// normal: {
@ -107,7 +107,10 @@ const getCharts = () => {
zoom:1.2,
label: {
normal: {
show: true
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
show: true
@ -115,9 +118,9 @@ const getCharts = () => {
},
itemStyle: {
normal: {
areaColor: '#B2CAE0',
areaColor: '#254287',
borderColor: '#fff',
borderWidth: 1
borderWidth: 1,
},
emphasis: {
areaColor: '#FFAE00'

16
src/views/components/Pie.vue
View File

@ -1,7 +1,9 @@
<template>
<div class="pie-div" id="pie">
<dv-border-box-12 class="pie-div">
<div id="pie">
</div>
</div>
</dv-border-box-12>
</template>
<script setup>
import * as echarts from "echarts";
@ -41,7 +43,7 @@ const getCharts = () => {
itemGap: 25,
borderRadius: 4,
textStyle: {
color: "#000",
color: "#ffff",
fontFamily: "Alibaba PuHuiTi",
fontSize: 14,
fontWeight: 400,
@ -89,4 +91,10 @@ const getCharts = () => {
option && myChart.setOption(option);
}
}
</script>
</script>
<style lang="scss" scoped>
#pie {
width: 100%;
height:100%;
}
</style>

21
src/views/index.vue
View File

@ -48,25 +48,26 @@ const gotoPage = (item) => {
.topMenu {
width: 100%;
height: 80px;
// border: 1px solid red;
border: 1px solid #020c45;
display: flex;
align-items: center;
background: #b2cae0;
// color: #fff;
background: #3d5d9a;
color: #fff;
> div {
width: 260px;
height: 100%;
cursor: pointer;
display: flex;
align-items: center;
border-right: 1px solid #fff;
border-right: 1px solid #020c45;
justify-content: center;
font-size: 20px;
}
}
.home-page {
width:100%;
height: calc(100vh - 130px);
height: calc(100vh - 150px);
background: #020c45;
position: relative;
.map-div {
width: 100%;
@ -79,15 +80,15 @@ const gotoPage = (item) => {
height: 360px;
top: 10px;
left: 10px;
background: #b2cae0;
padding: 15px;
}
.bar-div {
position: absolute;
width: 400px;
height: 460px;
background: #b2cae0;
top: 10px;
right: 10px;
padding: 15px;
}
.device-div {
position: absolute;
@ -95,7 +96,8 @@ const gotoPage = (item) => {
left: 10px;
width: 930px;
height: 200px;
background: #b2cae0;
padding: 15px;
// background: #b2cae0;
}
.line-div {
position: absolute;
@ -103,7 +105,8 @@ const gotoPage = (item) => {
right: 10px;
width: 930px;
height: 200px;
background: #b2cae0;
padding: 15px;
// background: #b2cae0;
}
}
}

2
vite.config.js
View File

@ -34,7 +34,7 @@ export default defineConfig(({ mode, command }) => {
target: 'http://ryapi.shikicc.com:58911/',
// target: 'http://vue.ruoyi.vip/',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
rewrite: (p) => p.replace(/^\/dev-api/, '/prod-api')
}
}
},