Merge branch 'master' of http://47.103.92.60:3003/skyversation/qp_onemap_ui

package-lock.json

@@ -12,6 +12,7 @@
         "axios": "^0.27.2",
         "echarts": "^5.6.0",
         "element-plus": "^2.2.15",
+        "moment": "^2.30.1",
         "vue": "^3.2.13",
         "vue-json-editor": "^1.4.3",
         "vue-json-viewer": "^3.0.4",
@@ -4599,6 +4600,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "dev": true,

package.json

@@ -11,6 +11,7 @@
     "axios": "^0.27.2",
     "echarts": "^5.6.0",
     "element-plus": "^2.2.15",
+    "moment": "^2.30.1",
     "vue": "^3.2.13",
     "vue-json-editor": "^1.4.3",
     "vue-json-viewer": "^3.0.4",

src/api/appCenter.js

@@ -0,0 +1,30 @@
+import {
+    postform
+} from '../utils/request'
+//获得数据列表接口
+const getDmsDataList = (params) => {
+    return postform(systemConfig.dmsDataProxy + "/content/selectContentList", params)
+}
+//获得类型接口
+const getDmsCNameAType = (params) => {
+    return postform(systemConfig.dmsDataProxy + "/category/selectByCNameAType", params)
+}
+//获得标签多选框接口
+const getDmsSName = (params) => {
+    return postform(systemConfig.dmsDataProxy + "/select/getSelectBySName", params)
+}
+//根据模型id查询模型详情接口
+const getModelById = (params) => {
+    return postform(systemConfig.dmsDataProxy + "/model/getModelById", params)
+}
+// 获取内容
+const getContentById = (params) => {
+  return postform(systemConfig.dmsDataProxy + '/content/selectContentById', params);
+}
+export default {
+    getDmsDataList,
+    getDmsCNameAType,
+    getDmsSName,
+    getModelById,
+    getContentById
+}

src/api/content.js

@@ -0,0 +1,120 @@
+import {
+  postform, postFile, getFile, getFileStream
+} from '../utils/request'
+
+// 获取简略内容列表
+const getSimpleContentList = (data) => {
+  return postform(systemConfig.dmsDataProxy + '/content/selectContentList', data)
+}
+
+// 修改内容状态
+const updateContentState = (data) => {
+  return postform(systemConfig.dmsDataProxy + '/content/updateAudit', data)
+}
+// 获取栏目模型
+const getColumnModel = (data) => {
+  return postform(systemConfig.dmsDataProxy + '/model/getModelById', data)
+}
+
+// 编辑模型
+const updateModel = (data) => {
+  let url = '/model/updateProperty'
+  if (data.type==1) {
+    url = '/model/updateFields'
+  }
+  return postform(systemConfig.dmsDataProxy + url, data)
+}
+
+// 获取某选择列表详细信息
+const getCheckDetail = (params) => {
+  return postform(systemConfig.dmsDataProxy + '/select/getSelectBySName', params)
+}
+
+// 获取类别信息
+const getCategoryDetail = (params) => {
+  return postform(systemConfig.dmsDataProxy + '/category/selectByCNameAType', params)
+}
+
+// 上传文件
+const uploadFile = (params) => {
+  return postFile(systemConfig.dmsDataProxy + '/file/uploadFile', params)
+}
+
+// 获取文件
+const getContentFile = (url) => {
+  if (url.indexOf("http") > -1) {
+    return getFile(url);
+  } else {
+    return getFile(systemConfig.dmsDataProxy + url);
+  }
+}
+
+// 新增内容
+const addContent = (params) => {
+  return postform(systemConfig.dmsDataProxy + '/content/addContent', params)
+}
+
+// 修改内容
+const updateContent = (params) => {
+  return postform(systemConfig.dmsDataProxy + '/content/updateContent', params)
+}
+
+// 获取内容
+const getContentById = (params) => {
+  return postform(systemConfig.dmsDataProxy + '/content/selectContentById', params);
+}
+
+// 导入内容
+const importContentFile = (params, type) => {
+  if (type === 'geojson' || type === 'shape') {
+    return postFile(systemConfig.dmsDataProxy + '/content/contentImportFileSpaceData', params)
+  } else if (type === 'excel' || type === 'json') {
+    return postFile(systemConfig.dmsDataProxy + '/content/contentImportExcelJsonFileData', params)
+  } else if (type === 'dms') {
+    return postFile(systemConfig.dmsDataProxy + '/content/importDMS', params)
+  }
+}
+
+// 导出内容
+const exportContentFile = (params) => {
+  return getFileStream(systemConfig.dmsDataProxy + '/content/exportFile', params);
+}
+
+// 导出内容
+const exportContentFileToDMS = (params) => {
+  return getFileStream(systemConfig.dmsDataProxy + '/content/exportDMS', params);
+}
+
+// 获取操作权限
+const getColumnAuth = (params) => {
+  return postform(systemConfig.dmsDataProxy + '/permission/getColumnByPermission', params)
+}
+
+// 批量修改字段
+const updateBatchFieldValue = (params) => {
+  return postform(systemConfig.dmsDataProxy + '/column/updateContentByConditions', params)
+}
+
+export default {
+  getSimpleContentList,
+  updateContentState,
+  getColumnModel,
+  updateModel,
+
+  getCheckDetail,
+  getCategoryDetail,
+  exportContentFileToDMS,
+
+  uploadFile,
+  getContentFile,
+  exportContentFile,
+  importContentFile,
+
+  addContent,
+  updateContent,
+  getContentById,
+
+  getColumnAuth,
+
+  updateBatchFieldValue
+}

src/views/yygl/index.vue

@@ -19,36 +19,23 @@
         <div class="title-line"></div>
       </div>
 
-      <div class="applications-grid">
-        <!-- 应用卡片1 -->
-        <div class="application-card">
-          <div class="card-image">
-            <img src="~@/assets/images/common/app-bg-1.png" alt="青浦区环境自动监测信息化平台" />
-          </div>
-          <h3 class="card-title">青浦区环境自动监测信息化平台</h3>
-          <div class="card-info">
-            <p><strong>访问类型：</strong>公开</p>
-            <p><strong>建设单位：</strong>青浦区环境局</p>
-            <p><strong>建设时间：</strong>2024.10.25</p>
-          </div>
-        </div>
-
-        <!-- 应用卡片2 -->
-        <div class="application-card">
-          <div class="card-image">
-            <img src="~@/assets/images/common/app-bg-2.png" alt="青浦区燃气行业监管平台" />
-          </div>
-          <h3 class="card-title">青浦区燃气行业监管平台</h3>
-          <div class="card-info">
-            <p><strong>访问类型：</strong>公开</p>
-            <p><strong>建设单位：</strong>青浦区环境局</p>
-            <p><strong>建设时间：</strong>2024.10.25</p>
+      
+      <div class="applications-grid" >
+        <div v-for="item in applications" :key="item.id">
+          <div class="application-card">
+            <div class="card-image">
+              <img :src="curUrl + item.c_picture" :alt="item.c_jsdw" />
+            </div>
+            <h3 class="card-title"> {{ item.c_jsdw }}</h3>
+            <div class="card-info">
+              <p><strong>访问类型：</strong> {{ item.type }}</p>
+              <p><strong>建设单位：</strong> {{ item.jsdw }}</p>
+              <p><strong>建设时间：</strong> {{ item.createTime }}</p>
+            </div>
           </div>
         </div>
-
       </div>
-       <div class="applications-grid">
-        <!-- 应用卡片3 -->
+       <!-- <div class="applications-grid">
             <div class="application-card">
             <div class="card-image">
                 <img src="~@/assets/images/common/app-bg-3.png" alt="青浦区环境自动监测信息化平台" />
@@ -61,7 +48,6 @@
             </div>
             </div>
 
-            <!-- 应用卡片4 -->
             <div class="application-card">
             <div class="card-image">
                 <img src="~@/assets/images/common/app-bg-4.png" alt="青浦区消防救援支队一网统管平台" />
@@ -73,21 +59,49 @@
                 <p><strong>建设时间：</strong>2024.10.25</p>
             </div>
             </div>
-       </div>
+       </div> -->
     </div>
   </div>
 </template>
 
 <script>
+import appCenter from "@/api/appCenter";
+import moment from 'moment';
 export default {
   name: "ApplicationCenter",
   data() {
-    return {}
+    return {
+      applications:[],
+      curUrl:systemConfig.dmsDataProxy
+    }
+  },
+  mounted() {
+    this.initData()
   },
   methods: {
     handleEnterClick() {
       this.$router.push('appCenter');
-    }
+    },
+    initData() {
+      let requestParams = {
+        columnId: 1657,
+        states: 0,
+        pageSize: 999,
+        page: 0
+      };
+      appCenter.getDmsDataList(requestParams).then(res => {
+        if (res.code === 200) {
+          this.applications = res.content.data.map(item => ({
+            ...item,
+            type: item.c_fwlx === 0 ? '禁用' : '公开',
+            createTime: moment(item.create_time).format('YYYY-MM-DD')
+          }))
+        // console.log(this.applications);
+        }else{
+          this.applications = [];
+        }
+      })
+    },
   }
 }
 </script>
@@ -195,7 +209,7 @@ export default {
 
   .applications-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
     gap: 30px;
     margin: 60px 0 60px 0px;
     .application-card {

src/views/yygl/manage/editManage.vue

@@ -0,0 +1,1542 @@
+<template>
+  <div>
+    <el-dialog
+      :class="'ContentDetail'"
+      v-model="isDialogShow"
+      width="650px"
+      top="7%"
+      title="内容编辑"
+      :close-on-click-modal="false"
+      :before-close="dialogBeforeClose"
+      style="overflow: auto; height: 700px"
+    >
+      <el-form
+        :model="dataForm"
+        :rules="dataFormRules"
+        label-width="150px"
+        ref="dataForm"
+      >
+        <el-form-item :label="'ID(内置)'" v-show="false">
+          <el-input v-model="dataForm.id" />
+        </el-form-item>
+        <el-form-item :label="'标题(内置)'" prop="title" :rules="dataFormRules.required">
+          <el-input
+            v-model="dataForm.title"
+            :placeholder="'请输入标题'"
+            :disabled="isView"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="'描述(内置)'"
+          prop="content"
+          :rules="dataFormRules.required"
+        >
+          <el-input
+            v-model="dataForm.content"
+            :placeholder="'请输入描述'"
+            :disabled="isView"
+          />
+        </el-form-item>
+        <!-- :label="formItem.alias + ':'" -->
+        <el-form-item
+          v-for="formItem in modelFieldList"
+          :key="formItem.name"
+          :prop="formItem.name"
+          :rules="formItem.must ? dataFormRules.required : false"
+        >
+          <template #label>
+            <!-- <span title="这里是额外的信息">用户名</span> -->
+            <span class="el-form-item-label" :title="formItem.alias"
+              >{{ formItem.alias }}:</span
+            >
+          </template>
+
+          <!--文本内容-->
+          <el-input
+            v-if="['varchar', 'content', 'text'].indexOf(formItem.frontType) > -1"
+            v-model="dataForm[formItem.name]"
+            :placeholder="formItem.describe"
+            :disabled="isView"
+          />
+          <!--日期时间-->
+          <span v-else-if="['date_time'].indexOf(formItem.frontType) > -1">
+            <el-date-picker
+              v-if="!isView"
+              type="datetime"
+              v-model="dataForm[formItem.name]"
+              value-format="x"
+              :placeholder="formItem.describe"
+            />
+            <span v-else>{{
+              dataForm[formItem.name] == "" ||
+              dataForm[formItem.name] == undefined ||
+              dataForm[formItem.name] == null
+                ? "无数据"
+                : handleDateFormat(dataForm[formItem.name], formItem.dateType)
+            }}</span>
+          </span>
+
+          <!--整数类型-->
+          <el-input-number
+            v-if="['int_num'].indexOf(formItem.frontType) > -1"
+            style="width: 80%"
+            v-model="dataForm[formItem.name]"
+            :placeholder="formItem.describe"
+            :disabled="isView"
+          />
+          <!--浮点类型-->
+          <el-input-number
+            v-if="['float_num'].indexOf(formItem.frontType) > -1"
+            :min="formItem.min"
+            :max="formItem.max"
+            style="width: 80%"
+            v-model="dataForm[formItem.name]"
+            :placeholder="formItem.describe"
+            :disabled="isView"
+          />
+          <!--布尔类型-->
+          <span v-if="['boolean'].indexOf(formItem.frontType) > -1">
+            <el-switch
+              :active-text="'true'"
+              :inactive-text="'false'"
+              v-model="dataForm[formItem.name]"
+              :disabled="isView"
+            />
+            <span
+              style="
+                font-size: 7px;
+                color: #606266;
+                display: inline-block;
+                margin-left: 8px;
+              "
+            >
+              [{{ formItem.describe }}]
+            </span>
+          </span>
+
+          <!--单选类型-->
+          <el-radio-group
+            v-if="['check'].indexOf(formItem.frontType) > -1"
+            v-model="dataForm[formItem.name]"
+            :disabled="isView"
+          >
+            <el-radio
+              v-for="itemItem in itemLists[formItem.extendId]"
+              :key="itemItem.index"
+              :label="itemItem.index"
+            >
+              {{ itemItem.name }}
+            </el-radio>
+          </el-radio-group>
+          <!--多选类型-->
+          <el-checkbox-group
+            v-if="['multiple_check'].indexOf(formItem.frontType) > -1"
+            v-model="dataForm[formItem.name]"
+            :disabled="isView"
+          >
+            <el-checkbox
+              v-for="item in itemLists[formItem.extendId]"
+              :key="item.index"
+              :label="item.index"
+            >
+              {{ item.name }}
+            </el-checkbox>
+          </el-checkbox-group>
+          <!--类别-->
+          <el-select
+            clearable
+            v-if="['select'].indexOf(formItem.frontType) > -1"
+            v-model="dataForm[formItem.name]"
+            :placeholder="formItem.describe"
+            :disabled="isView"
+          >
+            <el-option
+              v-for="item in itemLists[formItem.extendId]"
+              :key="item.index"
+              :label="item.name"
+              :value="item.index"
+            >
+              <div
+                :style="{
+                  width: '100%',
+                  height: '100%',
+                  'background-color': item.bgColor,
+                }"
+              >
+                <el-image
+                  style="
+                    width: 25px;
+                    height: 25px;
+                    vertical-align: middle;
+                    margin-right: 3px;
+                  "
+                  :src="item.icon"
+                  fit="fill"
+                >
+                  <template #error>
+                    <div class="image-slot"></div>
+                  </template>
+                </el-image>
+                <span :style="{ color: item.frontColor }">{{ item.name }}</span>
+              </div>
+            </el-option>
+          </el-select>
+          <!--多级类别-->
+          <el-cascader
+            clearable
+            v-if="['multiple_select'].indexOf(formItem.frontType) > -1"
+            v-model="dataForm[formItem.name]"
+            :options="itemLists[formItem.extendId]"
+            :props="{
+              label: 'name',
+              value: 'index',
+              checkStrictly: true,
+              emitPath: false,
+            }"
+            :disabled="isView"
+          >
+            <template #default="{ node, data }">
+              <div style="display: none">{{ node }}</div>
+              <div
+                :style="{
+                  width: '100%',
+                  height: '100%',
+                  'background-color': data.bgColor,
+                }"
+              >
+                <el-image
+                  style="
+                    width: 25px;
+                    height: 25px;
+                    vertical-align: middle;
+                    margin-right: 3px;
+                  "
+                  :src="data.icon"
+                  fit="fill"
+                >
+                  <template #error>
+                    <div class="image-slot"></div>
+                  </template>
+                </el-image>
+                <span :style="{ color: data.frontColor }">{{ data.name }}</span>
+              </div>
+            </template>
+          </el-cascader>
+
+          <!-- 经纬度、点、线、面选择-->
+          <span
+            v-if="
+              [
+                'latlng',
+                'point',
+                'polyline',
+                'polygon',
+                'spoint',
+                'spolyline',
+                'spolygon',
+                'map_draw',
+              ].indexOf(formItem.frontType) > -1
+            "
+          >
+            <el-input v-show="false" v-model="dataForm[formItem.name]" />
+            <el-button @click="handleMapSelect(formItem)">
+              <span>{{ isView ? "查看" : "设置" }}</span
+              >地理元素
+            </el-button>
+            <el-icon
+              :color="'green'"
+              style="margin: 0 5px"
+              v-if="dataForm[formItem.name] && dataForm[formItem.name] != ''"
+            >
+              <ElIconCircleCheck />
+            </el-icon>
+            <span
+              style="
+                font-size: 10px;
+                color: #606266;
+                display: inline-block;
+                margin-left: 5px;
+              "
+            >
+              {{ formItem.describe }}
+            </span>
+          </span>
+
+          <!--文件/图片/音频/视频-->
+          <span
+            v-if="['files', 'picture', 'video', 'audio'].indexOf(formItem.frontType) > -1"
+          >
+            <el-upload
+              :ref="formItem.name + '-upload'"
+              :file-list="dataForm[formItem.name + '-fileList']"
+              :limit="1"
+              :http-request="(options) => handleUpload(options, formItem.name)"
+              :before-upload="
+                (rawFile) =>
+                  handleBeforeUpload(
+                    rawFile,
+                    formItem.name + '-upload',
+                    formItem.frontType
+                  )
+              "
+              :on-exceed="(val) => handleUploadExceed(val, formItem.name)"
+              :before-remove="(val) => handleUploadRemove(val, formItem.name)"
+              :on-preview="(file) => handlePreview(file, formItem.frontType)"
+              :disabled="isView"
+            >
+              <el-input
+                v-model="dataForm[formItem.name]"
+                :disabled="true"
+                v-show="false"
+              />
+              <el-button type="primary" :disabled="isView">选择文件</el-button>
+              <el-icon
+                :color="'green'"
+                style="margin: 0 5px"
+                v-if="
+                  dataForm[formItem.name + '-fileStatus'] !== -1 &&
+                  dataForm[formItem.name] &&
+                  dataForm[formItem.name] != ''
+                "
+              >
+                <ElIconCircleCheck />
+              </el-icon>
+              <span v-if="dataForm[formItem.name + '-fileStatus'] === -1">
+                <el-popover
+                  placement="top-start"
+                  trigger="hover"
+                  popper-class="file_warning"
+                  content="文件无法访问"
+                >
+                  <template #reference>
+                    <el-icon :color="'orange'" style="margin: 0 5px; cursor: help">
+                      <ElIconWarning />
+                    </el-icon>
+                  </template>
+                </el-popover>
+              </span>
+              <template #tip>
+                <span
+                  class="el-upload__tip"
+                  style="display: inline-block; margin-left: 10px"
+                >
+                  {{ formItem.describe }}
+                </span>
+              </template>
+            </el-upload>
+          </span>
+
+          <!--带地理位置的图片、音频、视频-->
+          <span
+            v-if="
+              ['picture_location', 'audio_location', 'video_location'].indexOf(
+                formItem.frontType
+              ) > -1
+            "
+          >
+            <el-upload
+              :ref="formItem.name + '-upload'"
+              :file-list="dataForm[formItem.name + '-fileList']"
+              :limit="1"
+              :http-request="
+                (options) => handleUpload(options, formItem.name + '-file', true)
+              "
+              :before-upload="
+                (rawFile) =>
+                  handleBeforeUpload(rawFile, formItem.name, formItem.frontType)
+              "
+              :on-exceed="(val) => handleUploadExceed(val, formItem.name + '-file')"
+              :before-remove="
+                (val) => handleUploadRemove(val, formItem.name + '-file', true)
+              "
+              :on-preview="(file) => handlePreview(file, formItem.frontType)"
+              :disabled="isView"
+            >
+              <el-button type="primary" :disabled="isView">选择文件</el-button>
+              <el-icon
+                :color="'green'"
+                style="margin: 0 5px"
+                v-if="
+                  dataForm[formItem.name + '-fileStatus'] !== -1 &&
+                  dataForm[formItem.name + '-file'] &&
+                  dataForm[formItem.name + '-file'] != ''
+                "
+              >
+                <ElIconCircleCheck />
+              </el-icon>
+              <span v-if="dataForm[formItem.name + '-fileStatus'] === -1">
+                <el-popover
+                  placement="top-start"
+                  trigger="hover"
+                  popper-class="file_warning"
+                  content="文件无法访问"
+                >
+                  <template #reference>
+                    <el-icon :color="'orange'" style="margin: 0 5px; cursor: help">
+                      <ElIconWarning />
+                    </el-icon>
+                  </template>
+                </el-popover>
+              </span>
+              <template #tip>
+                <span
+                  class="el-upload__tip"
+                  style="display: inline-block; margin-left: 10px"
+                >
+                  {{ formItem.describe }}
+                </span>
+              </template>
+            </el-upload>
+            <el-button @click="handleMapSelect(formItem, formItem.name + '-location')">
+              <span>{{ isView ? "查看" : "设置" }}</span
+              >地理位置
+            </el-button>
+            <el-icon
+              :color="'green'"
+              style="margin: 0 5px"
+              v-if="
+                dataForm[formItem.name + '-location'] &&
+                dataForm[formItem.name + '-location'] != ''
+              "
+            >
+              <ElIconCircleCheck />
+            </el-icon>
+          </span>
+
+          <!--图册-->
+          <el-upload
+            v-if="['pictures'].indexOf(formItem.frontType) > -1"
+            list-type="picture-card"
+            :file-list="dataForm[formItem.name + '-fileList']"
+            :disabled="isView"
+            :http-request="(options) => handleTCUpload(options, formItem.name)"
+            :on-preview="(file) => handleTCPreview(file)"
+          >
+            <el-icon v-if="!isView">
+              <ElIconPlus />
+            </el-icon>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="sure" v-if="!isView">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      :class="'ContentMap'"
+      v-model="isMapShow"
+      v-if="isMapShow"
+      width="1200px"
+      top="7%"
+      bottom="5%"
+      title="地图选择"
+      :close-on-click-modal="false"
+      :before-close="mapDialogBeforeClose"
+    >
+      <div style="width: 100%; height: 40px; padding-bottom: 5px" v-if="!isView">
+        <el-button
+          style="margin: 5px"
+          @click="mapMarkPoint"
+          v-if="
+            [
+              'map_draw',
+              'latlng',
+              'point',
+              'spoint',
+              'picture_location',
+              'audio_location',
+              'video_location',
+            ].indexOf(currMapItem.frontType) > -1
+          "
+          >点标记</el-button
+        >
+        <el-button
+          style="margin: 5px"
+          @click="mapMarkLine"
+          v-if="['map_draw', 'polyline', 'spolyline'].indexOf(currMapItem.frontType) > -1"
+          >线标记</el-button
+        >
+        <el-button
+          style="margin: 5px"
+          @click="mapMarkPolygon"
+          v-if="['map_draw', 'polygon', 'spolygon'].indexOf(currMapItem.frontType) > -1"
+          >面标记</el-button
+        >
+        <el-button style="margin: 5px" @click="calcelMark">取消标记</el-button>
+      </div>
+      <div id="mapContent">
+        <div id="mapPicker" style="width: 100%; height: 100%"></div>
+      </div>
+      <div id="mapRight">
+        <el-form :label-position="'top'">
+          <el-form-item :label="'地理信息预览:'">
+            <!-- <json-viewer
+              :style="{ height: '350px', overflow: 'auto' }"
+              :value="JSON.parse(JSON.stringify(geoJsons))"
+              :expand-depth="5"
+              copyable
+              boxed
+              sort
+            ></json-viewer> -->
+            <div style="position: absolute;z-index: 9;top: 2px;right: 50px;cursor: pointer;" @click="copyText(geoJsons)">复制</div>
+            <json-editor-vue
+              class="json-editor"
+              :modeList="couldView"
+              :style="{ height: '370px',width: '100%', overflow: 'auto' }"
+              :modelValue="JSON.parse(JSON.stringify(geoJsons))"
+              @update:modelValue="changeValue"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+      <template #footer>
+        <el-button type="primary" @click="mapSure()" v-if="!isView">确定</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-if="isMediaShow" v-model="isMediaShow" title="资源预览">
+      <span v-if="currMedia.images">
+        <!-- style="width: 200px; height: 200px; margin: 5px" -->
+        <el-image
+          w-full
+          v-for="(item, index) in currMedia.images"
+          :key="index"
+          :src="item"
+          :fit="fit"
+        />
+      </span>
+      <span v-if="currMedia.video">
+        <video width="500" height="300" :src="currMedia.video" controls></video>
+      </span>
+      <span v-if="currMedia.audio">
+        <audio :src="currMedia.audio" controls></audio>
+      </span>
+      <span v-if="currMedia.file">
+        <el-button>
+          <a :href="currMedia.file" :download="currMedia.file">点击下载</a>
+        </el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { toRaw } from "vue";
+import api from "@/api/content";
+import { genFileId, ElLoading } from "element-plus";
+import moment from 'moment';
+export default {
+  name: "contentDetail",
+  data() {
+    return {
+      isDialogShow: true,
+      dataForm: {},
+      dataFormRules: {
+        required: [
+          { required: true, message: "该字段不能为空", trigger: "blur" },
+          { required: true, message: "该字段不能为空", trigger: "change" },
+        ],
+      },
+      modelFieldList: [],
+      itemLists: {},
+
+      map: {},
+      currMapItem: {},
+      isMapShow: true,
+      mapMarkers: {
+        layers: [],
+        points: [],
+        linePoints: [],
+        polPoints: [],
+        lines: [],
+        pols: [],
+      },
+      mapLines: [],
+      geoJsons: [],
+
+      isMediaShow: false,
+      currMedia: {
+        images: [],
+      },
+      mediaTypes: {
+        image: ["image/gif", "image/jpeg", "image/jpg", "image/bmp", "image/png"],
+        video: ["video/mp4"],
+        audio: ["audio/mpeg"],
+      },
+      couldView: ["code"] // "tree", "code", "form", "view"
+    };
+  },
+  props: {
+    isShow: Boolean,
+    columnModel: Object,
+    column: Object,
+    item: Object,
+    isView: Boolean,
+    close: Function,
+  },
+  created() {
+    let that = this;
+    let modelFields = JSON.parse(this.columnModel.fieldList);
+    // 无序
+    let keys = Object.keys(modelFields)
+    for (let i = 0; i < keys.length; i++) {
+      let obj = modelFields[keys[i]];
+      if (!obj.name) {
+        obj = JSON.parse(obj)
+      }
+      obj["key"] = keys[i];
+      if (["check", "multiple_check"].indexOf(obj.frontType) > -1) {
+        this.getCheckItems(obj, 1);
+      } else if (["select", "multiple_select"].indexOf(obj.frontType) > -1) {
+        this.getCheckItems(obj, 2);
+      }
+      this.modelFieldList.push(obj);
+    }
+    // 有序
+    // for (let key in modelFields) {
+    //   let obj = modelFields[key];
+    //   if (!obj.name) {
+    //     obj = JSON.parse(obj);
+    //   }
+    //   obj["key"] = key;
+    //   if (["check", "multiple_check"].indexOf(obj.frontType) > -1) {
+    //     this.getCheckItems(obj, 1);
+    //   } else if (["select", "multiple_select"].indexOf(obj.frontType) > -1) {
+    //     this.getCheckItems(obj, 2);
+    //   }
+    //   debugger
+    //   console.log(1111);
+      
+    //   this.modelFieldList.push(obj);
+    // }
+    this.modelFieldList.sort((a, b) => {
+      // return a.index > b.index ? 1 : a.sequence > b.sequence ? 1 : -1;
+      return a.index > b.index ? 1 : -1;
+    });
+    if (this.item && this.item !== "" && JSON.stringify(this.item) != "{}") {
+      this.modelFieldList.forEach((data) => {
+        if (
+          [
+            "latlng",
+            "point",
+            "polyline",
+            "polygon",
+            "spoint",
+            "spolyline",
+            "spolygon",
+          ].indexOf(data.frontType) > -1
+        ) {
+          that.item[data.name] = that.item[data.name];
+        } else if (
+          ["picture_location", "audio_location", "video_location"].indexOf(
+            data.frontType
+          ) > -1
+        ) {
+          let obj = JSON.parse(that.item[data.name]);
+          that.item[data.name + "-file"] = obj.url;
+          api
+            .getContentFile(obj.url)
+            .then((response) => {
+              that.item[data.name + "-fileList"] = [];
+              let file = new File(
+                [response],
+                that.item[data.name].substr(
+                  that.item[data.name].length - 40,
+                  that.item[data.name].length
+                )
+              );
+              file.serverUrl = obj.url;
+              that.item[data.name + "-fileList"].push(file);
+            })
+            .catch((err) => {
+              if (err.response.status !== 200) {
+                that.item[data.name + "-fileStatus"] = -1;
+              }
+            });
+          that.item[data.name + "-location"] = obj.location;
+        } else if ("multiple_check" == data.frontType) {
+          if (!that.item[data.name]) {
+            that.item[data.name] = [];
+          } else {
+            let val = [];
+            let splice = that.item[data.name].split(",");
+            for (let i = 0; i < splice.length; i++) {
+              val.push(Number(splice[i]));
+            }
+            that.item[data.name] = val;
+          }
+        } else if (["check", "select", "multiple_select"].indexOf(data.frontType) > -1) {
+          that.item[data.name] = Number(that.item[data.name]);
+        } else if (["files", "picture", "audio", "video"].indexOf(data.frontType) > -1) {
+          if (!that.item[data.name]) return;
+          api
+            .getContentFile(that.item[data.name])
+            .then((response) => {
+              that.item[data.name + "-fileList"] = [];
+              let file = new File(
+                [response],
+                that.item[data.name].substr(
+                  that.item[data.name].length - 40,
+                  that.item[data.name].length
+                )
+              );
+              file.serverUrl = that.item[data.name];
+              that.item[data.name + "-fileList"].push(file);
+            })
+            .catch((err) => {
+              if (err.response.status !== 200) {
+                that.item[data.name + "-fileStatus"] = -1;
+              }
+            });
+        } else if ("pictures" === data.frontType) {
+          if (!that.item[data.name]) {
+            that.item[data.name + "-fileList"] = [];
+            return;
+          }
+
+          let obj = JSON.parse(that.item[data.name]);
+          that.item[data.name + "-fileList"] = [];
+          obj.forEach((i) => {
+            let url =
+              i.indexOf(systemConfig.dmsDataProxy) !== 0
+                ? systemConfig.dmsDataProxy + i
+                : i;
+            that.item[data.name + "-fileList"].push({
+              name: i.substr(i.length - 40, i.length),
+              url: url,
+              serverUrl: i,
+            });
+          });
+        }
+      });
+    }
+    this.dataForm = this.item;
+    // console.log(this.dataForm)
+  },
+  mounted() {
+    this.isMapShow = false;
+  },
+  methods: {
+    async textToCopy(){
+      let that = this;
+      // copyText(JSON.stringify(that.geoJsons))
+      await navigator.clipboard.writeText(JSON.stringify(that.geoJsons));
+      this.$message({ message: "复制成功", type: "success" });
+    },
+    changeValue(json){
+      let that = this;
+      let Icon = L.divIcon({
+        className: "my-div-icon", //自定义icon css样式
+        iconSize: [10, 10], //点大小
+      });
+      that.geoJsons = json
+      let center = that.geoJsons[0].geometry.coordinates;
+      let type = that.geoJsons[0].geometry.type;
+      if(type == "Point"){//更新点坐标
+        that.mapMarkers.points[0].setLatLng([center[1],center[0]]);
+      }else if(type == 'LineString'){ // 更新面数据
+        let geojsons = [];
+        that.mapMarkers.layers.forEach((item) => {
+          that.map.removeLayer(item);
+        });
+        that.mapMarkers = {
+          layers: [],
+          points: [],
+          linePoints: [],
+          polPoints: [],
+          lines: [],
+          pols: [],
+        };
+
+        for (var i = 0; i < that.geoJsons.length; i++) {
+            that.geoJsons[i].geometry.coordinates.forEach((item) => {
+              let marker = L.marker([item[1],item[0]], {
+                icon: Icon,
+              }).addTo(that.map);
+              if (["polyline", "spolyline"].indexOf(that.currMapItem.frontType) > -1) {
+                that.mapMarkers.lines.forEach((item) => {
+                  that.map.removeLayer(item);
+                });
+                that.mapMarkers.lines = [];
+                geojsons = [];
+              }
+              //添加点到地图中
+              that.mapMarkers.linePoints.push(marker);
+              that.mapMarkers.layers.push(marker);
+              if (that.mapMarkers.linePoints.length > 1) {
+                let points = [];
+                that.mapMarkers.linePoints.forEach((item) => {
+                  points.push([item._latlng.lat, item._latlng.lng]);
+                });
+                let line = L.polyline(points, {
+                  color: "red",
+                }).addTo(that.map);
+                that.mapMarkers.layers.push(line);
+                if (
+                  that.currMapItem.frontType == "map_draw" &&
+                  that.mapMarkers.linePoints.length > 2
+                ) {
+                  let lastLine = that.mapMarkers.lines[that.mapMarkers.lines.length - 1];
+                  that.map.removeLayer(lastLine);
+                  that.mapMarkers.lines.splice(that.mapMarkers.lines.length - 1, 1);
+                  geojsons.splice(geojsons.length - 1, 1);
+                }
+                that.mapMarkers.lines.push(line);
+                geojsons.push(line.toGeoJSON())
+              }
+            });
+        }
+        that.geoJsons = geojsons
+      }else if(type == 'Polygon'){
+        let geojsons = [];
+        that.mapMarkers.layers.forEach((item) => {
+          that.map.removeLayer(item);
+        });
+        that.mapMarkers = {
+          layers: [],
+          points: [],
+          linePoints: [],
+          polPoints: [],
+          lines: [],
+          pols: [],
+        };
+        for (var i = 0; i < that.geoJsons.length; i++) {
+            that.geoJsons[i].geometry.coordinates.forEach((coordItem) => {
+              coordItem.forEach((item) => {
+                let marker = L.marker([item[1],item[0]], {
+                  icon: Icon,
+                }).addTo(that.map);
+                //添加点到地图中
+                that.mapMarkers.polPoints.push(marker);
+                that.mapMarkers.layers.push(marker);
+
+                if (["polygon", "spolygon"].indexOf(that.currMapItem.frontType) > -1) {
+                  that.mapMarkers.pols.forEach((item) => {
+                    that.map.removeLayer(item);
+                  });
+                  that.mapMarkers.pols = [];
+                  geojsons = [];
+                }
+
+                if (that.mapMarkers.polPoints.length > 2) {
+                  let points = [];
+                  that.mapMarkers.polPoints.forEach((item) => {
+                    points.push([item._latlng.lat, item._latlng.lng]);
+                  });
+                  let polygon = L.polygon(points, {
+                    color: "red",
+                  }).addTo(that.map);
+                  that.mapMarkers.layers.push(polygon);
+                  if (
+                    that.currMapItem.frontType == "map_draw" &&
+                    that.mapMarkers.polPoints.length > 3
+                  ) {
+                    let lastPol = that.mapMarkers.pols[that.mapMarkers.pols.length - 1];
+                    that.map.removeLayer(lastPol);
+                    that.mapMarkers.pols.splice(that.mapMarkers.pols.length - 1, 1);
+                    geojsons.splice(geojsons.length - 1, 1);
+                  }
+                  that.mapMarkers.pols.push(polygon);
+                  geojsons.push(polygon.toGeoJSON());
+                }
+              })
+            })
+          }
+          that.geoJsons = geojsons
+      }
+      let bboxObj = {
+          type: "FeatureCollection",
+          features: that.geoJsons.map(function (item) {
+            if (item.type == "Feature") {
+              return item;
+            } else {
+              return {
+                type: "Feature",
+                geometry: item,
+              };
+            }
+          }), 
+        };
+        let extent = turf.bbox(bboxObj);
+        var bounds = L.latLngBounds([
+          [extent[3], extent[2]],
+          [extent[1], extent[0]],
+        ]);
+
+        //定位到矩形
+        that.map.fitBounds(bounds,{ padding: [10, 10], maxZoom: 15 });
+
+
+    },
+    dialogBeforeClose() {
+      this.close();
+    },
+    mapDialogBeforeClose() {
+      this.isMapShow = false;
+      this.calcelMark();
+      this.geoJsons = [];
+      this.mapMarkers = {
+        layers: [],
+        points: [],
+        linePoints: [],
+        polPoints: [],
+        lines: [],
+        pols: [],
+      };
+    },
+    handleMapFileChange(name) {
+      if (
+        this.dataForm[name + "-file"] &&
+        this.dataForm[name + "-file"] !== "" &&
+        this.dataForm[name + "-location"] &&
+        this.dataForm[name + "-location"] !== ""
+      ) {
+        let obj = {
+          location: this.dataForm[name + "-location"],
+          url: this.dataForm[name + "-file"],
+        };
+        this.dataForm[name] = obj;
+      } else {
+        this.dataForm[name] = "";
+      }
+      this.$refs.dataForm.validateField(name);
+    },
+    mapSure() {
+      this.isMapShow = false;
+      if (this.geoJsons.length < 1) {
+        this.dataForm[this.currMapItem.name] = null;
+      } else {
+        if (
+          [
+            "latlng",
+            "point",
+            "spoint",
+            "polyline",
+            "spolyline",
+            "polygon",
+            "spolygon",
+            "picture_location",
+            "audio_location",
+            "video_location",
+          ].indexOf(this.currMapItem.frontType) > -1
+        ) {
+          this.dataForm[this.currMapItem.name] = this.$WKT.convert(
+            this.geoJsons[0].geometry
+          );
+        } else {
+          let geoCollection = {
+            type: "FeatureCollection",
+            features: [],
+          };
+          this.geoJsons.forEach((item) => {
+            geoCollection.features.push(toRaw(item));
+          });
+          this.dataForm[this.currMapItem.name] = JSON.stringify(geoCollection);
+        }
+      }
+      if (
+        ["picture_location", "audio_location", "video_location"].indexOf(
+          this.currMapItem.frontType
+        ) > -1
+      ) {
+        this.handleMapFileChange(
+          this.currMapItem.name.substr(0, this.currMapItem.name.length - 9)
+        );
+      }
+      this.calcelMark();
+      this.geoJsons = [];
+      this.mapMarkers = {
+        layers: [],
+        points: [],
+        linePoints: [],
+        polPoints: [],
+        lines: [],
+        pols: [],
+      };
+    },
+    mapMarkPoint() {
+      let that = this;
+      that.map.off("click");
+      let Icon = L.divIcon({
+        className: "my-div-icon", //自定义icon css样式
+        iconSize: [10, 10], //点大小
+      });
+      that.map.on("click", function (e) {
+        var lat = e.latlng.lat; //纬度
+        var lng = e.latlng.lng; //经度
+        //打点
+        if (
+          [
+            "latlng",
+            "point",
+            "spoint",
+            "picture_location",
+            "audio_location",
+            "video_location",
+          ].indexOf(that.currMapItem.frontType) > -1 &&
+          that.mapMarkers.points.length > 0
+        ) {
+          //更新点坐标
+          that.mapMarkers.points[0].setLatLng([lat, lng]);
+          that.geoJsons[0] = that.mapMarkers.points[0].toGeoJSON();
+        } else {
+          let marker = L.marker([lat, lng], {
+            icon: Icon,
+          }).addTo(that.map);
+          //添加点到地图中
+          that.mapMarkers.points.push(marker);
+          that.mapMarkers.layers.push(marker);
+          that.geoJsons.push(marker.toGeoJSON());
+        }
+      });
+    },
+    mapMarkLine() {
+      let that = this;
+      if (this.currMapItem.frontType == "map_draw") {
+        that.mapMarkers.linePoints = [];
+      }
+      that.map.off("click");
+      let Icon = L.divIcon({
+        className: "my-div-icon", //自定义icon css样式
+        iconSize: [10, 10], //点大小
+      });
+      that.map.on("click", function (e) {
+        var lat = e.latlng.lat; //纬度
+        var lng = e.latlng.lng; //经度
+        let marker = L.marker([lat, lng], {
+          icon: Icon,
+        }).addTo(that.map);
+        if (["polyline", "spolyline"].indexOf(that.currMapItem.frontType) > -1) {
+          that.mapMarkers.lines.forEach((item) => {
+            that.map.removeLayer(item);
+          });
+          that.mapMarkers.lines = [];
+          that.geoJsons = [];
+        }
+        //添加点到地图中
+        that.mapMarkers.linePoints.push(marker);
+        that.mapMarkers.layers.push(marker);
+        if (that.mapMarkers.linePoints.length > 1) {
+          let points = [];
+          that.mapMarkers.linePoints.forEach((item) => {
+            points.push([item._latlng.lat, item._latlng.lng]);
+          });
+          let line = L.polyline(points, {
+            color: "red",
+          }).addTo(that.map);
+          that.mapMarkers.layers.push(line);
+          if (
+            that.currMapItem.frontType == "map_draw" &&
+            that.mapMarkers.linePoints.length > 2
+          ) {
+            let lastLine = that.mapMarkers.lines[that.mapMarkers.lines.length - 1];
+            that.map.removeLayer(lastLine);
+            that.mapMarkers.lines.splice(that.mapMarkers.lines.length - 1, 1);
+            that.geoJsons.splice(that.geoJsons.length - 1, 1);
+          }
+          that.mapMarkers.lines.push(line);
+          that.geoJsons.push(line.toGeoJSON());
+        }
+      });
+    },
+    mapMarkPolygon() {
+      let that = this;
+      if (this.currMapItem.frontType == "map_draw") {
+        that.mapMarkers.polPoints = [];
+      }
+      that.map.off("click");
+      let Icon = L.divIcon({
+        className: "my-div-icon", //自定义icon css样式
+        iconSize: [10, 10], //点大小
+      });
+      that.map.on("click", function (e) {
+        var lat = e.latlng.lat; //纬度
+        var lng = e.latlng.lng; //经度
+        let marker = L.marker([lat, lng], {
+          icon: Icon,
+        }).addTo(that.map);
+        //添加点到地图中
+        that.mapMarkers.polPoints.push(marker);
+        that.mapMarkers.layers.push(marker);
+
+        if (["polygon", "spolygon"].indexOf(that.currMapItem.frontType) > -1) {
+          that.mapMarkers.pols.forEach((item) => {
+            that.map.removeLayer(item);
+          });
+          that.mapMarkers.pols = [];
+          that.geoJsons = [];
+        }
+
+        if (that.mapMarkers.polPoints.length > 2) {
+          let points = [];
+          that.mapMarkers.polPoints.forEach((item) => {
+            points.push([item._latlng.lat, item._latlng.lng]);
+          });
+          let polygon = L.polygon(points, {
+            color: "red",
+          }).addTo(that.map);
+          that.mapMarkers.layers.push(polygon);
+          if (
+            that.currMapItem.frontType == "map_draw" &&
+            that.mapMarkers.polPoints.length > 3
+          ) {
+            let lastPol = that.mapMarkers.pols[that.mapMarkers.pols.length - 1];
+            that.map.removeLayer(lastPol);
+            that.mapMarkers.pols.splice(that.mapMarkers.pols.length - 1, 1);
+            that.geoJsons.splice(that.geoJsons.length - 1, 1);
+          }
+          that.mapMarkers.pols.push(polygon);
+          that.geoJsons.push(polygon.toGeoJSON());
+        }
+      });
+    },
+    calcelMark() {
+      let that = this;
+      that.map.off("click");
+      that.mapMarkers.layers.forEach((item) => {
+        that.map.removeLayer(item);
+      });
+      that.mapMarkers = {
+        layers: [],
+        points: [],
+        linePoints: [],
+        polPoints: [],
+        lines: [],
+        pols: [],
+      };
+      this.geoJsons = [];
+    },
+    handleMapSelect(item, alias) {
+      this.isMapShow = true;
+      item = JSON.parse(JSON.stringify(item));
+      if (alias && alias != "") {
+        item.name = alias;
+      }
+      this.currMapItem = item;
+      let that = this;
+      this.$nextTick(() => {
+        that.map = that.$L.map("mapPicker", {
+          minZoom: 3,
+          maxZoom: 20,
+          // center: [39.915457, 116.453437],
+          center: [31.175188130627745, 121.26786280328167],
+          zoom: 15,
+          zoomControl: false,
+          attributionControl: false,
+          crs: L.CRS.EPSG4326,
+        });
+        that.$L
+          .tileLayer(systemConfig.VEC_C + systemConfig.TDT_TK, {
+            maxZoom: 20,
+            tileSize: 256,
+            zoomOffset: 1,
+          })
+          .addTo(that.map);
+        that.$L
+          .tileLayer(systemConfig.CVA_C + systemConfig.TDT_TK, {
+            maxZoom: 20,
+            tileSize: 256,
+            zoomOffset: 1,
+          })
+          .addTo(that.map);
+        if (that.dataForm[item.name]) {
+          let Icon = L.divIcon({
+            className: "my-div-icon", //自定义icon css样式
+            iconSize: [10, 10], //点大小
+          });
+          let geojsons = [];
+          if (that.currMapItem.frontType != "map_draw") {
+            if (that.dataForm[item.name].value) {
+              geojsons.push(that.$WKT.parse(that.dataForm[item.name].value));
+            } else {
+              geojsons.push(that.$WKT.parse(that.dataForm[item.name]));
+            }
+          } else {
+            let obj = JSON.parse(that.dataForm[item.name]);
+            if (obj.features && obj.features !== "") {
+              obj.features.forEach((i) => geojsons.push(i));
+            }
+          }
+
+          let bboxObj = {
+            type: "FeatureCollection",
+            features: geojsons.map(function (item) {
+              if (item.type == "Feature") {
+                return item;
+              } else {
+                return {
+                  type: "Feature",
+                  geometry: item,
+                };
+              }
+            }),
+          };
+          let extent = turf.bbox(bboxObj);
+          var bounds = L.latLngBounds([
+            [extent[3], extent[2]],
+            [extent[1], extent[0]],
+          ]);
+
+          //定位到矩形
+          that.map.fitBounds(bounds);
+
+          // console.log(t)
+
+          for (let i = 0; i < geojsons.length; i++) {
+            let layer = that.$L
+              .geoJSON(geojsons[i], {
+                onEachFeature: function (feature, layer) {
+                  if (feature.properties && feature.properties.name) {
+                    layer.bindTooltip(feature.properties.name);
+                    layer.bindPopup(feature.properties.address);
+                  }
+                },
+                pointToLayer: function (feature, latlng) {
+                  let marker = L.marker(latlng, {
+                    icon: Icon,
+                  });
+                  that.mapMarkers.points.push(marker);
+                  return marker;
+                },
+              })
+              .addTo(that.map);
+            that.geoJsons.push(layer.toGeoJSON().features[0]);
+          }
+        }
+      });
+    },
+
+    handleBeforeUpload(file, ref, type) {
+      let fileType = file.type;
+      let fileSize = file.size / 1024 / 1024;
+      // 判断类型
+      if (["picture", "picture_location"].indexOf(type) > -1) {
+        if (this.mediaTypes.image.indexOf(fileType) < 0) {
+          this.$message({ message: "不支持的图片类型", type: "warning" });
+          return false;
+        }
+      } else if (["audio", "audio_location"].indexOf(type) > -1) {
+        if (this.mediaTypes.audio.indexOf(fileType) < 0) {
+          this.$message({ message: "不支持的音频类型", type: "warning" });
+          return false;
+        }
+      } else if (["video", "video_location"].indexOf(type) > -1) {
+        if (this.mediaTypes.video.indexOf(fileType) < 0) {
+          this.$message({ message: "不支持的视频类型", type: "warning" });
+          return false;
+        }
+      }
+      // 判断大小
+      if (["video", "video_location"].indexOf(type) > -1) {
+        if (fileSize > 40) {
+          this.$message({ message: "文件不能超过40M", type: "warning" });
+          return false;
+        }
+      } else {
+        if (fileSize > 10) {
+          this.$message({ message: "文件不能超过10M", type: "warning" });
+          return false;
+        }
+      }
+      return true;
+    },
+    handleUpload(options, ref, isMapFile, isMulti) {
+      let that = this;
+      let params = {
+        columnId: this.columnModel.id,
+        contentId: this.item.id,
+        paraName: options.file.name,
+        type: 0,
+        file: options.file,
+      };
+      const loadingInstance = ElLoading.service({
+        customClass: "content-detail-upload-loading",
+        fullscreen: true,
+        text: "上传中，请稍后...",
+      });
+      api.uploadFile(params).then((res) => {
+        if (res.code === 200) {
+          loadingInstance.close();
+          that.dataForm[ref + "-fileStatus"] = null;
+          options.file.serverUrl = res.content;
+          if (isMulti) {
+            let urls = [];
+            that.dataForm[ref + "-fileList"].forEach((i) => {
+              let serverUrl = i.raw ? i.raw.serverUrl : i.serverUrl ? i.serverUrl : "";
+              urls.push(serverUrl);
+            });
+            that.dataForm[ref] = urls;
+          } else {
+            that.dataForm[ref] = res.content;
+          }
+          if (isMapFile) {
+            this.handleMapFileChange(ref.substr(0, ref.length - 5));
+          }
+        } else {
+          loadingInstance.close();
+          that.$message({ message: res.content, type: "error" });
+        }
+      });
+    },
+    handleUploadExceed(file, ref) {
+      this.$refs[ref + "-upload"][0].clearFiles();
+      file = file[0];
+      file.uid = genFileId();
+      this.$refs[ref + "-upload"][0].handleStart(file);
+      this.$refs[ref + "-upload"][0].submit();
+    },
+    handleUploadRemove(file, ref, isMapFile) {
+      this.dataForm[ref] = "";
+      if (isMapFile) {
+        this.handleMapFileChange(ref.substr(0, ref.length - 5));
+      }
+    },
+    handlePreview(file, type) {
+      this.isMediaShow = true;
+      this.currMedia = {};
+      let serverUrl = file.raw
+        ? file.raw.serverUrl
+        : file.serverUrl
+        ? file.serverUrl
+        : "";
+      let url =
+        serverUrl.indexOf(systemConfig.dmsDataProxy) !== 0
+          ? systemConfig.dmsDataProxy + serverUrl
+          : serverUrl;
+      if (["picture", "picture_location"].indexOf(type) > -1) {
+        this.currMedia.images = [url];
+      } else if (["video", "video_location"].indexOf(type) > -1) {
+        this.currMedia.video = url;
+      } else if (["audio", "audio_location"].indexOf(type) > -1) {
+        this.currMedia.audio = url;
+      } else {
+        this.currMedia.file = url;
+      }
+    },
+
+    handleTCUpload(options, ref) {
+      let that = this;
+      let params = {
+        columnId: this.columnModel.id,
+        contentId: this.item.id,
+        paraName: options.file.name,
+        type: 0,
+        file: options.file,
+      };
+      // loading
+      const loadingInstance = ElLoading.service({
+        customClass: "content-detail-upload-loading",
+        fullscreen: true,
+        text: "上传中，请稍后...",
+      });
+      api.uploadFile(params).then((res) => {
+        if (res.code === 200) {
+          loadingInstance.close();
+          that.dataForm[ref + "-fileStatus"] = null;
+          options.file.serverUrl = res.content;
+          let url = systemConfig.dmsDataProxy + res.content;
+          that.dataForm[ref + "-fileList"].push({
+            name: options.file.name,
+            url: url,
+            serverUrl: res.content,
+          });
+        } else {
+          loadingInstance.close();
+          that.$message({ message: res.content, type: "error" });
+        }
+      });
+    },
+    handleTCPreview(file) {
+      file = toRaw(file);
+      let serverUrl = file.raw
+        ? file.raw.serverUrl
+        : file.serverUrl
+        ? file.serverUrl
+        : "";
+      let url =
+        serverUrl.indexOf(systemConfig.dmsDataProxy) !== 0
+          ? systemConfig.dmsDataProxy + serverUrl
+          : serverUrl;
+      this.currMedia.images = [url];
+      this.isMediaShow = true;
+    },
+
+    handleDateFormat(val, fmt) {
+      if (!fmt || fmt == "") {
+        fmt = "0";
+      }
+      if (fmt == "0") {
+        return moment(val).format('YYYY-MM-DD');
+      } else if (fmt == "1") {
+        return moment(val).format('YYYY-MM-DD HH:mm:ss');
+      } else if (fmt == "2") {
+        return moment(val).format('YYYY-MM-DD HH:mm:ss.ssss')
+      } else {
+        return moment(val).format('YYYY-MM-DD HH:mm:ss');
+      }
+    },
+    sure() {
+      let that = this;
+      this.$refs.dataForm.validate((valid) => {
+        if (valid) {
+          console.log('[ eeeee ] >')
+          let content = {};
+          content["id"] = that.dataForm["id"];
+          content["title"] = that.dataForm["title"];
+          content["content"] = that.dataForm["content"];
+          that.modelFieldList.forEach((field) => {
+            if (field.frontType == "multiple_check") {
+              if (that.dataForm[field.name] == undefined) that.dataForm[field.name] = [];
+              let str = that.dataForm[field.name].join(",");
+              str.replace("[", "");
+              str.replace("]", "");
+              content[field.name] = str;
+            } else if (field.frontType == "date_time") {
+              content[field.name] = that.dataForm[field.name];
+            } else if (field.frontType == "pictures") {
+              content[field.name] = [];
+              if (that.dataForm[field.name + "-fileList"]) {
+                that.dataForm[field.name + "-fileList"].forEach((i) => {
+                  content[field.name].push(i.serverUrl);
+                });
+              }
+              content[field.name] = JSON.stringify(content[field.name]);
+            } else {
+              content[field.name] = that.dataForm[field.name];
+            }
+          });
+          let params = {
+            content: JSON.stringify(content),
+            columnId: that.column.columnId,
+            modelId: that.column.modelId,
+          };
+          if (content.id && content.id !== "") {
+            api
+              .updateContent(params)
+              .then((res) => {
+                if (res.code === 200) {
+                  that.close(true);
+                  that.$message({ message: "修改成功", type: "success" });
+                } else {
+                  that.$message({ message: res.content, type: "error" });
+                }
+              })
+              .catch((err) => {
+                that.$message({ message: err.message, type: "error" });
+              });
+          } else {
+            api
+              .addContent(params)
+              .then((res) => {
+                if (res.code === 200) {
+                  that.close(true);
+                  that.$message({ message: "添加成功", type: "success" });
+                } else {
+                  that.$message({ message: res.content, type: "error" });
+                }
+              })
+              .catch((err) => {
+                that.$message({ message: err.message, type: "error" });
+              });
+          }
+        }
+      });
+    },
+    getCheckItems(item, type) {
+      let that = this;
+      console.log('[ eee ] >')
+      if (type === 1) {
+        api.getCheckDetail({ sName: item.extendId }).then((res) => {
+          if (res.code == 200) {
+            that.itemLists[item.extendId] = res.content;
+          }
+        });
+      } else if (type === 2) {
+        let cType =
+          item.frontType === "select"
+            ? 0
+            : item.frontType === "multiple_select"
+            ? 1
+            : null;
+        api.getCategoryDetail({ type: cType, cName: item.extendId }).then((res) => {
+          if (res.code == 200) {
+            that.itemLists[item.extendId] = res.content;
+          }
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.jsoneditor-menu{
+  display: none;
+}
+.jsoneditor-statusbar{
+  display: none;
+}
+.jsoneditor-validation-errors-container{
+  display: none;
+}
+div.jsoneditor-outer.has-main-menu-bar {
+    margin-top: 0px; 
+    padding-top: 40px; 
+    background-color: #e2f1fa;
+}
+.full-screen{
+    right: 10px !important;
+    background-color: #d9d9d9 !important;
+}
+
+#mapContent {
+  height: 400px;
+  width: 70%;
+  display: inline-block;
+}
+
+#mapRight {
+  padding-left: 10px;
+  height: 400px;
+  width: 25%;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.my-div-icon {
+  width: 15px;
+  height: 15px;
+  background-color: red;
+  border-radius: 50%;
+}
+
+.file_warning {
+  background-color: #fdf6ec !important;
+  color: #e8a84a !important;
+  font-weight: bold;
+}
+
+.el-form-item .el-form-item-label {
+  display: inline-block;
+  text-align: right;
+  /* 防止文本换行 */
+  white-space: nowrap;
+  /* 隐藏溢出的内容 */
+  overflow: hidden;
+  /* 显示省略符号 */
+  text-overflow: ellipsis;
+}
+
+.content-detail-upload-loading svg {
+  width: 80px;
+  height: 90px;
+}
+
+.content-detail-upload-loading .el-loading-text {
+  font-size: 20px;
+}
+
+</style>

src/views/yygl/manage/index.vue

@@ -7,37 +7,37 @@
         <!-- 应用范围过滤 -->
         <div class="filter-group">
           <span class="filter-title">应用范围：</span>
-          <el-radio-group v-model="scopeFilter" size="small">
-            <el-radio-button label="all">全部</el-radio-button>
-            <el-radio-button label="district">区级</el-radio-button>
+          <el-radio-group v-model="scopeFilter" size="small" @change="handleScopeFilterChange" v-for="item in buffOptions" :key="item.value">
+            <el-radio-button :label="item.label">{{ item.value }}</el-radio-button>
+            <!-- <el-radio-button label="district">区级</el-radio-button>
             <el-radio-button label="street">街道</el-radio-button>
-            <el-radio-button label="community">社区</el-radio-button>
+            <el-radio-button label="community">社区</el-radio-button> -->
           </el-radio-group>
         </div>
 
         <!-- 应用状态过滤 -->
         <div class="filter-group">
           <span class="filter-title">应用状态：</span>
-          <el-radio-group v-model="statusFilter" size="small">
-            <el-radio-button label="all">全部</el-radio-button>
-            <el-radio-button label="online">在等</el-radio-button>
+          <el-radio-group v-model="statusFilter" size="small" @change="handleStatusFilterChange" v-for="item in statusOptions" :key="item.value">
+            <el-radio-button :label="item.label">{{ item.value }}</el-radio-button>
+            <!-- <el-radio-button label="online">在等</el-radio-button>
             <el-radio-button label="offline">在建</el-radio-button>
             <el-radio-button label="suspended">在维</el-radio-button>
-            <el-radio-button label="expired">停用</el-radio-button>
+            <el-radio-button label="expired">停用</el-radio-button>  -->
           </el-radio-group>
         </div>
 
         <!-- 应用标签过滤 -->
         <div class="filter-group">
           <span class="filter-title">应用标签：</span>
-          <el-radio-group v-model="tagFilter" size="small">
-            <el-radio-button label="all">全部</el-radio-button>
-            <el-radio-button label="special">特色应用</el-radio-button>
+          <el-radio-group v-model="tagFilter" size="small" @change="handleTagFilterChange" v-for="item in tagOptions" :key="item.value">
+            <el-radio-button :label="item.label">{{ item.value }}</el-radio-button>
+            <!-- <el-radio-button label="special">特色应用</el-radio-button>
             <el-radio-button label="code">代码平台</el-radio-button>
             <el-radio-button label="government">仅供演示</el-radio-button>
             <el-radio-button label="demo">示范应用</el-radio-button>
             <el-radio-button label="water">水务</el-radio-button>
-            <el-radio-button label="test">测试</el-radio-button>
+            <el-radio-button label="test">测试</el-radio-button> -->
           </el-radio-group>
         </div>
       </div>
@@ -52,20 +52,20 @@
         >
           <template #prepend><el-icon><search /></el-icon></template>
         </el-input>
-        <el-button type="primary" class="search-btn">搜索</el-button>
-        <el-button class="reset-btn">重置</el-button>
-        <el-button type="success" class="add-btn">+ 应用介入</el-button>
+        <el-button type="primary" class="search-btn"  @click="handleSearchClick">搜索</el-button>
+        <el-button class="reset-btn" @click="handleResetClick">重置</el-button>
+        <el-button type="success" class="add-btn" @click="handleAddClick">+ 新增应用</el-button>
       </div>
 
       <!-- 应用列表区域 -->
       <div class="applications-section">
         <div class="section-header">
-          <span class="total-count">共检索43个应用</span>
+          <span class="total-count">共检索{{total}}个应用</span>
           <div class="sort-control">
             <span>排序：</span>
-            <el-select v-model="sortBy" size="small" style="width: 120px;">
-              <el-option label="上架时间" value="publishTime"></el-option>
-              <el-option label="下架时间" value="romveTime"></el-option>
+            <el-select v-model="sortByValue" size="small" style="width: 120px;" @change="handleSortChange">
+              <el-option label="上架时间(升序)" value="1"></el-option>
+              <el-option label="上架时间(降序)" value="2"></el-option>
             </el-select>
           </div>
         </div>
@@ -75,16 +75,17 @@
           <div class="application-item" v-for="(app, index) in applications" :key="index">
             <div class="app-info">
               <div class="app-logo">
-                <img :src="app.logo" :alt="app.name" />
+                <img :src="curUrl + app.c_picture" :alt="app.title" />
               </div>
               <div class="app-details">
                 <div class="app-header">
-                  <h3 class="app-name">{{ app.name }}</h3>
+                  <h3 class="app-name">{{ app.title }}</h3>
                   <span class="app-version">{{ app.version }}</span>
                 </div>
                 <div class="app-tags">
-                  <el-tag size="small" type="primary" v-if="app.isPublic">区属应用</el-tag>
-                  <el-tag size="small" v-if="app.tag">{{ app.tag }}</el-tag>
+                  <!-- <el-tag size="small" type="primary" v-if="app.isPublic">区属应用</el-tag> -->
+                  <!-- <el-tag size="small" v-if="app.tag">{{ app.tag }}</el-tag> -->
+                  <el-tag size="small" v-for="tag in app.tags" :key="tag">{{ tag }}</el-tag>
                 </div>
               </div>
             </div>
@@ -92,53 +93,72 @@
             <div class="app-metrics">
               <div class="metric-item">
                 <span class="metric-label">应用范围</span>
-                <span class="metric-value">{{ app.buff }}</span>
+                <span class="metric-value">{{ app.buffName }}</span>
               </div>
               <div class="metric-item">
                 <span class="metric-label">状态</span>
-                <span class="metric-value" :class="`status-${app.status}`">{{ app.statusText }}</span>
+                <span class="metric-value" :class="`status-${app.appstauts}`">{{ app.appstautName }}</span>
               </div>
               <div class="metric-item">
                 <span class="metric-label">使用单位</span>
-                <span class="metric-value">{{ app.usingUnit }}</span>
+                <span class="metric-value">{{ app.sydw }}</span>
               </div>
               <div class="metric-item">
-                <span class="metric-label">访问量</span>
-                <span class="metric-value">{{ app.visitCount }}</span>
+                <span class="metric-label">创建时间</span>
+                <span class="metric-value">{{ app.createTime }}</span>
               </div>
               <div class="metric-item">
                 <span class="metric-label">上架时间</span>
-                <span class="metric-value">{{ app.createDate }}</span>
+                <span class="metric-value">{{ app.frameTime }}</span>
               </div>
             </div>
 
             <div class="app-actions">
               <!-- <span class="app-date">{{ app.createDate }}</span> -->
-              <el-button type="primary" size="small" class="detail-btn">查看详情</el-button>
+              <el-button type="primary" size="small" class="detail-btn" @click="getContentById(app)">查看详情</el-button>
             </div>
           </div>
         </div>
 
         <!-- 分页控件 -->
         <div class="pagination-section">
-          <span class="total-text">共43个应用</span>
+          <span class="total-text">共{{total}}个应用</span>
           <el-pagination
             layout="prev, pager, next, jumper, total"
-            :total="43"
+            :total="total"
             :current-page="currentPage"
-            :page-size="10"
+            :page-size="pageSize"
             @current-change="handleCurrentChange"
           >
           </el-pagination>
         </div>
       </div>
+
+      <editManage
+      v-if="isContentShow"
+      :isShow="isContentShow"
+      :column-model="columnModel"
+      :column="columnData"
+      :item="contentItem"
+      :is-view="isContentView"
+      :close="handleEditClose"
+    ></editManage>
     </div>
+    
   </div>
 </template>
 
 <script>
+import { defineAsyncComponent } from "vue";
+import appCenter from "@/api/appCenter";
+import moment from 'moment';
 export default {
   name: "ApplicationManagement",
+   components: {
+    editManage: defineAsyncComponent(() =>
+      import("@/views/yygl/manage/editManage.vue")
+    )
+  },
   data() {
     return {
       // 过滤条件
@@ -146,153 +166,233 @@ export default {
       statusFilter: 'all',
       tagFilter: 'all',
       searchKeyword: '',
-      
-      // 排序条件
-      sortBy: 'publishTime',
+      curUrl:systemConfig.dmsDataProxy,
+      buffOptions: [],
+      tagOptions: [],
+      statusOptions: [],
+      // 排序条件  1 升序 2 降序
+      sortByValue: '1',
+      modelId: 1667, // 应用中心模型id
+      columnId: 1659, // 应用中心栏目id
+
+      isContentShow: false,
+      isContentView: false,
+      columnModel: {},
+      columnData: {
+        title: "",
+      },
+      contentItem: {},
       
       // 分页信息
       currentPage: 1,
+      pageSize: 10,
+      total:10,
       
+      itemApplications: [],
       // 应用列表数据
-      applications: [
-        {
-          logo: require('@/assets/images/common/app-bg-1.png'),
-          name: '水系统综合管理',
-          version: 'v1.0',
-          isPublic: true,
-          tag: '水务',
-          buff: '市级',
-          status: 'offline',
-          statusText: '在维',
-          usingUnit: '暂无',
-          visitCount: 64,
-          createDate: '2025-10-29 16:10:17'
-        },
-        {
-          logo: require('@/assets/images/common/app-bg-2.png'),
-          name: '虹口区历史脉管理系统开发',
-          version: 'v1.0',
-          isPublic: true,
-          tag: '',
-          buff: '区级',
-          status: 'online',
-          statusText: '在线',
-          usingUnit: '虹口区文旅局',
-          visitCount: 8,
-          createDate: '2025-09-15 18:02:32'
-        },
-        {
-          logo: require('@/assets/images/common/app-bg-3.png'),
-          name: '虹口区智慧环卫监管平台',
-          version: 'v1.0',
-          isPublic: true,
-          tag: '',
-          buff: '街道',
-          status: 'offline',
-          statusText: '在维',
-          usingUnit: '虹口区城管局',
-          visitCount: 14,
-          createDate: '2025-09-15 18:01:57'
-        },
-        {
-          logo: require('@/assets/images/common/app-bg-4.png'),
-          name: '上海市虹口区一网统管平台',
-          version: 'v1.0',
-          isPublic: true,
-          tag: '',
-          buff: '街道',
-          status: 'online',
-          statusText: '在线',
-          usingUnit: '虹口区政府办',
-          visitCount: 15,
-          createDate: '2025-09-15 18:01:09'
-        },
-        {
-          logo: require('@/assets/images/common/u661.png'),
-          name: '上海公共交通服务保障',
-          version: 'v1.0',
-          isPublic: true,
-          tag: '',
-          buff: '社区',
-          status: 'offline',
-          statusText: '在维',
-          usingUnit: '虹口区体育局',
-          visitCount: 13,
-          createDate: '2025-09-15 18:00:22'
-        },
-        {
-          logo: require('@/assets/images/common/app-bg-1.png'),
-          name: '水系统综合管理',
-          version: 'v1.0',
-          isPublic: true,
-          tag: '水务',
-          buff: '市级',
-          status: 'offline',
-          statusText: '在维',
-          usingUnit: '暂无',
-          visitCount: 64,
-          createDate: '2025-10-29 16:10:17'
-        },
-        {
-          logo: require('@/assets/images/common/app-bg-2.png'),
-          name: '虹口区历史脉管理系统开发',
-          version: 'v1.0',
-          isPublic: true,
-          tag: '',
-          buff: '区级',
-          status: 'online',
-          statusText: '在线',
-          usingUnit: '虹口区文旅局',
-          visitCount: 8,
-          createDate: '2025-09-15 18:02:32'
-        },
-        {
-          logo: require('@/assets/images/common/app-bg-3.png'),
-          name: '虹口区智慧环卫监管平台',
-          version: 'v1.0',
-          isPublic: true,
-          tag: '',
-          buff: '街道',
-          status: 'offline',
-          statusText: '在维',
-          usingUnit: '虹口区城管局',
-          visitCount: 14,
-          createDate: '2025-09-15 18:01:57'
-        },
-        {
-          logo: require('@/assets/images/common/app-bg-4.png'),
-          name: '上海市虹口区一网统管平台',
-          version: 'v1.0',
-          isPublic: true,
-          tag: '',
-          buff: '街道',
-          status: 'online',
-          statusText: '在线',
-          usingUnit: '虹口区政府办',
-          visitCount: 15,
-          createDate: '2025-09-15 18:01:09'
-        },
-        {
-          logo: require('@/assets/images/common/u661.png'),
-          name: '上海公共交通服务保障',
-          version: 'v1.0',
-          isPublic: true,
-          tag: '',
-          buff: '社区',
-          status: 'offline',
-          statusText: '在维',
-          usingUnit: '虹口区体育局',
-          visitCount: 13,
-          createDate: '2025-09-15 18:00:22'
-        }
-      ]
+      applications: []
     }
   },
+  mounted () {
+    this.initData();
+  },
   methods: {
+    //关闭编辑弹窗
+    handleEditClose(flag) {
+      this.isContentShow = false;
+      this.isContentView = false;
+      // this.columnModel = [];
+      this.contentItem = {};
+      if (flag) {
+        this.getDmsDataList();
+      }
+    },
+    // 新增应用
+    handleAddClick() {
+      this.isContentShow = true;
+    },
     // 处理分页变化
     handleCurrentChange(page) {
       this.currentPage = page;
       // 这里可以添加分页数据加载逻辑
+      this.getDmsDataList();
+    },
+    initData () {
+      this.getDmsCNameAType('applevel');
+      this.getDmsCNameAType('appstatus');
+      this.getDmsTagSName();
+      this.getModelById();
+      this.getDmsDataList();
+    },
+    //根据模型id查询模型详情
+    getModelById(){
+      let requestParams = {
+        modelId: this.modelId, // 应用中心模型id
+      };
+      appCenter.getModelById(requestParams).then(res => {
+        if (res.code === 200) {
+          this.columnModel = res.content;
+          this.columnModel.modelId = this.modelId;
+          this.columnModel.columnId = this.columnId;
+          this.columnData = this.columnModel;
+        }
+      })
+    },
+    //根据内容id查询内容详情
+    getContentById(item){
+      let that = this;
+      let requestParams = {
+          columnId: item.column_id,
+          contentId: item.id,
+      };
+      console.log(item);
+      appCenter.getContentById(requestParams).then((data) => {
+          if (data.code === 200) {
+            that.contentItem = data.content;
+            that.isContentShow = true;
+            that.isContentView = false;
+          }
+      });
+    },
+    // 处理应用范围过滤变化
+    handleScopeFilterChange() {
+      this.getDmsDataList();
+    },
+    // 处理应用状态过滤变化
+    handleStatusFilterChange() {
+      this.getDmsDataList();
+    },
+    // 处理应用标签过滤变化
+    handleTagFilterChange() {
+      this.getDmsDataList();
+    },
+    // 处理搜索点击事件
+    handleSearchClick() {
+      this.getDmsDataList();
+    },
+    //重置过滤条件
+    handleResetClick() {
+      this.scopeFilter = 'all';
+      this.statusFilter = 'all';
+      this.tagFilter = 'all';
+      this.searchKeyword = '';
+      this.getDmsDataList();
+    },
+    // 处理排序条件变化
+    handleSortChange() {
+      this.getDmsDataList();
+    },
+    getDmsTagSName(){
+      let requestParams = {
+        sName: 'tag',
+      };
+      appCenter.getDmsSName(requestParams).then(res => {
+        if (res.code === 200) {
+            this.tagOptions = res.content.map(item => ({
+              label: item.index,
+              value: item.name
+            }));
+            let allOption = {
+              label: 'all',
+              value: '全部'
+            }
+            this.tagOptions.unshift(allOption);
+            
+        }
+      })
+    },
+    getDmsCNameAType(param) {
+      let requestParams = {
+        cName: param,
+        type: 0
+      };
+      
+      appCenter.getDmsCNameAType(requestParams).then(res => {
+        if (res.code === 200) {
+            let option = res.content.map(item => ({
+              label: item.index,
+              value: item.name
+            }));
+            let allOption = {
+              label: 'all',
+              value: '全部'
+            }
+            if(param === 'applevel'){
+              this.buffOptions = option;
+              this.buffOptions.unshift(allOption);
+            }else{
+              this.statusOptions = option;
+              this.statusOptions.unshift(allOption);
+            }
+        }
+      })
+    },
+    getDmsDataList() {
+      let requestParams = {
+        columnId: this.columnId,
+        states: 0,
+        orderBy: JSON.stringify([{"field":"frame_time","orderByType":this.sortByValue}]),
+        pageSize: this.pageSize,
+        page: (this.currentPage-1)
+      };
+      if (this.searchKeyword) {
+        requestParams.search = JSON.stringify([
+          ...(requestParams.search ? JSON.parse(requestParams.search) : []),
+          {
+            field: "title",
+            searchType: 2,
+            content: { value: "%" + this.searchKeyword + "%" },
+          },
+        ]);
+      }
+      if (this.scopeFilter !== 'all') {
+        requestParams.search = JSON.stringify([
+          ...(requestParams.search ? JSON.parse(requestParams.search) : []),
+          {
+            field: "appbuff",
+            searchType: 2,
+            content: { value: this.scopeFilter},
+          },
+        ]);
+      }
+      if (this.statusFilter !== 'all') {
+        requestParams.search = JSON.stringify([
+          ...(requestParams.search ? JSON.parse(requestParams.search) : []),
+          {
+            field: "appstauts",
+            searchType: 2,
+            content: { value: this.statusFilter},
+          },
+        ]);
+      }
+      if (this.tagFilter !== 'all') {
+        requestParams.search = JSON.stringify([
+          ...(requestParams.search ? JSON.parse(requestParams.search) : []),
+          {
+            field: "apptags",
+            searchType: 2,
+            content: { value: this.tagFilter},
+          },
+        ])
+      }
+      appCenter.getDmsDataList(requestParams).then(res => {
+        if (res.code === 200) {
+          this.total = res.content.count;
+          this.itemApplications = res.content.data.map(item => ({
+            ...item,
+            buffName: this.buffOptions.find(info => info.label == item.appbuff.trim())?.value || '',
+            appstautName: this.statusOptions.find(info => info.label == item.appstauts.trim())?.value || '',
+            tags: item.apptags.split(',').map(tag => this.tagOptions.find(info => info.label == tag.trim())?.value || ''),
+            createTime: moment(item.create_time).format('YYYY-MM-DD HH:mm:ss'),
+            frameTime: moment(item.frame_time).format('YYYY-MM-DD HH:mm:ss'),
+
+          }))
+          this.applications = this.itemApplications;
+        }else{
+          this.total = 0;
+          this.applications = [];
+        }
+      })
     }
   }
 }
@@ -316,9 +416,9 @@ export default {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
-  margin-bottom: 20px;
+  // margin-bottom: 20px;
   padding-bottom: 15px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  // border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .filter-group {
@@ -361,7 +461,7 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 5px;
 }
 
 .total-count {
@@ -372,7 +472,8 @@ export default {
 .sort-control {
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: 0px;
+  margin-right: 8px;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.8);
 }
@@ -405,7 +506,7 @@ export default {
   display: flex;
   align-items: center;
   // flex: 1;
-  width: 500px;
+  width: 400px;
   gap: 15px;
 }
 
@@ -518,8 +619,8 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-top: 15px;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  // padding-top: 15px;
+  // border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .total-text {

src/views/yygl/overview/index.vue

@@ -15,16 +15,16 @@
                     </template> -->
                     
                 </el-input>
-                <el-button type="primary" class="search-btn">搜索</el-button>
+                <el-button type="primary" class="search-btn" @click="getDmsDataList">搜索</el-button>
             </div>
             
 
             <!-- 应用范围过滤 -->
             <div class="filter-tabs">
-                <el-radio-group v-model="activeTab" size="medium">
-                    <el-radio-button label="all">全部(41)</el-radio-button>
-                    <el-radio-button label="district">区级(19)</el-radio-button>
-                    <el-radio-button label="street">街镇(8)</el-radio-button>
+                <el-radio-group v-model="activeTab" size="medium" @change="handleTabChange" v-for="item in levelOptions" :key="item.value">
+                    <el-radio-button :label="item.label">{{ item.value }}</el-radio-button>
+                    <!-- <el-radio-button label="1">区级</el-radio-button>
+                    <el-radio-button label="2">街镇</el-radio-button> -->
                 </el-radio-group>
             </div>
         </div>
@@ -33,20 +33,21 @@
         <div class="applications-grid">
           <div class="application-card" v-for="(app, index) in applications" :key="index">
             <div class="card-image">
-              <img :src="app.image" :alt="app.name" />
+              <img :src="curUrl + app.c_picture" :alt="app.title" />
             </div>
             <div class="card-content">
               <div class="app-header">
-                <h3 class="app-name">{{ app.name }}</h3>
+                <h3 class="app-name">{{ app.title }}</h3>
+                <span class="app-level">{{ app.levelName }}</span>
                 <span class="app-version">{{ app.version }}</span>
               </div>
               <div class="app-tags">
-                <el-tag size="small" type="success">{{ app.status }}</el-tag>
+                <!-- <el-tag size="small" type="success">{{ app.status }}</el-tag> -->
                 <el-tag size="small" v-for="tag in app.tags" :key="tag">{{ tag }}</el-tag>
               </div>
-              <p class="app-description">{{ app.description }}</p>
+              <p class="app-description">{{ app.content }}</p>
               <div class="app-footer">
-                <span class="app-date">{{ app.date }}</span>
+                <span class="app-date">{{ app.createTime }}</span>
                 <el-button type="primary" size="small" class="visit-button">访问</el-button>
               </div>
             </div>
@@ -62,104 +63,109 @@
 </template>
 
 <script>
+import appCenter from "@/api/appCenter";
+import moment from 'moment';
 export default {
   name: "ApplicationOverview",
   data() {
     return {
       searchKeyword: '',
       activeTab: 'all',
-      applications: [
-        {
-          image: require('@/assets/images/common/app-bg-1.png'),
-          name: '智慧园区',
-          version: 'v1.0',
-          status: '待审核',
-          tags: [],
-          description: '智慧园区运维管理平台',
-          date: '2025-12-09 11:09:07'
-        },
-        {
-          image: require('@/assets/images/common/app-bg-2.png'),
-          name: '上海市一图一网一屏',
-          version: 'v1.0',
-          status: '待审核',
-          tags: [],
-          description: '城市综合数据可视化平台',
-          date: '2025-12-09 11:09:06'
-        },
-        {
-          image: require('@/assets/images/common/app-bg-3.png'),
-          name: '水系综合管理',
-          version: 'v1.0',
-          status: '未完成',
-          tags: ['水务'],
-          description: '汇聚各类水务水务等专业数据，构建综合业务平台',
-          date: '2025-11-30 15:17:17'
-        },
-        {
-          image: require('@/assets/images/common/app-bg-4.png'),
-          name: '数字孪生黄浦江',
-          version: 'v1.0',
-          status: '待发布',
-          tags: ['未完成', '水务'],
-          description: '利用大数据、物联网、BIM、三维可视化技术构建数字孪生平台',
-          date: '2025-12-08 15:11:36'
-        },
-        {
-          image: require('@/assets/images/common/u661.png'),
-          name: '上海市生态环境管理',
-          version: 'v1.0',
-          status: '待审核',
-          tags: [],
-          description: '生态环境综合监测与管理平台',
-          date: '2025-11-30 15:43:56'
-        },
-        {
-          image: require('@/assets/images/common/app-bg-1.png'),
-          name: '智慧园区',
-          version: 'v1.0',
-          status: '待审核',
-          tags: [],
-          description: '智慧园区运维管理平台',
-          date: '2025-12-09 11:09:07'
-        },
-        {
-          image: require('@/assets/images/common/app-bg-2.png'),
-          name: '上海市一图一网一屏',
-          version: 'v1.0',
-          status: '待审核',
-          tags: [],
-          description: '城市综合数据可视化平台',
-          date: '2025-12-09 11:09:06'
-        },
-        {
-          image: require('@/assets/images/common/app-bg-3.png'),
-          name: '水系综合管理',
-          version: 'v1.0',
-          status: '未完成',
-          tags: ['水务'],
-          description: '汇聚各类水务水务等专业数据，构建综合业务平台',
-          date: '2025-11-30 15:17:17'
-        },
-        {
-          image: require('@/assets/images/common/app-bg-4.png'),
-          name: '数字孪生黄浦江',
-          version: 'v1.0',
-          status: '待发布',
-          tags: ['未完成', '水务'],
-          description: '利用大数据、物联网、BIM、三维可视化技术构建数字孪生平台',
-          date: '2025-12-08 15:11:36'
-        },
-        {
-          image: require('@/assets/images/common/u661.png'),
-          name: '上海市生态环境管理',
-          version: 'v1.0',
-          status: '待审核',
-          tags: [],
-          description: '生态环境综合监测与管理平台',
-          date: '2025-11-30 15:43:56'
+      curUrl:systemConfig.dmsDataProxy,
+      levelOptions: [],
+      tagOptions: [],
+      applications: [],
+      itemApplications: []
+    }
+  },
+   mounted() {
+    this.initData()
+  },
+  methods: {
+    handleTabChange() {
+      if (this.activeTab == 'all') {
+        this.applications = this.itemApplications;
+      } else {
+        this.applications = this.itemApplications.filter(item => item.level == this.activeTab);
+      }
+    },
+    initData() {
+      this.getDmsCNameAType();
+      this.getDmsTagSName();
+      this.getDmsDataList();
+    },
+    getDmsTagSName(){
+      let requestParams = {
+        sName: 'tag',
+      };
+      appCenter.getDmsSName(requestParams).then(res => {
+        if (res.code === 200) {
+            this.tagOptions = res.content.map(item => ({
+              label: item.index,
+              value: item.name
+            }));
+            let allOption = {
+              label: 'all',
+              value: '全部'
+            }
+            this.tagOptions.unshift(allOption);
+            
+        }
+      })
+    },
+    getDmsCNameAType() {
+      let requestParams = {
+        cName: 'applevel',
+        type: 0
+      };
+      
+      appCenter.getDmsCNameAType(requestParams).then(res => {
+        if (res.code === 200) {
+            this.levelOptions = res.content.map(item => ({
+              label: item.index,
+              value: item.name
+            }));
+            let allOption = {
+              label: 'all',
+              value: '全部'
+            }
+            this.levelOptions.unshift(allOption);
+            
+        }
+      })
+    },
+    getDmsDataList() {
+      let requestParams = {
+        columnId: 1658,
+        states: 0,
+        pageSize: 999,
+        page: 0
+      };
+      if (this.searchKeyword) {
+        requestParams.search = JSON.stringify([
+          {
+            field: "title",
+            searchType: 2,
+            content: { value: "%" + this.searchKeyword + "%" },
+          },
+        ]);
+      }
+      appCenter.getDmsDataList(requestParams).then(res => {
+        if (res.code === 200) {
+          this.itemApplications = res.content.data.map(item => ({
+            ...item,
+            status: item.status === 0 ? '待审核' : item.status === 1 ? '待发布' : item.status === 2 ? '未完成' : '已完成',
+            // levelName: item.level == 0 ? '区级' : item.level == 1 ? '街镇' : item.level == 2 ? '社区' : '',
+            levelName: this.levelOptions.find(info => info.label == item.level.trim())?.value || '',
+            tags: item.tag.split(',').map(tag => this.tagOptions.find(info => info.label == tag.trim())?.value || ''),
+            createTime: moment(item.create_time).format('YYYY-MM-DD HH:mm:ss')
+          }))
+          this.applications = this.itemApplications;
+          this.handleTabChange();
+        }else{
+          this.applications = [];
         }
-      ]
+      })
     }
   }
 }
@@ -300,7 +306,14 @@ export default {
       margin: 0;
       color: #ffffff;
     }
-    
+    .app-level {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.6);
+      background-color: rgba(27, 117, 236, 0.8);
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+
     .app-version {
       font-size: 12px;
       color: rgba(255, 255, 255, 0.6);