task 45202 大屏调整

src/components/DictTag/NewDictTag.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <template v-for="(item, index) in options">
+      <template v-if="values.includes(item.value)">
+        <span
+          v-if="item.raw.listClass == 'default' || item.raw.listClass == ''"
+          :key="item.value"
+          :index="index"
+          :class="item.raw.cssClass"
+          >{{ item.label + " " }}</span
+        >
+        <el-tag
+          v-else
+          :disable-transitions="true"
+          :key="item.value"
+          :index="index"
+          :type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
+          :class="item.raw.cssClass"
+          @click="onClick"
+        >
+          {{ item.label + " " }}
+        </el-tag>
+      </template>
+    </template>
+    <template v-if="unmatch && showValue">
+      {{ unmatchArray | handleArray }}
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NewDictTag", // ruoyi新版本带缓存的DictTag
+  props: {
+    options: {
+      type: Array,
+      default: null,
+    },
+    value: [Number, String, Array],
+    // 当未找到匹配的数据时，显示value
+    showValue: {
+      type: Boolean,
+      default: true,
+    }
+  },
+  data() {
+    return {
+      unmatchArray: [], // 记录未匹配的项
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('tagClick', ...arguments);
+    },
+  },
+  computed: {
+    values() {
+      if (this.value !== null && typeof this.value !== "undefined") {
+        return Array.isArray(this.value) ? this.value : [String(this.value)];
+      } else {
+        return [];
+      }
+    },
+    unmatch() {
+      this.unmatchArray = [];
+      if (this.value !== null && typeof this.value !== "undefined") {
+        // 传入值为非数组
+        if (!Array.isArray(this.value)) {
+          if (this.options.some((v) => v.value == this.value)) return false;
+          this.unmatchArray.push(this.value);
+          return true;
+        }
+        // 传入值为Array
+        this.value.forEach((item) => {
+          if (!this.options.some((v) => v.value == item))
+            this.unmatchArray.push(item);
+        });
+        return true;
+      }
+      // 没有value不显示
+      return false;
+    },
+  },
+  filters: {
+    handleArray(array) {
+      if (array.length === 0) return "";
+      return array.reduce((pre, cur) => {
+        return pre + " " + cur;
+      })
+    }
+  }
+};
+</script>
+<style scoped>
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+</style>

src/components/DictTag/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="dictionary-state">
+    <template v-for="(item, index) in options">
+      <template v-if="values.includes(item.dictValue)">
+        <span
+          v-if="item.listClass == 'default' || item.listClass == ''"
+          :key="item.dictValue"
+          :index="index"
+          :class="item.cssClass"
+          >{{ item.dictLabel }}</span
+        >
+        <span
+          v-else
+          :key="item.dictValue"
+          :index="index"
+          :class="item.listClass"
+        >
+          {{ item.dictLabel }}
+        </span>
+        <!-- <el-tag
+          v-else
+          :key="item.dictValue"
+          :index="index"
+          :type="item.listClass == 'primary' ? '' : item.listClass"
+          :class="item.cssClass"
+        >
+          {{ item.dictLabel }}
+        </el-tag> -->
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DictTag",
+  props: {
+    options: {
+      type: Array,
+      default: null,
+    },
+    value: [Number, String, Array],
+  },
+  computed: {
+    values() {
+      if (this.value !== null && typeof this.value !== "undefined") {
+        return Array.isArray(this.value) ? this.value : [String(this.value)];
+      } else {
+        return [];
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+.dictionary-state {
+  .primary {
+    color: #409eff;
+  }
+  .success {
+    color: #67c23a;
+  }
+  .info {
+    color: #909399;
+  }
+  .warning {
+    color: #e6a23c;
+  }
+  .danger {
+    color: #f56c6c;
+  }
+}
+</style>

src/views/property/api/index.js

@@ -341,3 +341,29 @@ export function debtDistribution (deptId, year) {
     params: query
   })
 }
+
+// 查询固定资产详细
+export function getPermanent(id, parms) {
+  return request({
+    url: 'api/asset/permanent/get/' + id,
+    method: 'get',
+    params: parms,
+  })
+}
+
+// 查询固定资产详细
+export function attachmentQuery( params ) {
+  return request({
+    url: 'api/system/attachment/query',
+    method: 'get',
+    params: params,
+  })
+}
+
+// 查询合同信息详细
+export function getInfo(id) {
+  return request({
+    url: 'api/contraction/info/get/' + id,
+    method: 'get'
+  })
+}

src/views/property/asset-details/index.html

@@ -34,138 +34,245 @@
     <div class="echarts_main scrollbar" v-if="type == '2' || type == '3'">
       <div>
         <p>资产编码</p>
-        <p>{{data.code}}</p>
+        <p>{{permanentDetail.code}}</p>
       </div>
       <div>
         <p>资产类别</p>
-        <p>{{data.assetType}}</p>
+        <p>{{permanentDetail.assetType}}</p>
       </div>
       <div>
         <p>经营属性</p>
-        <p>{{data.operationType}}</p>
+        <p><DictTag :options="operationTypeOptions" :value="permanentDetail.operationType"/></p>
       </div>
       <div>
         <p>增加方式</p>
-        <p>{{data.addType}}</p>
+        <p><DictTag :options="addTypeOptions" :value="permanentDetail.addType"/></p>
       </div>
       <div>
         <p>构建时间</p>
-        <p>{{data.buildTime}}</p>
+        <p>{{permanentDetail.buildTime}}</p>
       </div>
       <div>
         <p>使用情况</p>
-        <p>{{data.useType}}</p>
+        <p><DictTag :options="useTypeOptions" :value="permanentDetail.useType"/></p>
       </div>
       <div>
         <p>资产状态</p>
-        <p>{{data.assetStatus}}</p>
+        <p><DictTag :options="assetStatusOptions" :value="permanentDetail.assetStatus"/></p>
       </div>
       <div>
         <p>扶贫资产</p>
-        <p>{{data.isFormAsset}}</p>
+        <p><DictTag :options="sysYesNoOptions" :value="permanentDetail.isFormAsset"/></p>
       </div>
       <div>
         <p>管理人</p>
-        <p>{{data.manager}}</p>
+        <p>{{permanentDetail.manager}}</p>
       </div>
       <div>
         <p>履约情况</p>
-        <p>{{data.agreeType}}</p>
+        <p><DictTag :options="agreeTypeOptions" :value="permanentDetail.agreeType"/></p>
       </div>
       <div>
         <p>存在权属纠纷</p>
-        <p>{{data.dispute}}</p>
+        <p><DictTag :options="sysYesNoOptions" :value="permanentDetail.dispute"/></p>
       </div>
 
       <div>
         <p>数量/建筑面积</p>
-        <p>{{data.quantity}}</p>
+        <p>{{permanentDetail.quantity}}</p>
       </div>
       <div>
         <p>单位</p>
-        <p>{{data.unit}}</p>
+        <p>{{permanentDetail.unit}}</p>
       </div>
       <div>
         <p>原值</p>
-        <p>{{data.originalValue}}</p>
+        <p>{{permanentDetail.originalValue}}</p>
       </div>
       <div>
         <p>残值率 N%</p>
-        <p>{{data.residualsRate}}</p>
+        <p>{{permanentDetail.residualsRate}}</p>
       </div>
       <div>
         <p>折旧方式</p>
-        <p>{{data.depreciationType}}</p>
+        <p><DictTag :options="depreciationTypeOptions" :value="permanentDetail.depreciationType"/></p>
       </div>
       <div>
         <p>累计折旧</p>
-        <p>{{data.depreciationValue}}</p>
+        <p>{{permanentDetail.depreciationValue}}</p>
       </div>
       <div>
         <p>备注</p>
-        <p>{{data.remark}}</p>
+        <p>{{permanentDetail.remark}}</p>
       </div>
       <div>
         <p>附件</p>
-        <p>{{data.remark}}</p>
+        <p v-if="showfile">
+          <template v-for="(item,index) in permanentDetail.fileList">
+            <a :href="item.urlApi" v-if="item.type != 'image'">
+              <img :src="'/api' + item.url" style="width: 3vw;height: 3vw;margin-right: 0.5vw;" alt="">
+            </a>
+            <img v-else :src="item.thumUrl" style="width: 3vw;height: 3vw;margin-right: 0.3vw;" alt="" @click="openImage(item.url)">
+          </template>
+        </p>
       </div>
     </div>
     <div class="echarts_main scrollbar" v-if="type == '4' || type == '5' || type == '6'">
       <div>
         <p>合同编码</p>
-        <p>{{data.code}}</p>
+        <p>{{permanentDetail.code}}</p>
       </div>
       <div>
-        <p>合同截止日期</p>
-        <p>{{data.endTime}}</p>
+        <p>合同类型</p>
+        <p><DictTag :options="typeOfContractTypeOptions" :value="permanentDetail.assetType"/></p>
       </div>
       <div>
-        <p>预结款日期</p>
-        <p>{{data.settlementDate}}</p>
+        <p>合同来源</p>
+        <p><DictTag :options="contractionSourceOptions" :value="permanentDetail.contractionSource"/></p>
       </div>
       <div>
-        <p>结款金额</p>
-        <p>{{data.settlementAmount}}</p>
+        <p>甲方</p>
+        <p>{{permanentDetail.firstParty}}</p>
       </div>
       <div>
-        <p>天数</p>
-        <p>{{data.days}}</p>
+        <p>乙方</p>
+        <p>{{permanentDetail.secondParty}}</p>
       </div>
       <div>
-        <p>合同类型</p>
-        <p>{{data.assetType}}</p>
+        <p>甲方代表</p>
+        <p>{{permanentDetail.firstPartyDirector}}</p>
       </div>
       <div>
-        <p>合同来源</p>
-        <p>{{data.contractionSource}}</p>
+        <p>乙方代表</p>
+        <p>{{permanentDetail.secondPartyDirector}}</p>
+      </div>
+      <div>
+        <p>甲方电话</p>
+        <p>{{permanentDetail.firstPartyPhone}}</p>
+      </div>
+      <div>
+        <p>乙方电话</p>
+        <p>{{permanentDetail.secondPartyPhone}}</p>
       </div>
       <div>
         <p>签订日期</p>
-        <p>{{data.buildingTime}}</p>
+        <p>{{permanentDetail.buildingTime}}</p>
       </div>
       <div>
-        <p>甲方</p>
-        <p>{{data.firstParty}}</p>
+        <p>乙方身份证号</p>
+        <p>{{permanentDetail.secondPartyIdCard}}</p>
       </div>
       <div>
-        <p>乙方</p>
-        <p>{{data.secondParty}}</p>
+        <p>合同状态</p>
+        <p><DictTag :options="contractionStatusOptions" :value="permanentDetail.contractionStatus"/></p>
       </div>
       <div>
-        <p>开始日期</p>
-        <p>{{data.startTime}}</p>
+        <p>备注</p>
+        <p>{{permanentDetail.remark}}</p>
+      </div>
+
+      <div>
+        <p>收付款类型</p>
+        <p><DictTag :options="collectionPayOptions" :value="permanentDetail.collectionPay"/></p>
+      </div>
+      <div>
+        <p>结款方式</p>
+        <p><DictTag :options="settleTypeOptions" :value="permanentDetail.settleType"/></p>
+      </div>
+      <div>
+        <p>支付方式</p>
+        <p><DictTag :options="contractPaymentTypeOptions" :value="permanentDetail.contractPaymentType"/></p>
+      </div>
+      <div>
+        <p>合同标的</p>
+        <p>{{permanentDetail.contractObject}}</p>
       </div>
       <div>
         <p>标的数量</p>
-        <p>{{data.num}}</p>
+        <p>{{permanentDetail.num}}</p>
       </div>
       <div>
-        <p>单位</p>
-        <p>{{data.unit}}</p>
+        <p>计量单位</p>
+        <p>{{permanentDetail.unit}}</p>
+      </div>
+      <div>
+        <p>开始日期</p>
+        <p>{{permanentDetail.startTime}}</p>
+      </div>
+      <div>
+        <p>结束日期</p>
+        <p>{{permanentDetail.endTime}}</p>
       </div>
       <div>
         <p>收付款类型</p>
-        <p>{{data.collectionPay}}</p>
+        <p><DictTag :options="collectionPayOptions" :value="permanentDetail.collectionPay"/></p>
+      </div>
+      <template v-if="permanentDetail.assetType !== '9'">
+        <div>
+          <p>承包年限(年)</p>
+          <p>{{permanentDetail.contractYears}}</p>
+        </div>
+        <div>
+          <p>承包价款(元)</p>
+          <p>{{permanentDetail.totalAmount}}</p>
+        </div>
+        <div>
+          <p>折合年均(元)</p>
+          <p>{{permanentDetail.price}}</p>
+        </div>
+        <div>
+          <p>已结款(元)</p>
+          <p>{{permanentDetail.receivedAmount}}</p>
+        </div>
+        <div>
+          <p>下次结款(元)</p>
+          <p>{{permanentDetail.settledAmount}}</p>
+        </div>
+      </template>
+      <template v-if="permanentDetail.assetType === '9'">
+        <div>
+          <p>投资期限(年)</p>
+          <p>{{permanentDetail.contractYears}}</p>
+        </div>
+        <div>
+          <p>投资总金额(元)</p>
+          <p>{{permanentDetail.totalAmount}}</p>
+        </div>
+        <div>
+          <p>收益周期</p>
+          <p>{{permanentDetail.incomePeriod}}</p>
+        </div>
+        <div>
+          <p>收益方式</p>
+          <p>{{permanentDetail.incomeType}}</p>
+        </div>
+        <div>
+          <p>收益金额(元)</p>
+          <p>{{permanentDetail.incomeAmount}}</p>
+        </div>
+        <div>
+          <p>年均收益金额(元)</p>
+          <p>{{permanentDetail.averageIncome}}</p>
+        </div>
+        <div>
+          <p>已收益结算(元)</p>
+          <p>{{permanentDetail.settledIncome}}</p>
+        </div>
+        <div>
+          <p>未结算(元)</p>
+          <p>{{permanentDetail.unsettledIncome}}</p>
+        </div>
+      </template>
+      <div>
+        <p>附件</p>
+        <p v-if="showfileHT">
+          <template v-for="(item,index) in permanentDetail.fileList">
+            <a :href="item.urlApi" v-if="item.type != 'image'">
+              <img :src="'/api' + item.url" style="width: 3vw;height: 3vw;margin-right: 0.5vw;" alt="">
+            </a>
+            <img v-else :src="item.thumUrl" style="width: 3vw;height: 3vw;margin-right: 0.3vw;" alt="" @click="openImage(item.url)">
+          </template>
+        </p>
       </div>
     </div>
 

src/views/property/asset-details/index.js

@@ -1,6 +1,11 @@
 
 import { attachmentList } from "@/api/common/uploadAttachment.js";
+import { getPermanent, attachmentQuery, getInfo } from '../api/index.js';
+import DictTag from '@/components/DictTag';
 export default {
+  components: {
+    DictTag
+  },
   props: {
     data: {},
     type: {
@@ -11,13 +16,119 @@ export default {
   data () {
     return {
       isLoad: false,
-      permanentDetail: {}
+      permanentDetail: {},
+      // 资产类别字典
+      assetTypeOptions: [],
+      // 经营属性字典
+      operationTypeOptions: [],
+      // 增加方式字典
+      addTypeOptions: [],
+      // 使用情况字典
+      useTypeOptions: [],
+      // 折旧方式字典
+      depreciationTypeOptions: [],
+      // 资产状态字典
+      assetStatusOptions: [],
+      // 系统是否字典
+      sysYesNoOptions: [],
+      // 履约情况字典
+      agreeTypeOptions: [],
+      //单位字段
+      unitOptions:[],
+      // 合同类型字典
+      typeOfContractTypeOptions: [],
+      // 结款方式字典
+      settleTypeOptions: [],
+      // 收付款类型字典
+      collectionPayOptions: [],
+      // 合同来源字典
+      contractionSourceOptions: [],
+      // 合同状态字典
+      contractionStatusOptions: [],
+      // 招标方式字典
+      biddingWayOptions: [],
+      // 招标类型字典
+      biddingTypesOptions: [],
+      // 合同支付方式字典
+      contractPaymentTypeOptions: [],
+      // 投资形式字典
+      investTypeOptions: [],
+      // 出资形式字典
+      payTypeOptions: [],
+
+      showfile: false,
+      showfileHT: false,
     };
   },
+  watch: {
+    data: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    }
+  },
   computed: {
   },
   created () {
     this.isLoad = false
+    this.getDicts("asset_type").then((response) => {
+      this.assetTypeOptions = response.data;
+    });
+    this.getDicts("operation_type").then((response) => {
+      this.operationTypeOptions = response.data;
+    });
+    this.getDicts("add_type").then((response) => {
+      this.addTypeOptions = response.data;
+    });
+    this.getDicts("use_type").then((response) => {
+      this.useTypeOptions = response.data;
+    });
+    this.getDicts("depreciation_type").then((response) => {
+      this.depreciationTypeOptions = response.data;
+    });
+    this.getDicts("asset_status").then((response) => {
+      this.assetStatusOptions = response.data;
+    });
+    this.getDicts("fixed_assets_unit").then((response) => {
+      this.unitOptions = response.data;
+    });
+    this.getDicts("sys_yes_no").then((response) => {
+      this.sysYesNoOptions = response.data;
+    });
+    this.getDicts("agree_type").then(response => {
+      this.agreeTypeOptions = response.data;
+    });
+    this.getDicts("type_of_contract").then(response => {
+      this.typeOfContractTypeOptions = response.data;
+    });
+    this.getDicts("settle_type").then(response => {
+      this.settleTypeOptions = response.data;
+    });
+    this.getDicts("collection_pay").then(response => {
+      this.collectionPayOptions = response.data;
+    });
+    this.getDicts("contraction_source").then(response => {
+      this.contractionSourceOptions = response.data;
+    });
+    this.getDicts("contraction_status").then(response => {
+      this.contractionStatusOptions = response.data;
+    });
+    this.getDicts("bidding_way").then(response => {
+      this.biddingWayOptions = response.data;
+    });
+    this.getDicts("bidding_types").then(response => {
+      this.biddingTypesOptions = response.data;
+    });
+    this.getDicts("contract_payment_type").then(response => {
+      this.contractPaymentTypeOptions = response.data;
+    });
+    this.getDicts("invest_type").then(response => {
+      this.investTypeOptions = response.data;
+    });
+    this.getDicts("pay_type").then(response => {
+      this.payTypeOptions = response.data;
+    });
   },
   mounted () {
   },
@@ -29,6 +140,93 @@ export default {
     },
     close () {
       this.$emit('close')
+    },
+    getData(){
+      this.showfile = false;
+      this.showfileHT = false;
+      if (this.type == '1' ||this.type == '2' || this.type == '3'){
+        getPermanent(this.data.id).then((response) => {
+          this.permanentDetail = response.data;
+          this.permanentDetail.fileList = [];
+          attachmentQuery({tableId: this.data.id, tableName: 't_asset_permanent', bizPath: 'asset'}).then((response) => {
+            if (response.code == 200) {
+              let UattachmentList = response.rows;
+              for (let i = 0; i < UattachmentList.length; i++) {
+                let fileName = UattachmentList[i].fileName;
+                let subIndex = fileName.lastIndexOf(".");
+                let ext = fileName.substring(subIndex + 1, fileName.length);
+                let urls = "";
+                let type = "";
+                if (ext == "xlsx" || ext == "xls") {
+                  urls = require("./icon_excel.jpg");
+                  type = 'excel';
+                } else if (ext == "doc" || ext == "docx") {
+                  urls = require("./icon_word.jpg");
+                  type = 'word';
+                } else if (ext == "pdf") {
+                  urls = require("./icon_pdf.jpg");
+                  type = 'pdf';
+                } else if (ext == "zip") {
+                  urls = require("./icon_zip.jpg");
+                  type = 'zip';
+                } else {
+                  urls = UattachmentList[i].fileUrl;
+                  type = 'image';
+                }
+                this.permanentDetail.fileList.push({
+                  url: urls,
+                  urlApi: '/api' + UattachmentList[i].fileUrl,
+                  thumUrl: '/api' + UattachmentList[i].thumUrl,
+                  type: type
+                })
+                this.showfile = true;
+              }
+            }
+          });
+        });
+      }
+      if (this.type == '4' || this.type == '5' || this.type == '6'){
+        getInfo(this.data.id).then((response) => {
+          this.permanentDetail = response.data;
+          this.permanentDetail.fileList = [];
+          attachmentQuery({tableId: this.data.id, tableName: 't_contraction_info', bizPath: 'contraction'}).then((response) => {
+            if (response.code == 200) {
+              let UattachmentList = response.rows;
+              for (let i = 0; i < UattachmentList.length; i++) {
+                let fileName = UattachmentList[i].fileName;
+                let subIndex = fileName.lastIndexOf(".");
+                let ext = fileName.substring(subIndex + 1, fileName.length);
+                let urls = "";
+                let type = "";
+                if (ext == "xlsx" || ext == "xls") {
+                  urls = require("./icon_excel.jpg");
+                  type = 'excel';
+                } else if (ext == "doc" || ext == "docx") {
+                  urls = require("./icon_word.jpg");
+                  type = 'word';
+                } else if (ext == "pdf") {
+                  urls = require("./icon_pdf.jpg");
+                  type = 'pdf';
+                } else if (ext == "zip") {
+                  urls = require("./icon_zip.jpg");
+                  type = 'zip';
+                } else {
+                  urls = UattachmentList[i].fileUrl;
+                  type = 'image';
+                }
+                this.permanentDetail.fileList.push({
+                  url: urls,
+                  urlApi: '/api' + UattachmentList[i].fileUrl,
+                  thumUrl: '/api' + UattachmentList[i].thumUrl,
+                  type: type
+                })
+                this.showfileHT = true;
+              }
+            }
+          });
+        });
+      }
+
     }
   }
 };

src/views/property/asset-details/index.scss

@@ -84,7 +84,6 @@
     overflow-y: auto;
 
     div {
-      font-size: 10px;
       // height: 40px;
       line-height: 20px;
 

src/views/resources/api/index.js

@@ -168,4 +168,29 @@ export function ResourceList (deptId, year, useType = 2) {
     method: 'get',
     params: query
   })
-}
+}
+// 查询资源性资产详细
+export function getResource(id, parms) {
+  return request({
+    url: '/asset/resource/get/' + id,
+    method: 'get',
+    params: parms,
+  })
+}
+
+// 查询固定资产详细
+export function attachmentQuery( params ) {
+  return request({
+    url: 'api/system/attachment/query',
+    method: 'get',
+    params: params,
+  })
+}
+
+// 查询合同信息详细
+export function getInfo(id) {
+  return request({
+    url: 'api/contraction/info/get/' + id,
+    method: 'get'
+  })
+}

src/views/resources/asset-details/index.html

@@ -0,0 +1,236 @@
+  <!--资产信息详情-弹窗-->
+  <div class="gl_pop_cash pop_statistical_desc">
+    <div class="head_main">
+      <div class="title" v-if="type == '1'"><i></i>{{permanentDetail.assetName}}</div>
+      <div class="title" v-else><i></i>{{permanentDetail.name}}</div>
+      <div class="close" @click="close"></div>
+    </div>
+    <div class="echarts_main scrollbar" v-if="type == '1' || type == '2' || type == '3'">
+      <div>
+        <p>资源编码</p>
+        <p>{{permanentDetail.code}}</p>
+      </div>
+      <div>
+        <p>资源分类</p>
+        <p><DictTag :options="resourceTypeOptions" :value="permanentDetail.resourceType"/></p>
+      </div>
+      <div>
+        <p>资源类型</p>
+        <p><DictTag :options="farmingResourceTypeOptions" :value="permanentDetail.resourceSort"/></p>
+      </div>
+      <div>
+        <p>坐落位置</p>
+        <p>{{permanentDetail.location}}</p>
+      </div>
+      <div>
+        <p>东至</p>
+        <p>{{permanentDetail.east}}</p>
+      </div>
+      <div>
+        <p>西至</p>
+        <p>{{permanentDetail.west}}</p>
+      </div>
+      <div>
+        <p>南至</p>
+        <p>{{permanentDetail.south}}</p>
+      </div>
+      <div>
+        <p>北至</p>
+        <p>{{permanentDetail.north}}</p>
+      </div>
+      <div>
+        <p>总面积(亩)</p>
+        <p>{{permanentDetail.totalArea}}</p>
+      </div>
+      <div>
+        <p>资产状态</p>
+        <p><DictTag :options="statusOptions" :value="permanentDetail.status"/></p>
+      </div>
+      <div>
+        <p>使用情况</p>
+        <p><DictTag :options="useTypeOptions" :value="permanentDetail.useType"/></p>
+      </div>
+      <div>
+        <p>履约情况</p>
+        <p><DictTag :options="agreeTypeOptions" :value="permanentDetail.agreeType"/></p>
+      </div>
+      <div>
+        <p>存在权属纠纷</p>
+        <p><DictTag :options="sysYesNoOptions" :value="permanentDetail.dispute"/></p>
+      </div>
+      <div>
+        <p>备注</p>
+        <p>{{permanentDetail.remark}}</p>
+      </div>
+      <div>
+        <p>附件</p>
+        <p v-if="showfile">
+          <template v-for="(item,index) in permanentDetail.fileList">
+            <a :href="item.urlApi" v-if="item.type != 'image'">
+              <img :src="'/api' + item.url" style="width: 3vw;height: 3vw;margin-right: 0.5vw;" alt="">
+            </a>
+            <img v-else :src="item.thumUrl" style="width: 3vw;height: 3vw;margin-right: 0.3vw;" alt="" @click="openImage(item.url)">
+          </template>
+        </p>
+      </div>
+    </div>
+    <div class="echarts_main scrollbar" v-if="type == '4' || type == '5' || type == '6'">
+      <div>
+        <p>合同编码</p>
+        <p>{{permanentDetail.code}}</p>
+      </div>
+      <div>
+        <p>合同类型</p>
+        <p><DictTag :options="typeOfContractTypeOptions" :value="permanentDetail.assetType"/></p>
+      </div>
+      <div>
+        <p>合同来源</p>
+        <p><DictTag :options="contractionSourceOptions" :value="permanentDetail.contractionSource"/></p>
+      </div>
+      <div>
+        <p>甲方</p>
+        <p>{{permanentDetail.firstParty}}</p>
+      </div>
+      <div>
+        <p>乙方</p>
+        <p>{{permanentDetail.secondParty}}</p>
+      </div>
+      <div>
+        <p>甲方代表</p>
+        <p>{{permanentDetail.firstPartyDirector}}</p>
+      </div>
+      <div>
+        <p>乙方代表</p>
+        <p>{{permanentDetail.secondPartyDirector}}</p>
+      </div>
+      <div>
+        <p>甲方电话</p>
+        <p>{{permanentDetail.firstPartyPhone}}</p>
+      </div>
+      <div>
+        <p>乙方电话</p>
+        <p>{{permanentDetail.secondPartyPhone}}</p>
+      </div>
+      <div>
+        <p>签订日期</p>
+        <p>{{permanentDetail.buildingTime}}</p>
+      </div>
+      <div>
+        <p>乙方身份证号</p>
+        <p>{{permanentDetail.secondPartyIdCard}}</p>
+      </div>
+      <div>
+        <p>合同状态</p>
+        <p><DictTag :options="contractionStatusOptions" :value="permanentDetail.contractionStatus"/></p>
+      </div>
+      <div>
+        <p>备注</p>
+        <p>{{permanentDetail.remark}}</p>
+      </div>
+
+      <div>
+        <p>收付款类型</p>
+        <p><DictTag :options="collectionPayOptions" :value="permanentDetail.collectionPay"/></p>
+      </div>
+      <div>
+        <p>结款方式</p>
+        <p><DictTag :options="settleTypeOptions" :value="permanentDetail.settleType"/></p>
+      </div>
+      <div>
+        <p>支付方式</p>
+        <p><DictTag :options="contractPaymentTypeOptions" :value="permanentDetail.contractPaymentType"/></p>
+      </div>
+      <div>
+        <p>合同标的</p>
+        <p>{{permanentDetail.contractObject}}</p>
+      </div>
+      <div>
+        <p>标的数量</p>
+        <p>{{permanentDetail.num}}</p>
+      </div>
+      <div>
+        <p>计量单位</p>
+        <p>{{permanentDetail.unit}}</p>
+      </div>
+      <div>
+        <p>开始日期</p>
+        <p>{{permanentDetail.startTime}}</p>
+      </div>
+      <div>
+        <p>结束日期</p>
+        <p>{{permanentDetail.endTime}}</p>
+      </div>
+      <div>
+        <p>收付款类型</p>
+        <p><DictTag :options="collectionPayOptions" :value="permanentDetail.collectionPay"/></p>
+      </div>
+      <template v-if="permanentDetail.assetType !== '9'">
+        <div>
+          <p>承包年限(年)</p>
+          <p>{{permanentDetail.contractYears}}</p>
+        </div>
+        <div>
+          <p>承包价款(元)</p>
+          <p>{{permanentDetail.totalAmount}}</p>
+        </div>
+        <div>
+          <p>折合年均(元)</p>
+          <p>{{permanentDetail.price}}</p>
+        </div>
+        <div>
+          <p>已结款(元)</p>
+          <p>{{permanentDetail.receivedAmount}}</p>
+        </div>
+        <div>
+          <p>下次结款(元)</p>
+          <p>{{permanentDetail.settledAmount}}</p>
+        </div>
+      </template>
+      <template v-if="permanentDetail.assetType === '9'">
+        <div>
+          <p>投资期限(年)</p>
+          <p>{{permanentDetail.contractYears}}</p>
+        </div>
+        <div>
+          <p>投资总金额(元)</p>
+          <p>{{permanentDetail.totalAmount}}</p>
+        </div>
+        <div>
+          <p>收益周期</p>
+          <p>{{permanentDetail.incomePeriod}}</p>
+        </div>
+        <div>
+          <p>收益方式</p>
+          <p>{{permanentDetail.incomeType}}</p>
+        </div>
+        <div>
+          <p>收益金额(元)</p>
+          <p>{{permanentDetail.incomeAmount}}</p>
+        </div>
+        <div>
+          <p>年均收益金额(元)</p>
+          <p>{{permanentDetail.averageIncome}}</p>
+        </div>
+        <div>
+          <p>已收益结算(元)</p>
+          <p>{{permanentDetail.settledIncome}}</p>
+        </div>
+        <div>
+          <p>未结算(元)</p>
+          <p>{{permanentDetail.unsettledIncome}}</p>
+        </div>
+      </template>
+      <div>
+        <p>附件</p>
+        <p v-if="showfileHT">
+          <template v-for="(item,index) in permanentDetail.fileList">
+            <a :href="item.urlApi" v-if="item.type != 'image'">
+              <img :src="'/api' + item.url" style="width: 3vw;height: 3vw;margin-right: 0.5vw;" alt="">
+            </a>
+            <img v-else :src="item.thumUrl" style="width: 3vw;height: 3vw;margin-right: 0.3vw;" alt="" @click="openImage(item.url)">
+          </template>
+        </p>
+      </div>
+    </div>
+
+  </div>

src/views/resources/asset-details/index.js

@@ -0,0 +1,227 @@
+
+import { attachmentList } from "@/api/common/uploadAttachment.js";
+import { getResource, attachmentQuery, getInfo } from '../api/index.js';
+import DictTag from '@/components/DictTag';
+export default {
+  components: {
+    DictTag
+  },
+  props: {
+    data: {},
+    type: {
+      type: String,
+      default: '1'
+    }
+  },
+  data () {
+    return {
+      isLoad: false,
+      permanentDetail: {},
+      // 资源分类字典
+      resourceTypeOptions: [],
+      //农用地资源类型字典
+      farmingResourceTypeOptions: [],
+      //建设用地资源类型字典
+      buildResourceTypeOptions: [],
+      //未利用地、林木用地资源类型字典
+      unusedResourceTypeOptions: [],
+      // 资产状态sys_normal_disable字典
+      statusOptions: [],
+      // 使用情况字典
+      useTypeOptions: [],
+      // 系统是否字典
+      sysYesNoOptions: [],
+      // 履约情况字典
+      agreeTypeOptions: [],
+      // 合同类型字典
+      typeOfContractTypeOptions: [],
+      // 结款方式字典
+      settleTypeOptions: [],
+      // 收付款类型字典
+      collectionPayOptions: [],
+      // 合同来源字典
+      contractionSourceOptions: [],
+      // 合同状态字典
+      contractionStatusOptions: [],
+      // 招标方式字典
+      biddingWayOptions: [],
+      // 招标类型字典
+      biddingTypesOptions: [],
+      // 合同支付方式字典
+      contractPaymentTypeOptions: [],
+      // 投资形式字典
+      investTypeOptions: [],
+      // 出资形式字典
+      payTypeOptions: [],
+
+      showfile: false,
+      showfileHT: false,
+    };
+  },
+  watch: {
+    data: {
+      handler () {
+        this.getData();
+      },
+      immediate: true, // 立即执行
+    }
+  },
+  computed: {
+  },
+  created () {
+    this.isLoad = false
+    this.getDicts("resource_type").then(response => {
+      this.resourceTypeOptions = response.data;
+    });
+    this.getDicts("sys_normal_disable").then(response => {
+      this.statusOptions = response.data;
+    });
+    this.getDicts("resource_farming_type").then(response => {
+      this.farmingResourceTypeOptions = response.data;
+    });
+    this.getDicts("resources_build_type").then(response => {
+      this.buildResourceTypeOptions = response.data;
+    });
+    this.getDicts("resources_unused_type").then(response => {
+      this.unusedResourceTypeOptions = response.data;
+    });
+    this.getDicts("use_type").then(response => {
+      this.useTypeOptions = response.data;
+    });
+    this.getDicts("sys_yes_no").then((response) => {
+      this.sysYesNoOptions = response.data;
+    });
+    this.getDicts("agree_type").then(response => {
+      this.agreeTypeOptions = response.data;
+    });
+    this.getDicts("type_of_contract").then(response => {
+      this.typeOfContractTypeOptions = response.data;
+    });
+    this.getDicts("settle_type").then(response => {
+      this.settleTypeOptions = response.data;
+    });
+    this.getDicts("collection_pay").then(response => {
+      this.collectionPayOptions = response.data;
+    });
+    this.getDicts("contraction_source").then(response => {
+      this.contractionSourceOptions = response.data;
+    });
+    this.getDicts("contraction_status").then(response => {
+      this.contractionStatusOptions = response.data;
+    });
+    this.getDicts("bidding_way").then(response => {
+      this.biddingWayOptions = response.data;
+    });
+    this.getDicts("bidding_types").then(response => {
+      this.biddingTypesOptions = response.data;
+    });
+    this.getDicts("contract_payment_type").then(response => {
+      this.contractPaymentTypeOptions = response.data;
+    });
+    this.getDicts("invest_type").then(response => {
+      this.investTypeOptions = response.data;
+    });
+    this.getDicts("pay_type").then(response => {
+      this.payTypeOptions = response.data;
+    });
+  },
+  mounted () {
+  },
+  methods: {
+    openImage (url) {
+      this.$emit('openImage',url)
+      // this.dialogImageUrl = url;
+      // this.dialogVisible = true;
+    },
+    close () {
+      this.$emit('close')
+    },
+    getData(){
+      this.showfile = false;
+      this.showfileHT = false;
+      if (this.type == '1' ||this.type == '2' || this.type == '3'){
+        getResource(this.data.id).then((response) => {
+          this.permanentDetail = response.data;
+          this.permanentDetail.fileList = [];
+          attachmentQuery({tableId: this.data.id, tableName: 't_asset_resource', bizPath: 'asset'}).then((response) => {
+            if (response.code == 200) {
+              let UattachmentList = response.rows;
+              for (let i = 0; i < UattachmentList.length; i++) {
+                let fileName = UattachmentList[i].fileName;
+                let subIndex = fileName.lastIndexOf(".");
+                let ext = fileName.substring(subIndex + 1, fileName.length);
+                let urls = "";
+                let type = "";
+                if (ext == "xlsx" || ext == "xls") {
+                  urls = require("./icon_excel.jpg");
+                  type = 'excel';
+                } else if (ext == "doc" || ext == "docx") {
+                  urls = require("./icon_word.jpg");
+                  type = 'word';
+                } else if (ext == "pdf") {
+                  urls = require("./icon_pdf.jpg");
+                  type = 'pdf';
+                } else if (ext == "zip") {
+                  urls = require("./icon_zip.jpg");
+                  type = 'zip';
+                } else {
+                  urls = UattachmentList[i].fileUrl;
+                  type = 'image';
+                }
+                this.permanentDetail.fileList.push({
+                  url: urls,
+                  urlApi: '/api' + UattachmentList[i].fileUrl,
+                  thumUrl: '/api' + UattachmentList[i].thumUrl,
+                  type: type
+                })
+                this.showfile = true;
+              }
+            }
+          });
+        });
+      }
+      if (this.type == '4' || this.type == '5' || this.type == '6'){
+        getInfo(this.data.id).then((response) => {
+          this.permanentDetail = response.data;
+          this.permanentDetail.fileList = [];
+          attachmentQuery({tableId: this.data.id, tableName: 't_contraction_info', bizPath: 'contraction'}).then((response) => {
+            if (response.code == 200) {
+              let UattachmentList = response.rows;
+              for (let i = 0; i < UattachmentList.length; i++) {
+                let fileName = UattachmentList[i].fileName;
+                let subIndex = fileName.lastIndexOf(".");
+                let ext = fileName.substring(subIndex + 1, fileName.length);
+                let urls = "";
+                let type = "";
+                if (ext == "xlsx" || ext == "xls") {
+                  urls = require("./icon_excel.jpg");
+                  type = 'excel';
+                } else if (ext == "doc" || ext == "docx") {
+                  urls = require("./icon_word.jpg");
+                  type = 'word';
+                } else if (ext == "pdf") {
+                  urls = require("./icon_pdf.jpg");
+                  type = 'pdf';
+                } else if (ext == "zip") {
+                  urls = require("./icon_zip.jpg");
+                  type = 'zip';
+                } else {
+                  urls = UattachmentList[i].fileUrl;
+                  type = 'image';
+                }
+                this.permanentDetail.fileList.push({
+                  url: urls,
+                  urlApi: '/api' + UattachmentList[i].fileUrl,
+                  thumUrl: '/api' + UattachmentList[i].thumUrl,
+                  type: type
+                })
+                this.showfileHT = true;
+              }
+            }
+          });
+        });
+      }
+
+    }
+  }
+};

src/views/resources/asset-details/index.scss

@@ -0,0 +1,182 @@
+.gl_pop_cash {
+  background: rgba(10, 25, 47, 0.8);
+  position: absolute;
+   border: 2px solid #3181f6;
+  box-shadow: 0 0 5px #3181f6;
+  border-radius: 0 0 100px 0;
+  // border-left: 0.15vw solid #357dfa;
+  z-index: 11;
+
+  .head_main {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: space-between;
+    padding: 0 20px;
+    background: linear-gradient(to right, rgba(49, 129, 246, .8), rgba(49, 129, 246, 0));
+    .title {
+      color: #ffad00;
+      font-size: 20px !important;
+      display: flex;
+      align-items: center;
+      line-height: 1;
+      text-shadow: 0 0 15px #3181f6;
+      i{
+        display: block;
+        width: 20px;
+        height: 20px;
+        background: url("tt_icon.png") no-repeat center;
+        background-size: 100% 100%;
+        margin-right: 10px;
+      }
+    }
+
+    .close {
+      background: url('./close.png') no-repeat;
+      background-size: 100% 100%;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+
+    .xs_main {
+      height: 30px;
+      position: absolute;
+      width: 100%;
+      display: flex;
+      align-items: center;
+
+      .block {
+        width: 20px;
+        display: flex;
+
+        .point {
+          width: .55vh;
+          height: .55vh;
+          margin-right: 0.36vw;
+
+          &.p1 {
+            background: rgba(53, 125, 250, 1)
+          }
+
+          &.p2 {
+            background: rgba(53, 125, 250, .7)
+          }
+
+          &.p3 {
+            background: rgba(53, 125, 250, .4)
+          }
+        }
+
+      }
+
+      .xs_x {
+        height: 1px;
+        flex: 1;
+        background: #214284;
+      }
+    }
+  }
+
+  .echarts_main {
+    height: 600px;
+    overflow-y: auto;
+
+    div {
+      // height: 40px;
+      line-height: 20px;
+
+      p {
+        // white-space: nowrap;
+      }
+    }
+
+    .headers {
+      height: 30px;
+      font-size: 14px;
+      color: #0befca;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 0.53vw;
+      background: rgba(11, 239, 202, .2);
+      margin-bottom: 0.9vh
+    }
+
+    .desc_main {
+      overflow-y: scroll;
+      padding-right: 0.33vw;
+
+      .analysisTable_list {
+        margin: 0;
+        padding: 0;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .flex_item {
+          cursor: pointer;
+          list-style: none;
+          margin: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          color: #fff;
+          font-size: 12px;
+          position: relative;
+          height: 30px;
+
+          &:nth-child(2n) {
+            background: rgba(53, 125, 250, .1);
+          }
+        }
+      }
+    }
+  }
+
+}
+
+.pop_statistical_desc {
+  width: 600px;
+  margin: 0;
+  left: 480px;
+  top: 180px;
+  padding-bottom: 1.04vw !important;
+
+  .head_main {
+
+    .title {
+      color: #fff;
+    }
+  }
+
+  .echarts_main {
+    margin-top: 16px;
+
+    div {
+      display: flex;
+      align-items: center;
+
+      &:nth-child(even) {
+        //background: rgba(32, 89, 188, 0.2);
+      }
+
+      p {
+        font-size: 16px;
+        &:nth-child(1) {
+          width: 8vw;
+          padding-right: 1vw;
+          text-align: right;
+          flex-shrink: 0;
+          color: #b0cfec;
+        }
+        margin: 0;
+        color: #ffffff;
+        line-height: 3.92vh;
+      }
+    }
+  }
+}

src/views/resources/asset-details/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/resources/comps/left/bottom/2/index.html

@@ -5,5 +5,5 @@ element-loading-text="拼命加载中"
 element-loading-spinner="el-icon-loading"
 element-loading-background="rgba(0, 0, 0, 0.1)"
 >
-  <ScrollTable v-if="isLoad" :headers="headers" :data="data"></ScrollTable>
+  <ScrollTable v-if="isLoad" :headers="headers" :data="data" :dataName="dataName" details @lineClick="lineClick1"></ScrollTable>
 </Pannel>

src/views/resources/comps/left/bottom/2/index.js

@@ -1,5 +1,5 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import ScrollTable from '@/components/scroll-table-details/index.vue';
 import { mapGetters } from 'vuex';
 import { longTermIdleResourceWarning } from '../../../../api/index.js';
 export default {
@@ -28,19 +28,20 @@ export default {
     return {
       isLoad: false,
       headers: ['部门', '资源名称', '类别', '面积（亩）'],
-      data: [
-        ['部门', '资源名称', '类别', '面积（亩）']
-      ]
+      data: [],
+      dataName: ['deptName', 'name', 'resourceSort', 'totalArea']
     };
   },
   methods: {
+    lineClick1 (val) {
+      console.log(val + 222222222222)
+      this.$emit('clickDetail', val, '3')
+    },
     getData () {
       if (this.year, this.deptId) {
         this.isLoad = false;
         longTermIdleResourceWarning(this.deptId, this.year).then(res => {
-          let data = res.data.map(item => {
-            return [item.deptName, item.name, item.resourceSort, item.totalArea]
-          })
+          let data = res.data;
           this.data = data;
           this.isLoad = true;
         })

src/views/resources/comps/left/middle/2/index.html

@@ -5,5 +5,5 @@ element-loading-text="拼命加载中"
 element-loading-spinner="el-icon-loading"
 element-loading-background="rgba(0, 0, 0, 0.1)"
 >
-  <ScrollTable v-if="isLoad" :headers="headers" :data="data"></ScrollTable>
-</Pannel>
+  <ScrollTable v-if="isLoad" :headers="headers" :data="data" :dataName="dataName" details @lineClick="lineClick1"></ScrollTable>
+</Pannel>

src/views/resources/comps/left/middle/2/index.js

@@ -1,5 +1,5 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import ScrollTable from '@/components/scroll-table-details/index.vue';
 import { longTermIdleResourceWarning } from '../../../../api/index.js'
 import { mapGetters } from 'vuex';
 export default {
@@ -28,19 +28,20 @@ export default {
     return {
       isLoad: false,
       headers: ['部门', '资源名称', '类别', '面积（亩）'],
-      data: [
-        ['部门', '资源名称', '类别', '面积（亩）']
-      ]
+      data: [],
+      dataName: ['deptName', 'name', 'resourceSort', 'totalArea']
     };
   },
   methods: {
+    lineClick1 (val) {
+      console.log(val + 222222222222)
+      this.$emit('clickDetail', val, '2')
+    },
     getData () {
       if (this.year, this.deptId) {
         this.isLoad = false;
         longTermIdleResourceWarning(this.deptId, this.year).then(res => {
-          let data = res.data.map(item => {
-            return [item.deptName, item.name, item.resourceSort, item.totalArea]
-          })
+          let data = res.data;
           this.data = data;
           this.isLoad = true;
         })

src/views/resources/comps/left/top/2/index.html

@@ -5,5 +5,5 @@ element-loading-text="拼命加载中"
 element-loading-spinner="el-icon-loading"
 element-loading-background="rgba(0, 0, 0, 0.1)"
 >
-  <ScrollTable v-if="isLoad" :headers="headers" :data="data"></ScrollTable>
-</Pannel>
+  <ScrollTable v-if="isLoad" :headers="headers" :data="data" :dataName="dataName" details @lineClick="lineClick1"></ScrollTable>
+</Pannel>

src/views/resources/comps/left/top/2/index.js

@@ -1,5 +1,5 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import ScrollTable from '@/components/scroll-table-details/index.vue';
 import { resourceFisposalWarning } from '../../../../api/index.js'
 import { mapGetters } from 'vuex';
 export default {
@@ -28,19 +28,20 @@ export default {
     return {
       isLoad: false,
       headers: ['部门', '资源名称', '类别', '申请日期', '处置类型'],
-      data: [
-        ['部门', '资源名称', '类别', '申请日期', '处置类型']
-      ]
+      data: [],
+      dataName: ['deptId', 'assetName', 'assetType', 'applyAt', 'assetStatus']
     };
   },
   methods: {
+    lineClick1 (val) {
+      console.log(val + 222222222222)
+      this.$emit('clickDetail', val, '1')
+    },
     getData () {
       if (this.year, this.deptId) {
         this.isLoad = false;
         resourceFisposalWarning(this.deptId, this.year).then(res => {
-          let data = res.rows.map(item => {
-            return [item.deptId, item.assetName, item.assetType, item.applyAt, item.assetStatus]
-          })
+          let data = res.rows;
           this.data = data;
           this.isLoad = true;
         })

src/views/resources/comps/right/bottom/2/index.html

@@ -6,5 +6,5 @@ element-loading-spinner="el-icon-loading"
 element-loading-background="rgba(0, 0, 0, 0.1)"
 
 >
-  <ScrollTable v-if="isLoad" :headers="headers" :data="data"></ScrollTable>
-</Pannel>
+  <ScrollTable v-if="isLoad" :headers="headers" :data="data" :dataName="dataName" details @lineClick="lineClick1"></ScrollTable>
+</Pannel>

src/views/resources/comps/right/bottom/2/index.js

@@ -1,5 +1,5 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import ScrollTable from '@/components/scroll-table-details/index.vue';
 import { longTermContractNonExecutionWarning } from '../../../../api/index.js';
 import { mapGetters } from 'vuex';
 export default {
@@ -11,7 +11,8 @@ export default {
     return {
       isLoad: false,
       headers: ['部门', '合同编码', '合同名称', '合同截止日期'],
-      data: []
+      data: [],
+      dataName: ['deptName', 'code', 'name', 'endTime']
     };
   },
   computed: {
@@ -32,13 +33,15 @@ export default {
     }
   },
   methods: {
+    lineClick1 (val) {
+      console.log(val + 222222222222)
+      this.$emit('clickDetail', val, '6')
+    },
     getData () {
       if (this.year, this.deptId) {
         this.isLoad = false;
         longTermContractNonExecutionWarning(this.deptId, this.year).then(res => {
-          let data = res.data.map(item => {
-            return [item.deptName, item.code, item.name, item.endTime]
-          })
+          let data = res.data;
           this.data = data;
           this.isLoad = true;
         })

src/views/resources/comps/right/middle/2/index.html

@@ -5,5 +5,5 @@ element-loading-text="拼命加载中"
 element-loading-spinner="el-icon-loading"
 element-loading-background="rgba(0, 0, 0, 0.1)"
 >
-  <ScrollTable  v-if="isLoad" :headers="headers" :data="data"></ScrollTable>
-</Pannel>
+  <ScrollTable  v-if="isLoad" :headers="headers" :data="data" :dataName="dataName" details @lineClick="lineClick1"></ScrollTable>
+</Pannel>

src/views/resources/comps/right/middle/2/index.js

@@ -1,5 +1,5 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import ScrollTable from '@/components/scroll-table-details/index.vue';
 import { mapGetters } from 'vuex';
 import { contractExpirationWarning } from '../../../../api/index.js';
 export default {
@@ -11,7 +11,8 @@ export default {
     return {
       isLoad: false,
       headers: ['部门', '合同编码', '合同名称', '合同截止日期'],
-      data: [['部门', '合同编码', '合同名称', '合同截止日期']]
+      data: [],
+      dataName: ['deptName', 'code', 'name', 'endTime']
     };
   },
   computed: {
@@ -32,14 +33,16 @@ export default {
     }
   },
   methods: {
+    lineClick1 (val) {
+      console.log(val + 222222222222)
+      this.$emit('clickDetail', val, '5')
+    },
     getData () {
       if (this.year, this.deptId) {
         this.isLoad = false;
         contractExpirationWarning(this.deptId, this.year).then(res => {
           // console.log('contractExpirationWarning', res);
-          let data = res.data.map(item => {
-            return [item.deptName, item.code, item.name, item.endTime]
-          })
+          let data = res.data;
           this.data = data;
           this.isLoad = true;
         })

src/views/resources/comps/right/top/2/index.html

@@ -5,5 +5,5 @@ element-loading-text="拼命加载中"
 element-loading-spinner="el-icon-loading"
 element-loading-background="rgba(0, 0, 0, 0.1)"
 >
-  <ScrollTable v-if="isLoad" :headers="headers" :data="data"></ScrollTable>
-</Pannel>
+  <ScrollTable v-if="isLoad" :headers="headers" :data="data" :dataName="dataName" details @lineClick="lineClick1"></ScrollTable>
+</Pannel>

src/views/resources/comps/right/top/2/index.js

@@ -1,5 +1,5 @@
 import Pannel from '@/components/pannel/index.vue';
-import ScrollTable from '@/components/scroll-table/index.vue';
+import ScrollTable from '@/components/scroll-table-details/index.vue';
 import { mapGetters } from 'vuex';
 import { contractPaymentDueWarning } from '../../../../api/index.js';
 export default {
@@ -11,7 +11,8 @@ export default {
     return {
       isLoad: false,
       headers: ['部门', '合同编码', '合同名称', '预结款日期', '结款金额'],
-      data: [['部门', '合同编码', '合同名称', '预结款日期', '结款金额']]
+      data: [],
+      dataName: ['deptName', 'code', 'name', 'settlementDate', 'settlementAmount']
     };
   },
   computed: {
@@ -36,13 +37,15 @@ export default {
   mounted () {
   },
   methods: {
+    lineClick1 (val) {
+      console.log(val + 222222222222)
+      this.$emit('clickDetail', val, '4')
+    },
     getData () {
       if (this.year, this.deptId) {
         this.isLoad = false;
         contractPaymentDueWarning(this.deptId, this.year).then(res => {
-          let data = res.data.map(item => {
-            return [item.deptName, item.code, item.name, item.settlementDate, item.settlementAmount]
-          })
+          let data = res.data;
           this.data = data;
           this.isLoad = true;
         })

src/views/resources/index.html

@@ -8,12 +8,19 @@
   </Header>
   <!-- 项目初始化 -->
   <div class="left_side col space_between zIndextop">
-    <component :is="item" v-for="(item, index) in currentComp.left" :key="index"></component>
+    <component :is="item" v-for="(item, index) in currentComp.left" :key="index" @clickDetail="clickDetail"></component>
   </div>
   <div class="right_side col space_between zIndextop">
-    <component :is="item" v-for="(item, index) in currentComp.right" :key="index"></component>
+    <component :is="item" v-for="(item, index) in currentComp.right" :key="index" @clickDetail="clickDetail"></component>
   </div>
   <div class="buttom_side row space_between zIndextop" style="z-index: 1;">
-    <component :is="item" v-for="(item, index) in currentComp.buttom" :key="index"></component>
+    <component :is="item" v-for="(item, index) in currentComp.buttom" :key="index" @clickDetail="clickDetail"></component>
+  </div>
+
+  <AssetDetails @close="showDetail = false" @openImage="openImage" v-if="showDetail" :data="permanentDetail" :type="permanentType"></AssetDetails>
+
+  <div class="imgBox" v-if="dialogVisible">
+    <div class="box_bg" @click="dialogVisible = false"></div>
+    <img :src="'/api' + dialogImageUrl" alt="">
   </div>
 </div>

src/views/resources/index.js

@@ -20,6 +20,8 @@ import MainGis from './main-gis/index.vue';
 
 import { comps } from './data.js'
 
+import AssetDetails from './asset-details/index.vue';
+
 export default {
   components: {
     GisMap,
@@ -38,6 +40,7 @@ export default {
     Right12,
     Right22,
     Right32,
+    AssetDetails,
     Bottom1
   },
   data () {
@@ -54,6 +57,11 @@ export default {
         }
       ],
       tab: '1',
+      dialogImageUrl: '',
+      dialogVisible: false,
+      showDetail: false,
+      permanentDetail: {},
+      permanentType: '1'
     };
   },
   computed: {
@@ -68,6 +76,17 @@ export default {
   methods: {
     tabChange (info) {
       this.tab = info.id;
+    },
+    openImage (url) {
+      console.log(url)
+      this.dialogImageUrl = url;
+      this.dialogVisible = true;
+    },
+    clickDetail (val, type) {
+      console.log(val + 111111111)
+      this.permanentDetail = val;
+      this.permanentType = type;
+      this.showDetail = true;
     }
   }
 };

src/views/resources/index.scss

@@ -4,4 +4,24 @@
   left: 0;
   right: 0;
   bottom: 0;
-}
+}
+.imgBox{
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 999999;
+  width: 100vw;
+  height: 100%;
+  .box_bg{
+    background-color: rgba(0,0,0,0.5);
+    width: 100%;
+    height: 100%;
+  }
+  img{
+    height: 60vh;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
+}