风机矩阵详情

src/components/dialog/index.vue

@@ -0,0 +1,251 @@
+<template>
+  <el-dialog
+    title="风机详情"
+    width="75%"
+    top="10vh"
+    @opened="opened()"
+    @closed="closed()"
+    :show-close="true"
+    class="my-info-dialog"
+    custom-class="modal"
+    :close-on-click-modal="false"
+  >
+    <div class="body">
+      <div class="wind-site-info-body">
+        <div class="info-menu">
+          <div
+            class="info-menu-item"
+            v-for="(item, index) in InfoBtns.data"
+            :key="item"
+            :class="{ active: InfoBtns.activeIndex == index }"
+            @click="onInfoMenuItemClick(item, index)"
+          >
+            {{ item.text }}
+          </div>
+        </div>
+        <el-row style="height: calc(100% - 45px)">
+          <!-- 基本信息 使用 v-if 每次点击重新加载  -->
+          <!-- 使用 v-show 首次全部加载 之后隐藏 点击后显示 -->
+          <base-info v-show="InfoBtns.activeIndex == 0" ref="baseInfo" />
+          <!-- <base-info v-if="InfoBtns.activeIndex == 2" /> -->
+          <!-- <div class="windParts"> -->
+            <div
+            :style="
+              $store.state.themeName === 'dark'
+                ? 'text-align:center;'
+                : 'text-align:center;background:#fff;'
+            "
+          >
+            <StandAloneImg
+              class="sai"
+              v-show="InfoBtns.activeIndex != 0"
+              :activeIndex="InfoBtns.activeIndex"
+              @selectSvg="selectSvg"
+            ></StandAloneImg>
+          </div>
+          <div class="saigs">
+            <generator
+            v-show="InfoBtns.activeIndex != 0"
+            :index="InfoBtns.activeIndex"
+            :data="sourceMap"
+            ref="generator"
+          ></generator>
+          </div>
+          
+          <!-- </div> -->
+          
+        </el-row>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import BaseInfo from "../../views/WindSite/pages/Info/Base-Info.vue";
+import StandAloneImg from "../../views/WindSite/pages/Info/StandAloneImg.vue";
+import generator from "../../views/WindSite/pages/Info/pages/generator.vue";
+import api from "@api/cockpit/matrix/index.js";
+import BASE from "@tools/basicTool.js";
+export default {
+  props: {
+    wpId: {
+      type: String,
+      default: "",
+    },
+    wtId: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      timmer: '',
+      InfoBtns: {
+        activeIndex: 0,
+        data: [
+          {
+            id: "base-info",
+            text: "基本信息",
+          },
+          {
+            id: "generator",
+            text: "发电机",
+          },
+          {
+            id: "gear-box",
+            text: "齿轮箱",
+          },
+          {
+            id: "pitch",
+            text: "变桨",
+          },
+          {
+            id: "yaw",
+            text: "偏航",
+          },
+          {
+            id: "hydraulic-pressure",
+            text: "液压",
+          },
+          {
+            id: "cabin-info",
+            text: "机舱信息",
+          },
+          // {
+          //   id: "principal-axis",
+          //   text: "主轴",
+          // },
+        ],
+      },
+    };
+  },
+  components: {
+    BaseInfo,
+    StandAloneImg,
+    generator,
+  },
+  methods: {
+    opened() {
+    this.$nextTick(() => {
+      this.getWtInfo();
+      this.timmer = setInterval(() => {
+        this.getWtInfo();
+      }, this.$store.state.websocketTimeSec);
+    });
+    },
+    closed() {
+      clearInterval(this.timmer);
+      this.timmer = null;
+    },
+    onInfoMenuItemClick(item, index) {
+      this.InfoBtns.activeIndex = index;
+    },
+    selectSvg(index) {
+      this.InfoBtns.activeIndex = index;
+    },
+    // 获取风机信息
+    getWtInfo() {
+      api
+        .findWtInfo({
+          wtId: this.wtId,
+        })
+        .then((res) => {
+          let map = ["bjmap", "fdjmap", "clxmap", "yymap", "phmap", "jcmap"];
+          let data = res.data;
+          for (var key in data) {
+            if (map.includes(key) && key.endsWith("map")) {
+              let json = data[key];
+              let arrayai = [];
+              let arraydi = [];
+              for (var i = 0; i < json.length; i++) {
+                let obj = {
+                  name: json[i][0],
+                  unit: json[i][1],
+                  value: json[i][3],
+                };
+                if (json[i][2] == "ai") arrayai.push(obj);
+                else arraydi.push(obj);
+              }
+              data[key] = { ai: arrayai, di: arraydi };
+            }
+          }
+          this.sourceMap = data;
+          this.$refs.baseInfo.dataDeal(data)
+          this.$refs.generator.dataDeal(data)
+        });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.body {
+  height: 70vh;
+}
+.wind-site-info {
+  display: flex;
+
+  .sai {
+    width: 65%;
+  }
+
+  .saig {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+  }
+
+  .wind-site-menu {
+    flex: 0 0 13.889vh;
+    color: @gray;
+    background: fade(@darkgray, 10);
+    height: calc(100vh - 122px);
+
+    .wind-site-title {
+      font-size: 14px;
+      font-weight: 600;
+      padding: 16px;
+    }
+  }
+}
+.wind-site-info-body {
+  flex: auto;
+  padding-left: 1.481vh;
+  height: 100%;
+
+  .info-menu {
+    width: 100%;
+    margin-bottom: 10px;
+    .info-menu-item {
+      display: inline-block;
+      border: 1px solid fade(@darkgray, 80);
+      border-radius: 2px;
+      color: @gray;
+      font-size: @fontsize-s;
+      letter-spacing: 1px;
+      cursor: pointer;
+      width: 13%;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+
+      &.active {
+        color: @white;
+        background: fade(@purple, 60);
+        border-color: fade(@purple, 60);
+      }
+
+      & + .info-menu-item {
+        margin-left: 2.2vh;
+      }
+    }
+  }
+}
+.windParts{
+  display: flex;
+  flex-direction: row;
+}
+.saigs{
+  position: absolute;
+  bottom: 0;
+  left: 28px;
+}
+</style>

src/views/Home/Home.vue

@@ -1014,7 +1014,7 @@ export default {
               subUrl: "genreset/findGLDetail",
               targetName: "bzgl",
               dialogType: "powerLineChart",
-              max: res.data.jczbmap.zjts,
+              max: res.data.jczbmap.zjrl,
             },
             {
               title: "应发功率",
@@ -1023,7 +1023,7 @@ export default {
               subUrl: "genreset/findGLDetail",
               targetName: "yfgl",
               dialogType: "powerLineChart",
-              max: res.data.jczbmap.zjts,
+              max: res.data.jczbmap.zjrl,
             },
             {
               title: "实际功率",
@@ -1032,7 +1032,7 @@ export default {
               subUrl: "genreset/findGLDetail",
               targetName: "sjgl",
               dialogType: "powerLineChart",
-              max: res.data.jczbmap.zjts,
+              max: res.data.jczbmap.zjrl,
             },
           ];
           this.jczbmap = res.data.jczbmap;

src/views/LightMatrix1/LightMatrix1.vue

@@ -199,15 +199,16 @@
       </div>
     </div>
   </el-scrollbar>
+  <Dialog v-model="detialDisplay" :wpId='stationId' :wtId='windId'></Dialog>
 </template>
 
 <script>
 import Row from "@/components/coms/grid/row.vue";
 import Col from "@/components/coms/grid/col.vue";
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import Dialog from "@/components/dialog/index.vue";
 import api from "@api/cockpit/matrix/index.js";
 import util from "@/helper/util.js";
-
 import store from "@store/index.js";
 import { isNumber } from "util";
 import { setInterval, clearInterval } from "timers";
@@ -220,6 +221,7 @@ export default {
     Row,
     Col,
     SvgIcon,
+    Dialog,
   },
 
   // 数据
@@ -229,6 +231,9 @@ export default {
       sourceMap: {}, // 核心数据
       fillCategory: null, // 过滤条件
       fillFjzt: null, // 过滤条件
+      detialDisplay: false,
+      stationId: '',
+      windId: '',
       fcStateArray: [
         {
           text: "接入台数",
@@ -450,9 +455,7 @@ export default {
 
     // 请求服务
     requestData(showLoading) {
-      // console.log(111111);
       api.matrixPush(showLoading).then((res) => {
-        console.log(res.data);
         if (res) {
           let sourceMap = res.data;
           let fjmap = [];
@@ -481,9 +484,12 @@ export default {
     // 查看风机详情
     goDetails(item) {
       if (item.wpId.indexOf("FDC") !== -1) {
-        this.$router.push({
-          path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
-        });
+        this.detialDisplay = true
+        this.stationId = item.wpId
+        this.windId = item.wtId
+        // this.$router.push({
+        //   path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
+        // });
       } else {
         this.$router.push({
           path: `windsite/inverter-info/${item.wpId}/${item.wtId}`,

src/views/LightMatrix2/LightMatrix2.vue

@@ -96,6 +96,7 @@
         </div>
       </div>
     </el-scrollbar>
+    <Dialog v-model="detialDisplay" :wpId='stationId' :wtId='windId'></Dialog>
   </div>
 </template>
 
@@ -104,6 +105,7 @@ import Row from "@/components/coms/grid/row.vue";
 import Col from "@/components/coms/grid/col.vue";
 import util from "@/helper/util.js";
 import api from "@api/cockpit/matrix/index.js";
+import Dialog from "@/components/dialog/index.vue";
 
 import store from "@store/index.js";
 import { isNumber } from "util";
@@ -116,6 +118,7 @@ export default {
     Row,
     Col,
     SvgIcon,
+    Dialog,
   },
   // 数据
   data() {
@@ -124,6 +127,9 @@ export default {
       sourceMap: {}, // 核心数据
       fillCategory: null, // 过滤条件
       fillFjzt: null, // 过滤条件
+      detialDisplay: false,
+      stationId: '',
+      windId: '',
       panel1Data: {
         first: {
           icon: "fa fa-user",
@@ -413,9 +419,12 @@ export default {
 
     // 查看风机详情
     goDetails(item) {
-      this.$router.push({
-        path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
-      });
+      this.detialDisplay = true
+        this.stationId = item.wpId
+        this.windId = item.wtId
+      // this.$router.push({
+      //   path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
+      // });
     },
   },
 

src/views/LightMatrix3/LightMatrix3.vue

@@ -748,11 +748,13 @@
         </div>
       </div> -->
     </el-scrollbar>
+    <Dialog v-model="detialDisplay" :wpId='stationId' :wtId='windId'></Dialog>
   </div>
 </template>
 
 <script>
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import Dialog from "@/components/dialog/index.vue";
 import util from "@/helper/util.js";
 import { isNumber } from "util";
 import store from "@store/index.js";
@@ -763,6 +765,7 @@ export default {
   // 使用组件
   components: {
     SvgIcon,
+    Dialog,
   },
 
   // 数据
@@ -772,6 +775,9 @@ export default {
       sourceMap: {}, // 核心数据
       fillCategory: null, // 过滤条件
       fillFjzt: null, // 过滤条件
+      detialDisplay: false,
+      stationId: '',
+      windId: '',
       fjStatus: "all",
       fjArr: [],
       fjNum: 0,
@@ -1246,9 +1252,12 @@ export default {
       })
     },
     goDetails(item) {
-      this.$router.push({
-        path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
-      });
+      this.detialDisplay = true
+        this.stationId = item.wpId
+        this.windId = item.wtId
+      // this.$router.push({
+      //   path: `/monitor/windsite/info/${item.wpId}/${item.wtId}`,
+      // });
     },
   },
 

src/views/WindSite/pages/Info/Base-Info.vue

@@ -6,23 +6,23 @@
         <span class="svg-icon svg-icon-green mg-r-8">
           <svg-icon class="" :svgid="'svg-normal-power'" />
         </span>
-        {{ sourceMap.code }}
+        {{ sourceMap?.code }}
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">所属线路</div>
-        <div class="tag-value">{{ sourceMap.lnname }}</div>
+        <div class="tag-value">{{ sourceMap?.lnname }}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">机型</div>
-        <div class="tag-value">{{sourceMap.model}}</div>
+        <div class="tag-value">{{sourceMap?.model}}</div>
         </div>
       <div class="wind-site-tag">
         <div class="tag-text">告警时间</div>
-        <div class="tag-value">{{ sourceMap.gxkmap && sourceMap.gxkmap.bjsj }}</div>
+        <div class="tag-value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.bjsj }}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">告警内容</div>
-        <div class="tag-value">{{ sourceMap.gxkmap && sourceMap.gxkmap.bjmc }}</div>
+        <div class="tag-value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.bjmc }}</div>
       </div>
     </el-row>
     <!-- 发电信息 -->
@@ -31,35 +31,35 @@
         <el-row class="generation background mg-r-8">
           <div class="mg-r-8">
             <div class="generation-text">日发电量</div>
-            <div class="generation-value green" style="display:inline-block">{{ sourceMap.jczbmap && sourceMap.jczbmap.RFDL }}</div><span class="green" style="font-size:26px;margin-left: 0.37vh;">kWh</span>
+            <div class="generation-value green" style="display:inline-block">{{ sourceMap?.jczbmap && sourceMap?.jczbmap.RFDL }}</div><span class="green" style="font-size:26px;margin-left: 0.37vh;">kWh</span>
           </div>
           <el-row class="wind-site-state">
             <el-col :span="6" class="generation-item">
               <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
-              <div class="value">{{ sourceMap.jczbmap && sourceMap.jczbmap.FJKYL }}</div>
+              <div class="value">{{ sourceMap?.jczbmap && sourceMap?.jczbmap.FJKYL }}</div>
               <div class="text">月可利用率</div>
             </el-col>
             <el-col :span="6" class="generation-item">
               <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
-              <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.ygzxs }}</div>
+              <div class="value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.ygzxs }}</div>
               <div class="text">月故障小时数</div>
             </el-col>
             <el-col :span="6" class="generation-item">
               <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
-              <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.ytjxs }}</div>
+              <div class="value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.ytjxs }}</div>
               <div class="text">月待机小时数</div>
             </el-col>
             <el-col :span="6" class="generation-item">
               <i class="svg-icon svg-icon-lg svg-icon-gray">
                 <svg-icon :svgid="'svg-availability'" />
               </i>
-              <div class="value">{{ sourceMap.gxkmap && sourceMap.gxkmap.yyxxs }}</div>
+              <div class="value">{{ sourceMap?.gxkmap && sourceMap?.gxkmap.yyxxs }}</div>
               <div class="text">月发电小时数</div>
             </el-col>
           </el-row>
@@ -69,7 +69,7 @@
         <el-row type="flex" justify="center" :align="'middle'" class="power-load">
           <!-- 功率复核 PowerLoad -->
           <el-col v-for="item in PowerLoad" :key="item" :span="6">
-            <dash-pie-chart :title="item.title" :value="sourceMap.jczbmap && sourceMap.jczbmap[item.key]" height="9.722vh" />
+            <dash-pie-chart :title="item.title" :value="sourceMap?.jczbmap && sourceMap?.jczbmap[item.key]" height="9.722vh" />
           </el-col>
         </el-row>
       </el-col>
@@ -117,17 +117,18 @@
             </table>
           </div>
         </div>
-        <!-- 变桨信息 -->
+        
+        <!-- 温度信息 -->
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
             <div class="svg-icon svg-icon-gray-l mg-r-16">
-              <svg-icon :svgid="'svg-pitch-info'" style="margin: 3px 0 -3px 0;padding: 2px;" />
+              <svg-icon :svgid="'svg-temperature-info'" style="margin: 3px -5px -3px 5px;" />
             </div>
-            <div class="title">变桨信息</div>
+            <div class="title">液压信息</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
-              <tr v-for="(pItem, pIndex) in bjmap" :key="pIndex">
+              <tr v-for="(pItem, pIndex) in yymap" :key="pIndex">
                 <template v-for="(cItem, cIndex) in pItem" :key="cIndex">
                   <td class="text gray">{{ cItem.name }}</td>
                   <td class="value green">{{ cItem.value }}</td>
@@ -159,17 +160,17 @@
             </table>
           </div>
         </div>
-        <!-- 温度信息 -->
+        <!-- 变桨信息 -->
         <div class="info-panel base-info">
           <div class="panel-title gary-l">
             <div class="svg-icon svg-icon-gray-l mg-r-16">
-              <svg-icon :svgid="'svg-temperature-info'" style="margin: 3px -5px -3px 5px;" />
+              <svg-icon :svgid="'svg-pitch-info'" style="margin: 3px 0 -3px 0;padding: 2px;" />
             </div>
-            <div class="title">液压信息</div>
+            <div class="title">变桨信息</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
-              <tr v-for="(pItem, pIndex) in yymap" :key="pIndex">
+              <tr v-for="(pItem, pIndex) in bjmap" :key="pIndex">
                 <template v-for="(cItem, cIndex) in pItem" :key="cIndex">
                   <td class="text gray">{{ cItem.name }}</td>
                   <td class="value green">{{ cItem.value }}</td>
@@ -191,20 +192,11 @@ export default {
   name: "wind-site-base-info",
   components: { SvgIcon, DashPieChart },
   props: {
-    id: {
-      type: String,
-      default: "",
-    },
-    data: {
-      type: Object,
-      default: () => { },
-    },
   },
   data () {
     return {
       pageReady: false,
-      sourceMap: {
-      },
+      sourceMap:{},
       fdjmap: [],
       clxmap: [],
       bjmap: [],
@@ -246,28 +238,26 @@ export default {
       }
 
       return newArray;
+    },
+    dataDeal(value){
+      this.sourceMap = value
+      this.fdjmap = this.rinseData(value.fdjmap.ai, 2)
+      this.clxmap = this.rinseData(value.clxmap.ai, 2)
+      this.bjmap = this.rinseData(value.bjmap.ai, 2)
+      this.phmap = this.rinseData(value.phmap.ai, 2)
+      this.yymap = this.rinseData(value.yymap.ai, 2)
     }
   },
 
   mounted () {
-    this.sourceMap = this.data;
   },
 
-  watch: {
-    data (value) {
-      this.sourceMap = value;
-      this.fdjmap = this.rinseData(value.fdjmap.ai, 2);
-      this.clxmap = this.rinseData(value.clxmap.ai, 2);
-      this.bjmap = this.rinseData(value.bjmap.ai, 2);
-      this.phmap = this.rinseData(value.phmap.ai, 2);
-      this.yymap = this.rinseData(value.yymap.ai, 2);
-    }
-  },
 };
 </script>
 
 <style lang="less">
 .wind-site-base-info {
+  width: 100%;
   // 风机名称
   .wind-site-name {
     padding: 0.37vh 2.222vh;

src/views/WindSite/pages/Info/StandAloneImg.vue

@@ -369,24 +369,24 @@
                 :class="{ 'stand-alone-line': line && hover == 3 }"
                 x1="320"
                 y1="330"
-                x2="620"
-                y2="30"
+                x2="640"
+                y2="100"
                 stroke="#edbf03"
                 stroke-width="2"
             />
             <circle
                 :class="{ 'stand-alone-circle': circle && hover == 3 }"
-                cx="620"
-                cy="30"
+                cx="640"
+                cy="100"
                 r="5"
                 fill="#edbf03"
             />
             <text
                 :class="{ 'stand-alone-text': text && hover == 3 }"
-                x="630"
-                y="30"
+                x="650"
+                y="100"
                 fill="#36348e"
-                font-size="24"
+                font-size="70"
             >
                 变桨
             </text>
@@ -432,7 +432,7 @@
                 x="1060"
                 y="80"
                 fill="#36348e"
-                font-size="24"
+                font-size="70"
             >
                 机舱
             </text>
@@ -479,7 +479,7 @@
                 x="1110"
                 y="250"
                 fill="#36348e"
-                font-size="24"
+                font-size="70"
             >
                 齿轮箱
             </text>
@@ -526,7 +526,7 @@
                 x="1300"
                 y="920"
                 fill="#36348e"
-                font-size="24"
+                font-size="70"
             >
                 发电机
             </text>
@@ -572,7 +572,7 @@
                 x="960"
                 y="1050"
                 fill="#36348e"
-                font-size="24"
+                font-size="70"
             >
                 偏航
             </text>
@@ -619,7 +619,7 @@
                 x="1160"
                 y="1030"
                 fill="#36348e"
-                font-size="24"
+                font-size="70"
             >
                 液压
             </text>
@@ -644,8 +644,8 @@ export default {
             circle: false,
             text: false,
             hover: 0,
-            svgWidth: 157,
-            svgHeight: 107,
+            svgWidth: 1386,
+            svgHeight: 400,
         };
     },
     props: {
@@ -703,6 +703,7 @@ export default {
         // 渲染前
     },
     mounted() {
+        console.log(222222);
         // 渲染后
         let isShow = setInterval(() => {
             if (this.$el.style.display != 'none') {

src/views/WindSite/pages/Info/pages/generator.vue

@@ -69,12 +69,26 @@ export default {
     rinseData (array = [], length) {
       let index = 0;
       let newArray = [];
+      if(array.length<6){
+        let len = 6-array.length
+        for (let index = 0; index < len; index++) {
+          let obj = {}
+          array.push(obj)
+        }
+      }
 
       while (index < array.length) {
         newArray.push(array.slice(index, index += length));
       }
 
       return newArray;
+    },
+    dataDeal(value){
+      this.datamap = value
+      if(this.activeIndex != 0){
+        this.sourceMapAI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].ai, 6);
+        this.sourceMapDI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].di, 6);
+      }
     }
   },
   // 生命周期钩子
@@ -100,15 +114,8 @@ export default {
     index(value) {
       this.activeIndex = value;
       if(this.activeIndex != 0){
-        this.sourceMapAI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].ai, 4);
-        this.sourceMapDI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].di, 4);
-      }
-    },
-    data(value) {
-       this.datamap = value;
-       if(this.activeIndex != 0){
-        this.sourceMapAI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].ai, 4);
-        this.sourceMapDI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].di, 4);
+        this.sourceMapAI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].ai, 6);
+        this.sourceMapDI = this.rinseData(this.datamap[this.widgetIndex[this.activeIndex - 1]].di, 6);
       }
     },
   },
@@ -175,8 +182,8 @@ export default {
         width: 100%;
       }
       .location-td{
-        width: 20%;
-        padding-left: 7%;
+        // width: 20%;
+        // padding-left: 7%;
         text-align: left;
       }
     }