fix：首页背景调整，路面病害对比修改

src/api/xj/defect.js

@@ -1,44 +1,53 @@
-import request from '@/utils/request'
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-08 09:26:24
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-05 13:40:07
+ * @FilePath: \znxjxt-ui\src\api\xj\defect.js
+ * @Description: 巡检信息-病害管理接口
+ */
+import request from "@/utils/request";
 
 // 查询病害日志列表
 export function listDefect(query) {
   return request({
-    url: '/xj/defect/list',
-    method: 'get',
-    params: query
-  })
+    url: "/xj/defect/list",
+    method: "get",
+    params: query,
+  });
 }
 
 // 查询病害日志详细
 export function getDefect(id) {
   return request({
-    url: '/xj/defect/' + id,
-    method: 'get'
-  })
+    url: "/xj/defect/" + id,
+    method: "get",
+  });
 }
 
 // 新增病害日志
 export function addDefect(data) {
   return request({
-    url: '/xj/defect',
-    method: 'post',
-    data: data
-  })
+    url: "/xj/defect",
+    method: "post",
+    data: data,
+  });
 }
 
 // 修改病害日志
 export function updateDefect(data) {
   return request({
-    url: '/xj/defect',
-    method: 'put',
-    data: data
-  })
+    url: "/xj/defect",
+    method: "put",
+    data: data,
+  });
 }
 
 // 删除病害日志
 export function delDefect(id) {
   return request({
-    url: '/xj/defect/' + id,
-    method: 'delete'
-  })
+    url: "/xj/defect/" + id,
+    method: "delete",
+  });
 }
+

src/api/xj/disease.js

@@ -2,7 +2,7 @@
  * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
  * @Date: 2024-10-08 09:26:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-12 14:30:08
+ * @LastEditTime: 2024-11-05 13:54:44
  * @FilePath: \znxjxt-ui\src\api\xj\disease.js
  * @Description: 巡检信息-病害管理
  */
@@ -120,3 +120,23 @@ export function splitDefect(data) {
     data,
   });
 }
+
+
+// 根据病害id查询快照id下拉
+export function getDefectById(id) {
+  return request({
+    url: "/xj/defect/getDefectDetailDropDownList",
+    method: "get",
+    params: { id },
+  });
+}
+
+
+// 根据快照id查询查询具体数据
+export function getDetailsBySnapShotId(snapShotId) {
+  return request({
+    url: "/xj/defect/getDefectBySnapShotId",
+    method: "get",
+    params: { snapShotId },
+  });
+}

src/api/xj/surface.js

@@ -0,0 +1,37 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-05 14:40:14
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-05 14:59:15
+ * @FilePath: \znxjxt-ui\src\api\xj\surface.js
+ * @Description: 路面病害对比
+ */
+
+import request from "@/utils/request";
+
+// 查询路段下拉数据接口
+export function getSegment() {
+  return request({
+    url: "/api/v2/segment/selectList",
+    method: "post",
+  });
+}
+
+// 病害类型下拉数据
+export function getDefectList(params) {
+    return request({
+      url: "/metadata/defectType",
+      method: "get",
+      params,
+    });
+  }
+
+
+// 获取病害详细数据接口
+export function getCompareList(params) {
+    return request({
+      url: "/xj/defect/historyCompare",
+      method: "get",
+      params,
+    });
+  }

src/views/big-screen/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 11:34:00
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-05 10:23:53
+ * @LastEditTime: 2024-11-06 10:32:20
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -409,7 +409,7 @@ export default {
         {
           name: "沈抚",
           left: "63%",
-          top: "15%",
+          top: "12%",
           tip: "1",
         },
         {
@@ -438,7 +438,7 @@ export default {
         },
         {
           name: "抚顺",
-          left: "75%",
+          left: "56%",
           top: "17%",
           tip: "1",
         },
@@ -468,8 +468,8 @@ export default {
         },
         {
           name: "沈阳",
-          left: "54%",
-          top: "12%",
+          left: "51%",
+          top: "11%",
           tip: "2",
         },
         {
@@ -496,6 +496,12 @@ export default {
           top: "39%",
           tip: "6",
         },
+        {
+          name: "金普",
+          left: "47%",
+          top: "57%",
+          tip: "6",
+        },
       ];
     },
     /* 点击病害筛查 */
@@ -568,7 +574,11 @@ export default {
         const point = new Point(element.geometry);
         const feature = new Feature({
           geometry: point,
-          data: { iconType: element.iconType },
+          data: {
+            iconType: element.iconType,
+            mediaUrl: element.mediaUrl,
+            rect: element.rect,
+          },
           // 自己设置一个标识
           type: "icon",
         });

src/views/index-components/daily-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:12:20
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-30 13:10:04
+ * @LastEditTime: 2024-11-05 11:47:03
  * @FilePath: \znxjxt-ui\src\views\index-components\daily-index.vue
  * @Description: 首页-日常巡查
 -->
@@ -378,8 +378,13 @@ export default {
   .title {
     width: 100%;
     height: 10%;
+    display: flex;
+    align-items: center;
     padding-left: 3rem;
     font-family: "DouYu";
+    background: url("../../assets/index/div-title.png") no-repeat;
+    background-size: 5%;
+    background-position: 0 30%;
   }
 
   .daily-content {
@@ -391,15 +396,18 @@ export default {
     .left {
       width: 20%;
       height: 100%;
+      background: url("../../assets/index/left-bkg.png") no-repeat;
+      background-size: 100%;
 
       .left-div {
         height: 27.5%;
-        width: 100%;
+        width: calc(100% - 2rem);
+        margin: 0 1rem;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        border: 1px red solid;
+        border-bottom: 1px #adc6e5 solid;
 
         .name {
           font-size: 0.8rem;
@@ -421,7 +429,6 @@ export default {
         width: 100%;
         text-align: center;
         line-height: 3rem;
-        border: 1px red solid;
       }
     }
 
@@ -432,7 +439,7 @@ export default {
       > div {
         height: 50%;
         width: 100%;
-        border: 1px red solid;
+        background-color: #ffffff;
       }
     }
   }

src/views/index-components/disease-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:17:58
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-31 09:15:52
+ * @LastEditTime: 2024-11-05 11:51:10
  * @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue
  * @Description: 首页-病害识别
 -->
@@ -362,8 +362,13 @@ export default {
   .title {
     width: 100%;
     height: 10%;
+    display: flex;
+    align-items: center;
     padding-left: 3rem;
     font-family: "DouYu";
+    background: url("../../assets/index/div-title.png") no-repeat;
+    background-size: 5%;
+    background-position: 0 30%;
   }
 
   .disease-content {
@@ -375,15 +380,17 @@ export default {
     .left {
       width: 20%;
       height: 100%;
+      background: url("../../assets/index/left-bkg.png") no-repeat;
+      background-size: 100%;
 
       > div {
         height: 50%;
-        width: 100%;
+        width: calc(100% - 2rem);
+        margin: 0 1rem;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        border: 1px red solid;
 
         .name {
           font-size: 0.8rem;
@@ -398,6 +405,10 @@ export default {
             font-size: 1.5rem;
           }
         }
+
+        &:nth-child(1) {
+          border-bottom: 1px #adc6e5 solid;
+        }
       }
     }
 
@@ -418,9 +429,8 @@ export default {
         height: 50%;
         width: 100%;
         display: flex;
-
         position: relative;
-        border: 1px red solid;
+        background-color: #ffffff;
 
         .distribution-div {
           width: 30%;

src/views/index-components/road-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:23:44
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-30 14:15:44
+ * @LastEditTime: 2024-11-06 10:48:26
  * @FilePath: \znxjxt-ui\src\views\index-components\road-index.vue
  * @Description: 首页-公路资产
 -->
@@ -193,8 +193,13 @@ export default {
   .title {
     width: 100%;
     height: 10%;
+    display: flex;
+    align-items: center;
     padding-left: 3rem;
     font-family: "DouYu";
+    background: url("../../assets/index/div-title.png") no-repeat;
+    background-size: 5%;
+    background-position: 0 30%;
   }
 
   .top-div {
@@ -202,6 +207,9 @@ export default {
     height: 10%;
     display: flex;
     align-items: center;
+    padding-left: 3rem;
+    background: url("../../assets/index/top-div-title.png") no-repeat;
+    background-size: 100% 100%;
 
     a {
       margin-top: 0.4rem;
@@ -212,6 +220,7 @@ export default {
       width: 1.2rem;
       margin: 0 0.1rem;
       font-size: 1.5rem;
+      color: #388bd8;
       background: #ffffff;
       box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.16);
       border-radius: 3px 3px 3px 3px;
@@ -226,17 +235,57 @@ export default {
     flex-wrap: wrap;
     justify-content: space-around;
     align-items: flex-end;
-    border: 1px solid red;
 
     .middle-item {
-      width: 21%;
+      width: 24%;
       height: 40%;
-      padding: 0 0.5rem 0 2.5rem;
+      padding: 0 0.5rem 0 3rem;
       display: flex;
       align-items: center;
       justify-content: space-between;
       background-color: #f2f9fe;
       border-radius: 0.2rem;
+      font-size: 0.9rem;
+    }
+
+    .middle-item-0 {
+      background: url("../../assets/index/middle-item-0.png") no-repeat;
+      background-size: 120% 100%;
+    }
+
+    .middle-item-1 {
+      background: url("../../assets/index/middle-item-1.png") no-repeat;
+      background-size: 120% 100%;
+    }
+
+    .middle-item-2 {
+      background: url("../../assets/index/middle-item-2.png") no-repeat;
+      background-size: 120% 100%;
+    }
+
+    .middle-item-3 {
+      background: url("../../assets/index/middle-item-3.png") no-repeat;
+      background-size: 120% 100%;
+    }
+
+    .middle-item-4 {
+      background: url("../../assets/index/middle-item-4.png") no-repeat;
+      background-size: 120% 100%;
+    }
+
+    .middle-item-5 {
+      background: url("../../assets/index/middle-item-5.png") no-repeat;
+      background-size: 120% 100%;
+    }
+
+    .middle-item-6 {
+      background: url("../../assets/index/middle-item-6.png") no-repeat;
+      background-size: 120% 100%;
+    }
+
+    .middle-item-7 {
+      background: url("../../assets/index/middle-item-7.png") no-repeat;
+      background-size: 120% 100%;
     }
   }
 

src/views/index-components/traffic-index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-29 15:30:35
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-30 14:42:47
+ * @LastEditTime: 2024-11-05 11:46:15
  * @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue
  * @Description: 首页-路况评定
 -->
@@ -221,8 +221,13 @@ export default {
   .title {
     width: 100%;
     height: 10%;
+    display: flex;
+    align-items: center;
     padding-left: 3rem;
     font-family: "DouYu";
+    background: url("../../assets/index/div-title.png") no-repeat;
+    background-size: 5%;
+    background-position: 0 30%;
   }
 
   .traffic-table {

src/views/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-08 09:26:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-29 15:30:19
+ * @LastEditTime: 2024-11-06 10:50:32
  * @FilePath: \znxjxt-ui\src\views\index.vue
  * @Description: 系统首页
 -->
@@ -92,13 +92,13 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-around;
-  border: 1px salmon solid;
+  background: url("../assets/index/top-content.png") no-repeat;
+  background-size: 100%;
 
   .top-div {
     width: 22%;
     height: 80%;
     padding: 1.5rem;
-    background-color: aqua;
 
     .name {
       font-family: "DouYu";
@@ -112,6 +112,26 @@ export default {
       }
     }
   }
+
+  .top-div-0 {
+    background: url("../assets/index/top-div-0.png") no-repeat;
+    background-size: 100%;
+  }
+
+  .top-div-1 {
+    background: url("../assets/index/top-div-1.png") no-repeat;
+    background-size: 100%;
+  }
+
+  .top-div-2 {
+    background: url("../assets/index/top-div-2.png") no-repeat;
+    background-size: 100%;
+  }
+
+  .top-div-3 {
+    background: url("../assets/index/top-div-3.png") no-repeat;
+    background-size: 100%;
+  }
 }
 
 .middle-content {
@@ -119,14 +139,22 @@ export default {
   height: 60%;
   display: flex;
   justify-content: space-between;
-  border: 1px red solid;
 
   .daily-content,
   .disease-content {
     width: 49.5%;
     height: calc(100% - 1rem);
     margin-top: 1rem;
-    border: 1px blue solid;
+  }
+
+  .daily-content {
+    background: url("../assets/index/daily-content.png") no-repeat;
+    background-size: 100%;
+  }
+
+  .disease-content {
+    background: url("../assets/index/disease-content.png") no-repeat;
+    background-size: 107% 100%;
   }
 }
 
@@ -135,14 +163,14 @@ export default {
   height: 60%;
   display: flex;
   justify-content: space-between;
-  border: 1px red solid;
 
   .road-content,
   .traffic-content {
     width: 49.5%;
     height: calc(100% - 1rem);
     margin-top: 1rem;
-    border: 1px blue solid;
+    background: url("../assets/index/road-content.png") no-repeat;
+    background-size: 112% 100%;
   }
 }
 </style>

src/views/xj/inspection/disease-management/index.vue

@@ -2,7 +2,7 @@
  * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
  * @Date: 2024-10-08 10:58:25
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-05 09:21:16
+ * @LastEditTime: 2024-11-05 15:05:42
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management .vue
  * @Description: 巡检信息管理-病害管理
 -->
@@ -521,9 +521,26 @@
     >
       <div>
         <!-- 上半部分 -->
-        <div style="display: flex; height: 50%">
+        <div style="display: flex; flex-direction: column; height: 50%">
+          <!-- 下拉选择框 -->
+          <div>
+            <el-select
+              v-model="viewCheck"
+              @change="changeView"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in viewOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div style="display: flex">
             <!-- 左侧病害信息 -->
-          <div style="flex: 1; padding: 10px">
+            <div style="width: 50%; padding: 10px">
               <p>
                 上报日期：{{ new Date(viewForm.createdTime).toLocaleString() }}
               </p>
@@ -536,7 +553,7 @@
             </div>
 
             <!-- 右侧图片展示 -->
-          <div style="width: 27rem; padding: 10px">
+            <div style="width: 50%; padding: 10px">
               <el-carousel class="view-carousel" height="15rem">
                 <el-carousel-item
                   v-for="(img, index) in viewForm.media"
@@ -547,6 +564,7 @@
               </el-carousel>
             </div>
           </div>
+        </div>
 
         <!-- 下半部分显示天地图 -->
         <div id="viewMap" style="height: 300px; margin-top: 20px"></div>
@@ -615,6 +633,8 @@ import {
   getDefectStatus,
   changeDefectStatus,
   splitDefect,
+  getDefectById,
+  getDetailsBySnapShotId,
 } from "@/api/xj/disease";
 import { getToken } from "@/utils/auth";
 import MergeDialog from "./components/merge-dialog.vue";
@@ -755,6 +775,10 @@ export default {
       defectStatus: [],
       // 新增/编辑打点数组
       markers: [],
+      // 查看弹窗选择绑定
+      viewCheck: "",
+      // 查看弹窗下拉数据绑定
+      viewOptions: [],
       // 查看弹窗信息绑定
       viewForm: {},
       // 地图中心点
@@ -1157,6 +1181,8 @@ export default {
     /* 点击行列表查看事件 */
     viewDefect(defect) {
       // this.loadDefect(defect.id);
+      this.getSnapShotIdList(defect.id);
+      this.viewCheck = defect.snapshotId;
       this.openViewDialog = true;
       this.viewForm = defect;
       this.$nextTick(() => {
@@ -1177,6 +1203,24 @@ export default {
       });
     },
 
+    /* 根据病害id获取所有下拉快照数据 */
+    getSnapShotIdList(id) {
+      getDefectById(id).then(({ code, data }) => {
+        if (code === 200) {
+          this.viewOptions = data;
+        }
+      });
+    },
+
+    /* 查看弹窗选择改变触发事件 */
+    changeView(val) {
+      getDetailsBySnapShotId(val).then(({code,data})=>{
+        if(code===200){
+          console.log(data, "fff");
+        }
+      })
+    },
+
     /* 初始化天地图 */
     initMap(ele) {
       // if (this.map) {

src/views/xj/inspection/road-management/components/road-add.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-11 16:52:24
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-25 11:17:56
+ * @LastEditTime: 2024-11-05 15:18:59
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\components\road-add.vue
  * @Description: 路产管理-新增/编辑弹窗
 -->
@@ -182,8 +182,6 @@ export default {
     return {
       // 表单绑定
       roadForm: {},
-      // 验证规则
-      rules: {},
       // 校验状态下拉数据
       states: [
         {

src/views/xj/inspection/surface-management/components/surface-map.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 14:49:21
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-15 11:50:48
+ * @LastEditTime: 2024-11-06 10:24:29
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\surface-management\components\surface-map.vue
  * @Description: 路面病害管理-地图组件
 -->
@@ -12,7 +12,7 @@
     <div class="div-map">
       <fssm-map
         ref="contentMap"
-        :mapId="mapObject.id"
+        :mapId="id"
         @feature-click="featureClick"
         :showZoom="false"
       ></fssm-map>
@@ -21,11 +21,7 @@
       </div>
     </div>
     <div class="div-form">
-      <div
-        v-if="mapObject.centerList.length > 0"
-        ref="echart"
-        class="echart-div"
-      ></div>
+      <div v-if="mapObject.scale" ref="echart" class="echart-div"></div>
     </div>
   </div>
 </template>
@@ -45,10 +41,18 @@ export default {
   components: { FssmScroll, FssmMap },
   name: "SurfaceMap",
   props: {
+    id: {
+      type: String,
+      default: "",
+    },
     mapObject: {
       type: Object,
       default: () => {},
     },
+    mapLogeList: {
+      type: Object,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -57,6 +61,17 @@ export default {
       //
     };
   },
+  watch: {
+    mapObject: {
+      handler(val) {
+        if (this.$refs.contentMap && Object.keys(val).length > 0) {
+          this.drawMapPoints();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   mounted() {},
   created() {},
   methods: {
@@ -64,20 +79,30 @@ export default {
     drawMapPoints() {
       this.$refs.contentMap.clearMapFeature();
       const features = [];
-      this.mapObject.centerList.forEach((element) => {
-        const point = new Point(element); // 修改坐标格式
+      this.mapObject.data.forEach((element) => {
+        const point = new Point([
+          element.coordinates[0],
+          element.coordinates[1],
+        ]); // 修改坐标格式
         const feature = new Feature({
           geometry: point,
-          custom: { data: "123", type: "icon", id: this.mapObject.id }, //  可以放一些自己的数据
+          custom: {
+            mediaUrl: element.mediaUrl,
+            rect: element.rect,
+            id: element.id,
+          }, //  可以放一些自己的数据
           type: "icon", //  自己设置一个标识
         });
         feature.setStyle([
           new Style({
             image: new Icon({
               crossOrigin: "anonymous",
-              src: logo,
+              src: require(`@/assets/screen/index/${
+                this.mapLogeList[element.defectType]
+              }.png`),
               // size: [40, 40],
-              scale: 0.05, // 图标缩放比例
+              scale: 0.5, // 图标缩放比例
+              displacement: [0, 30],
             }),
           }),
         ]);
@@ -96,11 +121,12 @@ export default {
       this.$nextTick(() => {
         const map = this.$refs.contentMap.instance.get("map");
         map.addLayer(markLayerPoints);
+        this.initEchart();
       });
     },
     /* 清除地图图层 */
     cleanLayer() {
-      this.$emit("clearId", this.mapObject.id);
+      this.$emit("clearMap");
       this.$refs.contentMap.clearMapFeature();
     },
     /* 图层点击事件 */
@@ -108,12 +134,19 @@ export default {
       if (feature && feature.get("type")) {
         this.$emit("send-img", {
           data: feature.get("custom"),
-          id: this.mapObject.id,
+          // id: this.mapObject.id,
         });
       }
     },
     /* 绘制柱状图 */
     initEchart() {
+      console.log(this.mapObject, "this.mapObject.data");
+      const xData = this.mapObject.scale.map((item) => {
+        return item.label;
+      });
+      const yData = this.mapObject.scale.map((item) => {
+        return item.value;
+      });
       if (this.$refs.echart) {
         const chart = echarts.init(this.$refs.echart);
         chart.setOption({
@@ -123,7 +156,6 @@ export default {
             bottom: "0%",
             left: "center",
             itemHeight: 10,
-            data: ["1111", "2222", "3333", "4444"],
           },
           //图表位置
           grid: {
@@ -141,21 +173,7 @@ export default {
           },
           xAxis: {
             type: "category",
-            data: [
-              "Mon",
-              "Tue",
-              "Wed",
-              "Thu",
-              "Fri",
-              "Sat",
-              "Sun",
-              "1",
-              "2",
-              "3",
-              "4",
-              "5",
-              "6",
-            ],
+            data: xData,
             //坐标轴刻度
             axisTick: {
               show: false,
@@ -176,7 +194,7 @@ export default {
           yAxis: [
             {
               type: "value",
-              name: "单位：家",
+              name: "单位：个",
               nameTextStyle: {
                 color: "#616367",
               },
@@ -211,40 +229,11 @@ export default {
             {
               //该柱状图颜色
               // color:"",
-              name: "1111",
+              // name: "1111",
               //柱状图的粗细--可以”20%“
-              barWidth: 6,
+              barWidth: "20%",
               color: "#72A1FF",
-              data: [
-                120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110,
-              ],
-              type: "bar",
-            },
-            {
-              name: "2222",
-              barWidth: 6,
-              color: "#73ECAF",
-              data: [
-                120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110,
-              ],
-              type: "bar",
-            },
-            {
-              name: "3333",
-              barWidth: 6,
-              color: "#FF7D74",
-              data: [
-                120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110,
-              ],
-              type: "bar",
-            },
-            {
-              name: "4444",
-              barWidth: 6,
-              color: "#FCD678",
-              data: [
-                120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110,
-              ],
+              data: yData,
               type: "bar",
             },
           ],