首页

src/assets/styles/index.scss

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

src/components/SizeSelect/index.vue

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

src/layout/components/Navbar.vue

@@ -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;

src/layoutMain/components/Navbar.vue

@@ -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>
+          <font class="mr10"> {{ time }} </font><div class="mr10">{{ currentTime }}</div> <div class="mr10">{{ week }}</div>
-        <div class="currentTime-week">
+        
-          <div>{{ currentTime }}</div>
-          <div>{{ week }}</div>
-        </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;
+  // background: #202a60;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   display: flex;
   justify-content: space-between;
+  background: url('@/assets/images/top_banner_deep.png') no-repeat #202a60;
 
   .left {
     width: 33%;
-    display: flex;
+    // display: flex;
-    align-items: center;
+    // 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;

src/views/bim/bimHome/components/3DChart.js

@@ -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',

src/views/bim/bimHome/components/DeviceEvent.vue

@@ -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;

src/views/bim/bimHome/components/MenuTab.vue

@@ -44,16 +44,22 @@ const changeMenu = (index) => {
     align-items: center;
 
     >div {
-        color: #2ebfdf;
+        color: #ffff;
-        width: 150px;
+        width: 178px;
-        border: 1px solid #2ebfdf;
+        height: 64px;
-        line-height: 45px;
+        display: flex;
-        text-align: center;
+        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>

src/views/bim/bimHome/components/RealInfoDialog.vue

@@ -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'

src/views/bim/bimHome/components/ThreeView.vue

@@ -115,12 +115,15 @@ const cleanColor = () => {
     })
 }
 const init = () => {
-    scene = new THREE.Scene("#00ffff");
+    // scene = new THREE.Scene("#00ffff");
-    const texture = new THREE.TextureLoader().load(homeIcon);
+    // const texture = new THREE.TextureLoader().load(homeIcon);
-    texture.mapping = THREE.EquirectangularReflectionMapping;
+    // texture.mapping = THREE.EquirectangularReflectionMapping;
-    scene.background = texture
+    // scene.background = texture
-    scene.environment = 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);
 };

src/views/bim/bimHome/components/TopDiv.vue

@@ -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>

src/views/bim/bimHome/index.vue

@@ -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>

src/views/components/Bar.vue

@@ -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>

src/views/components/Device.vue

@@ -1,15 +1,17 @@
 <template>
-    <div class="device-div">
+    <dv-border-box-12 class="device-div">
-        <div v-for="(item, index) of deviceList" :key="index">
+        <div class="device-list">
-            <img :src="item.imgUrl" alt="" width="60">
+            <div v-for="(item, index) of deviceList" :key="index">
-            <font class="num" :style="{'color': item.color}">{{ item.num }}</font>
+                <img :src="item.imgUrl" alt="" width="60">
-            <span>{{ item.name }}</span>
+                <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;
+    .device-list {
-    justify-content: space-around;
+        width:100%;
-    align-items: center;
+        height:100%;
-    >div {
-        width: 24%;
-        height:80%;
-        // border: 1px solid red;
         display: flex;
-        flex-direction: column;
+        justify-content: space-around;
         align-items: center;
-        padding: 10px 0;
+
-        .num {
+        >div {
-            font-size: 48px;
+            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>

src/views/components/Line.vue

@@ -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>

src/views/components/Map.vue

@@ -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'

src/views/components/Pie.vue

@@ -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>

src/views/index.vue

@@ -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; 
+    background: #3d5d9a; 
-    // color: #fff;
+    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;
     }
   }
 }

vite.config.js

@@ -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')
         }
       }
     },