From e01788b7b094ef9da2165283a6c3924d68069404 Mon Sep 17 00:00:00 2001
From: gongjiale <942894820@qq.com>
Date: Tue, 4 Oct 2022 13:14:15 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E9=83=A8=E5=88=86=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/modules/abilityStatistics/index.vue | 163 ++++++++++++------
 front/src/api/home.js                         |   9 +
 .../components/CapabilityConvergence.vue      |  75 +++++++-
 3 files changed, 186 insertions(+), 61 deletions(-)

diff --git a/back/src/views/modules/abilityStatistics/index.vue b/back/src/views/modules/abilityStatistics/index.vue
index 3d92b24a..d7adb9e1 100644
--- a/back/src/views/modules/abilityStatistics/index.vue
+++ b/back/src/views/modules/abilityStatistics/index.vue
@@ -176,14 +176,20 @@
             style="width: 100%"
             v-show="this.departmentId === 3 || this.departmentId === 4"
           >
-            <el-table-column prop="deptName" label="部门" width="180">
+            <el-table-column prop="deptName" label="部门" min-width="100%">
             </el-table-column>
-            <el-table-column prop="resourceName" label="资源名称" width="180">
+            <el-table-column prop="resourceName" label="资源名称" min-width="100%">
             </el-table-column>
-            <el-table-column prop="type" label="类型"> </el-table-column>
-            <el-table-column prop="createDate" label="日期"> </el-table-column>
-            <el-table-column prop="approveStatus" label="状态">
+            <el-table-column prop="type" label="类型" min-width="100%"> </el-table-column>
+            <el-table-column prop="createDate" label="日期" min-width="100%"> </el-table-column>
+            <el-table-column prop="approveStatus" label="状态" min-width="100%">
             </el-table-column>
+            <el-table-column label="操作" min-width="100%">
+		<template slot-scope="scope"   >
+			<el-link type="primary" v-if="scope.row.applyNumber" v-on:click="detailClick(scope.row)">查看详情</el-link>
+      <el-link type="info" v-else disabled>后台挂接，无详情</el-link>
+		</template>
+  </el-table-column>
           </el-table>
           <div class="block">
             <el-pagination
@@ -216,17 +222,35 @@
       :fatherId="fatherId"
       @closeApplication="closeApplication"
     ></application-resources>
+  <ability-detail  v-if="detailsVisible"
+  :detailsVisible="detailsVisible" :detailParamss="detailParamss"  :detailType="detailType" @closeModal="closeModal">
+</ability-detail>
   </div>
+
 </template>
 <script>
 import componentServices from './componentServices.vue'
+import AbilityDetail from './components/abilityDetails'
 import applicationResources from './applicationResources.vue'
 import ComponentUsed from './componentUsed.vue'
+
 import { mapState } from 'vuex'
+// const props = defineProps({
+//   processDefinitionName: { type: String, default: null },
+//   businessKey: { type: String, default: null },
+//   processInstanceId: { type: String, default: null },
+//   resourceId: { type: String, default: null },
+//   refObj: { type: Object, default: null },
+//   showType: { type: String, default: null },
+// })
 export default {
-  components: { componentServices, applicationResources, ComponentUsed },
+  components: { componentServices, applicationResources, ComponentUsed,AbilityDetail },
   data () {
     return {
+      detailType:'',
+      detailParamss:{},
+      isBack:true,
+      detailsVisible:false,
       inputTxt: '',
       tableId: '',
       fatherId: '',
@@ -306,7 +330,7 @@ export default {
         { name: '数据资源', key: 3 },
         { name: '知识库', key: 3 }
       ],
-      tableData: [{ deptName: '部门', resourceNum: 222 }],
+      tableData: [],
       tableData2: [
         {
           approveStatus: '',
@@ -356,16 +380,9 @@ export default {
     ...mapState(['departmentSelects'])
   },
   methods: {
-    // 搜索框
-    // searchBtn(){
-    //     this.getALLTree()
-    // },
-    //  //树
-    //     handleNodeClick(data) {
-    //         console.log(data.name);
-    //         this.getTreeName(data)
-    //     },
-    // 翻页
+    closeModal() {
+      this.detailsVisible = false;
+    },
     handleCurrentChange (val) {
       if (this.choseId === 0) {
         this.getFirstTree(val)
@@ -404,8 +421,13 @@ export default {
 
     // 组件服务部门发布情况--改为能力上架统计
     getFirstTree (page) {
-      if(this.examineStatus== '全部'){
+    
+      if(this.examineStatus== '-1'  ){
          this.status=''
+      }else if(this.examineStatus== '0'   ){
+         this.status='审核中'
+      }else if(this.examineStatus== '1'   ){
+         this.status='审核完成'
       }else{
         this.status=this.examineStatus
       }
@@ -452,8 +474,12 @@ export default {
     },
     // 组件服务部门使用情况列表-改为能力使用统计
     getSecondTree () {
-      if(this.examineStatus== '全部'){
+      if(this.examineStatus== '-1'  ){
          this.status=''
+      }else if(this.examineStatus== '0'   ){
+         this.status='审核中'
+      }else if(this.examineStatus== '1'   ){
+         this.status='审核完成'
       }else{
         this.status=this.examineStatus
       }
@@ -497,21 +523,74 @@ export default {
           this.tableData = res.data.data
           this.total = res.data.data.total
         })
+    },
+    //点击查看详情
+    detailClick(row){
+      this.detailParamss={}
+      let applyNumber=row.applyNumber
+     if(applyNumber ==nu)
+      if (this.departmentId === 3) { //能力上架
+        this.detailType='能力上架'
+       let params = {
+         processInstanceId: applyNumber,
+       }
+        this.$http
+        .get('/act/his/getTaskHandleDetailInfo',{params})
+        .then((res) => {
+        if (res.data.code == 0) {
+        
+          if(res.data.data!=null){
+          this.detailParamss.resourceApplication=[]
+          this.detailParamss.resourceApplication=res.data.data  
+          this.detailsVisible=true     
+        } else{
+          this.$message.info('暂无详情数据！')
+        }}else {
+          this.$message.error('数据请求失败！')
+        }
+       
+      })
+      } else if (this.departmentId === 4) {//能力使用
+       
+      this.detailType='能力使用'
+        this.$http
+        .get('/processForm/tabilityapplication/getByApplyFlag/'+applyNumber)
+        .then((res) => {
+        
+        if (res.data.code == 0) {
+          if(res.data.data!=null){
+          this.detailParamss=res.data.data     
+          this.detailsVisible=true  }
+          else{
+            this.$message.info('暂无详情数据！')
+          }
+        } else {
+          this.$message.error('数据请求失败！')
+        }
+       
+      })
+      }
+    
+    
     },
     // 能力上架明细
     getOneDetail (page) {
       var passAndReview = '' // 转变"审核完成"字段为通过
-      if (this.examineStatus === '审核完成') {
-        passAndReview = '通过'
-      } else {
-        passAndReview = this.examineStatus
+      if(this.examineStatus== '-1'  ){
+         this.status=''
+      }else if(this.examineStatus== '0'   ){
+         this.status='审核中'
+      }else if(this.examineStatus== '1'   ){
+         this.status='通过'
+      }else{
+        this.status=this.examineStatus
       }
       this.$http
         .get('/census/center/selectCensusResourceTable', {
           params: {
             // limit: 5,
             // page: page || 1,
-            approveStatus: passAndReview,
+            approveStatus: this.status,
             deptId: this.abilityDepartment,
             type: this.abilityType,
             startDate: this.startDate,
@@ -527,13 +606,12 @@ export default {
     // 能力使用明细
     getTwoDetail (page) {
       var passAndReview = '' // 转变"审核完成"字段为通过
-      if (this.examineStatus === '审核完成') {
-        passAndReview = '通过'
-      } else {
-        passAndReview = this.examineStatus
-      }
-      if(this.examineStatus== '全部'){
+      if(this.examineStatus== '-1'  ){
          this.status=''
+      }else if(this.examineStatus== '0'   ){
+         this.status='审核中'
+      }else if(this.examineStatus== '1'   ){
+         this.status='通过'
       }else{
         this.status=this.examineStatus
       }
@@ -734,13 +812,6 @@ export default {
         this.startDate =''
         this.endDate =''
       }
-      if (this.examineStatus == 0) {
-        this.examineStatus = '审核中'
-      }  if (this.examineStatus == 1) {
-        this.examineStatus = '审核完成'
-      } else {
-        this.examineStatus = '全部'
-      }
 
       if (this.abilityDepartment) {
         this.abilityDepartment = this.abilityDepartment
@@ -753,23 +824,10 @@ export default {
       } else {
         this.abilityType = ''
       }
-      if (this.departmentId === 1) {
-        // if (this.detailFlag) {
-        //   this.handleChose(3)
-        //   this.detailFlag = !this.detailFlag
-        // } else {
+      if (this.departmentId === 1) { 
           this.handleChose(1)
-         // this.detailFlag = !this.detailFlag
-       // }
-        // this.departmentId = 1;
-      } else if (this.departmentId === 2) {
-        // if (this.detailFlag) {
-        //   this.handleChose(4)
-        //   this.detailFlag = !this.detailFlag
-        // } else {
+      } else if (this.departmentId === 2) {        
           this.handleChose(2)
-        //   this.detailFlag = !this.detailFlag
-        // }
       } else if (this.departmentId === 3) {
         this.handleChose(3)
       } else {
@@ -778,6 +836,7 @@ export default {
     },
     // 重置按钮查询数据
     resetDataList () {
+      this.value1=[]
       this.startDate = ''
       this.endDate = ''
       this.examineStatus = '全部'
diff --git a/front/src/api/home.js b/front/src/api/home.js
index 158f64f5..c1927328 100644
--- a/front/src/api/home.js
+++ b/front/src/api/home.js
@@ -360,6 +360,15 @@ export function selectCollectComponentList(params) {
     params,
   })
 }
+//首页 应用资源
+export function selectCollectResourceList(params) {
+  return request({
+    url: 'resource/selectCollectResourceList',
+    method: 'get',
+    params,
+  })
+}
+
 // 根据instanceId获取摄像头列表
 export function getApplyCameraList(id) {
   return request({
diff --git a/front/src/views/newHome/components/CapabilityConvergence.vue b/front/src/views/newHome/components/CapabilityConvergence.vue
index 6e8c8d37..16bd7234 100644
--- a/front/src/views/newHome/components/CapabilityConvergence.vue
+++ b/front/src/views/newHome/components/CapabilityConvergence.vue
@@ -19,7 +19,7 @@
           </div> -->
           <div
             class="name"
-            v-for="(item, index) in zjList"
+            v-for="(item, index) in zjList.slice(0, 5)"
             :key="item.name"
             :class="index == 4 ? 'name-last' : ''"
             @click="selectOne1(item.name)"
@@ -30,14 +30,14 @@
         </div>
         <div class="item">
           <div class="yy">应用资源</div>
-          <div
+        <div
             class="name"
-            v-for="(item, index) in yyList"
-            :key="item.id"
+            v-for="(item, index) in yyList.slice(0, 5)"
+            :key="item.name"
             :class="index == 4 ? 'name-last' : ''"
-            @click="selectOne(item.id)"
+            @click="selectOne11(item.name)"
           >
-            {{ index + 1 }}-{{ item.name }}
+            {{ item.name + '-' + item.num + '项' }}
           </div>
           <div class="btn" @click="jumpPage('应用资源')">查看更多</div>
         </div>
@@ -45,7 +45,7 @@
           <div class="jc">基础设施</div>
           <div
             class="name"
-            v-for="(item, index) in jcList"
+            v-for="(item, index) in jcList.slice(0, 5)"
             :key="item.name"
             :class="index == 2 ? 'name-last' : ''"
             @click="selectOne2(item.name)"
@@ -89,7 +89,8 @@
     pageWithAttrs,
     getDataResource,
     selectInfrastructureList,
-    selectCollectComponentList
+    selectCollectComponentList,
+    selectCollectResourceList
   } from '@/api/home.js'
   import { ref, reactive } from 'vue'
   import { useRouter } from 'vue-router'
@@ -174,6 +175,7 @@
       })
     } else {
       let type = paramsGetResources.type
+   
       if (type == '基础设施') {
         jcList.value = []
         selectInfrastructureList().then((res) => {
@@ -264,7 +266,53 @@
               })
           }
         })
-      }  else {
+      }     
+      else if (type == '应用资源') {
+        yyList.value = []
+        selectCollectResourceList().then((res) => {
+          for (const key in res.data.data) {
+            if (whoShow1.value.itShowXiHaiAn) {
+              if (key === '视频资源') {
+                yyList.value.push({
+                  name: key,
+                  num: res.data.data[key],
+                })
+              }
+            } else {
+              yyList.value.push({
+                name: key,
+                num: res.data.data[key],
+              })
+            }
+          }
+          // 西海岸-单兵设备、无人机 获取数量
+          if (whoShow1.value.itShowXiHaiAn) {
+            getSoldierData('无人机')
+              .then((res) => {
+                let { total = 0 } = res.data.data
+                yyList.value.push({
+                  name: '无人机',
+                  num: total,
+                })
+              })
+              .catch((err) => {
+                console.log('err--无人机---------->', err)
+              })
+            getSoldierData('单兵设备')
+              .then((res) => {
+                let { total = 0 } = res.data.data
+                zjList.value.push({
+                  name: '单兵设备',
+                  num: total,
+                })
+              })
+              .catch((err) => {
+                console.log('err--单兵设备---------->', err)
+              })
+          }
+        })
+      } 
+      else {
         pageWithAttrs(paramsGetResources).then((res) => {
           console.log('object个数======>', type)
           obj.value = res.data.data.records
@@ -382,6 +430,15 @@
       },
     })
   }
+  const selectOne11 = (name) => {
+    router.push({
+      path: '/DetailsPageconetent',
+      query: {
+        type: name,
+        select: '应用资源',
+      },
+    })
+  }
   const selectOne2 = (name) => {
     console.log('点击===============》', name)
     router.push({

From 82cbe0aecb5faabd07b47a31e867ec0142a5857e Mon Sep 17 00:00:00 2001
From: gongjiale <942894820@qq.com>
Date: Tue, 4 Oct 2022 13:18:52 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=98=8E=E7=BB=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/abilityDetails.vue             | 426 ++++++++++++++++++
 1 file changed, 426 insertions(+)
 create mode 100644 back/src/views/modules/abilityStatistics/components/abilityDetails.vue

diff --git a/back/src/views/modules/abilityStatistics/components/abilityDetails.vue b/back/src/views/modules/abilityStatistics/components/abilityDetails.vue
new file mode 100644
index 00000000..0783f165
--- /dev/null
+++ b/back/src/views/modules/abilityStatistics/components/abilityDetails.vue
@@ -0,0 +1,426 @@
+<template>
+  <el-dialog
+    :destroy-on-close="true"
+    :close-on-click-modal="false"
+    @close="closeModal"
+    title="申请详情"
+    :visible.sync="detailsVisibleCopy"
+  >
+    <!--非后台-->
+
+    <div class="topss" v-if="detailType == '能力使用'">
+      <div class="title">基本信息</div>
+      <div class="main">
+        <div>
+          <p class="item">
+            <span>申请标题：{{ detailParams.title }}</span>
+            <span>申请单号：{{ detailParams.applyNumber || "--" }}</span>
+            <span v-if="detailParams.applicationSystem">
+              应用系统：{{ detailParams.applicationSystem }}
+            </span>
+            <span v-else></span>
+          </p>
+          <p class="item">
+            <span>申请人信息：{{ detailParams.user }}</span>
+            <span>电话：{{ detailParams.phone }}</span>
+            <span>单位：{{ detailParams.unit }}</span>
+          </p>
+          <p v-if="detailParams.applicationScene.length > 0">
+            <span
+              >应用场景：{{ detailParams.applicationScene.join("；") }}</span
+            >
+          </p>
+          <p>
+            <span>应用背景：{{ detailParams.applicationBackground }}</span>
+          </p>
+          <p>
+            <span>期望效果：{{ detailParams.effectWish }}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <!-- 申请能力-->
+    <div class="bottoms" v-if="detailType == '能力使用'">
+      <div class="title">申请能力</div>
+      <div class="main">
+        <div
+          class="item"
+          v-for="(item, index) in this.showArr"
+          :key="item + index"
+        >
+          <div class="deptName">
+            <span class="img"></span>
+            <span>{{ item.name }}</span>
+          </div>
+          <div
+            style="
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            "
+          ></div>
+          <div class="ability" v-for="val in item.list" :key="val.id">
+            <div class="box" v-if="item.list.length > 0">
+              <div class="right">
+                <div class="ability-top">
+                  <div class="name">
+                    <div class="name">
+                      <span class="channelName">{{ val.name }}</span>
+                    </div>
+                  </div>
+                  <div></div>
+                </div>
+                <div class="ability-bottom">
+                  <div class="dec">资源描述：{{ val.description }}</div>
+                  <div class="result">
+                    申请结果：{{
+                      item.ended ? item.approveStatus || "审核完成" : "审核中"
+                    }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!--审批详情-->
+    <div>
+      <div class="title">审批详情</div>
+      <div v-for="item in this.dataSource.data" :key="item">
+        <a-table :dataSource="item[1]" :columns="columns">
+          <template #bodyCell="{ column, text }">
+            <template v-if="column.dataIndex === 'name'">
+              <a>{{ text }}</a>
+            </template>
+          </template>
+        </a-table>
+      </div>
+    </div>
+    <!-- <div else>
+       gai
+     </div> -->
+  </el-dialog>
+</template>
+  
+<script>
+export default {
+  props: {
+    detailType: {
+      type: String,
+      default: "",
+    },
+    detailsVisible: {
+      type: Boolean,
+      default: false,
+    },
+    detailParamss: {
+      type: Object,
+      default: {},
+    },
+  },
+  watch: {
+    detailsVisible: {
+      handler(newVal) {
+        this.detailsVisibleCopy = newVal;
+      },
+      immediate: true,
+    },
+    detailParamss: {
+      handler(newVal) {
+        this.detailParams = newVal;
+        this.getDetail(newVal);
+      },
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      detailsVisibleCopy: false,
+      columns: [
+        {
+          title: "任务名称",
+          dataIndex: "activityName",
+          key: "activityName",
+        },
+        {
+          title: "处理人",
+          dataIndex: "assigneeName",
+          key: "assigneeName",
+        },
+        {
+          title: "任务开始时间",
+          dataIndex: "startTime",
+          key: "startTime",
+        },
+        {
+          title: "任务结束时间",
+          dataIndex: "endTime",
+          key: "endTime",
+        },
+        {
+          title: "审核意见",
+          dataIndex: "comment",
+          key: "comment",
+        },
+        {
+          title: "任务时长/秒",
+          dataIndex: "durationInSeconds",
+          key: "durationInSeconds",
+        },
+      ],
+      dataSource: [{ data: [] }],
+      showArr: [],
+    };
+  },
+  computed: {},
+  components: {},
+  methods: {
+    getDetail(newVal) {
+
+      if (newVal.resourceApplication) {
+        this.dataSource.data = [];
+        if (this.detailType == "能力上架") {
+          let arr = [];
+          newVal.resourceApplication.forEach((item) => {
+            arr.push(item);
+          });
+          this.dataSource.data.push([
+            newVal.resourceApplication.processInstanceId,
+            arr,
+          ]);
+        } else {
+          for (const key in newVal.resourceApplication) {
+            if (newVal.resourceApplication[key].length > 0) {
+              newVal.resourceApplication[key].map((item) => {
+                this.dataSource.data.push([
+                  item.instanceId,
+                  item.taskHandleDetailInfo,
+                ]);
+              });
+            }
+          }
+        }
+
+        this.showArr.value = [];
+        for (const key in newVal.resourceApplication) {
+          if (newVal.resourceApplication[key].length > 0) {
+            let obj = { name: "", instanceId: "", list: [], list2: [] };
+            obj.name = key;
+            newVal.resourceApplication[key].map((item) => {
+              obj.instanceId = item.instanceId;
+              obj.backToFirst = item.backToFirst;
+              obj.ended = item.ended;
+              obj.approveStatus = item.approveStatus;
+              if (item.resources.length > 0) {
+                item.resources.map((val) => {
+                  obj.list.push(val);
+                });
+              } else {
+                item.camera.map((val) => {
+                  obj.list2.push(val);
+                });
+              }
+            });
+
+            this.showArr.push(obj);
+          }
+        }
+      }
+    },
+    //   init () {
+    //     this.visible = true
+    //     this.$nextTick(() => {
+    //       this.$refs['dataForm'].resetFields()
+    //     })
+    //   },
+    closeModal() {
+      this.$emit("closeModal");
+    },
+  },
+};
+</script>
+<style scoped>
+.title {
+  font-size: 22px;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 20px;
+  padding-left: 10px;
+  border-left: 6px #0058e1 solid;
+}
+
+.topss {
+  margin-bottom: 28px;
+
+  .main {
+    background: #eee;
+    padding: 28px 28px 28px;
+
+    p {
+      display: flex;
+      justify-content: space-between;
+
+      & > span {
+        width: 100%;
+      }
+
+      .enclosure {
+        width: 95%;
+        padding: 28px 28px 28px;
+        background: #ddd;
+        display: flex;
+        justify-content: space-between;
+        margin-top: 28px;
+      }
+
+      .btn:hover {
+        color: #0058e1;
+        cursor: pointer;
+      }
+    }
+
+    .item {
+      font-size: 16px;
+
+      span {
+        width: 50px;
+      }
+    }
+  }
+}
+
+.bottoms {
+  .main {
+    .item {
+      border-top: 1px #eee solid;
+
+      .deptName {
+        color: #0058e1;
+        font-size: 16px;
+        margin-top: 10px;
+        display: flex;
+        align-items: center;
+
+        .img {
+          width: 5px;
+          height: 5px;
+          border-radius: 5px;
+          background: #0058e1;
+          margin-right: 10px;
+        }
+      }
+
+      .oddNumbers {
+        margin: 10px 0 0 15px;
+      }
+
+      .box {
+        margin-left: 10px;
+
+        .ability {
+          height: 13px;
+          display: flex;
+          border-bottom: 1px #eee solid;
+          padding: 0.1rem 0;
+
+          .btn {
+            cursor: pointer;
+            color: #0087ff;
+            align-self: flex-end;
+            padding: 5px 10px;
+            border: 1px #0087ff solid;
+            border-radius: 2px;
+          }
+
+          .right {
+            flex: 1;
+            margin-left: 15px;
+
+            .ability-top {
+              width: 100%;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .name {
+                width: 6rem;
+                height: 0.2rem;
+                display: flex;
+
+                .channelName {
+                  max-width: 5rem;
+                  height: 20px;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 1;
+                  -webkit-box-orient: vertical;
+                  word-break: break-all;
+                }
+
+                .type {
+                  background: #0087ff;
+                  color: #fff;
+                  line-height: 14px;
+                  padding: 2px 10px;
+                  border-radius: 10px;
+                  margin-left: 10px;
+                }
+              }
+            }
+
+            .ability-bottom {
+              margin-top: 15pxrem;
+
+              .dec {
+                width: 70px;
+                height: 44px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+                word-break: break-all;
+              }
+
+              .dec2 {
+                width: 70px;
+                height: 22px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+                word-break: break-all;
+              }
+
+              .result {
+                position: relative;
+              }
+            }
+          }
+
+          .DownloadAttachment {
+            position: absolute;
+            right: 10px;
+            top: -150px;
+          }
+
+          .DownloadAttachment2 {
+            position: absolute;
+            right: 10px;
+            top: -110px;
+          }
+        }
+
+        .clickCursor {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+</style>
+  
\ No newline at end of file