dedsudiyu hace 2 años
padre
commit
6e3ab938e8

BIN
src/assets/ZDimages/evacuation3_2/icon_dzya_dfx.png


BIN
src/assets/ZDimages/evacuation3_2/icon_dzya_gfx.png


BIN
src/assets/ZDimages/evacuation3_2/icon_dzya_jgfx.png


BIN
src/assets/ZDimages/evacuation3_2/icon_dzya_zfx.png


+ 59 - 0
src/components/lookVideoDialog/lookVideoDialog.vue

@@ -0,0 +1,59 @@
+<!--视频浏览DIALOG-->
+<!--
+        <lookVideoDialog ref="lookVideoDialog"></lookVideoDialog>
+        import lookVideoDialog from '@/components/lookVideoDialog/lookVideoDialog.vue'
+        components: {
+          lookVideoDialog
+        },
+        /*
+          传入3个参数(1,list,index)
+          1-开启
+          rul视频地址
+          '报警抓拍'title名称
+        */
+        this.$refs.lookVideoDialog.lookVideoDialogOpen(1,item.url,'报警抓拍');
+-->
+<template>
+  <el-dialog class="look-img-dialog" :title="lookVideoDialogTitle" :visible.sync="lookVideoDialogType" v-if="lookVideoDialogType" width="1070px" height="700" append-to-body>
+    <video style="width:1029px;height:578px;" controls="" autoplay="" name="media" :poster="videoCover">
+      <source :src="lookVideoDialogUrl" type="video/mp4">
+    </video>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'lookVideoDialog',
+    data(){
+      return{
+        videoCover:window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + "/admin/" + localStorage.getItem('videoCover'),
+        lookVideoDialogUrl:"",
+        lookVideoDialogTitle:"",
+        lookVideoDialogType:false,
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+      lookVideoDialogOpen(type,url,title){
+        if(type == 1){
+          this.$set(this,'lookVideoDialogUrl',url);
+          this.$set(this,'lookVideoDialogTitle',title?title:'视频');
+          this.$set(this,'lookVideoDialogType',true);
+        }else if(type == 2){
+          this.$set(this,'lookVideoDialogType',false);
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .look-img-dialog{
+
+  }
+</style>

+ 276 - 0
src/views/comprehensive/message/warningNotice/algorithmForewarning.vue

@@ -0,0 +1,276 @@
+<!--算法预警-->
+<template>
+  <div class="algorithmForewarning">
+    <div class="title-box">
+      <p>算法预警配置</p>
+      <p></p>
+    </div>
+    <div class="content-box scrollbar-box">
+      <el-form class="form-max-box" ref="addForm" :model="addForm" :rules="rules" label-width="170px">
+        <div class="form-top-box">
+          <el-form-item class="form-item-box" label="穿戴抓拍周期" prop="num1">
+            <el-input-number style="width:320px" v-model="addForm.num1" placeholder="请输入抓拍周期(小时)" :min="1" :max="3" label=""></el-input-number>
+          </el-form-item>
+          <el-form-item class="form-item-box" label="异常再识别数" prop="num2">
+            <el-input-number style="width:320px" v-model="addForm.num2" placeholder="请输入异常再识别数" :min="5" :max="10" label=""></el-input-number>
+          </el-form-item>
+          <el-form-item class="form-item-box" label="异常再识别率" prop="num3">
+            <el-input-number style="width:320px" v-model="addForm.num3" placeholder="请输入异常再识别率(%)" :min="70" :max="90" label=""></el-input-number>
+          </el-form-item>
+        </div>
+        <p class="form-title-p">穿戴识别</p>
+        <div class="check-max-box">
+          <p class="check-title">系统通知</p>
+          <div class="check-right-box check-right-box-A">
+            <p>监测异常</p>
+            <div>
+              <el-select v-model="systemData.num" placeholder="请选择" style="width:50px;height:30px;">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <p>次</p>
+            <p>监测到实验人员未正确穿戴实验服,{{systemData.num==1?'一':(systemData.num==2?'二':(systemData.num==3?'三':(systemData.num==4?'四':(systemData.num==5?'五':(systemData.num==6?'六':(systemData.num==7?'七':(systemData.num==8?'八':(systemData.num==9?'九':(systemData.num==10?'十':'')))))))))}}次后通过该方式进行预警通知。</p>
+          </div>
+        </div>
+        <div class="check-max-box">
+          <p class="check-title">短信通知</p>
+          <div class="check-right-box check-right-box-A">
+            <p>监测异常</p>
+            <div>
+              <el-select v-model="shortMessageData.num" placeholder="请选择" style="width:50px;height:30px;">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <p>次</p>
+            <p>监测到实验人员未正确穿戴实验服,{{shortMessageData.num==1?'一':(shortMessageData.num==2?'二':(shortMessageData.num==3?'三':(shortMessageData.num==4?'四':(shortMessageData.num==5?'五':(shortMessageData.num==6?'六':(shortMessageData.num==7?'七':(shortMessageData.num==8?'八':(shortMessageData.num==9?'九':(shortMessageData.num==10?'十':'')))))))))}}次后通过该方式进行预警通知。</p>
+          </div>
+        </div>
+        <div class="check-max-box">
+          <p class="check-title">语音播报</p>
+          <div class="check-right-box check-right-box-A">
+            <p>监测异常</p>
+            <div>
+              <el-select v-model="voiceData.num" placeholder="请选择" style="width:50px;height:30px;">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <p>次</p>
+            <p>监测到实验人员未正确穿戴实验服,{{voiceData.num==1?'一':(voiceData.num==2?'二':(voiceData.num==3?'三':(voiceData.num==4?'四':(voiceData.num==5?'五':(voiceData.num==6?'六':(voiceData.num==7?'七':(voiceData.num==8?'八':(voiceData.num==9?'九':(voiceData.num==10?'十':'')))))))))}}次后通过该方式进行预警通知。</p>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div class="bottom-button-max-box">
+      <p></p>
+      <p class="reset-button-one" @click="outButton">取消</p>
+      <p class="inquire-button-one" @click="upDataButton">提交</p>
+      <p></p>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'algorithmForewarning',
+    data(){
+      return{
+        options:[
+          {value:"1",label:"1"},{value:"2",label:"2"},{value:"3",label:"3"},{value:"4",label:"4"},
+          {value:"5",label:"5"},{value:"6",label:"6"},{value:"7",label:"7"},{value:"8",label:"8"},
+          {value:"9",label:"9"},{value:"10",label:"10"}
+        ],
+        addForm:{
+          num1:1,
+          num2:10,
+          num3:80,
+        },
+        systemData:{
+          num:3
+        },
+        shortMessageData:{
+          num:3
+        },
+        voiceData:{
+          num:3
+        },
+        rules:{
+          num1: [
+            { required: true, message: "请输入穿戴抓拍周期", trigger: "blur" },
+          ],
+          num2: [
+            { required: true, message: "请输入异常再识别数", trigger: "blur" },
+          ],
+          num3: [
+            { required: true, message: "请输入异常再识别率", trigger: "blur" },
+          ],
+        },
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+      //选择
+      checkClick(type){
+        if(type == 1){
+          this.$set(this.systemData,'type',0);
+        }else if (type == 2){
+          this.$set(this.systemData,'type',1);
+        }else if (type == 3){
+          this.$set(this.shortMessageData,'type',0);
+        }else if (type == 4){
+          this.$set(this.shortMessageData,'type',1);
+        }else if (type == 5){
+          this.$set(this.voiceData,'type',0);
+        }else if (type == 6){
+          this.$set(this.voiceData,'type',1);
+        }
+      },
+      //提交
+      upDataButton(){
+        this.$refs["addForm"].validate(valid => {
+          if (valid) {
+
+          }
+        })
+      },
+      //返回事件
+      outButton(){
+        this.$parent.goPage(1);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .algorithmForewarning{
+    font-weight: 500;
+    flex: 1;
+    display: flex !important;
+    flex-direction: column;
+    overflow: hidden;
+    ::v-deep .el-input-number__increase{
+      line-height: 38px;
+    }
+    .title-box{
+      display: flex;
+      border-bottom:1px solid #dedede;
+      p:nth-child(1){
+        margin-left:20px;
+        line-height: 80px;
+        font-size:18px;
+        color:#0045AF;
+      }
+      p:nth-child(2){
+        flex:1;
+      }
+      p:nth-child(3){
+        margin:20px;
+      }
+    }
+    .content-box{
+      flex:1;
+      .form-max-box{
+        .form-top-box{
+          display: flex;
+          margin-top:40px;
+          height:80px;
+          .form-item-box{
+            height:80px;
+            margin-bottom:0;
+          }
+        }
+        .form-title-p{
+          line-height:50px;
+          color:#0045AF;
+          background-color: #F5F5F5;
+          font-size:16px;
+          padding-left:20px;
+          margin-bottom:40px;
+        }
+        .check-max-box{
+          margin-bottom:20px;
+          display: flex;
+          height:40px;
+          line-height:40px;
+          .check-title{
+            margin-left:126px;
+            width:80px;
+            text-align: left;
+            font-size:16px;
+          }
+          .check-right-box{
+            cursor: pointer;
+            display: flex;
+            width:670px;
+            ::v-deep .el-input__icon{
+              line-height:30px;
+            }
+            ::v-deep .el-input__inner{
+              height:30px;
+              padding-right: 20px;
+              padding-left: 10px;
+            }
+            ::v-deep .el-input__suffix{
+              right:0;
+              height:30px;
+            }
+          }
+          .check-right-box-A{
+            border:1px solid #0183FA;
+            border-radius:4px;
+            p:nth-child(1){
+              width:80px;
+              margin-left:10px;
+            }
+            div:nth-child(2){
+              margin-top:-2px;
+            }
+            p:nth-child(3){
+              margin:0 20px 0 14px;
+            }
+            p:nth-child(4){
+              font-size:14px;
+              color:#CCCCCC;
+            }
+          }
+        }
+      }
+    }
+    .bottom-button-max-box{
+      display: flex;
+      padding:20px 0;
+      p:nth-child(1){
+        flex:1;
+      }
+      p:nth-child(2){
+        width:100px;
+        margin-right:20px;
+      }
+      p:nth-child(3){
+        width:100px;
+      }
+      p:nth-child(4){
+        flex:1;
+      }
+    }
+  }
+</style>

+ 193 - 0
src/views/comprehensive/message/warningNotice/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="app-container warningNotice">
+    <div class="warningNotice-page" v-if="pageType == 1">
+      <div class="title-box">
+        <el-form :model="queryParams" class="form-box" ref="queryForm" :inline="true" label-width="80px">
+          <el-form-item label="预警类型" prop="deptId" label-width="100px">
+            <el-select v-model="queryParams.deptId" clearable placeholder="全部" style="width:150px;">
+              <el-option
+                v-for="item in selectListA"
+                :key="item.key"
+                :label="item.value"
+                :value="item.key">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="预警方式" prop="deptId">
+            <el-select v-model="queryParams.deptId" clearable placeholder="全部" style="width:150px;">
+              <el-option
+                v-for="item in selectListB"
+                :key="item.key"
+                :label="item.value"
+                :value="item.key">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="预警时间" prop="dateRange" style="margin-left:10px;" label-width="70px">
+            <el-date-picker
+              :clearable="false"
+              v-model="dateRange"
+              size="small"
+              style="width: 240px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+            <p class="reset-button-one" @click="resetQuery">重置</p>
+          </el-form-item>
+          <el-form-item style="float: right;">
+            <el-col :span="1.5">
+              <p class="inquire-button-one"
+                 style="width:100px;"
+                 @click="goPage(3)"
+              >危险源预警</p>
+            </el-col>
+          </el-form-item>
+          <el-form-item style="float: right;">
+            <el-col :span="1.5">
+              <p class="inquire-button-one"
+                 style="width:100px;"
+                 @click="goPage(2)"
+              >算法预警</p>
+            </el-col>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="content-box">
+        <el-table  border :data="tableList" ref="multipleTable">
+          <el-table-column label="预警时间" align="center" prop="checkSchedule" show-overflow-tooltip />
+          <el-table-column label="预警类型" align="center" prop="checkSchedule" show-overflow-tooltip width="300"/>
+          <el-table-column label="预警内容" align="center" prop="checkSchedule" show-overflow-tooltip width="300"/>
+          <el-table-column label="预警方式" align="center" prop="createName" show-overflow-tooltip width="300"/>
+          <el-table-column label="实验室" sortable="custom" align="center" prop="createTime" show-overflow-tooltip width="300"/>
+          <el-table-column label="操作" align="center" prop="deptName" width="150">
+            <template slot-scope="scope">
+              <div class="table-button-box">
+                <p class="table-button-null"></p>
+                <p class="table-button-p">详情</p>
+                <p class="table-button-null"></p>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination :page-sizes="[20, 30, 40, 50]"
+                    v-show="total>0"
+                    :total="total"
+                    :page.sync="queryParams.pageNum"
+                    :limit.sync="queryParams.pageSize"
+                    @pagination="getList"
+        />
+      </div>
+    </div>
+    <algorithmForewarning v-if="pageType == 2"></algorithmForewarning>
+    <sourceOfDangerForewarning v-if="pageType == 3"></sourceOfDangerForewarning>
+    <infoPage v-if="pageType == 4"></infoPage>
+  </div>
+</template>
+
+<script>
+  import algorithmForewarning from './algorithmForewarning.vue'
+  import sourceOfDangerForewarning from './sourceOfDangerForewarning.vue'
+  import infoPage from './infoPage.vue'
+  export default {
+    name: 'index',
+    components: {
+      algorithmForewarning,
+      sourceOfDangerForewarning,
+      infoPage
+    },
+    data(){
+      return{
+        pageType:4,
+        selectListA:[{key:"1",value:"选项1"}],
+        selectListB:[{key:"1",value:"选项2"}],
+        queryParams:{},
+        dateRange:[],
+        tableList:[],
+        total:0,
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+      goPage(type){
+        if(type != this.pageType){
+          this.$set(this,'pageType',type);
+        }
+      },
+      //获取数据列表
+      getList(){
+        let obj = JSON.parse(JSON.stringify(this.queryParams))
+        if(this.dateRange[0]){
+          obj.startTime = this.dateRange[0];
+        }else{
+          obj.startTime = "";
+        }
+        if(this.dateRange[1]){
+          obj.endTime = this.dateRange[1];
+        }else{
+          obj.endTime = "";
+        }
+        checkManageList(obj).then(response => {
+          this.total = response.data.total;
+          this.tableList = response.data.records;
+        });
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.$set(this.queryParams,'pageNum',1);
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.$set(this,'dateRange',[]);
+        this.$set(this,'queryParams',{
+          pageNum:1,
+          pageSize:20,
+          checkType:2,
+          manageStatus:'-1',
+          checkTimeSort:0,
+          searchValue:"",
+          deptId:"",
+          isSelf:0,
+        });
+        this.handleQuery();
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .warningNotice{
+    flex: 1;
+    display: flex !important;
+    flex-direction: column;
+    overflow: hidden;
+    .warningNotice-page{
+      flex: 1;
+      display: flex !important;
+      flex-direction: column;
+      overflow: hidden;
+      .title-box{
+        margin-top:20px;
+        border-bottom:1px solid #dedede;
+      }
+      .content-box{
+        padding:20px;
+        flex: 1;
+        display: flex !important;
+        flex-direction: column;
+        overflow: hidden;
+      }
+    }
+  }
+</style>

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 356 - 0
src/views/comprehensive/message/warningNotice/infoPage.vue


+ 202 - 0
src/views/comprehensive/message/warningNotice/sourceOfDangerForewarning.vue

@@ -0,0 +1,202 @@
+<!--危险源预警-->
+<template>
+  <div class="sourceOfDangerForewarning">
+    <div class="title-box">
+      <p>危险源预警配置</p>
+      <p></p>
+    </div>
+    <div class="content-box scrollbar-box">
+      <el-form class="form-max-box" ref="addForm" :model="addForm" :rules="rules" label-width="170px">
+        <p class="form-title-p">化学品预警规则</p>
+        <div class="form-top-box">
+          <el-form-item class="form-item-box" label="即将过期提醒" prop="num1">
+            <el-input-number style="width:320px" v-model="addForm.num1" placeholder="请输入即将过期提醒天数(天)" :min="5" :max="60" label=""></el-input-number>
+          </el-form-item>
+          <el-form-item class="form-item-box" label="过期提醒数" prop="num2">
+            <el-input-number style="width:320px" v-model="addForm.num2" placeholder="请输入化学品过期后提醒次数" :min="1" :max="5" label=""></el-input-number>
+          </el-form-item>
+        </div>
+        <el-form-item class="form-item-check-box" label="违规带离">
+          <el-checkbox-group v-model="addForm.check1">
+            <el-checkbox style="width:100px;margin-top:2px;"
+                         v-for="item in checkListA" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item class="form-item-check-box" label="超时未归还">
+          <el-checkbox-group v-model="addForm.check2">
+            <el-checkbox style="width:100px;margin-top:2px;"
+                         v-for="item in checkListB" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item class="form-item-check-box" label="化学品已过期">
+          <el-checkbox-group v-model="addForm.check3">
+            <el-checkbox style="width:100px;margin-top:2px;"
+                         v-for="item in checkListB" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item class="form-item-check-box" label="化学品即将过期">
+          <el-checkbox-group v-model="addForm.check4">
+            <el-checkbox style="width:100px;margin-top:2px;"
+                         v-for="item in checkListB" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <p class="form-title-p" style="margin-top:20px;margin-bottom:10px;">气瓶预警规则</p>
+        <el-form-item class="form-item-check-box" label="违规带离">
+          <el-checkbox-group v-model="addForm.check5">
+            <el-checkbox style="width:100px;margin-top:2px;"
+                         v-for="item in checkListA" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item class="form-item-check-box" label="超时未归还">
+          <el-checkbox-group v-model="addForm.check6">
+            <el-checkbox style="width:100px;margin-top:2px;"
+                         v-for="item in checkListB" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item class="form-item-check-box" label="化学品已过期">
+          <el-checkbox-group v-model="addForm.check7">
+            <el-checkbox style="width:100px;margin-top:2px;"
+                         v-for="item in checkListB" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+        <el-form-item class="form-item-check-box" label="化学品即将过期">
+          <el-checkbox-group v-model="addForm.check8">
+            <el-checkbox style="width:100px;margin-top:2px;"
+                         v-for="item in checkListB" :value="item.key" :label="item.value" :key="item.key">{{item.value}}</el-checkbox>
+          </el-checkbox-group>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="bottom-button-max-box">
+      <p></p>
+      <p class="reset-button-one" @click="outButton">取消</p>
+      <p class="inquire-button-one" @click="upDataButton">提交</p>
+      <p></p>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'sourceOfDangerForewarning',
+    data(){
+      return{
+        checkListA:[{key:"1",value:"系统通知"},{key:"2",value:"短信通知"},{key:"3",value:"声光报警"},],
+        checkListB:[{key:"1",value:"系统通知"},{key:"2",value:"短信通知"}],
+        addForm:{
+          num1:7,
+          num2:2,
+          check1:[],
+          check2:[],
+          check3:[],
+          check4:[],
+          check5:[],
+          check6:[],
+          check7:[],
+          check8:[],
+        },
+        rules:{
+          num1: [
+            { required: true, message: "请输入穿戴抓拍周期", trigger: "blur" },
+          ],
+          num2: [
+            { required: true, message: "请输入异常再识别数", trigger: "blur" },
+          ],
+        },
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+
+      //提交
+      upDataButton(){
+        this.$refs["addForm"].validate(valid => {
+          if (valid) {
+
+          }
+        })
+      },
+      //返回事件
+      outButton(){
+        this.$parent.goPage(1);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .sourceOfDangerForewarning{
+    font-weight: 500;
+    flex: 1;
+    display: flex !important;
+    flex-direction: column;
+    overflow: hidden;
+    ::v-deep .el-input-number__increase{
+      line-height: 38px;
+    }
+    .title-box{
+      display: flex;
+      border-bottom:1px solid #dedede;
+      p:nth-child(1){
+        margin-left:20px;
+        line-height: 80px;
+        font-size:18px;
+        color:#0045AF;
+      }
+      p:nth-child(2){
+        flex:1;
+      }
+      p:nth-child(3){
+        margin:20px;
+      }
+    }
+    .content-box{
+      flex:1;
+      padding-top:30px;
+
+      .form-max-box{
+        .form-top-box{
+          display: flex;
+          margin-top:30px;
+          height:60px;
+          .form-item-box{
+            height:60px;
+            margin-bottom:0;
+          }
+        }
+        .form-item-check-box{
+          margin:0;
+        }
+        .form-title-p{
+          line-height:50px;
+          color:#0045AF;
+          background-color: #F5F5F5;
+          font-size:16px;
+          padding-left:20px;
+        }
+      }
+    }
+    .bottom-button-max-box{
+      display: flex;
+      padding:20px 0;
+      p:nth-child(1){
+        flex:1;
+      }
+      p:nth-child(2){
+        width:100px;
+        margin-right:20px;
+      }
+      p:nth-child(3){
+        width:100px;
+      }
+      p:nth-child(4){
+        flex:1;
+      }
+    }
+  }
+</style>