Răsfoiți Sursa

首页样式修改,数据交互

ZYZ 1 an în urmă
părinte
comite
c8290b1c87

+ 1 - 1
zkqy-ui/package.json

@@ -64,7 +64,7 @@
     "diagram-js-context-pad": "^1.0.2",
     "diagram-js-grid-bg": "^1.0.3",
     "diagram-js-minimap": "^2.1.1",
-    "echarts": "5.4.0",
+    "echarts": "^5.4.0",
     "element-ui": "2.15.12",
     "fast-xml-parser": "^4.3.2",
     "file-saver": "2.0.5",

+ 19 - 0
zkqy-ui/src/api/asEditor/index.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+//新增JSON数据
+export function addDate(data) {
+    return request({
+      url: '/system/mobilePageData',
+      method: 'post',
+      data: data,
+      baseURL: process.env.VUE_APP_BASE_API3,
+    })
+}
+// 获取JSON
+export function getDate() {
+    return request({
+      url: '/system/mobilePageData/2',
+      method: 'get',
+      baseURL: process.env.VUE_APP_BASE_API3,
+    })
+}

+ 43 - 0
zkqy-ui/src/api/homePage/index.js

@@ -0,0 +1,43 @@
+import request from '@/utils/request'
+
+//工业流&审批流
+export function getProcess() {
+    return request({
+      url: '/statistics/info/getProcessInformation',
+      method: 'get',
+      baseURL: process.env.VUE_APP_BASE_API4,
+    })
+}
+
+//登录次数统计
+export function getLogin() {
+   return request({
+     url: '/statistics/info/getLoginInformationStatistics',
+     method: 'get',
+   })
+}
+
+//登录统计信息
+export function getOperation() {
+    return request({
+      url: '/statistics/info/getOperationInformationStatistics',
+      method: 'get',
+    })
+}
+
+//数据建模数量
+export function getData() {
+    return request({
+      url: '/statistics/info/getDataModelingStatistics',
+      method: 'get',
+      baseURL: process.env.VUE_APP_BASE_API2,
+    })
+}
+//表单表格
+export function getTabular() {
+    return request({
+      url: '/statistics/info/getTabularStatistics',
+      method: 'get',
+      baseURL: process.env.VUE_APP_BASE_API3,
+    })
+}

+ 5 - 4
zkqy-ui/src/layout/components/AppMain.vue

@@ -30,10 +30,11 @@ export default {
 .app-main {
   /* 50= navbar  50  */
   min-height: calc(100vh - 50px);
-  //+++++++++++
+  /* //+++++++++++ */
   width: 100%;
   position: relative;
   overflow: hidden;
+  background-color:  #EFF2F7;
 }
 
 .fixed-header + .app-main {
@@ -45,19 +46,19 @@ export default {
     /* 84 = navbar + tags-view = 50 + 34 */
     min-height: calc(100vh - 140px);
 
-    //+++++++++++
+    /* //+++++++++++ */
     /* position:fixed; */
   }
 
   .fixed-header + .app-main {
-    // padding-top: 84px;
+    /* // padding-top: 84px; */
     padding-top: 34px;
   }
 }
 </style>
 
 <style lang="scss">
-// fix css style bug in open el-dialog
+/* // fix css style bug in open el-dialog */
 .el-popup-parent--hidden {
   .fixed-header {
     padding-right: 6px;

+ 5 - 4
zkqy-ui/src/layout/components/TagsView/index.vue

@@ -279,9 +279,10 @@ export default {
 .tags-view-container {
   height: 34px;
   width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  background:  #EFF2F7;
+  /* background: #fff; */
+  /* border-bottom: 1px solid #d8dce5; */
+  /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04); */
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -344,7 +345,7 @@ export default {
 </style>
 
 <style lang="scss">
-//reset element css of el-icon-close
+/* //reset element css of el-icon-close */
 .tags-view-wrapper {
   .tags-view-item {
     .el-icon-close {

+ 11 - 9
zkqy-ui/src/layout/index.vue

@@ -15,10 +15,10 @@
             trigger="click"
           >
             <div class="avatar-wrapper">
-              <img :src="avatar" class="user-avatar"/>
               <span style="">
-                <button class="jianbiase">{{ username || "默认用户" }}</button>
+                <span class="jianbiase">{{ username || "默认用户" }}</span>
               </span>
+              <img :src="avatar" class="user-avatar"/>
               <!-- <i class="el-icon-caret-bottom" /> -->
             </div>
             <el-dropdown-menu slot="dropdown" style="margin-top: -20px">
@@ -208,7 +208,8 @@ export default {
   width: 100%;
   z-index: 1000;
   background: #fff;
-  border-bottom: 1px solid #6f7af3;
+  /* border-bottom: 1px solid #6f7af3; */
+  border-bottom: 1px solid #fff;
   box-shadow: 0px 0px 2px 0px #222653;
 }
 
@@ -216,19 +217,20 @@ export default {
   /* width: 120px; */
   height: 37px;
   /* height: 25px; */
-  background: linear-gradient(
+ /*  background: linear-gradient(
       128.13deg,
       rgba(82, 79, 255, 1) 0%,
       rgba(255, 74, 74, 1) 100%
-  );
-  box-shadow: 0px 4px 16px rgba(179, 192, 231, 1);
-  border-radius: 27px;
+  ); */
+  /* box-shadow: 0px 4px 16px rgba(179, 192, 231, 1); */
+  /* border-radius: 27px; */
   margin-top: 15px;
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   letter-spacing: 0px;
   line-height: 20.27px;
-  color: rgba(255, 255, 255, 1);
+  /* color: rgba(255, 255, 255, 1); */
+  color: black;
   padding: 0px 20px 0px 25px;
   box-sizing: border-box;
 }

+ 5 - 0
zkqy-ui/src/main.js

@@ -89,6 +89,11 @@ import Directives from '@/utils/directives'
 import '@/assets/iconfont/iconfont.css'
 import '@/assets/iconfont/iconfont.js'
 
+// 引入 echarts
+import * as echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey

+ 1 - 0
zkqy-ui/src/views/asEditor/components/headerTop1/index.vue

@@ -101,6 +101,7 @@ export default {
   cursor: pointer;
   border-bottom: 1px solid #f7f8fa;
   position: relative;
+  left: 41.15%;
   z-index: 10;
   /* 左边 */
   .lef {

+ 3 - 1
zkqy-ui/src/views/asEditor/components/rightslider/decorate/index.vue

@@ -89,9 +89,10 @@
           </div>
         </div>
       </el-form-item>
-
+      
     </el-form>
 
+    
     <!-- 上传图片 -->
     <uploadimg ref="upload" @uploadInformation="uploadInformation" />
   </div>
@@ -275,5 +276,6 @@ export default {
       }
     }
   }
+
 }
 </style>

+ 39 - 6
zkqy-ui/src/views/asEditor/layout/home/home.vue

@@ -35,6 +35,7 @@
 </template>
 
 <script>
+import { getDate } from "@/api/asEditor/index";
 import headerTop1 from '../../components/headerTop1'
 import collect from '../../components/collect'
 import {
@@ -82,7 +83,8 @@ export default {
         bgColor: 'rgba(249, 249, 249, 10)', //背景颜色
         bgImg: '' // 背景图片
       },
-      tota: null
+      tota: null,
+      getJSONList:[]
     }
   },
   activated() {
@@ -107,8 +109,23 @@ export default {
     let miniprogram = window.localStorage.getItem('miniprogram')
     console.log(miniprogram, '-------------------miniprogram')
   },
-  mounted() {},
+  mounted() {
+    this.initData();
+  },
   methods: {
+    initData(){
+      getDate().then(response=>{
+        if(response.code==200){
+          console.log(response.data);
+          this.getJSONList = response.data;
+          console.log(this.getJSONList);
+          console.log(this.getJSONList.component);
+        }else{
+          this.$message.error("获取数据失败")
+        }
+      })
+    },
+    
     onRefresh() {
       setTimeout(() => {
         this.isLoading = false
@@ -130,20 +147,36 @@ export default {
         })
         this.orgid = false
         //  模板数据替换 shopTemplateData.data.shopTemplate 此处可替换成接口
-        let shopTemplateData = {
+        let shopTemplateData = this.getJSONList.map(item => (
+          {
+            code: 0,
+            success: true,
+            error: false ,
+            data:{
+              shopTemplate: {    
+                id: item.id,
+                name: item.name,
+                // templateJson: item.templateJson,
+                // component: item.component, 
+              }
+            },
+            msg: '成功'
+          }
+        ));
+        /* {
           code: 0,
           success: true,
-          error: false /*  */,
+          error: false ,
           data: {
             shopTemplate: {            
               "id": null,
               "name": "页面标题",
               "templateJson": '{"name":"页面标题","details":"","isPerson":false,"isBack":true,"titleHeight":35,"bgColor":"rgba(249, 249, 249, 10)","bgImg":""}',
-              "component": '[{"component":"notice","text":"公告","type":"1-7","active":false,"style":"noticestyle","setStyle":{"text":"公告","noticeText":"哈喽~~~~","backColor":"rgba(233, 252, 255, 1)","textColor":"rgba(30, 144, 255, 1)"}},{"component":"captiontext","text":"标题文字","type":"1-3","active":false,"style":"captiontextsstyle","setStyle":{"text":"标题文字","name":"11111111111","description":"2222222","wordSize":16,"descriptionSize":12,"wordWeight":400,"positions":"left","descriptionWeight":200,"wordColor":"rgba(50, 50, 51, 10)","descriptionColor":"rgba(150, 151, 153, 10)","backColor":"rgba(255, 255, 255, 10)","borderBott":false,"wordHeight":24,"more":{"show":false,"type":1,"text":"查看更多","httpType":10,"http":""}}},{"component":"pictureads","text":"图片广告","type":"1-3","active":true,"style":"pictureadsstyle","setStyle":{"text":"图片广告","swiperType":3,"borderRadius":0,"pageMargin":0,"imageMargin":0,"pagingType":0,"rowindividual":2,"imageList":[{"src":"https://git-1304113371.cos.ap-nanjing.myqcloud.com/020a1051d89f40bd92ad4ce455860ff5.jpg","text":"","http":{}},{"src":"https://git-1304113371.cos.ap-nanjing.myqcloud.com/4dd06e4787714b08a2d56b5528569a67.jpg","text":"","http":{}}]}}]',
+              "component": '[{"component":"notice","text":"公告","type":"1-7","active":false,"style":"noticestyle","setStyle":{"text":"公告","noticeText":"请填写内容,如果过长,将会在手机上滚动显示","backColor":"rgb(255, 248, 233)","textColor":"rgba(100, 101, 102)"}},{"component":"captiontext","text":"标题文字","type":"1-3","active":true,"style":"captiontextsstyle","setStyle":{"text":"标题文字","name":"标题文字","description":"","wordSize":16,"descriptionSize":12,"wordWeight":400,"positions":"left","descriptionWeight":200,"wordColor":"rgba(50, 50, 51, 10)","descriptionColor":"rgba(150, 151, 153, 10)","backColor":"rgba(255, 255, 255, 10)","borderBott":false,"wordHeight":24,"more":{"show":false,"type":1,"text":"查看更多","httpType":10,"http":""}}}]',
             }
           },
           msg: '成功'
-        }
+        } */
         console.log(shopTemplateData, '----------shopTemplateData')
         if (shopTemplateData.code !== 0) {
           return this.$toast(shopTemplateData.msg)

+ 30 - 0
zkqy-ui/src/views/asEditor/layout/home/index.vue

@@ -14,6 +14,9 @@
         <!-- 返回 -->
       </p>
       <div>
+        <el-button @click="addJSONData" type="success"
+          ><i class="el-icon-document-checked el-icon--left"></i>保存</el-button
+        >
         <el-button @click="reloads" type="danger"
           ><i class="el-icon-delete-solid el-icon--left"></i>重置</el-button
         >
@@ -161,6 +164,7 @@
 </template>
 
 <script>
+import { addDate } from "@/api/asEditor/index";
 import sliderassembly from '../../components/sliderassembly/index.vue'
 import headerTop from '../../components/headerTop/index.vue'
 import phoneBottom from '../../components/phoneBottom/index.vue'
@@ -285,8 +289,34 @@ export default {
   },
 
   methods: {
+    // 添加JSON数据
+    addJSONData(){
+      let payload = this.getJSONData();
+      console.log(payload);
+      addDate(payload).then(response=>{
+        if(response.code==200){//成功
+
+        }else{//失败
+          this.$message.error(response.msg)
+        }
+      })
+    },
+    // json生成逻辑
+    getJSONData(){
+      let res={
+        // id:this.id,
+        name:this.pageSetup.name,
+        templateJson:JSON.stringify(this.pageSetup),
+        component:JSON.stringify(this.pageComponents)
+      }
+      return JSON.stringify(res)
+    },
+
+
+
     handleClick(){
       this.dialogVisible = true
+      
        // 确保DOM更新后再进行操作
       this.$nextTick(() => {
         if (this.$refs.content) {

+ 582 - 14
zkqy-ui/src/views/index.vue

@@ -49,14 +49,53 @@
       </el-col>
     </el-row> -->
     <div class="info-content">
-      <div class="header" @click="toPersonalCenter">
-        <img :src="avatar" class="user-avatar" />
-      </div>
+      <!-- <div class="header" @click="toPersonalCenter"> -->
+        <!-- <img :src="avatar" class="user-avatar" /> -->
+      <!-- </div> -->
       <!-- <div class="name">{{ nickName }}</div>
       <div class="tenant-name">{{ tenantName }}</div>
       <div class="date">{{ date }}</div> -->
       <!-- <div class="title">欢迎登录Mec OS 工业应用操作系统</div> -->
-      <div class="title mt20">欢迎登录工业应用引擎</div>
+      <!-- <div class="title mt20">欢迎登录工业应用引擎</div> -->
+
+      <div class="echarts1">
+        <div class="pieChart" ref="pieChart"></div>
+        <div
+          :class="'describe' + (parseInt(index) + 1)"
+          v-for="(item, index) in processList"
+          :key="index"
+        >
+          <P class="text">{{ item.name }}</P>
+          <P class="num">{{ item.value }}</P>
+        </div>
+      </div>
+      <div class="echarts2">
+        <div class="lineChart" ref="lineChart"></div>
+      </div>
+      <div class="echarts3">
+        <p class="title">操作日志</p>
+        <div class="text">
+          <span class="peo">操作人</span>
+          <span class="add">ip</span>
+        </div>
+        <div class="swiper-container">
+          <div class="swiper-scrollbar"></div>
+          <div class="swiper-wrapper">
+            <div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
+              <div >
+                <span class="name">{{ item.oper_name }}</span>
+                <span class="ip">{{ item.oper_ip }}</span>      
+              </div>   
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="echarts4">
+        <div class="gaugeChart" ref="gaugeChart"></div>
+      </div>
+      <div class="echarts5">
+        <div class="barChart" ref="barChart"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -65,11 +104,53 @@
 import { formatDate } from "@/utils";
 import { getToken } from "@/utils/auth";
 import { mapGetters, mapState } from "vuex";
+import 'swiper/css/swiper.css'; 
+import Swiper from 'swiper';
+import {
+  getProcess,
+  getOperation,
+  getLogin,
+  getTabular,
+  getData,
+} from "@/api/homePage/index";
 
 export default {
   name: "Index",
   data() {
     return {
+      chartObj: {
+        myChart1: null,
+        myChart2: null,
+        myChart3: null,
+        myChart4: null,
+      },
+      processList: [],
+      swiperList: [
+        /* {
+          name: "111",
+          ip: "192.168.1.1"
+        },
+        {
+          name: "222",
+          ip: "192.168.1.2"
+        },
+        {
+          name: "333",
+          ip: "192.168.1.3"
+        },
+        {
+          name: "444",
+          ip: "192.168.1.4"
+        },
+        {
+          name: "555",
+          ip: "192.168.1.5"
+        },
+        {
+          name: "666",
+          ip: "192.168.1.6"
+        }, */
+      ],
       // 用户导入参数
       upload: {
         // 是否显示弹出层(用户导入)
@@ -89,7 +170,358 @@ export default {
       version: "3.8.5",
     };
   },
+  mounted() {
+    // 初始化 echarts
+    this.initChart1();
+    this.initChart2();
+    this.initChart3();
+    this.initChart4();
+
+    this.initData();
+  },
   methods: {
+    initData() {
+      //工业流&审批流
+      getProcess().then((response) => {
+        if(response.code == 200){
+          this.processList = response.data;
+          console.log(response.data);
+          this.chartObj.myChart1.setOption({
+            series: [
+              {
+                data: response.data
+              }
+            ]
+          })
+        } else {
+          console.log(response);
+          this.$message.error("获取数据失败");
+        }
+      })
+      
+      //登录次数统计
+      getLogin().then(response => {
+        if(response.code == 200){
+          let xAxisData = response.data[0].date
+          xAxisData = xAxisData.map(function (dateStr) {
+            var date = new Date(dateStr);
+            return date.getMonth() + 1 + "月" + date.getDate() + "日";
+          });
+          let loginList = response.data.map((item)  => item.name);
+          this.chartObj.myChart2.setOption({
+            xAxis: {
+              data: xAxisData
+            },
+            legend: {
+              data: loginList
+            },
+            series: response.data
+          })
+        } else {
+          console.log(response);
+          this.$message.error("获取数据失败");
+        }
+      })
+
+      //登录统计信息
+      getOperation().then(response => {
+        if(response.code == 200){
+          this.swiperList = response.data;
+          console.log(this.swiperList);
+          this.$nextTick(() => {
+            var swiper = new Swiper(".swiper-container", {
+              direction: "vertical",
+              loop: true,
+              autoplay: {
+                delay: 1000, 
+                disableOnInteraction: false,
+              },
+              scrollbar: {
+                el: ".swiper-scrollbar",
+              },
+              slidesPerView: 3,
+              freeMode: true,
+              // spaceBetween: 1,
+            });
+          });
+        } else {
+          console.log(response);
+          this.$message.error("获取数据失败");
+        }
+      })
+
+      // 表格统计
+      getTabular().then(response => {
+        if(response.code == 200){
+          let tabularList = response.data
+          tabularList.push({ name: '多表数量', value: 30 })
+          let labelList = response.data.map((item) => item.name)
+          this.chartObj.myChart3.setOption({
+            yAxis: {
+              data: labelList, 
+            },
+            series: [
+              {
+                data: response.data
+              }
+            ]
+          })
+        } else {
+          console.log(response);
+          this.$message.error("获取数据失败");
+        }
+      })
+
+      //数据建模数量
+      getData().then(response => {
+        if(response.code == 200){
+          console.log(response.data);
+          this.chartObj.myChart4.setOption({
+            series: [
+              {
+                data: [response.data]
+              }
+            ]
+          })
+        } else {
+          console.log(response);
+          this.$message.error("获取数据失败");
+        }
+      })
+    },
+
+    initChart1() {
+      // 通过 $ref 进行挂载
+      this.chartObj.myChart1 = this.$echarts.init(this.$refs.pieChart);
+      let option = {
+        color: ["#9370db", "#ffd700", "#00ccff", "#ff6600", "#ff9900"],
+        title: {
+          text: '流程统计',
+          left: 'left',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 'normal',
+            color: '#696969'
+          },
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          left: '60%',
+          top: '60%',
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['40%', '100%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              // borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            right: '40%',
+            top: '50%',
+            data: [
+              { value: 10, name: '工艺流' },
+              { value: 20, name: '审批流' },
+            ],
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: false
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 20,
+                fontWeight: 'bold'
+              }
+            }
+          }
+        ]
+      };
+      this.chartObj.myChart1.setOption(option);
+    },
+    
+    initChart2(){
+      this.chartObj.myChart2 = this.$echarts.init(this.$refs.lineChart);
+      let option = {
+        color: ["#FF88E0", "#9FE080"],
+        title: {
+          text: '用户登录统计',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 'normal',
+            color: '#696969'
+          },
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['客户端11', '工具端11']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          top: '20%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [
+                  '01\nMon', '02\nTue', '03\nWed', '04\nThu', '05\nFri', '06\nSat', '07\nSun',
+                  '08\nMon', '09\nTue', '10\nWed', '11\nThu', '12\nFri', '13\nSat', '14\nSun',
+                  '15\nMon', '16\nTue', '17\nWed', '18\nThu', '19\nFri', '20\nSat', '21\nSun',
+                  '22\nMon', '23\nTue', '24\nWed', '25\nThu', '26\nFri', '27\nSat', '28\nSun',
+                  '29\nMon', '30\nTue', 
+                ]
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '客户端',
+            type: 'line',
+            smooth: true,
+            data: [10, 23, 42, 13, 30, 25, 40, 30, 42, 55, 40, 28, 20, 30, 45, 25, 20, 30, 40, 33, 35, 40, 46, 31, 13, 34, 20, 10, 36, 43]
+          },
+          {
+            name: '工具端',
+            type: 'line',
+            smooth: true,
+            data: [20, 30, 29, 40, 55, 33, 30, 26, 36, 45, 50, 34, 38, 25, 28, 43, 16, 30, 45, 52, 40, 46, 33, 57, 50, 33, 40, 59, 56, 56]
+          },
+        ]
+      }
+      this.chartObj.myChart2.setOption(option);
+    },
+
+    initChart3(){
+      this.chartObj.myChart3 = this.$echarts.init(this.$refs.gaugeChart);
+      let option = {
+        color: ["#00ccff", "#ff6600", "#ff9900","#9370db", "#ffd700"],
+        title: {
+          text: '表格统计',
+          left: 'left',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 'normal',
+            color: '#696969'
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        grid: {
+          left: '0%',
+          right: '3%',
+          top: '20%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          nameLocation: 'middle',
+          nameTextStyle: {
+            align: 'center'
+          },
+          splitLine: {
+            show: false
+          },
+        },
+        
+        yAxis: {
+          type: 'category',
+          data: ['表单', '表格', '三级联动', '多表数量'], 
+          inverse: true, // 使类目从右向左排列
+        },
+
+        series: [
+          {
+            type: 'bar',
+            barWidth: '18', 
+            orientation: 'horizontal', 
+            data: [
+              { value: 88, name: '表单' },
+              { value: 66, name: '表格' },
+              { value: 33, name: '三级联动' },
+              { value: 55, name: '多表数量' },
+            ],
+            showBackground: true,
+            backgroundStyle: {
+              color: '#F0F8FF'
+            }
+          }
+        ]
+      }
+      this.chartObj.myChart3.setOption(option);
+    },
+
+    initChart4(){
+      this.chartObj.myChart4 = this.$echarts.init(this.$refs.barChart);
+      let option = {
+        color: ["#5D84FE"],
+        title: {
+          text: '数据建模统计',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 'normal',
+            color: '#696969'
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow"
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: ['数据建模'],
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          max: 100, 
+          interval: 20,
+          splitLine: {
+            show: false // 关闭y轴的水平分割线
+          },
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          top: '30%',
+          bottom: '0%',
+          containLabel: true
+        },
+        series: [
+          {
+            data: [20],
+            type: 'bar',
+            barWidth: '30', // 设置柱体宽度
+            showBackground: true,
+            backgroundStyle: {
+              color: '#E8EFFF'
+            }
+          }
+        ]
+      }
+      this.chartObj.myChart4.setOption(option);
+    },
+
+
     /** 导入按钮操作 */
     handleImport() {
       this.upload.title = "用户导入";
@@ -153,16 +585,152 @@ export default {
 .home {
   position: relative;
   width: 100%;
-  height: 500px;
+  /* height: 500px; */
   .info-content {
-    position: absolute;
-    left: 50%;
-    top: 30%;
-    transform: translateX(-50%);
+    width: 100%;
+    height: 100%;
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    .header {
+    flex-direction: row;
+    flex-wrap: wrap;
+    .echarts1 {
+      position: relative;
+      width: 20%;
+      height: 280px;
+      margin: auto;
+      padding: 20px 15px;
+      box-shadow: 10px 10px 5px #E0E0E0;
+      background-color: #fff;
+      border-radius: 10px;
+      .pieChart {
+        width: 100%;
+        height: 100%;
+      }
+      .describe1 {
+        .text {
+          position: absolute;
+          left: 50px;
+          top: 90px;
+        }
+        .num {
+          position: absolute;
+          font-size: 20px;
+          color: black;
+          left: 63px;
+          top: 55px;
+        }
+      }
+      .describe2 {
+        .text {
+          position: absolute;
+          left: 157px;
+          top: 90px;
+        }
+        .num {
+          position: absolute;
+          font-size: 20px;
+          color: black;
+          left: 170px;
+          top: 55px;
+        }
+      }
+    }
+    .echarts2 {
+      width: 76%;
+      height: 280px;
+      margin: auto;
+      padding: 20px 15px;
+      box-shadow: 10px 10px 5px #E0E0E0;
+      background-color: #fff;
+      border-radius: 10px;
+      margin-right: 30px;
+      .lineChart {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .echarts3 {
+      width: 23%;
+      height: 200px;
+      margin: auto;
+      padding: 20px 15px;
+      box-shadow: 10px 10px 5px #E0E0E0;
+      background-color: #fff;
+      border-radius: 10px;
+      margin-top: 20px;
+      p {
+        margin: 0;
+      }
+      .title {
+        font-size: 16px;
+        color: '#696969'
+      }
+      .text {
+        display: flex;
+        flex-direction: row;
+        margin-top: 10px;
+        .peo {
+          font-size: 14px;
+          color: black;
+          font-weight: bold;
+          margin-left: 20px;
+          margin-right: 120px;
+        }
+        .add {
+          font-size: 14px;
+          color: black;
+          font-weight: bold;
+        }
+      }
+      .swiper-container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        width: 90%;
+        height: 80px;
+        /* overflow: auto; */
+        margin-top: 10px;
+        .name {
+          text-align: center;
+          font-size: 16px;
+          margin-left: 2px;
+          margin-right: 59px;
+        }
+        .ip {
+          text-align: center;
+          font-size: 16px;
+        }
+      }
+    }
+    .echarts4 {
+      width: 48%;
+      height: 200px;
+      margin: auto;
+      padding: 20px 15px;
+      box-shadow: 10px 10px 5px #E0E0E0;
+      background-color: #fff;
+      border-radius: 10px;
+      margin-top: 20px;
+      .gaugeChart {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .echarts5 {
+      width: 25%;
+      height: 200px;
+      margin: auto;
+      padding: 20px 15px;
+      box-shadow: 10px 10px 5px #E0E0E0;
+      background-color: #fff;
+      border-radius: 10px;
+      margin-top: 20px;
+      margin-right: 30px;
+      .barChart {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    /* .header {
       white-space: nowrap;
       margin-bottom: 5px;
       cursor: pointer;
@@ -170,7 +738,7 @@ export default {
         width: 160px;
         border-radius: 50%;
       }
-    }
+    } */
     .name {
       font-size: 30px;
       margin-bottom: 5px;
@@ -182,7 +750,7 @@ export default {
       margin-bottom: 10px;
     }
     .title {
-      // font-size: 16px;
+      /* // font-size: 16px; */
       font-size: 20px;
     }
   }