轮播图片

src/components/mapView/descriptionsInfo.vue

@@ -1,39 +1,64 @@
 <template>
-    <div class="detailsInfo">
-      <el-descriptions :column="1" border :title="title" size="mini">
-        <el-descriptions-item v-for="(row, index) in config" :key="index" :label="row.label">
-          <slot v-if="row.isslot" :name="row.value"></slot>
-          <span v-else class="information">
-            {{ model[row.value] }}
-            <span v-if="model[row.value]">{{ row.unit }}</span>
-          </span>
-        </el-descriptions-item>
-      </el-descriptions>
-  
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    props: {
-      model: Object,
-      config: Array,
-      // column:Number,
-      title: String,
+  <div class="detailsInfo">
+    <el-descriptions :column="column" :border="border" :title="title" size="mini">
+      <el-descriptions-item v-for="(row, index) in config" :key="index" :label="row.label">
+        <slot v-if="row.isslot" :name="row.value"></slot>
+        <span v-else class="information">
+          {{ model[row.value] }}
+          <span v-if="model[row.value]">{{ row.unit }}</span>
+        </span>
+      </el-descriptions-item>
+    </el-descriptions>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    model: Object,
+    config: Array,
+    column: {
+      type: Number,
+      default: 1
     },
-    data() {
-      return {
-  
-      };
+    title: String,
+    border: {
+      type: Boolean,
+      default: true
     },
-    mounted() {
-      console.log(this.config);
-    },
-    methods: {},
-  };
-  </script>
-  
-  <style lang="less" scoped>
-  .detailsInfo {}
-  </style>
-  
+  },
+  data() {
+    return {
+
+    };
+  },
+  mounted() {
+    console.log(this.config);
+  },
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-descriptions__header {
+  margin-bottom: 10px;
+  color: #fff;
+}
+
+/deep/ .el-descriptions-item__label.is-bordered-label {
+  color: #fff;
+  background-color: transparent;
+}
+
+/deep/ .el-descriptions__body {
+  color: #fff;
+  background-color: transparent;
+}
+/deep/.el-descriptions--mini:not(.is-bordered) .el-descriptions-item__cell{
+  padding: 6px 10px;
+}
+
+.detailsInfo {}
+</style>

src/views/geologyDisaster/config.js

@@ -33,196 +33,79 @@ export const TableHeader = [
 
 // 基本信息详情
 export const jbxxInfos = [
-  [[
-    { flag: 'label', value: '地质灾害隐患点名称', span: 8, align: 'center' },
-    { flag: 'value', value: 'tbbh', span: 12 },
-  ]],
-  [[
-    { flag: 'label', value: '所在辖区', span: 8 },
-    { flag: 'value', value: 'dlbm', span: 12 },
-  ]],
-  [[
-    { flag: 'label', value: '所在行政村', span: 8 },
-    { flag: 'value', value: 'dlmc', span: 12 },
-  ]],
-  [[
-    { flag: 'label', value: '规模等级', span: 8 },
-    { flag: 'value', value: 'qsxz', span: 12 },
-  ]],
-  [[
-    { flag: 'label', value: '经度', span: 8 },
-    { flag: 'value', value: 'tbmj', span: 12 },
-  ]],
-  [[
-    { flag: 'label', value: '纬度', span: 8 },
-    { flag: 'value', value: 'kcdlbm', span: 12 },
-  ]],
-  [[
-    { flag: 'label', value: '威胁人数(人)', span: 8 },
-    { flag: 'value', value: 'kcxs', span: 12 },
-  ]],
-  [[
-    { flag: 'label', value: '防灾责任划分', span: 8 },
-    { flag: 'value', value: 'kcmj', span: 12 },
-  ]],
-  [[
-    { flag: 'label', value: '事权划分', span: 8 },
-    { flag: 'value', value: 'tbdlmj', span: 12 },
-  ]],
+  { label: '地质灾害隐患点名称', value: 'tbbh', span: 12 },
+  { label: '所在辖区', value: 'dlbm', span: 12 },
+  { label: '所在行政村', value: 'dlmc', span: 12 },
+  { label: '规模等级', value: 'qsxz', span: 12 },
+  { label: '经度', value: 'tbmj', span: 12 },
+  { label: '纬度', value: 'kcdlbm', span: 12 },
+  { label: '威胁人数(人)', value: 'kcxs', span: 12 },
+  { label: '防灾责任划分', value: 'kcmj', span: 12 },
+  { label: '事权划分', value: 'tbdlmj', span: 12 },
 ]
-export const zgdwInfos = [[[
-  { flag: 'label', value: '主管单位名称', span: 6 },
-  { flag: 'value', value: 'gdlx', span: 14 },
-]],
-[[
-  { flag: 'label', value: '责任领导/职务/电话', span: 6 },
-  { flag: 'value', value: 'gdpdjb', span: 14 },
-]],
-[[
-  { flag: 'label', value: '直接责任人/职务/电话', span: 6 },
-  { flag: 'value', value: 'frdbs', span: 14 },
-]],
+export const zgdwInfos = [
+  { label: '主管单位名称', value: 'gdlx' },
+  { label: '责任领导/职务/电话', value: 'gdpdjb' },
+  { label: '直接责任人/职务/电话', value: 'frdbs' },
+
 ]
 export const qcqfInfos = [
-  [[
-    { flag: 'label', value: '群测群防员', span: 6 },
-    { flag: 'value', value: 'czcsxm', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '联系电话', span: 6 },
-    { flag: 'value', value: 'sjnf', span: 14 },
-  ]],
+  { label: '群测群防员', value: 'czcsxm' },
+  { label: '联系电话', value: 'sjnf' },
 ]
 // 检测资料
 // 隐患排查与整改情况
 export const yhpcInfos = [
-  [[
-    { flag: 'label', value: '排查责任单位', span: 6 },
-    { flag: 'value', value: 'bz', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '排查负责人/联系电话', span: 6 },
-    { flag: 'value', value: 'bsm', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '警示标志', span: 6 },
-    { flag: 'value', value: 'ysdm', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '群测群防员配备', span: 6 },
-    { flag: 'value', value: '项目类型', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '隔离防护设施', span: 6, },
-    { flag: 'value', value: 'xmmc', span: 14, isslot: true },
-  ]],
-  [[
-    { flag: 'label', value: '其他问题隐患', span: 6 },
-    { flag: 'value', value: 'zzhdlmc', span: 14 },
-  ]],
+  { label: '排查责任单位', value: 'bz' },
+  { label: '排查负责人/联系电话', value: 'bsm' },
+  { label: '警示标志', value: 'ysdm' },
+  { label: '群测群防员配备', value: '项目类型' },
+  { label: '隔离防护设施', value: 'xmmc', isslot: true },
+  { label: '其他问题隐患', value: 'zzhdlmc' },
 ]
 
 export const yhzgInfos = [
-  [[
-    { flag: 'label', value: '整改责任单位', span: 6 },
-    { flag: 'value', value: 'zzhdlbm', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '整改负责人/联系电话', span: 6 },
-    { flag: 'value', value: 'qsdwdm', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '整改措施', span: 6 },
-    { flag: 'value', value: 'qsdwmc', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '整改进展情况', span: 6 },
-    { flag: 'value', value: 'zldwmc', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '整改完成/预计整改完成时间', span: 6 },
-    { flag: 'value', value: 'zldwdm', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '下一步防治整改计划', span: 6 },
-    { flag: 'value', value: 'xzgdlydlbm', span: 14 },
-  ]],]
+  { label: '整改责任单位', value: 'zzhdlbm' },
+  { label: '整改负责人/联系电话', value: 'qsdwdm' },
+  { label: '整改措施', value: 'qsdwmc' },
+  { label: '整改进展情况', value: 'zldwmc' },
+  { label: '整改完成/预计整改完成时间', value: 'zldwdm' },
+  { label: '下一步防治整改计划', value: 'xzgdlydlbm' },
+]
 
 //应急预案
 export const yjyaInfos = [
-  [[
-    { flag: 'label', value: '地点', span: 6 },
-    { flag: 'value', value: 'xzgdlydlmc', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '基本情况', span: 6 },
-    { flag: 'value', value: 'xzgdmj', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '引发因素', span: 6 },
-    { flag: 'value', value: 'xzgddb', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '危害对象', span: 6 },
-    { flag: 'value', value: 'xzgdlyxm', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '预警等级', span: 6 },
-    { flag: 'value', value: 'xzgdlydlmc', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '预警方法', span: 6 },
-    { flag: 'value', value: 'xzgdmj', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '应急等级', span: 6 },
-    { flag: 'value', value: 'xzgddb', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '应急方法', span: 6 },
-    { flag: 'value', value: 'xzgdlyxm', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '撤离路线', span: 6 },
-    { flag: 'value', value: 'xzgddb', span: 14 },
-  ]],
-  [[
-    { flag: 'label', value: '避灾地点', span: 6 },
-    { flag: 'value', value: 'xzgdlyxm', span: 14 },
-  ]],
+  { label: '地点', value: 'xzgdlydlmc' },
+  { label: '基本情况', value: 'xzgdmj' },
+  { label: '引发因素', value: 'xzgddb' },
+  { label: '危害对象', value: 'xzgdlyxm' },
+  { label: '预警等级', value: 'xzgdlydlmc' },
+  { label: '预警方法', value: 'xzgdmj' },
+  { label: '应急等级', value: 'xzgddb' },
+  { label: '应急方法', value: 'xzgdlyxm' },
+  { label: '撤离路线', value: 'xzgddb' },
+  { label: '避灾地点', value: 'xzgdlyxm' },
+]
+export const jszdInfos = [
+  { label: '姓名', value: 'xzgdlydlmc' },
+  { label: '电话', value: 'xzgdmj' },
+  { label: '单位', value: 'xzgddb' },
+]
+export const timeInfos = [
+  { label: '编制时间', value: 'xzgdlydlmc' },
+  { label: '修编时间', value: 'xzgdmj' },
 ]
 
-export const jslist = [{
-  id: "QHBH",
-  label: "整治前后土地利用结构变化",
-  dataList: [],
-  iseyes: false,
-  isshow: true,
-  scxstyle: 2,
-},
-{
-  id: "XZGD",
-  label: "新增耕地",
-  dataList: [{}],
-  iseyes: false,
-  isshow: true,
-  scxstyle: 3,
-},
-{
-  id: "SQSX",
-  label: "三线分析",
-  dataList: [],
-  iseyes: false,
-  isshow: true,
-  scxstyle: 0,
-},
-{
-  id: "GHDK",
-  label: "详细规划分析",
-  dataList: [],
-  iseyes: false,
-  isshow: true,
-  scxstyle: 0,
-},]
+export const fileHeader = [
+  { label: "资料名称", prop: "xmmc", align: 'center' },
+  { label: "时间", prop: "zgbm", width: '120px' },
+  { label: "操作", slot: "action", width: '80px', align: 'center' },
+]
+export const fzrHeader = [
+  { label: "负责人", prop: "xmmc", align: 'center' },
+  { label: "姓名", prop: "zgbm", width: '120px' },// slot: "mj"
+  { label: "电话", prop: "gm", width: '80px ', slot: "mj", align: 'center' },
+  { label: "责任", width: '80px', align: 'center' },
+]
 
 

src/views/geologyDisaster/details.vue

@@ -8,37 +8,107 @@
       <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
         <el-tab-pane label="基本信息" name="jbxx">
           <div class="xxdiv">
-            <!-- <Info :data="jbxxData"></Info> -->
-            <!-- <div class="echars">
-              <div class="echartTitle">
-                <div class="block-title">基本信息</div>
-              </div>
+            <div class="echartTitle">
+              <div class="block-title">基本信息</div>
             </div>
-            <CustomDetails :model="formData" :config="jbxxInfos">
-            </CustomDetails> -->
-            <DesInfo title="基本信息" :model="formData" :config="jbxxInfos" ></DesInfo>
-            <!-- <template #jg>
-                <span> {{ stateMap[formData.state].name }}</span>
-              </template> -->
-          </div>
+            <DesInfo :model="formData" :config="jbxxInfos"></DesInfo>
+            <div class="echartTitle">
+              <div class="block-title">主管单位</div>
+            </div>
+            <DesInfo :model="formData" :config="zgdwInfos"></DesInfo>
+            <div class="echartTitle">
+              <div class="block-title">群测群防</div>
+            </div>
+            <DesInfo :model="formData" :config="qcqfInfos"></DesInfo>
+            <div class="echartTitle">
+              <div class="block-title">检测资料</div>
+            </div>
+            <tablePage class="tablePage" :cloumn="fileHeader" :table="fileList" :indexed="false" layout="">
+              <template #action="{ row }">
+                <span class="usable" @click="detail(row)">详情</span>
+                <span class="usable" @click="download(row)"> 查看 </span>
+              </template>
+            </tablePage>
 
+          </div>
         </el-tab-pane>
         <el-tab-pane label="隐患排查与整改情况" name="yhpcyzg">
-
+          <div class="xxdiv">
+            <div class="echartTitle">
+              <div class="block-title">隐患排查情况</div>
+            </div>
+            <DesInfo :model="formData" :config="yhpcInfos"></DesInfo>
+            <div class="echartTitle">
+              <div class="block-title">隐患整改情况</div>
+            </div>
+            <DesInfo :model="formData" :config="yhzgInfos"></DesInfo>
+            <div @click="bigimg = true">
+              <el-carousel indicator-position="outside" @change="(v) => imgIndex = v">
+                <el-carousel-item v-for="(item, i) in monitorList" :key="item">
+                  <div class="imgi"> {{ imgIndex }}</div>
+                  <!-- <div class="imgi">{{ `${i + 1} / ${monitorList.length}` }}</div> -->
+                  <img :src="item.imgUrl" />
+                  <div class="imgInfo"> {{ item.info }} </div>
+                </el-carousel-item>
+              </el-carousel>
+            </div>
+            <div class="echartTitle">
+              <div class="block-title">治理项目资料</div>
+            </div>
+            <tablePage class="tablePage" :cloumn="fzrHeader" :table="zzfiletable" :indexed="false" layout=""
+              ref="tableDialogRef">
+              <template #action="{ row }">
+                <span class="usable" @click="detail(row)">详情</span>
+                <span class="usable" @click="download(row)"> 对比 </span>
+              </template>
+            </tablePage>
+          </div>
         </el-tab-pane>
         <el-tab-pane label="应急预案" name="yjya">
+          <div class="xxdiv">
+            <div class="echartTitle">
+              <div class="block-title">应急预案</div>
+            </div>
+            <DesInfo :model="formData" :config="yjyaInfos"></DesInfo>
+            <div class="echartTitle">
+              <div class="block-title">相关负责人</div>
+            </div>
+            <tablePage class="tablePage" :cloumn="fzrHeader" :table="fzrtable" :indexed="false" layout="">
+            </tablePage>
+            <div class="echartTitle">
+              <div class="block-title">技术指导人</div>
+            </div>
+            <DesInfo :column="2" :model="formData" :config="jszdInfos"></DesInfo>
+            <DesInfo :column="2" :model="formData" :config="timeInfos" :border="false"></DesInfo>
 
+          </div>
         </el-tab-pane>
       </el-tabs>
     </div>
+    <div class="sm-panel bigimgdiv" v-drag v-show="bigimg">
+      <div class="sm-panel-header">
+        <span>图片详情</span>
+        <i class="el-icon-close" @click="bigimg = false"></i>
+      </div>
+      <el-carousel trigger="click" indicator-position="outside" :autoplay="false" :initial-index="imgIndex">
+        <el-carousel-item v-for="(item, i) in monitorList" :key="i">
+          <div class="imgi">{{ `${i + 1} / ${monitorList.length}` }}</div>
+          <img :src="item.imgUrl" />
+          <div class="imgInfo"> {{ item.info }} </div>
+        </el-carousel-item>
+      </el-carousel>
+
+    </div>
+
   </div>
 </template>
 <script>
 // import Info from "../../Idleland/components/info.vue";
 // import CustomDetails from "@/components/mapView/custom-detailsInfo.vue";
 import DesInfo from "@/components/mapView/descriptionsInfo.vue";
+import tablePage from "@/components/mapView/tablePage.vue";
 import { getXm } from "@/api/stxf/tdzz.js";
-import { jbxxInfos } from "./config.js";
+import { jbxxInfos, zgdwInfos, qcqfInfos, fileHeader, yhpcInfos, yhzgInfos, yjyaInfos, fzrHeader, jszdInfos, timeInfos } from "./config.js";
 export default {
   props: {
     interObj: {
@@ -46,16 +116,55 @@ export default {
     },
   },
   // components: { Info, Wrjxx },
-  components: { DesInfo, },
+  components: { DesInfo, tablePage },
   data() {
     return {
       activeTabs: "jbxx",
       isShallow: false,
       formData: { tbbh: 'skmdslcmdrvnfjkvn就是当你发觉的女第就是当你发觉的三次多少地方' },
-      jbxxData: [],
+      fileList: { data: [{}] },
       rdData: [],
       type: "",
+      bigimg: false,
+      imgIndex: 0,
+      monitorList: [
+        {
+          imgUrl:
+            "https://b0.bdstatic.com/ugc/Gr0RkpztmAdvrxnS4n54Iw49d04e3484c9bb1a11f03b38a819d893.jpg@h_1280",
+          info: "育才生态区那阳小组（治理后）"
+        },
+        {
+          imgUrl:
+            "https://img2.baidu.com/it/u=3692233586,2896402884&fm=253&fmt=auto&app=120&f=JPEG?w=759&h=427",
+          info: "育才生态区那阳小组（治理后）"
+        },
+        {
+          imgUrl:
+            "https://img2.baidu.com/it/u=882190421,2711411099&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",
+        },
+        {
+          imgUrl:
+            "http://img2.baidu.com/it/u=516755055,1384417278&fm=253&app=138&f=JPEG?w=800&h=1067",
+          info: "育才生态区那阳小组（治理后）"
+        },
+        {
+          imgUrl:
+            "http://img0.baidu.com/it/u=1366170349,307387023&fm=253&app=138&f=JPEG?w=800&h=1067",
+          info: "育才生态区那阳小组（治理后）"
+        },
+      ],
+      fzrtable: { data: [{}] },
+      zzfiletable: { data: [{}] },
       jbxxInfos: jbxxInfos,
+      zgdwInfos: zgdwInfos,
+      qcqfInfos: qcqfInfos,
+      fileHeader: fileHeader,
+      yhpcInfos: yhpcInfos,
+      yhzgInfos: yhzgInfos,
+      yjyaInfos: yjyaInfos,
+      fzrHeader: fzrHeader,
+      jszdInfos: jszdInfos,
+      timeInfos: timeInfos
     };
   },
   mounted() {
@@ -108,6 +217,10 @@ export default {
     &:hover {
       color: aqua;
     }
+
+    .el-carousel {
+      height: 300px;
+    }
   }
 
   .xxdiv {
@@ -121,4 +234,69 @@ export default {
   max-height: 800px !important;
   top: 28px !important;
 }
+
+.el-carousel {
+  margin-top: 10px;
+
+  img {
+    width: 100%;
+    height: 300px;
+    object-fit: contain;
+  }
+
+  .imgi {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+
+  .imgInfo {
+    // width: 245px;
+    width: 60%;
+    height: 46px;
+    // background-color: rgba(255, 192, 203, 0.356);
+    position: absolute;
+    bottom: 0;
+    left: 10px;
+  }
+}
+
+.bigimgdiv {
+  right: 20%;
+  width: 60%;
+  max-width: 100%;
+  height: 700px;
+
+  /deep/ .el-carousel__container {
+    height: 632px;
+  }
+
+  img {
+    width: 100%;
+    height: 632px
+  }
+
+
+
+
+  /deep/.el-carousel__arrow {
+    background-color: rgba(45, 140, 240, 0.4);
+  }
+
+  /deep/.el-carousel__arrow:hover {
+    background-color: rgba(45, 140, 240, 1);
+  }
+
+  /deep/ .el-icon-close:before {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: larger;
+    font-weight: bold;
+
+    &:hover {
+      color: aqua;
+    }
+  }
+}
 </style>

src/views/geologyDisaster/index.vue

@@ -7,37 +7,17 @@
       </h2>
       <div class="xz_box">
         <div class="el-col headerSelect">
-          <el-input
-            clearable
-            v-model="pageObj.LA"
-            @input="searchFun()"
-            class="search"
-            placeholder="请输入查询内容"
-            size="mini"
-          ></el-input>
-          <el-cascader
-            v-model="pageObj.xzqh"
-            :show-all-levels="false"
-            :options="store.state.region_tree"
-            @change="searchFun()"
-            placeholder="行政区"
-            size="mini"
-            :props="{
+          <el-input clearable v-model="pageObj.LA" @input="searchFun()" class="search" placeholder="请输入查询内容"
+            size="mini"></el-input>
+          <el-cascader v-model="pageObj.xzqh" :show-all-levels="false" :options="store.state.region_tree"
+            @change="searchFun()" placeholder="行政区" size="mini" :props="{
               checkStrictly: true,
               expandTrigger: 'hover',
               emitPath: false,
-            }"
-          ></el-cascader>
+            }"></el-cascader>
         </div>
-        <tablePage
-          class="tablePage"
-          :cloumn="cloumn"
-          :table="table"
-          :indexed="false"
-          layout=""
-          ref="tableDialogRef"
-          @currentChange="searchFun"
-        >
+        <tablePage class="tablePage" :cloumn="cloumn" :table="table" :indexed="false" layout="" ref="tableDialogRef"
+          @currentChange="searchFun">
           <template #mj="{ row }">
             {{ Number(row.gm).toFixed(2) }}
           </template>
@@ -59,7 +39,7 @@ import customForm from "@/components/mapView/custom-form.vue";
 import Details from "./details.vue";
 import { QueryList } from "@/api/cockpitNew";
 import { getXmList } from "@/api/stxf/tdzz.js";
-import { zzForm, TableHeader, reasonList } from "./config";
+import { zzForm, TableHeader } from "./config";
 import { loadGeoJSON, removeGeoJSON } from "@/utils/MapHelper/help.js";
 let geoSources = {};
 export default {
@@ -88,7 +68,6 @@ export default {
       region: "",
       formConfig: zzForm,
       cloumn: TableHeader,
-      reasonList: reasonList,
       table: {
         data: [{}],
         total: 20,
@@ -201,15 +180,17 @@ export default {
       }
     },
   },
-  beforeDestroy() {},
+  beforeDestroy() { },
 };
 </script>
 
 <style lang="scss" scoped>
 @import "../complianceAnalysis/ghzc.scss";
+
 .geologyDisaster {
   width: 100%;
   height: 100%;
+
   .totalnum {
     margin-left: 20px;
   }
@@ -227,6 +208,7 @@ export default {
       top: 0px !important;
     }
   }
+
   .tablePage {
     height: calc(100% - 20px);
   }