更新数据

src/components/MarkdownEdit/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div style="border: 1px solid #ccc">
+    <!-- 工具栏 -->
+    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
+    <!-- 编辑器 -->
+    <Editor :style="`height: ${props.heightNumber}px; overflow-y: hidden`" v-model="editorVal" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" @onChange="handChange" />
+  </div>
+</template>
+
+<script setup>
+import { compressImage } from "@/utils/tools.js";
+import "@wangeditor/editor/dist/css/style.css";
+import { qcckPost } from "@/api/qcckApi.js";
+import { ElMessage } from "element-plus";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import {
+  ref,
+  onMounted,
+  shallowRef,
+  onBeforeUnmount,
+  defineEmits,
+  defineProps,
+  watch
+} from "vue";
+const props = defineProps({
+  // 编辑器内容
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  markitVal: {
+    type: String,
+    default: ""
+  },
+  placeholder: {
+    type: String,
+    default: "请输入内容。。。。"
+  },
+  heightNumber: {
+    type: Number,
+    default: 500
+  }
+});
+const editorVal = ref("");
+const editorRef = shallowRef();
+const mode = "default";
+const valueHtml = ref(""); //内容
+//工具配置
+const toolbarConfig = {
+  excludeKeys: ["blockquote", "codeBlock"] //清除不必要的工具，引用和代码块
+};
+const emits = defineEmits(["update:modelValue", "changeFn"]);
+//编辑器配置
+const editorConfig = {
+  withCredentials: true, //允许跨域
+  placeholder: props.placeholder, //提示语
+  MENU_CONF: {
+    uploadImage: {
+      // 自定义上传图片
+      async customUpload(file, insertFn) {
+        let fileBlob = await compressImage(file);
+        let fileData = new File([fileBlob], fileBlob.name, {
+          type: fileBlob.type
+        });
+        if (fileData.size > 2 * 1024 * 1024) {
+          ElMessage({
+            message: "图片超过2MB",
+            type: "success"
+          });
+        } else {
+          await uploadFn(fileData, insertFn);
+        }
+      }
+      // server: "/mosty-api/mosty-base/minio/image/upload",
+      // base64LimitSize: 10000 * 1024,
+    },
+    uploadVideo: {
+      // 自定义上传视频
+      async customUpload(file, insertFn) {
+        await uploadFn(file, insertFn);
+      }
+    }
+  }
+};
+watch(
+  [() => props.markitVal, () => editorRef.value],
+  (val) => {
+    // if (val) editorRef.value = val;
+    if ((val[0] && val[1]) || val[0] == "") {
+      editorVal.value = val[0];
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+const uploadFn = (file, insertFn) => {
+  let param = new FormData();
+  param.append("file", file);
+  qcckPost(param, "/mosty-base/minio/image/upload").then((res) => {
+    insertFn(res);
+  });
+};
+//编辑器创建成功
+const handleCreated = (editor) => {
+  editorRef.value = editor;
+};
+//内容发生变化
+const handChange = (editor) => {
+  // console.log(editor.getHtml(),'editor.getText()');
+  // 判断是否是一个空段落，是空就传空文本
+  if (editor.isEmpty()) {
+    emits("changeFn", editor.getText());
+  } else {
+    emits("changeFn", editor.getHtml());
+  }
+};
+
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor) editor.destroy();
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/ypModel/index.vue

@@ -0,0 +1,114 @@
+<template>
+  <el-dialog v-model="modelValue" center width="1000px" :destroy-on-close="true" title="报告模板" @close="close" :close-on-click-modal="false">
+    <div class="cntBox">
+        <!-- 工具栏 -->
+        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
+        <!-- 编辑器 -->
+        <Editor :style="`height: ${props.heightNumber}px; overflow-y: hidden`" v-model="textContent" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" @onChange="handChange" />
+    </div>
+    <template #footer>
+        <el-button type="primary">暂存</el-button>
+        <el-button type="primary">下载</el-button>
+        <el-button type="primary">取消</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { compressImage } from "@/utils/tools.js";
+import "@wangeditor/editor/dist/css/style.css";
+import { qcckPost } from "@/api/qcckApi.js";
+import { ElMessage } from "element-plus";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { ref, shallowRef, onBeforeUnmount, defineEmits, defineProps, watch } from "vue";
+const props = defineProps({
+    modelValue:{
+        type:Boolean,
+        default:false
+    },
+    // 编辑器内容
+    textContent: {
+        type: String,
+        default: ""
+    },
+    placeholder: {
+        type: String,
+        default: "请输入内容。。。。"
+    },
+    heightNumber: {
+        type: Number,
+        default: 448
+    }
+});
+const editorRef = shallowRef();
+const mode = "default";
+//工具配置
+const toolbarConfig = {
+  excludeKeys: ["blockquote", "codeBlock"] //清除不必要的工具，引用和代码块
+};
+const emits = defineEmits(["update:textContent", "changeFn"]);
+//编辑器配置
+const editorConfig = {
+  withCredentials: true, //允许跨域
+  placeholder: props.placeholder, //提示语
+  MENU_CONF: {
+    uploadImage: {
+      // 自定义上传图片
+      async customUpload(file, insertFn) {
+        let fileBlob = await compressImage(file);
+        let fileData = new File([fileBlob], fileBlob.name, { type: fileBlob.type });
+        if (fileData.size > 2 * 1024 * 1024) {
+          ElMessage({ message: "图片超过2MB", type: "success" });
+        } else {
+          await uploadFn(fileData, insertFn);
+        }
+      }
+    },
+    uploadVideo: {
+      // 自定义上传视频
+      async customUpload(file, insertFn) {
+        await uploadFn(file, insertFn);
+      }
+    }
+  }
+};
+
+const uploadFn = (file, insertFn) => {
+  let param = new FormData();
+  param.append("file", file);
+  qcckPost(param, "/mosty-base/minio/image/upload").then((res) => {
+    insertFn(res);
+  });
+};
+//编辑器创建成功
+const handleCreated = (editor) => {
+  editorRef.value = editor;
+};
+//内容发生变化
+const handChange = (editor) => {
+    console.log(editor.getHtml(),'====editor.getHtml()');
+  // 判断是否是一个空段落，是空就传空文本
+  if (editor.isEmpty()) {
+    emits("changeFn", editor.getText());
+  } else {
+    emits("changeFn", editor.getHtml());
+  }
+};
+
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor) editor.destroy();
+});
+</script>
+
+<style lang="scss" scoped>
+.cntBox{
+    height: 60vh;
+    padding: 8px;
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-y: auto;
+    border: 1px dashed #e9e9e9;
+}
+
+</style>

src/utils/tools.js

@@ -1,6 +1,6 @@
 
 
-
+import ImageCompressor from "image-compressor.js";
 // 随机颜色 - 把16进制的颜色换成rgba格式
 export function choseRbgb(color,opcity) {
   if(color){
@@ -23,6 +23,26 @@ export function randomHexColor() { // 随机生成十六进制颜色
   return '#' + hex;
 }
 
+/**
+ * 压缩图片
+ * @param {*} file 
+ * @param {*} quality 压缩比
+ */
+export function compressImage(file, quality = 0.6) {
+  return new Promise((resolve, reject) => {
+    new ImageCompressor(file, {
+      quality, //压缩质量
+      success(res) {
+        let fileData = new File([res], res.name, { type: res.type });
+        resolve(fileData);
+      },
+      error(e) {
+        reject("图片压缩失败，请稍后再试");
+      },
+    });
+  });
+};
+
 // 今天周几
 export function weekValidate() {
   let week = new Date().getDay()

src/views/KeyPopulations/model/importantPerson.vue

@@ -2,8 +2,8 @@
     <div class="personBox" id="zdrxxtj">
         <div class="asideTitle mt60">
             <div>
-                <span class="title">重点人信息统计</span>
+              <span class="title">重点人信息统计</span>
-                <span :class="active == it ? 'active'+`${idx}`:''" @click="changeDate(it)" class="tabsBtn pointer" v-for="(it,idx) in btns" :key="it">{{ it }}</span>
+              <span :class="active == it ? 'active'+`${idx}`:''" @click="changeDate(it)" class="tabsBtn pointer" v-for="(it,idx) in btns" :key="it">{{ it }}</span>
             </div>
         </div>
         <div class="asideCnt">
@@ -15,6 +15,11 @@
             <template #qtFxdj="{row}">
                <DictTag :tag="false" :value="row.qtFxdj" :options="D_GS_ZDQT_FXDJ"/>
             </template>
+            <template #bqList="{row}">
+               <span v-if="row.bqList">
+                  <el-tag type="success" v-for="(it, idx) in row.bqList" :key="idx">{{it.bqMc  }}</el-tag>
+               </span>
+            </template>
             <template #qtZt="{row}">
                <DictTag :tag="false" :value="row.qtZt" :options="D_GS_ZDQT_ZT"/>
             </template>
@@ -34,10 +39,7 @@ const keywords = ref(''); // 搜索关键字
 const { proxy } = getCurrentInstance();
 const { D_GS_ZDQT_ZT,D_BZ_RYBQ,D_GS_ZDQT_FXDJ } = proxy.$dict('D_GS_ZDQT_ZT','D_BZ_RYBQ','D_GS_ZDQT_FXDJ') //获取字典数据
 const pageData = reactive({
-  tableData: [
+  tableData: [],
-    { ryXm: "王五", rySfzh: "330102199505057890", bq: "吸毒人员" },
-    { ryXm: "王五", rySfzh: "330102199505057890", bq: "吸毒人员" },
-  ],
   keyCount: 0,
   tableConfiger: {
     loading: false,
@@ -54,7 +56,7 @@ const pageData = reactive({
   tableColumn: [
     { label: "姓名", prop: "ryXm", showOverflowTooltip: true },
     { label: "身份证号码", prop: "rySfzh",showOverflowTooltip: true },
-    { label: "标签", prop: "bq",showOverflowTooltip: true },
+    { label: "标签", prop: "bqList",showOverflowTooltip: true,showSolt:true },
     { label: "所属线索", prop: "xsmc",showOverflowTooltip: true },
   ]
 });

src/views/backOfficeSystem/JudgmentHome/ResearchHome/components/detail.vue

@@ -1,19 +0,0 @@
-<template>
-  <el-dialog v-model="modelValue" :destroy-on-close="true" title="报告模板+'人员'" @close="close" :close-on-click-modal="false">
-    <div>4444</div>
-  </el-dialog>
-</template>
-
-<script setup>
-import { reactive, ref } from 'vue';
-const props = defineProps({
-    modelValue:{
-        type:Boolean,
-        default:true
-    }
-})
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/backOfficeSystem/JudgmentHome/ResearchHome/index.vue

@@ -28,7 +28,7 @@
         <span v-for="idx in 3" :key="idx" :class="'sircleL'+idx" class="sircle mr5"></span>
         <span class="ml10 mr10">专题研判</span>
         <span v-for="idx in 3" :key="idx" :class="'sircleR'+idx" class="sircle ml5"></span>
-         <el-button class="btn" type="primary">研判报告</el-button>
+        <el-button class="btn" type="primary" @click="handleYP">研判报告</el-button>
       </div>
       <div class="commCnt">
         <div ref="searchBox">
@@ -62,23 +62,24 @@
       </div>
     </div>
   </div>
-  <!-- 详情 -->
+  
-  <Detail></Detail>
+  <YpModel v-model="showModel" :textContent="textContent" ></YpModel>
 </template>
 
 <script setup>
-import Detail from './components/detail.vue'
+import YpModel from '@/components/ypModel/index.vue'
 import { qcckPost, qcckGet } from "@/api/qcckApi.js";
 import MoreBarEcharts from "@/views/home/echarts/moreBarEcharts.vue";
 import LineEcharts from "@/views/home/echarts/moreLineEcharts.vue";
 import Search from "@/components/aboutTable/Search.vue";
 import MyTable from "@/components/aboutTable/DarkTable.vue";
 import { nextTick, onMounted, reactive,getCurrentInstance ,ref, watch } from 'vue';
-import { set } from "lodash";
 const { proxy } = getCurrentInstance();
 const {D_BZ_SSZT,D_GS_XS_LY} = proxy.$dict("D_BZ_SSZT","D_GS_XS_LY"); //获取字典数据
 const searchBox = ref();
 const listBoxRef = ref();
+const showModel = ref(false);
+const textContent = ref('');
 // 图数据
 const obj = reactive({
    data_lxtj:{
@@ -106,9 +107,9 @@ const searchConfiger = ref([
   { label: "结束时间", prop: 'jssj', placeholder: "请选择结束时间", showType: "datetime" },
 ])
 // 每个列表对应的值
-const list = ref([
+const list = ref([])
-  // { title:'诈骗', tableList:[]},
+const searchForm = ref({}) //赛选
-])
+
 // 列表公用
 const pageData = reactive({
  tableColumn:[
@@ -178,7 +179,7 @@ const tabHeightFn = () => {
 
 const handleGetList = () => {
   list.value.forEach((item, index) => {
-    let params = { sszt: item.dm, pageNum: 1, pageSize: 20 };
+    let params = { sszt: item.dm, pageNum: 1, pageSize: 20,...searchForm.value };
     qcckGet(params, '/mosty-gsxt/qbcj/selectPage').then(res => {
       list.value[index].tableList = res.records || [];
       list.value[index].total = res.total;
@@ -187,6 +188,30 @@ const handleGetList = () => {
   });
 };
 
+// 搜索
+const onSearch = (val) =>{
+  searchForm.value = val;
+  handleGetList()
+}
+
+const handleYP = () =>{
+  let params = {
+    hskssj:searchForm.value.kssj,
+    hsjssj:searchForm.value.jssj,
+  }
+  qcckPost(params,'/mosty-gsxt/wshs/getDcypbg').then(res=>{
+    let data = res || {};
+    let html = `<p class="html_bt">${data.bt}</p>`
+    html+=`<div> <span>${data.zz}</span> <span>${data.bh}</span> <span>${data.sj}</span> </div>`
+    html+=`<p>${data.nr}</p>`
+    html+=`<p>${data.bc}</p>`
+    html+=`<div><span>${data.cbr}</span> <span>${data.hgr}</span> <span>${data.qfr}</span> </div>`
+    textContent.value = html;
+    showModel.value = true;
+  })
+}
+
+
 watch(()=>D_BZ_SSZT.value, (val) => {
   let zdlist = val || [];
   list.value = zdlist.map(v => ({ title: v.zdmc,dm:v.dm,keyCount:0, tableList: [],page:1,total:0 }));
@@ -351,5 +376,8 @@ watch(()=>D_BZ_SSZT.value, (val) => {
 ::v-deep .el-link {
   margin: 3px;
 }
+.html_bt >>>p{
+  color: red;
+}
 
 </style>

src/views/backOfficeSystem/JudgmentHome/tsypHome/components/detail.vue

@@ -1,150 +0,0 @@
-<template>
-  <div class="dialog" v-if="showDialog">
-    <div class="head_box">
-      <span class="title">查看详情 </span>
-      <div>
-        <el-button size="small" @click="close">关闭</el-button>
-      </div>
-    </div>
-    <div class="listBox">
-        <div ref="searchBox">
-            <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
-        </div>
-        <!-- 表格 -->
-    <div class="tabBox">
-      <MyTable
-        :tableData="pageData.tableData"
-        :tableColumn="pageData.tableColumn"
-        :tableHeight="pageData.tableHeight"
-        :key="pageData.keyCount"
-        :tableConfiger="pageData.tableConfiger"
-        :controlsWidth="pageData.controlsWidth"
-      >
-        <template #zdrRyjb="{ row }">
-          <DictTag :value="row.zdrRyjb" :tag="false" :options="D_GS_ZDR_RYJB" />
-        </template>
-        <template #zdrYjdj="{ row }">
-          <DictTag :value="row.zdrYjdj" :tag="false" :options="D_GS_ZDR_YJDJ" />
-        </template>
-      </MyTable>
-      <Pages
-        @changeNo="changeNo"
-        @changeSize="changeSize"
-        :tableHeight="pageData.tableHeight"
-        :pageConfiger="{
-          ...pageData.pageConfiger,
-          total: pageData.total
-        }"
-      ></Pages>
-    </div>
-
-    </div>
-  </div>
-</template>
-
-<script setup>
-import MyTable from "@/components/aboutTable/MyTable.vue";
-import Pages from "@/components/aboutTable/Pages.vue";
-import Search from "@/components/aboutTable/Search.vue";
-import { qcckPost } from "@/api/qcckApi.js";
-import {ref,reactive, nextTick,getCurrentInstance} from 'vue';
-const { proxy } = getCurrentInstance();
-const {  D_GS_ZDR_RYJB,D_GS_ZDR_YJDJ} = proxy.$dict("D_GS_ZDR_RYJB","D_GS_ZDR_YJDJ"); //获取字典数据
-const showDialog = ref(false)
-const searchBox = ref(); //搜索框
-const searchConfiger = ref(
-  [
-  { label: "姓名", prop: 'ryXm', placeholder: "请输入姓名", showType: "input"},
-  { label: "身份证号", prop: 'rySfzh', placeholder: "请输入身份证号", showType: "input"},
-]);
-const pageData = reactive({
-  tableData: [], //表格数据
-  keyCount: 0,
-  tableConfiger: {
-    rowHieght: 61,
-    showSelectType: "null",
-    loading: false,
-    haveControls: false
-  },
-  total: 0,
-  pageConfiger: {
-    pageSize: 20,
-    pageCurrent: 1
-  }, //分页
-  controlsWidth: 160, //操作栏宽度
-  tableColumn: [
-    { label: "姓名", prop: "ryXm" },
-    { label: "身份证号", prop: "rySfzh" },
-    { label: "联系电话", prop: "ryLxdh" },
-    { label: "重点人员级别", prop: "zdrRyjb",showSolt:true },
-    { label: "预警等级", prop: "zdrYjdj",showSolt:true },
-    { label: "关联民警", prop: "gkMjXm" },
-    { label: "民警警号", prop: "gkMjJh" },
-  ]
-});
-const item = ref({})
-const sjlx = ref([])
-
-// 表格高度计算
-const tabHeightFn = () => {
-  pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 280;
-  window.onresize = function () {
-    tabHeightFn();
-  };
-};
-
-const changeNo = (val) => {
-  pageData.pageConfiger.pageCurrent = val;
-  getList();
-};
-const changeSize = (val) => {
-  pageData.pageConfiger.pageSize = val;
-  getList();
-};
-
-const getList = () =>{
-    let params = {
-        id:item.value.id,
-        sjLx:sjlx.value,
-        pageCurrent:pageData.pageConfiger.pageCurrent,
-        pageSize:pageData.pageConfiger.pageSize,
-    }
-    pageData.tableConfiger.loading = true;
-    qcckPost(params,'/mosty-gsxt/tsyp/getRyPage').then(res=>{
-        pageData.tableConfiger.loading = false;
-        console.log(res,'===');
-        pageData.tableData = res.records || []
-        pageData.total = res.total;
-    }).catch(()=>{
-        pageData.tableConfiger.loading = false;
-    })
-}
-
-const close = () =>{
-    pageData.tableData = [];
-    showDialog.value = false;
-}
-
-const init = (val,lxs) =>{
-    showDialog.value = true;
-    item.value = val;
-    sjlx.value = lxs;
-    getList()
-    nextTick(()=>{
-      tabHeightFn()
-    })
-}
-
-
-defineExpose({init})
-</script>
-
-<style lang="scss" scoped>
-.listBox{
-    height: calc(100% - 50px);
-    ::v-deep .searchBox{
-        margin-bottom: 0 !important;
-    }
-}
-
-</style>

src/views/backOfficeSystem/JudgmentHome/tsypHome/index.vue

@@ -15,13 +15,13 @@
         <Search :searchArr="searchConfiger" @submit="onSearch"> </Search>
       </div>
       <ul class="cntlsit mb10" v-if="show" v-infinite-scroll="load" :style="{height:listHeight+'px'}" v-loading="loading">
-        <li class="cntItem" @click="lookDeatl(it)" v-for="(it,idx) in list" :key="idx">
+        <li class="cntItem" @click.stop="lookDeatl(it)" v-for="(it,idx) in list" :key="idx">
           <div class="ww100"><img class="ww100" style="height: 168px;" src="@/assets/images/mxbg.jpg" alt=""></div>
           <div class="f14 lh24 pl4 pr4 one_text_detail">名称：{{ it.ypMc }}</div>
           <div class="flex ww100 f14 lh24 pl4 pr4 one_text_detail">类型：<DictTag :value="it.ypLx" :tag="false" :options="D_SG_TSYPGZ" /></div>
           <div class="f14 lh24 pl4 pr4 one_text_detail">数量：{{ it.num }}</div>
           <div class="foot">
-            <span class="ml10 pointer" style="color:#027ff0 ;"><el-icon style="top: 2px;"><Document /></el-icon>报告</span>
+            <span class="ml10 pointer" @click.stop="handleYp(it)" style="color:#027ff0 ;"><el-icon style="top: 2px;"><Document /></el-icon>报告</span>
             <span class="ml10 pointer" style="color:#f4ac47 ;"><el-icon  style="top: 2px;"><Files /></el-icon>会商</span>
           </div>
         </li>
@@ -31,13 +31,12 @@
         <div class="tc ww100 mb4" style="color: #a29f9f;" v-if="total == list.length && total>0">暂时没有数据了！</div>
       </ul>
     </div>
+    <YpModel v-model="showModel" :textContent="textContent" ></YpModel>
   </div>
-  <!-- 详情 -->
-  <Detail ref="detailForm"></Detail>
 </template>
 
 <script setup>
-import Detail from './components/detail.vue'
+import YpModel from '@/components/ypModel/index.vue'
 import * as MOSTY from "@/components/MyComponents/index";
 import CheckBox from "@/components/checkBox/index.vue";
 import Search from "@/components/aboutTable/Search.vue";
@@ -46,9 +45,10 @@ import { reactive, ref, onMounted, getCurrentInstance,watch, nextTick } from "vu
 const { proxy } = getCurrentInstance();
 const {  D_SG_SJLY,D_SG_TSYPGZ} = proxy.$dict("D_SG_SJLY","D_SG_TSYPGZ"); //获取字典数据
 const searchBox = ref(); //搜索框
+const showModel = ref(false);
+const textContent = ref('');
 const refBtn = ref(); 
 const show = ref(false)
-const detailForm = ref()
 const listHeight = ref()
 const searchConfiger = ref([
   { label: "研判名称", prop: "ypMc", placeholder: "请输入研判名称", showType: "input" },
@@ -134,10 +134,23 @@ const getLits = () =>{
   })
 }
 
+const handleYp = (val) =>{
+  console.log(val,'=====');
+  
+}
+
 // 查看详情
 const lookDeatl = (val) =>{
-  nextTick(()=>{
+  let params = { tsypid:val.id, }
-    detailForm.value.init(val,formData.value.sjLx)
+  qcckPost(params,'/mosty-gsxt/wshs/getDcypbg').then(res=>{
+    let data = res || {};
+    let html = `<p class="html_bt">${data.bt}</p>`
+    html+=`<div> <span>${data.zz}</span> <span>${data.bh}</span> <span>${data.sj}</span> </div>`
+    html+=`<p>${data.nr}</p>`
+    html+=`<p>${data.bc}</p>`
+    html+=`<div><span>${data.cbr}</span> <span>${data.hgr}</span> <span>${data.qfr}</span> </div>`
+    textContent.value = html;
+    showModel.value = true;
   })
 }