优化

src/assets/styles/index.scss

@@ -126,9 +126,11 @@ aside {
   // height: 80px;
 
 }
+
 .mr10 {
   margin-right: 10px;
 }
+
 .components-container {
   margin: 30px 50px;
   position: relative;
@@ -185,9 +187,67 @@ aside {
     margin-bottom: 10px;
   }
 }
-.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+
-  background-color: #033b73 !important;
+.bim-dialog {
-}
+  background: #00174b !important;
-.el-tree-node__content:hover {
+
-  background-color: #033b73 !important;
+  .el-dialog__title {
+    color: #fff !important;
+  }
+
+  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+    background-color: #082859 !important;
+  }
+  .el-tree-node__content {
+    background-color: #00174b !important;
+    color: #fff !important;
+  }
+
+  .el-tree-node__content:hover {
+    background-color: #082859 !important;
+  }
+
+  .el-input__wrapper {
+    background: transparent !important;
+    border: 1px solid #2E6099 !important;
+    box-shadow: none !important;
+
+    &:hover {
+      outline: none !important;
+      border: 1px solid #2E6099 !important;
+    }
+  }
+
+  .el-select__icon {
+    color: #2E6099 !important;
+  }
+
+  .el-tabs__item,
+  .el-range-input,
+  .el-input__inner {
+    color: #fff !important;
+  }
+
+  .el-tabs__header .el-tabs__item.is-active {
+    color: #3cbfdf !important;
+  }
+
+  .el-table__cell,
+  .el-tabs__header,
+  .el-tabs__header .el-tabs__item,
+  .el-tabs--card>.el-tabs__header .el-tabs__nav {
+    border-color:#2E6099 !important;
+  }
+  .el-table,
+  tr,
+  .el-table__border-left-patch,
+  .el-table--border::after,
+  .el-table__header-wrapper th,
+  .el-table--enable-row-hover .el-table__body tr>td.el-table__cell,
+  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell,
+  .el-table__inner-wrapper::after,
+  .el-table__inner-wrapper::before {
+    background-color: #00174b !important;
+    color: #fff !important
+  }
 }

src/components/SizeSelect/index.vue

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

src/layout/components/Navbar.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
+      @toggleClick="toggleSideBar" />
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
     <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
 
@@ -139,7 +140,8 @@ function setLayout() {
     float: right;
     height: 100%;
     display: flex;
-    color: #fff;
+    color: #000;
+
     &:focus {
       outline: none;
     }
@@ -149,10 +151,11 @@ function setLayout() {
       padding: 0 8px;
       height: 100%;
       font-size: 18px;
-      color: #fff;
+      color: #000;
       vertical-align: text-bottom;
       display: flex;
       align-items: center;
+
       &.hover-effect {
         cursor: pointer;
         transition: background 0.3s;
@@ -186,6 +189,9 @@ function setLayout() {
         }
       }
     }
+
+    :deep(.size-icon--style)  {
+      color: #000;
     }
-}
+  }
-</style>
+}</style>

src/layoutMain/components/AppMain.vue

@@ -3,7 +3,7 @@
     <router-view v-slot="{ Component, route }">
       <transition name="fade-transform" mode="out-in">
         <keep-alive :include="tagsViewStore.cachedViews">
-          <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
+          <component v-if="!route.meta.link" :is="Component" :key="route.path" />
         </keep-alive>
       </transition>
     </router-view>
@@ -25,9 +25,36 @@ const tagsViewStore = useTagsViewStore()
   width: 100%;
   position: relative;
   overflow: hidden;
+
+  :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
+    background-color: #082859 !important;
+  }
+
+  :deep(.el-tree-node__content:hover) {
+    background-color: #082859 !important;
+  }
+
+  :deep(.el-input__wrapper) {
+    background: transparent;
+    border: 1px solid #2E6099;
+    box-shadow: none;
+
+    &:hover {
+      outline: none;
+      border: 1px solid #2E6099;
+    }
+  }
+
+  :deep(.el-select__icon) {
+    color: #2E6099
+  }
+
+  :deep(.el-input__inner) {
+    color: #fff;
+  }
 }
 
-.fixed-header + .app-main {
+.fixed-header+.app-main {
   padding-top: 50px;
 }
 
@@ -37,7 +64,7 @@ const tagsViewStore = useTagsViewStore()
     min-height: calc(100vh - 84px);
   }
 
-  .fixed-header + .app-main {
+  .fixed-header+.app-main {
     padding-top: 84px;
   }
 }

src/layoutMain/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar">
+  <div class="navbar1">
     <!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> -->
     <div class="left">
       <!-- <img src="@/assets/logo/logo.png" alt="dark" /> -->
@@ -161,7 +161,7 @@ function setLayout() {
 </script>
 
 <style lang='scss' scoped>
-.navbar {
+.navbar1 {
   height: 70px;
   overflow: hidden;
   position: relative;
@@ -302,5 +302,8 @@ function setLayout() {
         }
       }
     }
+    :deep(.size-icon--style) {
+      color: #fff;
+    }
   }
 }</style>

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

@@ -30,9 +30,10 @@ const listData = props.infoList.detail;
 <style lang="scss" scoped>
 .baseInfo-div {
     width: 100%;
-    height: 80%;
+    // height: 80%;
     display: flex;
     justify-content: space-between;
+    font-size: 18px;
     .left-div {
         width: 69%;
         height: 100%;
@@ -40,6 +41,7 @@ const listData = props.infoList.detail;
         justify-content: space-between;
         flex-wrap: wrap;
         >div {
+            padding: 40px 0;
             width: 48%;
             line-height: 24px;
             height: 48px;

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

@@ -212,13 +212,5 @@ const handleNodeClick = (value) => {
     .el-select {
         margin: 10px;
     }
-
-    :deep(.el-input__wrapper) {
-        background: transparent;
-    }
-
-    :deep(.el-input__inner) {
-        color: #fff;
-    }
 }
 </style>

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

@@ -5,21 +5,25 @@
             <el-tab-pane :label="item" v-for="(item, index) of tabData" :key="index" :name="index + ''">
             </el-tab-pane>
         </el-tabs>
-        <BasicInfo :infoList="detailData"></BasicInfo>
+        <BasicInfo :infoList="detailData" v-if="activeName == '0'"></BasicInfo>
+        <RealInfo v-if="activeName == '1'"></RealInfo>
+        <HistoryInfo v-if="activeName == '2'"></HistoryInfo>
     </div>
 </template>
 <script setup>
 import bimStore from '@/store/modules/bim';
 import BasicInfo from './BasicInfo.vue';
+import RealInfo from './RealInfo.vue';
+import HistoryInfo from './HistoryInfo.vue';
 import { ElMessage } from 'element-plus';
 const deviceData = {
     'EQ0001': {
-        name: '过滤槽',
+        name: '立仓',
         imgUlr: '',
         detail: [
             {
                 name: '资产名称',
-                value: '过滤槽'
+                value: '立仓'
             },
             {
                 name: '资产类型',
@@ -72,12 +76,12 @@ const deviceData = {
         ]
     },
     'EQ0002': {
-        name: '新风机组',
+        name: '过滤槽',
         imgUlr: '',
         detail: [
             {
                 name: '资产名称',
-                value: '新风机组'
+                value: '过滤槽'
             },
             {
                 name: '资产类型',
@@ -147,9 +151,9 @@ const { detailData } = toRefs(data);
 const deviceNum = computed(() => bimStore().deviceNum);
 detailData.value = deviceData[deviceNum.value];
 const handleClick = (tab, event) => {
-    if(activeName !== '0') {
+    // if(activeName !== '0' && activeName !== '1' && activeName !=='2') {
-        ElMessage.warning('暂未开发');
+    //     ElMessage.warning('暂未开发');
-    }
+    // }
 
 }
 
@@ -158,12 +162,14 @@ const handleClick = (tab, event) => {
 <style lang="scss" scoped>
 .detail-div {
     height: 700px;
+    color: #fff;
     .title-div {
         height: 50px;
         line-height: 50px;
         width: 100%;
-        border: 1px solid #ddd;
+        border: 1px solid #2E6099;
         padding: 0 10px;
+        margin-bottom:5px;
     }
 }
 </style>

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

@@ -64,8 +64,8 @@ const data = reactive({
                     id: "echartDiv0"
                 },
                 {
-                    type: '空调设备',
+                    type: '生产设备',
-                    name: '新风机组',
+                    name: '过滤槽',
                     num: 'EQ0002',
                     value: 130,
                     id: "echartDiv1"
@@ -106,8 +106,8 @@ const data = reactive({
                             id: "echartDiv0"
                         },
                         {
-                            type: '空调设备',
+                            type: '生产设备',
-                            name: '新风机组',
+                            name: '过滤槽',
                             num: 'EQ0002',
                             value: 50,
                             id: "echartDiv1"
@@ -149,8 +149,8 @@ const data = reactive({
                             id: "echartDiv0"
                         },
                         {
-                            type: '空调设备',
+                            type: '生产设备',
-                            name: '新风机组',
+                            name: '过滤槽',
                             num: 'EQ0002',
                             value: 80,
                             id: "echartDiv1"
@@ -427,7 +427,7 @@ const viewDetail = (val) => {
     .left-div {
         width: 20%;
         height: 100%;
-        border: 1px solid #3cbfdf;
+        border: 1px solid #2E6099;
 
         .el-tree {
             margin: 0 10px;
@@ -454,13 +454,13 @@ const viewDetail = (val) => {
             .echartDiv100 {
                 width: 22% !important;
                 height: 100% !important;
-                border: 1px solid #3cbfdf;
+                border: 1px solid #2E6099;
             }
         }
 
         .bottom-div {
             height: 74%;
-            border: 1px solid #3cbfdf;
+            border: 1px solid #2E6099;
         }
     }
 }

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

@@ -40,11 +40,23 @@ const data = reactive({
             },
             children: [
                 {
-                    label: '设备一',
+                    label: '立仓',
                     id: '0-1',
                     clickName: 'set1',
                     info: {
-                        name: '设备一',
+                        name: '立仓',
+                        type: '生产设备',
+                        status: '启用'
+                    },
+                    children: []
+
+                },
+                {
+                    label: '过滤槽',
+                    id: '0-1',
+                    clickName: 'set6',
+                    info: {
+                        name: '过滤槽',
                         type: '生产设备',
                         status: '启用'
                     },

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

@@ -0,0 +1,160 @@
+<template>
+    <div class="historyInfo-div">
+        <div id="line"></div>
+    </div>
+</template>
+<script setup>
+import * as echarts from "echarts";
+onMounted(() => {
+    nextTick(() => {
+        getCharts();
+    })
+})
+var colors = ['#1890FF', '#24CDFB'];
+const getCharts = () => {
+    var dom = document.getElementById("line");
+    if (dom) {
+        // 手动移除该属性
+        dom.removeAttribute('_echarts_instance_')
+        var myChart = echarts.init(dom);
+        let option = {
+            title: {
+                text: ''
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            legend: {
+                textStyle: {
+                    color: "#ffff",
+                    fontFamily: "Alibaba PuHuiTi",
+                    fontSize: 14,
+                    fontWeight: 400,
+                },
+            },
+            grid: {
+                top: '24%',
+                left: '5%',
+                right: '8%',
+                // bottom: '2%',
+                height: '80%',
+                containLabel: true
+            },
+            yAxis: [
+                {
+                    type: 'value',
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            width: 1
+                        }
+                    },
+                    splitLine: {
+                        // 网格线
+                        lineStyle: {
+                            type: "dotted", //设置网格线类型 dotted：虚线 solid:实线
+                            color: "#29507E",
+                        },
+                        show: true,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff", //X轴字体颜色
+                            fontSize: "12", //X轴字体大小
+                        },
+                    },
+                    show: true,
+                    maxInterval: 50000  //值坐标最大的数值间隔 最小同样min
+                }
+            ],
+            xAxis: [
+                {
+                    type: 'category',
+                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            width: 0
+                        }
+                    },
+                    show: false,
+                    position: 'bottom',
+                },
+                {
+                    type: 'category',
+                    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',
+                }
+            ],
+            series: [
+                {
+                    name: '温度',
+                    type: 'line',
+                    color: colors[0],
+                    barWidth: 18,
+                    // xAxisIndex:1,
+                    data: [82, 34, 90, 104, 31, 100, 82, 34, 90, 104, 31, 100],
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: true,
+                                textStyle: {
+                                    color: colors[0],
+                                },
+                                position: "top",
+                            },
+                        }
+                    }
+                },
+                {
+                    name: '压力',
+                    type: 'line',
+                    color: colors[1],
+                    // xAxisIndex:1,
+                    data: [193, 234, 310, 121, 134, 181, 193, 234, 310, 121, 134, 181],
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: true,
+                                textStyle: {
+                                    color: colors[1],
+                                },
+                                position: "top",
+                            },
+                        }
+                    }
+                }
+            ]
+        };
+
+        option && myChart.setOption(option);
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.historyInfo-div {
+    width: 100%;
+    height: 80%;
+
+    #line {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

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

@@ -0,0 +1,74 @@
+<template>
+    <div class="realInfo-div">
+        <div v-for="(item, index) of realInfo" :key="index">
+            <span class="name">{{ item.name }}：</span>
+
+
+            <span class="value">{{ item.value }}</span>
+        </div>
+    </div>
+</template>
+<script setup>
+const data = reactive({
+    realInfo: [
+        {
+            name: '运行状态',
+            value: '运行中',
+        },
+        {
+            name: '故障状态',
+            value: '正常',
+        },
+        {
+            name: '房间温度',
+            value: '22.6℃',
+        },
+        {
+            name: '供水温度',
+            value: '16℃',
+        },
+        {
+            name: '回水温度',
+            value: '22℃',
+        },
+        {
+            name: '回水压力',
+            value: '4bar',
+        },
+        {
+            name: '送风区域',
+            value: '1楼大厅',
+        }
+    ]
+});
+const { realInfo } = toRefs(data);
+</script>
+<style lang="scss" scoped>
+.realInfo-div {
+    width: 100%;
+    // height: 80%;
+    display: flex;
+    justify-content: space-between;
+    font-size: 18px;
+    flex-wrap: wrap;
+
+    >div {
+        padding: 40px 0;
+        width: 33%;
+        line-height: 24px;
+        height: 48px;
+        justify-content: space-between;
+        display: flex;
+        align-items: center;
+
+        .name {
+            width: 40%;
+            text-align: right;
+        }
+
+        .value {
+            width: 59%;
+        }
+    }
+
+}</style>

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

@@ -172,7 +172,7 @@ const getEchart = () => {
                 }
             },
         ]
-        const option = { series, backgroundColor: '#ffffff' }
+        const option = { series, backgroundColor: '#00174b' }
         option && myChart.setOption(option);
     }
 }
@@ -184,11 +184,12 @@ const getEchart = () => {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
+    color:#fff;
 
     .top-div {
         width: 100%;
         height: 25%;
-        border: 1px solid #3cbfdf;
+        border: 1px solid #2E6099;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -220,7 +221,7 @@ const getEchart = () => {
         .left-div {
             width: 20%;
             height: 100%;
-            border: 1px solid #3cbfdf;
+            border: 1px solid #2E6099;
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -231,7 +232,7 @@ const getEchart = () => {
             }
             .span-div {
                 padding: 5px 25px;
-                background: #3cbfdf;
+                background: #2E6099;
                 border-radius: 15px;
                 color:#fff;
             }
@@ -240,7 +241,7 @@ const getEchart = () => {
         .right-div {
             width: 79%;
             height: 100%;
-            border: 1px solid #3cbfdf;
+            border: 1px solid #2E6099;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
@@ -266,6 +267,16 @@ const getEchart = () => {
                         transform: translateX(50%);
                         width: 25%;
                     }
+                    .timestamp {
+                        color: #fff;;
+                    }
+                    :deep(.el-card) {
+                        border: none;
+                        margin-top:5px;
+                    }
+                    :deep(.el-card__body) {
+                        color: #fff;
+                    }
                 }
 
                 :deep(.el-timeline-item__tail) {

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

@@ -9,6 +9,9 @@
             <div class="button" @click="setLabel">
                 {{ isAddLabel ? '添加标签' : '移除标签' }}
             </div>
+            <div class="button" @click="setBottom()">
+                {{ isRemoveBottom ? '移除地板' : '恢复地板' }}
+            </div>
             <div class="button" @click="roam()">
                 漫游
             </div>
@@ -42,9 +45,10 @@ let i = 1;
 let mouse = new THREE.Vector2();
 let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
 const data = reactive({
-    isAddLabel: true
+    isAddLabel: true,
+    isRemoveBottom: true
 });
-const { isAddLabel } = toRefs(data);
+const { isAddLabel,isRemoveBottom } = toRefs(data);
 // 建筑树点击
 Bus.on('clickBuild', (isParent) => {
     // Todo
@@ -370,6 +374,18 @@ const removeLabel = () => {
     document.body.removeChild(labelRenderer.domElement);
 }
 
+// 设置地板
+const setBottom = () => {
+    var target = scene.getObjectByName('set1');
+    if (isRemoveBottom.value) {
+        var target = scene.getObjectByName('set1');
+        target.visible = false;
+    } else {
+        target.visible = true;
+    }
+    isRemoveBottom.value = !isRemoveBottom.value;
+}
+
 </script>
 <style lang='scss'>
 #gltf {

src/views/bim/bimHome/index.vue

@@ -24,14 +24,15 @@
     <!-- 实时数据 -->
     <RealData v-if="activateIndex == 2" @openDialog="openDialog1"></RealData>
     <!-- 资产信息弹出框 -->
-    <el-dialog v-model="dialogVisible" title="资产信息" width="1200px" append-to-body>
+    <el-dialog v-model="dialogVisible" title="资产信息" width="1200px" custom-class="bim-dialog" append-to-body>
       <DeviceInfoDialog @viewDetail="viewDetail"></DeviceInfoDialog>
     </el-dialog>
-    <el-dialog v-model="dialogVisible1" title="实时数据" width="1200px" append-to-body>
+    <el-dialog v-model="dialogVisible1" title="实时数据" width="1200px" custom-class="bim-dialog" append-to-body>
       <RealInfoDialog></RealInfoDialog>
     </el-dialog>
     <!-- 资产详情 -->
-    <el-dialog v-model="dialogVisible2" v-if="dialogVisible2" title="资产详情" width="1500px" append-to-body>
+    <el-dialog v-model="dialogVisible2" v-if="dialogVisible2" title="资产详情" width="1500px" custom-class="bim-dialog"
+      append-to-body>
       <DeviceDetial></DeviceDetial>
     </el-dialog>
 
@@ -60,7 +61,7 @@ const data = reactive({
   equimentInfo: {},
 });
 
-const { sceneUrl,equimentInfo} = toRefs(data);
+const { sceneUrl, equimentInfo } = toRefs(data);
 const dialogVisible = ref(false);
 const dialogVisible1 = ref(false);
 const dialogVisible2 = ref(false);

src/views/components/Bar.vue

@@ -12,7 +12,7 @@ onMounted(() => {
         getCharts();
     })
 })
-
+var colors = ['#24CDFB','#1890FF'];
 const getCharts = () => {
     var dom = document.getElementById("bar");
     if (dom) {
@@ -59,7 +59,11 @@ const getCharts = () => {
                     },
                     splitLine: {
                         // 网格线
-                        show: false,
+                        lineStyle: {
+                            type: "dotted", //设置网格线类型 dotted：虚线 solid:实线
+                            color: "#29507E",
+                        },
+                        show: true,
                     },
                     show: true,
                     maxInterval: 50000  //值坐标最大的数值间隔 最小同样min
@@ -88,7 +92,8 @@ const getCharts = () => {
                 {
                     name: '2023资产',
                     type: 'bar',
-                    barWidth: 36,
+                    color: colors[0],
+                    barWidth: 20,
                     // xAxisIndex:1,
                     data: [182, 234, 290, 104, 131, 100],
                     itemStyle: {
@@ -96,7 +101,7 @@ const getCharts = () => {
                             label: {
                                 show: true,
                                 textStyle: {
-                                    color: "#5470c6",
+                                    color: colors[0],
                                 },
                                 position: "right",
                             },
@@ -106,15 +111,16 @@ const getCharts = () => {
                 {
                     name: '2022资产',
                     type: 'bar',
-                    barWidth: 16,
+                    color: colors[1],
+                    barWidth: 20,
                     // xAxisIndex:1,
-                    data: [193, 234, 310, 121, 134, 681],
+                    data: [93, 300, 30, 530, 34, 681],
                     itemStyle: {
                         normal: {
                             label: {
                                 show: true,
                                 textStyle: {
-                                    color: "#91cc75",
+                                    color: colors[1],
                                 },
                                 position: "right",
                             },

src/views/components/Device.vue

@@ -2,7 +2,11 @@
     <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">
+                <!-- <img :src="item.imgUrl" alt="" width="60"> -->
+                <el-icon size="60" color="#1890ff" v-if="index==0"><Suitcase /></el-icon>
+                <el-icon size="60" color="#1890ff" v-if="index==1"><TakeawayBox /></el-icon>
+                <el-icon size="60" color="#1890ff" v-if="index==2"><Box /></el-icon>
+                <el-icon size="60" color="#1890ff" v-if="index==3"><SoldOut /></el-icon>
                 <font class="num" :style="{ 'color': item.color }">{{ item.num }}</font>
                 <span>{{ item.name }}</span>
             </div>
@@ -18,26 +22,30 @@ const deviceList = [
     {
         name: '资产总数',
         num: '8909',
-        color: '#0f40f5',
+        color: '#fff',
-        imgUrl: IconPd
+        imgUrl: IconPd,
+        icon: 'Suitcase'
     },
     {
         name: '维修未完成总数',
         num: '89',
-        color: '#e99f81',
+        color: '#fff',
-        imgUrl: IconWx
+        imgUrl: IconWx,
+        icon: 'TakeawayBox'
     },
     {
         name: '待巡检执行总数',
         num: '58',
-        color: '#81b337',
+        color: '#fff',
-        imgUrl: IconXj
+        imgUrl: IconXj,
+        icon: 'Box'
     },
     {
         name: '待保养执行总数',
         num: '46',
-        color: '#347caf',
+        color: '#fff',
-        imgUrl: IconBy
+        imgUrl: IconBy,
+        icon: 'SoldOut'
     }
 ]
 </script>
@@ -61,7 +69,7 @@ const deviceList = [
             color: #fff;
 
             .num {
-                font-size: 48px;
+                font-size: 36px;
             }
         }
     }

src/views/components/Line.vue

@@ -11,7 +11,7 @@ onMounted(() => {
         getCharts();
     })
 })
-
+var colors = ['#1890FF','#24CDFB'];
 const getCharts = () => {
     var dom = document.getElementById("line");
     if (dom) {
@@ -55,7 +55,11 @@ const getCharts = () => {
                     },
                     splitLine: {
                         // 网格线
-                        show: false,
+                        lineStyle: {
+                            type: "dotted", //设置网格线类型 dotted：虚线 solid:实线
+                            color: "#29507E",
+                        },
+                        show: true,
                     },
                     axisLabel: {
                         textStyle: {
@@ -102,6 +106,7 @@ const getCharts = () => {
                 {
                     name: '生产数据',
                     type: 'bar',
+                    color: colors[0],
                     barWidth: 18,
                     // xAxisIndex:1,
                     data: [182, 234, 290, 104, 131, 100, 182, 234, 290, 104, 131, 100],
@@ -110,7 +115,7 @@ const getCharts = () => {
                             label: {
                                 show: true,
                                 textStyle: {
-                                    color: "#5470c6",
+                                    color: colors[0],
                                 },
                                 position: "top",
                             },
@@ -120,6 +125,7 @@ const getCharts = () => {
                 {
                     name: '销售数据',
                     type: 'line',
+                    color: colors[1],
                     // xAxisIndex:1,
                     data: [193, 234, 310, 121, 134, 181, 193, 234, 310, 121, 134, 181],
                     itemStyle: {
@@ -127,7 +133,7 @@ const getCharts = () => {
                             label: {
                                 show: true,
                                 textStyle: {
-                                    color: "#91cc75",
+                                    color: colors[1],
                                 },
                                 position: "top",
                             },

src/views/components/Pie.vue

@@ -12,80 +12,239 @@ onMounted(() => {
         getCharts();
     })
 })
-
+var wei = 10;
+var yi = 20;
+var doing = 8;
+var total = 38;
 const getCharts = () => {
     var dom = document.getElementById("pie");
     if (dom) {
         // 手动移除该属性
         dom.removeAttribute('_echarts_instance_')
         var myChart = echarts.init(dom);
-        let option = {
+        var option = {
-            // backgroundColor: 'white',
             tooltip: {
-                show: true,
+                trigger: "item",
-                trigger: 'item',
+                confine: true, //浮窗限制在图表内
-                //{a}(系列名)，{b}(数据项名),{c}(数值),{d}(百分比)
+                backgroundColor: "#1E2857", //通过设置rgba调节背景颜色与透明度
-                formatter: "{a} <br/>{b} : {c}",
+                borderColor: "#1E2857",
-                backgroundColor: "rgba(1, 13, 19, 0.5)",
+                color: "#fff",
-                borderWidth: 0,
                 textStyle: {
-                    color: "rgba(212, 232, 254, 1)",
+                    color: "#fff",
-                    // fontSize: fontChart(0.24),
+                },
+                axisPointer: {
+                    type: "cross",
+                    label: {
+                        backgroundColor: "#6a7985",
+                    },
+                },
+                // {a}, {b}，{c}，{d}，{e}， {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
+                //formatter: "{a} <br/>{b} : {c} ({d}%)",
+                formatter(data) {
+                    return (
+                        data.name +
+                        " : " +
+                        data.value +
+                        " (" +
+                        data.percent.toFixed(1) +
+                        "%)"
+                    );
+                },
+            },
+            grid: {
+                top: "0%",
+                left: "0%",
+                right: "0%",
+                bottom: "0%",
+            },
+            graphic: {
+                elements: [
+                    {
+                        type: "text",
+                        left: "27%",
+                        top: "middle",
+                        style: {
+                            text: total + "\n" + "总数",
+                            fill: "#fff",
+                        },
+                    },
+                ],
+            },
+            legend: [
+                {
+                    top: "25%",
+                    left: "60%",
+                    itemWidth: 12,
+                    itemHeight: 5,
+                    orient: "vertical",
+                    itemGap: 30,
+                    data: ["数据一"],
+                    formatter: () => {
+                        const arr = [
+                            "{b|" + "数据一" + "}\xa0\xa0\xa0",
+                            "{a|" + wei + "}\xa0\xa0\xa0\xa0",
+                        ];
+                        return arr.join("");
+                    },
+                    textStyle: {
+                        rich: {
+                            a: {
+                                fontSize: 18,
+                                color: "#FD2525",
+                            },
+                            b: {
+                                fontSize: 16,
+                                color: "#fff",
+                            },
+                        },
+                    },
+                },
+                {
+                    top: "45%",
+                    left: "60%",
+                    itemWidth: 12,
+                    itemHeight: 5,
+                    orient: "vertical",
+                    itemGap: 30,
+                    data: ["数据二"],
+                    formatter: () => {
+                        const arr = [
+                            "{b|" + "数据二" + "}\xa0\xa0\xa0",
+                            "{a|" + yi + "}\xa0\xa0\xa0\xa0",
+                        ];
+                        return arr.join("");
+                    },
+                    textStyle: {
+                        rich: {
+                            a: {
+                                fontSize: 18,
+                                color: "#33AAFF",
+                            },
+                            b: {
+                                fontSize: 16,
+                                color: "#fff",
+                            },
+                        },
+                    },
+                },
+                {
+                    top: "65%",
+                    left: "60%",
+                    itemWidth: 12,
+                    itemHeight: 5,
+                    orient: "vertical",
+                    itemGap: 30,
+                    data: ["数据三"],
+                    formatter: () => {
+                        const arr = [
+                            "{b|" + "数据三" + "}\xa0\xa0\xa0",
+                            "{a|" + doing + "}\xa0\xa0\xa0\xa0",
+                        ];
+                        return arr.join("");
+                    },
+                    textStyle: {
+                        rich: {
+                            a: {
+                                fontSize: 18,
+                                color: "#E7BF69",
+                            },
+                            b: {
+                                fontSize: 16,
+                                color: "#fff",
+                            },
+                        },
+                    },
+                },
+            ],
+            series: [
+                //内圈阴影
+                {
+                    name: "",
+                    type: "pie",
+                    radius: ["40%", "60%"],
+                    center: ["30%", "50%"],
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: false,
+                        position: "center",
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    z: 10,
+                    emphasis: {
+                        scale: false, //鼠标划上不展示高亮放大效果
+                    },
+                    data: [
+                        {
+                            value: wei,
+                            name: "数据一",
+                            itemStyle: {
+                                borderRadius: 10,
+                                color: "#FD2525",
+                                opacity: 0.6,
+                            },
+                        },
+                        {
+                            value: yi,
+                            name: "数据二",
+                            itemStyle: {
+                                color: "#1f5189",
+                                opacity: 0.6,
+                            },
+                        },
+                        {
+                            value: doing,
+                            name: "数据三",
+                            itemStyle: {
+                                color: "#e7bf69",
+                                opacity: 0.8,
+                            },
+                        },
+                    ],
+                },
+                //外圈
+                {
+                    name: "",
+                    type: "pie",
+                    radius: ["50%", "60%"],
+                    center: ["30%", "50%"],
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: false,
+                        position: "center",
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    z: 11,
+                    data: [
+                        {
+                            value: wei,
+                            name: "数据一",
+                            itemStyle: {
+                                color: "#aa2b3d",
                             },
                         },
 
-            legend: {
-                // orient: 'vertical',
-                left: 'center',
-                top: '5%',
-                itemWidth: 15,
-                itemHeight: 10,
-                itemGap: 25,
-                borderRadius: 4,
-                textStyle: {
-                    color: "#ffff",
-                    fontFamily: "Alibaba PuHuiTi",
-                    fontSize: 14,
-                    fontWeight: 400,
-                },
-            },
-            series: [
                         {
-                    name: '',
+                            value: yi,
-                    type: 'pie',
+                            name: "数据二",
-                    radius: '50%',
-                    center: ['50%', '50%'],
-                    data: [
-                        { value: 1048, name: '数据一' },
-                        { value: 735, name: '数据二' },
-                        { value: 580, name: '数据三' },
-                    ],
-                    label: {
-                        normal: {
-                            formatter: ["{b|{b}}", "{c|{c}}"].join("\n"),
-                            rich: {
-                                c: {
-                                    color: "inherit",
-                                    fontSize: 20,
-                                    fontWeight: "bold",
-                                    lineHeight: 5,
-                                },
-                                b: {
-                                    fontSize: 15,
-                                    height: 40,
-                                },
-                            },
-                        },
-                    },
-                    emphasis: {
                             itemStyle: {
-                            shadowBlur: 10,
+                                color: "#1f5189",
-                            shadowOffsetX: 0,
-                            shadowColor: 'rgba(0, 0, 0, 0.5)'
-                        }
-                    }
                             },
-            ]
+                        },
+
+                        {
+                            value: doing,
+                            name: "数据三",
+                            itemStyle: {
+                                color: "#655e64",
+                            },
+                        },
+                    ],
+                },
+            ],
         };
 
         option && myChart.setOption(option);
@@ -95,6 +254,6 @@ const getCharts = () => {
 <style lang="scss" scoped>
 #pie {
     width: 100%;
-    height:100%;
+    height: 100%;
 }
 </style>

src/views/components/xtBar.vue

@@ -59,7 +59,11 @@ const getCharts = () => {
                     },
                     splitLine: {
                         // 网格线
-                        show: false,
+                        lineStyle: {
+                            type: "dotted", //设置网格线类型 dotted：虚线 solid:实线
+                            color: "#29507E",
+                        },
+                        show: true,
                     },
                     show: true,
                     maxInterval: 50000  //值坐标最大的数值间隔 最小同样min
@@ -68,7 +72,7 @@ const getCharts = () => {
             yAxis: [
                 {
                     type: 'category',
-                    data: ['0-40', '41-50', '51-60', '61-70', '71-80', '81-90', '91-100', '101-110', '111-120','120以上'],
+                    data: ['0-40', '41-50', '51-60', '61-70', '71-80', '81-90', '91-100', '101-110', '111-120', '120以上'],
                     axisLine: {
                         show: true,
                         lineStyle: {
@@ -89,14 +93,30 @@ const getCharts = () => {
                     name: '系统数据分析',
                     type: 'bar',
                     barWidth: 16,
+                    color: new echarts.graphic.LinearGradient( // 右下左上
+                        0,
+                        0,
+                        1,
+                        1,
+                        [{
+                            offset: 0,
+                            color: "#146fdd" //  左边的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: "#42bffc" // 右边的颜色
+                        }
+                        ],
+                        false
+                    ),
                     // xAxisIndex:1,
-                    data: [182, 234, 290, 104, 131, 100],
+                    data: [182, 234, 280, 104, 131, 100, 50, 200, 100, 60],
                     itemStyle: {
                         normal: {
                             label: {
                                 show: true,
                                 textStyle: {
-                                    color: "#5470c6",
+                                    color: "#42bffc",
                                 },
                                 position: "right",
                             },
@@ -113,6 +133,6 @@ const getCharts = () => {
 <style lang="scss" scoped>
 #xtbar {
     width: 100%;
-    height:100%;
+    height: 100%;
 }
 </style>

src/views/index.vue

@@ -54,7 +54,7 @@ const gotoPage = (item) => {
     display: flex;
     align-items: center;
     // background: #3d5d9a; 
-    background: #030e23;
+    background: #08376f;
     color: #fff;
     > div {
       width: 260px;
@@ -65,6 +65,7 @@ const gotoPage = (item) => {
       border-right: 1px solid #020c45;
       justify-content: center;
       font-size: 20px;
+      // background: #3d5d9a;
     }
   }
   .home-page {
@@ -84,22 +85,25 @@ const gotoPage = (item) => {
       top: 10px;
       left: 10px;
       padding: 15px;
+      background-image: linear-gradient(to right,rgba(30,45,123,.7),rgba(174,179,249,.1));
     }
     .bar-div {
       position: absolute;
       width: 400px;
-      height: 98%;
+      height: 818px;
       top: 10px;
       right: 10px;
       padding: 15px;
+      background-image: linear-gradient(to left,rgba(30,45,123,.7),rgba(174,179,249,.1));
     }
     .xt-bar-div {
       position: absolute;
       width: 400px;
       height: 460px;
-      top: 370px;
+      bottom: 5px;
       left: 10px;
       padding: 15px;
+      background-image: linear-gradient(to right,rgba(30,45,123,.7),rgba(174,179,249,.1));
     }
     .device-div {
       position: absolute;
@@ -108,16 +112,17 @@ const gotoPage = (item) => {
       width: calc(100% - 840px);
       height: 200px;
       padding: 15px;
-      // background: #b2cae0;
+      background-image: linear-gradient(to bottom,rgba(30,45,123,.7),rgba(174,179,249,.1));
     }
     .line-div {
       position: absolute;
-      bottom: 10px;
+      bottom: 5px;
       left: 420px;
       width: calc(100% - 840px);
       height: 200px;
       padding: 15px;
       // background: #b2cae0;
+      background-image: linear-gradient(to top,rgba(30,45,123,.7),rgba(174,179,249,.1));
     }
   }
 }