From 333a772f146e216daa4942abc6e5399eb183fa85 Mon Sep 17 00:00:00 2001
From: xuxiaoming <xiaoming.xu@le-it.com.cn>
Date: Thu, 17 Feb 2022 18:06:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=89=88=E6=9C=AC=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/productionPlanning.js              |   6 +
 .../customerForecastDemandReview.js           |   1 +
 .../demandPlanning/articleDemand/index.vue    |  56 +-
 .../productInventory/index.vue                |   2 +-
 .../versionHistory/index.vue                  | 551 ++++++++++++++++++
 5 files changed, 605 insertions(+), 11 deletions(-)
 create mode 100644 src/views/productionPlanning/versionHistory/index.vue

diff --git a/src/router/productionPlanning.js b/src/router/productionPlanning.js
index 91361c1..d2b791e 100644
--- a/src/router/productionPlanning.js
+++ b/src/router/productionPlanning.js
@@ -34,6 +34,12 @@ const plant = {
       title: "紧急插单",
       component: () => import("@/views/productionPlanning/emergencyOrder"),
     },
+    {
+      icon: "el-icon-document",
+      path: "/productionPlanning/versionHistory",
+      title: "历史版本",
+      component: () => import("@/views/productionPlanning/versionHistory"),
+    },
   ],
 }
 
diff --git a/src/server/productionPlanning/customerForecastDemandReview.js b/src/server/productionPlanning/customerForecastDemandReview.js
index 6d51ca8..4f62c85 100644
--- a/src/server/productionPlanning/customerForecastDemandReview.js
+++ b/src/server/productionPlanning/customerForecastDemandReview.js
@@ -80,3 +80,4 @@ export const planOrderQuery = (param)=> get("/admin/ap/planorder/query",param)
 
 export const republish = (data) => post("/admin/ap/planorderversion/relpublish",data)
  
+export const publishIdentifyAll = () => get("admin/ap/planorderversion/publishidentifyall")
\ No newline at end of file
diff --git a/src/views/productionPlanning/customerForecastDemandReview/demandPlanning/articleDemand/index.vue b/src/views/productionPlanning/customerForecastDemandReview/demandPlanning/articleDemand/index.vue
index 51f5f4f..6ed04ae 100644
--- a/src/views/productionPlanning/customerForecastDemandReview/demandPlanning/articleDemand/index.vue
+++ b/src/views/productionPlanning/customerForecastDemandReview/demandPlanning/articleDemand/index.vue
@@ -78,36 +78,54 @@
               class="reset-button-style"
               :disabled="syncDataDisable"
               @click="syncData" >同步库存</el-button>
+                <div style="margin-left:15px">
+                  <el-select v-model="publishedVersionNr"
+                      placeholder="请选择">
+                    <el-option v-for="history in historyList"
+                        :key="history.publishedVersionNr"
+                        :label="history.publishedVersionNr"
+                        :value="history.publishedVersionNr" />
+                  </el-select>
+                  </div>
+                 <div style="margin-left:15px">
+                 <el-button class="search-button-style" @click="lookErrorHandler(publishedVersionNr)">日志</el-button>
+                </div>
+                   <div style="margin-left:15px"> 
+                 <el-button class="search-button-style" @click="lookErrorLogHandler(publishedVersionNr)">历史数据</el-button>
+                 </div>  
         </div>
+        
         <div class="button_list">
           <img :src="require('@/assets/icon/reload.png')"
               class="image_button"
               title="初始化"
+              :style="{display:permissions()['reload']?'inline':'none'}"
               @click="reloadData">
-          <div class="button_split"></div>
+          <div class="button_split" :style="{display:permissions()['reload']?'inline':'none'}"></div>
           <img :src="require('@/assets/icon/save.png')"
               class="image_button"
               title="保存"
+              :style="{display:permissions()['save']?'inline':'none'}"
               @click="saveDemandData">
-          <div class="button_split"></div>
+          <div class="button_split" :style="{display:permissions()['save']?'inline':'none'}"></div>
           <img :class="publicButtonClass"
               :src="require('@/assets/icon/public.png')"
               title="发布数据"
+              :style="{display:permissions()['public']?'inline':'none'}"
               @click="publicData">
-          <div class="button_split"></div>
+          <div class="button_split" :style="{display:permissions()['public']?'inline':'none'}"></div>
           <img :src="require('@/assets/img/download.png')"
               class="image_button"
               title="导出"
+              :style="{display:permissions()['export']?'inline':'none'}"
               @click="exportData">
-          <!-- <div class="button_split"></div>
-          <img :class="editButtonClass" :src="require('@/assets/icon/outsourcing_demand.png')" title="外购需求" @click="editRow('外购需求')"> -->
-          <div class="button_split"></div>
+          <div class="button_split" :style="{display:permissions()['export']?'inline':'none'}"></div>
           <img :class="editButtonClass"
               :src="require('@/assets/icon/net_production.png')"
               title="净生产量"
+              :style="{display:permissions()['net_production']?'inline':'none'}"
               @click="editRow('净生产量')">
-          <!-- <div class="button_split"></div>
-          <img :src="require('@/assets/icon/refresh.png')" class="image_button" title="刷新数据" @click="refreshData"> -->
+         
         </div>
       </div>
       <el-table ref="articleDemand"
@@ -167,6 +185,7 @@
   import Public from "./public";
   import Char from "./char";
   import { mapActions, mapMutations, mapState } from "vuex";
+   import { baseURL } from "@/server/request"
   import {
     getArtIdList,
     publishedVersion,
@@ -174,7 +193,8 @@
     reloadData,
     saveDemand,
     searchResource,
-    exportData
+    exportData,
+    publishIdentifyAll
   } from "@/server/productionPlanning/customerForecastDemandReview";
   import { syncData } from "@/server/productionPlanning/productInventory";
   import { getColumnName } from "@/utils/allField.js";
@@ -209,6 +229,8 @@
     },
     data() {
       return {
+        publishedVersionNr:"",
+        historyList:[],
         syncDataDisable:false,
         queryParams: {},
         mode: "",
@@ -231,6 +253,7 @@
     created() {
       this.getMpsModeList();
       this.getArticleList();
+      this.getPublishIdentifyAll()
     },
     mounted() {
       this.$nextTick(() => {
@@ -313,6 +336,18 @@
         "SET_evaluationSecondResourceLoading",
         "SET_articleDemandLoading",
       ]),
+      getPublishIdentifyAll(){
+        publishIdentifyAll().then( ( {data = []}) => {
+          
+            this.historyList = data.publishedVersionLi
+        })
+      },
+      lookErrorHandler(versionNr){
+        window.open(baseURL + "admin/common/log/read/plan/"+versionNr)
+      },
+      lookErrorLogHandler(versionNr){
+        window.open(baseURL + "admin/common/log/read/planlog/"+versionNr)
+      },
       // 同步数据
       syncData() {
         this.syncDataDisable = true
@@ -657,7 +692,7 @@
         justify-content: space-between;
 
         .search {
-          width: 800px;
+          width: 1200px;
           display: flex;
 
           .mps-button {
@@ -698,6 +733,7 @@
             background: #ccc;
             border-radius: 1px;
             border: 1px solid #ccc;
+ 
           }
 
           .image_button:hover {
diff --git a/src/views/productionPlanning/productInventory/index.vue b/src/views/productionPlanning/productInventory/index.vue
index 8991f7c..d6e845b 100644
--- a/src/views/productionPlanning/productInventory/index.vue
+++ b/src/views/productionPlanning/productInventory/index.vue
@@ -21,7 +21,7 @@
               @click="resetQuery">重置
           </el-button>
           <el-button icon="el-icon-refresh"
-              size="mini"
+                                size="mini"
               class="reset-button-style"
               @click="syncData"
               :disabled="syncDataDisable">同步库存</el-button>
diff --git a/src/views/productionPlanning/versionHistory/index.vue b/src/views/productionPlanning/versionHistory/index.vue
new file mode 100644
index 0000000..33d8016
--- /dev/null
+++ b/src/views/productionPlanning/versionHistory/index.vue
@@ -0,0 +1,551 @@
+<template>
+  <ContentContainer class="homepage-customer-wrapper">
+
+    <div ref="topTableRef"
+        class="content-table-wrap">
+      <div class="tool_list">
+        <el-form :inline="true"
+            class="clearfix search-content">
+          <el-form-item :label="getColumnName('AP_ArticleStockLevel-ArtId')">
+               <el-select v-model="artId"
+                style="width: 300px"
+                placeholder="请选择"
+                filterable
+                :loading="artIdLoading"
+                @visible-change="setArtList">
+              <el-option v-for="item in artList"
+                  :key="item['Article-ArtId']"
+                  :label="item['Article-ArtId'] + '-' + item['Article-Descr1']"
+                  :value="item['Article-ArtId']" />
+            </el-select>
+          </el-form-item>
+           <el-form-item :label="getColumnName('PlanOrderVersion-Version')">
+               <el-select v-model="history"
+                style="width: 300px"
+                placeholder="请选择"
+                filterable >
+              <el-option v-for="item in historyList"
+                  :key="item.publishedVersionNr"
+                  :label="item.publishedVersionNr"
+                  :value="item.publishedVersionNr" />
+            </el-select>
+          </el-form-item>
+          	<el-form-item :label="getColumnName('Customer-ValidStartDate')">
+						  <el-date-picker
+                  style="width: 100%"
+                  v-model="datePicker"
+                  type="daterange"
+                  start-placeholder="起始日期"
+                  end-placeholder="截至日期"
+                  value-format="YYYY-MM-DD"
+                />
+					</el-form-item>
+           <el-form-item >
+            <el-button icon="el-icon-search"
+              size="mini"
+              class="search-button-style"
+              @click="handleQuery">搜索
+          </el-button>
+           </el-form-item>
+     
+        </el-form>
+      
+      </div>
+      <el-table ref="articleDemand"
+          v-loading="articleDemandLoading"
+          :cell-class-name="tableCellClassName"
+          :data="tableData"
+          :height="height"
+          :row-class-name="rowClassName"
+          border
+          class="articleDemand-table"
+          highlight-current-row
+          size="mini"
+          @row-dblclick="rowDblclick">
+        <el-table-column v-for="(item,index) in headers"
+            :key="index"
+            :label="showTitle(item,index)"
+            :prop="item"
+            show-overflow-tooltip
+            :width="calcWidth(index)">
+          <template #default="scope">
+            <el-input v-if="scope.row['Label'] ==  editField && scope.row['key'] ==  editKey && index > keyStartIndex "
+                v-model="scope.row[item]"
+                :disabled="item.charAt(item.length - 1) == '*'"
+                size="mini"></el-input>
+            <span v-else-if="scope.row[item] ==  '预测需求' || scope.row[item] ==  '订单需求' || scope.row[item] ==  '独立需求'">{{ scope.row[item] }}
+              <div class="add_icon"></div>
+            </span>
+            <span v-else-if="scope.row[item] ==  '在制量' || scope.row[item] ==  '期初库存' || scope.row[item] ==  '采购量' || scope.row[item] ==  '委外量' ">{{ scope.row[item] }}
+              <div class="subtract_icon"></div>
+            </span>
+            <span v-else>{{ scope.row[item] }}</span>
+          </template>
+        </el-table-column>
+
+      </el-table>
+      <Pagination v-model:pagination="pagination"
+          @change="handleQuery" />
+    </div>
+  
+
+  </ContentContainer>
+</template>
+<script>
+  import { publishIdentify  } from '@/server/productionPlanning/customerForecastDemandReview'
+  import {
+    insertData,
+    saveData,
+    getData,
+    getArtIdList,
+    publishData,
+    deleteall,
+    syncPurchase,
+  } from "@/server/productionPlanning/emergencyOrder";
+  import { getColumnName } from "@/utils/allField.js";
+
+  export default {
+    // 设置名称
+    name: "demandPlanning",
+    data() {
+      return {
+        datePicker:"",
+        syncDataDisable:false,
+        artId: "",
+        insertArtDoing:false,
+        artIdLoading:false,
+        articleDemandLoading: false,
+        publicButtonClass: "disable_button",
+        editButtonClass: "disable_button",
+        height: 0,
+        queryParams: {},
+        showPublicDialog: false,
+        showModeDialog: false,
+        modeType: "",
+        editField: "",
+        editKey: "",
+        selectKey: "",
+        promptMessage: "",
+        editKeyList: [],
+        artList:[],
+        pagination: {
+          pageNumber: 1,
+          pageSize: 24,
+          total: 0,
+        },
+        headers: [],
+        tableData: [],
+        mode: "",
+
+        keyStartIndex: 6,
+        historyList:[],
+        selectArticleDemandRow:{},
+        labelList: {
+          "AP_ArticleDemandEmergency-ForecastDemandQty": "预测需求",
+          "AP_ArticleDemandEmergency-OrderQty": "订单需求",
+          "AP_ArticleDemandEmergency-OutSourcingQty": "外购需求",
+          "AP_ArticleDemandEmergency-IndependentDemandQty": "独立需求",
+          "AP_ArticleDemandEmergency-WipQty": "在制量",
+          "AP_ArticleDemandEmergency-OpeningInventory": "期初库存",
+          "AP_ArticleDemandEmergency-TargetInventory": "目标库存",
+          "AP_ArticleDemandEmergency-MinInventory": "最低库存",
+          "AP_ArticleDemandEmergency-NetDemandQty": "净生产量",
+          "AP_ArticleDemandEmergency-EndingInventory": "期末库存",
+          "AP_ArticleDemandEmergency-ZaituQty":"采购量",
+          "AP_ArticleDemandEmergency-WeiwaiQty":"委外量"
+        }
+      };
+    },
+    created() {
+      this.publishIdentify()
+    },
+    mounted() {
+      this.getCustomerArticleDemand(this.pagination)
+      this.$nextTick(() => {
+        this.height = this.calculationTableHeight(this.$refs.topTableRef, 125)
+      });
+    },
+    computed: {
+      calcWidth() {
+        return function (index) {
+          let width = "100px"
+          switch (index) {
+          case 0:
+            width = "150px"
+            break;
+          case 2:
+            width = "350px"
+            break;
+          }
+          return width
+        }
+      },
+      showTitle() {
+        return function (item, index) {
+          if (item == "Label") {
+            return "标签";
+          } else {
+            if (index < 8) {
+              return getColumnName(item);
+            } else {
+              if (item.charAt(item.length - 1) == "*") {
+                return item.substr(0, item.length - 1);
+              } else {
+                return item;
+              }
+            }
+          }
+        };
+      }
+    },
+  
+    methods: {
+      handleQuery(){
+        console.log('%cindex.vue line:193 handleQuery', 'color: #007acc;');
+      },
+      publishIdentify() {
+        this.loading = true
+        publishIdentify().then(({ data = [] }) => {
+          // this.formData["version"] = data.version
+          // this.message = data.message
+          this.historyList = data.publishedVersionLi
+          this.loading = false
+        }).catch(() => {
+          this.loading = false
+        });
+      },
+      syncPurchase(){
+        this.syncDataDisable = true
+        syncPurchase().then(({ code }) => {
+          if (code == 200) {
+            this.$message({
+              type: "success",
+              message: "同步库存成功"
+            })
+          } else {
+            this.$message({
+              type: "error",
+              message: "同步库存失败"
+            })
+          }
+          this.syncDataDisable = false
+ 
+        }).catch(() => {
+          this.syncDataDisable = false
+        
+        })
+      },
+      initData(){
+        this.articleDemandLoading = true
+        deleteall().then(({ code,msg }) => {
+          if(code == 200) {
+          this.getCustomerArticleDemand(this.pagination)
+          }
+          this.articleDemandLoading = false
+        }).catch(() => {
+          this.articleDemandLoading = false
+        });
+      },
+      insertArt(){
+         this.insertArtDoing = true
+        insertData({artid:this.artId}).then( ({ code,msg }) => {
+          this.insertArtDoing = false
+          if(code == 200) {
+            this.getCustomerArticleDemand(this.pagination)
+            this.$message({ type: "success", message: msg });
+          }
+        }).catch( () => {
+            this.insertArtDoing = false
+        })
+      },
+       getCustomerArticleDemand(queryParams) {
+        this.articleDemandLoading = true
+        getData(queryParams).then(({ data = [] }) => {
+          this.dealArticleDemandData(data);
+          this.articleDemandLoading = false
+  
+          this.pagination.total = data.count
+        }).catch(() => {
+          this.articleDemandLoading = false
+        });
+      },
+      dealArticleDemandData(data) {
+        if (!data["SortKeys"]) {
+          this.$message({ type: "error", message: "查询的数据为空" });
+          return;
+        }
+        this.publicButtonClass = "image_button"
+        data["SortKeys"].splice(this.keyStartIndex, 0, "Label");
+        data["Item"].forEach((item, index) => {
+          item.key = item["AP_ArticleDemandEmergency-ArtId"];
+          item.Label = this.labelList[item["AP_ArticleDemandEmergency-Label"]];
+          if (index % 12 == 0) {
+            item.show = true;
+          } else {
+            item.show = false;
+            item["AP_ArticleDemandEmergency-ArtId"] = "";
+            item["AP_ArticleDemandEmergency-Descr1"] = "";
+            item["AP_ArticleDemandEmergency-CustomerId"] = "";
+            item["AP_ArticleDemandEmergency-FGStock"] = "";
+            item["AP_ArticleDemandEmergency-SFGStock"] = "";
+            item["AP_ArticleDemandEmergency-WIPStock"] = "";
+            item["AP_ArticleDemandEmergency-PUCStock"] = "";
+            item["AP_ArticleDemandEmergency-OSCStock"] = "";
+          }
+        });
+        this.headers = data["SortKeys"];
+        this.tableData = data["Item"];
+        this.editButtonClass = "disable_button"
+      },
+      getPublishedVersion() {
+        publishedVersion().then(({ data = "" }) => {
+          this.promptMessage = data
+        })
+      },
+      handleQuery() {
+        this.getPublishedVersion()
+        this.getCustomerArticleDemand(this.pagination)
+      },
+ 
+      // 物料列表
+      setArtList() {
+         this.artIdLoading = true
+        getArtIdList().then(({ data = [] }) => {
+          this.artIdLoading = false
+          this.artList = data;
+        }).catch( () => {
+          this.artIdLoading = false
+        })
+      },
+      publicData() {
+        if(this.publicButtonClass == "disable_button") {
+          return false
+        }
+        this.publicButtonClass = "disable_button"
+        this.articleDemandLoading = true
+        publishData().then( ({ code,msg }) => {
+          this.articleDemandLoading = false
+          this.publicButtonClass = "image_button"
+          if(code == 200) {
+            this.getCustomerArticleDemand(this.pagination)
+            this.$message({ type: "success", message: msg });
+          }
+        }).catch( () => {
+            this.articleDemandLoading = false
+            this.publicButtonClass = "image_button"
+        })
+      },
+      cancelPublicDialog(opt) {
+        this.showPublicDialog = false
+        if (opt == "submit") {
+          this.handleQuery()
+        }
+      },
+
+      // 打开模型框
+      openModelDialog(type) {
+        this.modeType = type;
+        this.showModeDialog = true;
+      },
+      // 取消添加
+      cancelAddModel() {
+        this.mode = "";
+        this.showModeDialog = false;
+      },
+      // 行样式
+      rowClassName({ row }) {
+        return row.show ? "show_row" : "hide_row";
+      },
+      // 编辑航
+      editRow(data) {
+        if (!this.editKeyList.includes(this.selectKey)) this.editKeyList.push(this.selectKey)
+        this.editKey = this.selectKey;
+        this.editField = data;
+      },
+      getTableDataJson() {
+        let maplist = JSON.parse(JSON.stringify(this.tableData));
+        maplist.forEach(item => {
+          item["AP_ArticleDemandEmergency-ArtId"] = item.key;
+          delete item.index;
+          delete item.show;
+          delete item.key;
+          delete item.Label;
+        });
+        return JSON.stringify(maplist);
+      },
+      
+      getEditTableDataJson() {
+        let editMapList = JSON.parse(JSON.stringify(this.tableData)).filter(item => this.editKeyList.includes(item.key))
+        editMapList.forEach(item => {
+          item["AP_ArticleDemandEmergency-ArtId"] = item.key;
+          delete item.index;
+          delete item.show;
+          delete item.key;
+          delete item.Label;
+        });
+        return JSON.stringify(editMapList);
+      },
+      // 保存数据
+      saveDemandData() {
+        this.editField = "";
+        let queryParams = {};
+        queryParams.artid = this.artId;
+        queryParams.maplist = this.getEditTableDataJson();
+        this.articleDemandLoading = true
+        saveData(queryParams).then(({ data = [] }) => {
+          this.articleDemandLoading = false
+          this.handleQuery()
+          this.editKeyList = []
+          this.$message({ type: "success", message: "保存成功" });
+        }).catch(() => {
+          this.articleDemandLoading = false
+        });
+      },
+      // 合并单元格
+      arraySpanMethod({ rowIndex, columnIndex }) {
+        if (rowIndex % 11 > 0 && columnIndex < 8) {
+          if (rowIndex % 11 == 1 && columnIndex == 0) {
+            return [9, 8];
+          } else {
+            return [0, 0];
+          }
+        }
+      },
+      // 设置航选中状态
+      setRowStatus(key) {
+        this.artId = key
+        if (this.selectKey == "") {
+          this.selectKey = key
+          this.editButtonClass = "image_button"
+        } else {
+          if (this.selectKey != key) {
+            this.selectKey = key
+            this.editButtonClass = "image_button"
+          } else {
+            this.selectKey = ""
+            this.editButtonClass = "disable_button"
+          }
+        }
+      },
+      tableCellClassName({ row, column, rowIndex, columnIndex }) {
+        row.index = rowIndex;
+        column.index = columnIndex;
+      },
+      // 双击触发事件
+      rowDblclick(row) {
+         if (row.Label == "净生产量") {
+          this.selectArticleDemandRow = row
+          this.$refs.articleDemand.setCurrentRow(row);
+          this.artId = row.artid
+          this.setRowStatus(row.key);
+          this.tableData.forEach(item => {
+            if (item.key == row.key) {
+              if (item.Label != "净生产量") {
+                item.show = !item.show;
+              }
+            } else {
+              if (item.Label != "净生产量") {
+                item.show = false;
+              }
+            }
+          });
+        }
+      }
+    },
+  }
+</script>
+<style lang="less" scoped>
+:deep(.el-range-separator) {
+  height: auto;
+}
+  .homepage-customer-wrapper {
+    height: 100%;
+    background-color: #F1F1F1;
+    .content-table-wrap {
+      height: 100%;
+      :deep(.show_row) {
+        cursor: pointer;
+        transform: scale(1)
+      }
+      :deep(.hide_row) {
+        display: none;
+        transform: scale(0)
+      }
+      .tool_list {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .search {
+          width: 100%;
+          display: flex;
+          .mps-button {
+            width: 98px;
+            height: 32px;
+            box-shadow: 1px 1px 1px 0px #FFFFFF;
+            border-radius: 2px;
+            border: 1px solid #073A35;
+            line-height: 20px;
+            .icon-upload {
+              width: 18px;
+              height: 18px;
+              background: url("~@/assets/icon/mps_button_icon.png");
+              float: left;
+              margin-left: 5px;
+            }
+          }
+        }
+        .button_list {
+          width: 150px;
+          height: 30px;
+          display: flex;
+          align-items: center;
+          .image_button {
+            margin: 3px 5px;
+            width: 24px;
+            height: 24px;
+            box-shadow: 2px 2px 0px 0px #DADADA;
+          }
+          .disable_button {
+            margin: 3px 5px;
+            width: 24px;
+            height: 24px;
+            background: #ccc;
+            border-radius: 1px;
+            border: 1px solid #ccc;
+          }
+          .image_button:hover {
+            background: #DFDFDF;
+            box-shadow: 2px 2px 0px 0px #FFFFFF;
+          }
+          .button_split {
+            width: 1px;
+            height: 30px;
+            background: #DFDFDF;
+            box-shadow: 1px 0px 0px 0px #FFFFFF;
+            border-radius: 1px;
+          }
+        }
+      }
+      .articleDemand-table {
+        width: 100%;
+        border: 0;
+        .add_icon {
+          margin-top: 3px;
+          float: right;
+          width: 14px;
+          height: 14px;
+          background: url("~@/assets/icon/add_icon.png");
+        }
+        .subtract_icon {
+          margin-top: 3px;
+          float: right;
+          width: 14px;
+          height: 14px;
+          background: url("~@/assets/icon/subtract_icon.png");
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file