zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lcw

Browse Source
This commit is contained in:
lcw
2025-09-24 18:14:32 +08:00
parent 16d05358d1 d58f1568a6
commit ffdbb04675
9 changed files with 675 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -28,7 +28,6 @@
"el-table-infinite-scroll": "^3.0.6", "el-table-infinite-scroll": "^3.0.6",
"element-plus": "2.0.2", "element-plus": "2.0.2",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"fzui-fengqun-vue": "^1.0.1",
"gifler": "^0.1.0", "gifler": "^0.1.0",
"image-compressor.js": "^1.1.4", "image-compressor.js": "^1.1.4",
"lodash": "^4.17.21", "lodash": "^4.17.21",

381
src/components/GdMap/indexww.vue Normal file
View File

@ -0,0 +1,381 @@
<template>
<div :id="mapid" class="map"></div>
<div class="changeMap_box" v-if="props.isShow">
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" />
<!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/slt.jpg')" alt="" />
<div>栅格浅色</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/yxt.jpg')" alt="" />
<div>影像图</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/yst.jpg')" alt="" />
<div>栅格深色</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="mapImageItem">
<img :src="require('@/assets/images/shy.png')" alt="" />
<div>三合一</div>
</div>
</el-carousel-item>
</el-carousel> -->
<!-- 地图缩放 -->
<div class="zoomTargetBox">
<el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom">
</el-input-number>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
import { MapUtil } from "./mapUtil";
import emitter from "@/utils/eventBus.js";
import { getItem } from "@/utils/storage";
const conditionRoute = ref(true); //路况
const mMap = ref(null); //地图对象
const mapUtil = ref(null); //地图工具对象
const zoomTarget = ref(6);
const props = defineProps({
mapid: {
type: String,
default: "mapDiv"
},
//是否显示可以切换地图底图
isShow: {
type: Boolean,
default: false
},
//是否显示实时路况
isShowMvt: {
type: Boolean,
default: false
},
//是否显示地图层级
isShowZoom: {
type: Boolean,
default: false
},
//是否显示绘制控件
isShowDraw: {
type: Boolean,
default: false
}
});
try {
const userInfo = getItem("deptId")[0].deptCode;
} catch (error) {}
let map;
let mapLayer;
let mapLayer1;
onMounted(() => {
emitter.on("followUp", (res) => {
let box = document.getElementsByClassName("changeMap_box");
if (!box) return;
box[0].style.right = !res ? "4px" : "398px";
box[0].style.transition = "0.5s";
});
map = new EliMap({
id: props.mapid,
crs: "EPSG:3857",
style: {
glyphs: "./fonts/{fontstack}/{range}.pbf",
center: [94.36,29.65],
zoom: 10
},
transformRequest: (url) => {
if (url.indexOf("TileMatrix=") != -1) {
const arr = url.split("TileMatrix=");
const arr1 = arr[1].split("&");
const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]}`;
}
}
});
window.map = map;
map.mapboxGLMap.on("load", () => {
map.addGaudLayer({
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
})
zoomTarget.value = map.mapboxGLMap.getZoom();
// 地图加载完成后发出事件
// emit('mapLoaded')
});
mapUtil.value = new MapUtil(map);
// map = new EliMap({
// id: props.mapid,
// crs: "EPSG:4490",
// style: {
// glyphs: "./fonts/{fontstack}/{range}.pbf",
// center: [94.36057012, 29.64276831],
// zoom: 15
// },
// minZoom: 7,
// maxZoom: 18,
// });
// window.map = map;
// map.mapboxGLMap.on("load", () => {
// map.addWMTSLayer(
// "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap"
// ,
// {
// Service: "getImage",
// Type: "RGB",
// ZoomOffset: "0",
// V: "0.3",
// Zoom: "{z}",
// Row: "{y}",
// Col: "{x}"
// },
// {
// tileSize: 300
// }
// );
// zoomTarget.value = map.mapboxGLMap.getZoom();
// });
// mapUtil.value = new MapUtil(map);
mapUtil.value.Drawplot(); //初始化加载绘制工具
// 设置地图中心点及图层
emitter.on("setMapCenter", (res) => {
mapUtil.value.setMapCenter(res.location, res.zoomLevel);
});
emitter.on("removePlot", (flag) => {
mapUtil.value.removePlot(flag);
});
emitter.on("removeAll", (flag) => {
mapUtil.value.removeAll(flag);
});
// 撒点
emitter.on("addPointArea", (obj) => {
mapUtil.value.makerSki(obj);
});
// 鼠标滑过提示文字的点位
emitter.on("showPoint", (obj) => {
mapUtil.value.showPoint(obj);
});
// 清除覆盖物
emitter.on("deletePointArea", (res) => {
mapUtil.value.removeElement(res);
});
// 清除某个覆盖物的单个
emitter.on("deletePointAreaOne", (obj) => {
mapUtil.value.removeElementOne(obj.flag, obj.id);
});
// 清除某个覆盖物的单个
emitter.on("showSquire", (obj) => {
mapUtil.value.zdySquire(obj);
});
// 绘制图形 - 回显区域
emitter.on("drawShape", (res) => {
mapUtil.value.plot(res, resFun);
});
emitter.on("removeEara", (flag) => {
mapUtil.value.removeEara(flag);
});
// 回显图形
emitter.on("echoPlane", (res) => {
mapUtil.value.echoPlane(res);
});
//移除绘制区域
emitter.on("removeEara", (flag) => {
mapUtil.value.removeEara(flag);
});
// 回显线
emitter.on("echoLine", (res) => {
mapUtil.value.createLine(res, res.flag);
});
//创建边界面（geojson）
emitter.on("setBoundarys", (res) => {
mapUtil.value.createBoundarys(res);
});
// 移除边界
emitter.on("removeBj", (res) => {
mapUtil.value.removeBj(res);
});
// 轨迹回放
emitter.on("drawLineAnimation", (res) => {
mapUtil.value.displayLineAnimation(res);
});
// 聚合撒点
emitter.on("addPoint", (obj) => {
mapUtil.value.aggregateScatteringPoint(obj);
});
// 热力图显示
emitter.on("thermodynamicChart", (res) => {
mapUtil.value.showHeatDrawing(res);
});
// 扩散圆
emitter.on("diffusionCircle", (res) => {
mapUtil.value.diffusionCircle(res);
});
// 展示盘曲
emitter.on("showGapText", (obj) => {
mapUtil.value.gapText(obj);
});
// 获取当前地图中心点
emitter.on("getCurrentCenter", (res) => {
let centerPoint = map.mapboxGLMap.getCenter();
let coords = [centerPoint.lng, centerPoint.lat];
emitter.emit("getcentercoord", coords);
});
});
//切换地图底图
const onMapImageChange = (val) => {
//清除已经存在胡地图图层
if (map.mapboxGLMap.getLayer("SGQS_ID"))
map.mapboxGLMap.removeLayer("SGQS_ID");
if (map.mapboxGLMap.getLayer("YX_ID")) map.mapboxGLMap.removeLayer("YX_ID");
if (map.mapboxGLMap.getLayer("SGSG_ID"))
map.mapboxGLMap.removeLayer("SGSG_ID");
if (map.mapboxGLMap.getLayer("TDT_TITLE_ID"))
map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
if (map.mapboxGLMap.getLayer("TDT_ROAD_ID"))
map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
if (map.mapboxGLMap.getLayer("TDT_POI_ID"))
map.mapboxGLMap.removeLayer("TDT_POI_ID");
//设置图层
switch (val) {
case 0:
mapSetLayer("SGQS_ID", "SGQS");
break;
case 1:
mapSetLayer("YX_ID", "YX");
break;
case 2:
mapSetLayer("SGSG_ID", "SGSG");
break;
case 3:
mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
break;
}
if (map.mapboxGLMap.getLayer("realTimeTrafficlevelOne"))
map.mapboxGLMap.moveLayer("realTimeTrafficlevelOne");
if (map.mapboxGLMap.getLayer("map_id")) map.mapboxGLMap.moveLayer("map_id");
if (map.mapboxGLMap.getLayer("map_ids")) map.mapboxGLMap.moveLayer("map_ids");
};
//设置图层函数
const mapSetLayer = (id, source) => {
map.mapboxGLMap.addLayer({ id, type: "raster", source });
};
//获取地图绘制的数据
const resFun = (coord, type, flag, data) => {
emitter.emit("coordString", {
coord: coord,
type: type,
flag: flag,
data: data
});
};
// 地图层级
const handleZoom = (val) => {
map.mapboxGLMap.setZoom(val);
};
// 是否打开或者关闭路况
const handleSwitch = (val) => {
if (val) {
// 打开
} else {
// 关闭
}
};
onUnmounted(() => {
emitter.off("removePlot");
emitter.off("setMapCenter");
emitter.off("addPointArea");
emitter.off("showPoint");
emitter.off("deletePointArea");
emitter.off("deletePointAreaOne");
emitter.off("drawShape");
emitter.off("echoPlane");
emitter.off("removeEara");
emitter.off("echoLine");
emitter.off("addPoint");
emitter.off("thermodynamicChart");
emitter.off("drawLineAnimation");
emitter.off("aggregateScatteringPoint");
emitter.off("hotmap");
emitter.off("setBoundarys");
emitter.off("diffusionCircle");
emitter.off("SsCircle");
emitter.off("ClearssCircle");
});
</script>
<style lang="scss" scoped>
.map {
width: 100%;
height: 100%;
background-color: aliceblue;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
.changeMap_box {
position: absolute;
right: 398px;
bottom: 4px;
z-index: 9;
.mapImageItem {
border: 1px solid #08aae8;
background: rgb(9, 26, 70);
& > img {
width: 100%;
height: 50px;
}
& > div {
text-align: center;
position: relative;
top: -3px;
}
}
.zoomTargetBox {
margin-top: 10px;
margin-left: 23px;
}
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
background: #133362;
color: #fff;
border: none;
}
::v-deep .el-input__inner {
background: #0c1641;
}
}
</style>

15
src/components/MyComponents/Upload/index.vue
View File

@ -13,14 +13,8 @@
<div v-if="props.isImg"> <div v-if="props.isImg">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" /> <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions"> <span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"> <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><el-icon> <zoom-in /></el-icon></span>
<el-icon> <zoom-in /></el-icon> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)"><el-icon><Delete /></el-icon></span>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file, fileList)">
<el-icon>
<Delete />
</el-icon>
</span>
</span> </span>
</div> </div>
<div v-else> <div v-else>
@ -86,9 +80,7 @@ const actionUrl = computed(() => {
if (props.isAll) { if (props.isAll) {
return "/mosty-api/mosty-base/minio/image/upload/id"; return "/mosty-api/mosty-base/minio/image/upload/id";
} else { } else {
return props.isImg return props.isImg ? "/mosty-api/mosty-base/minio/image/upload/id": "/mosty-api/mosty-base/minio/file/upload";
? "/mosty-api/mosty-base/minio/image/upload/id"
: "/mosty-api/mosty-base/minio/file/upload";
} }
}); });
@ -190,7 +182,6 @@ watch(
} }
}); });
} }
} else { } else {
fileList.value = arr.map((el) => { fileList.value = arr.map((el) => {
if (Object.prototype.toString.call(el) === "[object Object]") { if (Object.prototype.toString.call(el) === "[object Object]") {

84
src/views/backOfficeSystem/DeploymentDisposal/mpvGroup/index.vue
View File

@ -8,7 +8,8 @@
</el-button> </el-button>
</template> </template>
<div class="flex just-center"> <div class="flex just-center">
<el-button size="small" type="primary" v-for="it in D_GS_BK_SQLX" :key="it.dm" @click="handleApplication(it)">{{it.zdmc }}</el-button> <el-button size="small" type="primary" v-for="it in D_GS_BK_SQLX" :key="it.dm"
@click="handleApplication(it)">{{ it.zdmc }}</el-button>
</div> </div>
</el-popover> </el-popover>
<el-popover placement="bottom" :visible="visiblefp" :width="400" trigger="click"> <el-popover placement="bottom" :visible="visiblefp" :width="400" trigger="click">
@ -40,25 +41,19 @@
</div> </div>
<!-- 表格 --> <!-- 表格 -->
<div class="tabBox"> <div class="tabBox">
<MyTable <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
:tableData="pageData.tableData" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
:tableColumn="pageData.tableColumn" @chooseData="chooseData" fixed="right">
:tableHeight="pageData.tableHeight" <template #qtLb="{ row }">
:key="pageData.keyCount" <DictTag :tag="false" :value="row.qtLb" :options="D_GS_ZDQT_LB" />
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
@chooseData="chooseData"
fixed="right"
>
<template #qtLb="{ row }">
<DictTag :tag="false" :value="row.qtLb" :options="D_GS_ZDQT_LB" />
</template> </template>
<template #qtFxdj="{ row }"> <template #qtFxdj="{ row }">
<DictTag :tag="false" :value="row.qtFxdj" :options="D_GS_ZDQT_FXDJ" /> <DictTag :tag="false" :value="row.qtFxdj" :options="D_GS_ZDQT_FXDJ" />
</template> </template>
<template #bqList="{ row }"> <template #bqList="{ row }">
<ul > <ul>
<li class="one_text_detail marks mb4" :key="index" v-for="(item, index) in row.bqList">{{ item.bqMc }}({{ item.bqFz || 0 }} 分) </li> <li class="one_text_detail marks mb4" :key="index" v-for="(item, index) in row.bqList">{{ item.bqMc }}({{
item.bqFz || 0 }} 分) </li>
</ul> </ul>
</template> </template>
<template #zdryList="{ row }"> <template #zdryList="{ row }">
@ -70,8 +65,8 @@
<!-- 操作 --> <!-- 操作 -->
<template #controls="{ row }"> <template #controls="{ row }">
<el-link size="small" type="success" @click="handleremove(row.id)">移除</el-link> <el-link size="small" type="success" @click="handleremove(row.id)">移除</el-link>
<el-link size="small" type="primary" v-if=" row.qtZt == '01'" @click="handleSend(row.id)">办结</el-link> <el-link size="small" type="primary" v-if="row.qtZt == '01'" @click="handleSend(row.id)">办结</el-link>
<el-link size="small" type="success" v-if=" row.qtZt == '01'" @click="addEdit('edit', row)">编辑</el-link> <el-link size="small" type="success" v-if="row.qtZt == '01'" @click="addEdit('edit', row)">编辑</el-link>
<el-link size="small" type="success" @click="addEdit('detail', row)">详情</el-link> <el-link size="small" type="success" @click="addEdit('detail', row)">详情</el-link>
<el-link size="small" type="danger" @click="deleteRow(row.id)">删除</el-link> <el-link size="small" type="danger" @click="deleteRow(row.id)">删除</el-link>
</template> </template>
@ -82,10 +77,12 @@
}"></Pages> }"></Pages>
</div> </div>
<!-- 编辑 - 新增--> <!-- 编辑 - 新增-->
<EditForm v-if="show" @updateDate="getList" ref="editFormDiloag" :dic="{D_BZ_XB,D_GS_ZDQT_LB,D_GS_ZDQT_FXDJ,D_GS_ZDR_CZZT}" /> <EditForm v-if="show" @updateDate="getList" ref="editFormDiloag"
:dic="{ D_BZ_XB, D_GS_ZDQT_LB, D_GS_ZDQT_FXDJ, D_GS_ZDR_CZZT }" />
<!-- 选择用户 --> <!-- 选择用户 -->
<ChooseUser v-model="chooseUserVisible" @choosedUsers="handleUserSelected" :roleIds="roleIds" /> <!-- 转线索 --> <ChooseUser v-model="chooseUserVisible" @choosedUsers="handleUserSelected" :roleIds="roleIds" /> <!-- 转线索 -->
<ZxsForm v-if="showzxs" ref="zxsDilof" @change="getList" :dic="{ D_BZ_SF, D_BZ_XB, D_GS_XS_LY, D_BZ_SSZT, D_GS_XS_LX, D_GS_XS_QTLX }"></ZxsForm> <ZxsForm v-if="showzxs" ref="zxsDilof" @change="getList"
:dic="{ D_BZ_SF, D_BZ_XB, D_GS_XS_LY, D_BZ_SSZT, D_GS_XS_LX, D_GS_XS_QTLX }"></ZxsForm>
</div> </div>
</template> </template>
@ -101,7 +98,7 @@ import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue"; import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const { D_GS_ZDR_CZZT,D_GS_BK_SQLX, D_GS_ZDQT_FXDJ, D_GS_ZDR_RYJB, D_GS_ZDQT_LB, D_GS_ZDR_BK_ZT, D_GS_BQ_LX, D_GS_ZDQT_ZT, D_BZ_SF, D_BZ_XB, D_GS_XS_LY, D_BZ_SSZT, D_GS_XS_LX, D_GS_XS_QTLX } = proxy.$dict("D_GS_ZDR_CZZT","D_GS_BK_SQLX", "D_GS_ZDQT_FXDJ", "D_GS_ZDR_RYJB", "D_GS_ZDQT_LB", "D_GS_ZDR_BK_ZT", "D_GS_BQ_LX", "D_GS_ZDQT_ZT", "D_BZ_SF", "D_BZ_XB", "D_GS_XS_LY", "D_BZ_SSZT", "D_GS_XS_LX", "D_GS_XS_QTLX"); //获取字典数据 const { D_GS_ZDR_CZZT, D_GS_BK_SQLX, D_GS_ZDQT_FXDJ, D_GS_ZDR_RYJB, D_GS_ZDQT_LB, D_GS_ZDR_BK_ZT, D_GS_BQ_LX, D_GS_ZDQT_ZT, D_BZ_SF, D_BZ_XB, D_GS_XS_LY, D_BZ_SSZT, D_GS_XS_LX, D_GS_XS_QTLX } = proxy.$dict("D_GS_ZDR_CZZT", "D_GS_BK_SQLX", "D_GS_ZDQT_FXDJ", "D_GS_ZDR_RYJB", "D_GS_ZDQT_LB", "D_GS_ZDR_BK_ZT", "D_GS_BQ_LX", "D_GS_ZDQT_ZT", "D_BZ_SF", "D_BZ_XB", "D_GS_XS_LY", "D_BZ_SSZT", "D_GS_XS_LX", "D_GS_XS_QTLX"); //获取字典数据
const showzxs = ref(false); const showzxs = ref(false);
const queryFrom = ref({}); const queryFrom = ref({});
const ids = ref([]); const ids = ref([]);
@ -174,20 +171,20 @@ const pageData = reactive({
}, },
controlsWidth: 280, controlsWidth: 280,
tableColumn: [ tableColumn: [
{ label: "群体名称", prop: "qtMc",width:150 }, { label: "群体名称", prop: "qtMc", width: 150 },
{ label: "群体类别", prop: "qtLb" , showSolt: true,width:150 }, { label: "群体类别", prop: "qtLb", showSolt: true, width: 150 },
{ label: "风险等级", prop: "qtFxdj" , showSolt: true,width:150 }, { label: "风险等级", prop: "qtFxdj", showSolt: true, width: 150 },
{ label: "背景资料", prop: "qtBjzl" ,width:150 }, { label: "背景资料", prop: "qtBjzl", width: 150 },
{ label: "背景信息", prop: "bgxx", showSolt: true ,width:150 }, { label: "背景信息", prop: "bgxx", showSolt: true, width: 150 },
{ label: "管辖单位", prop: "gxSsdwmc",width:150 }, { label: "管辖单位", prop: "gxSsdwmc", width: 150 },
{ label: "列控原因", prop: "zdrLkyy",width:150 }, { label: "列控原因", prop: "zdrLkyy", width: 150 },
{ label: "开始时间", prop: "zdrRkkssj",width:150 }, { label: "开始时间", prop: "zdrRkkssj", width: 150 },
{ label: "截至时间", prop: "zdrRkjssj" ,width:150 }, { label: "截至时间", prop: "zdrRkjssj", width: 150 },
{ label: "稳控人数", prop: "zdryList", showSolt: true,width:150 }, { label: "稳控人数", prop: "zdryList", showSolt: true, width: 150 },
{ label: "状态", prop: "qtZt", showSolt: true,width:150 }, { label: "状态", prop: "qtZt", showSolt: true, width: 150 },
{ label: "标签", prop: "bqList", showSolt: true ,showOverflowTooltip:true,width:400 }, { label: "标签", prop: "bqList", showSolt: true, showOverflowTooltip: true, width: 400 },
{ label: "创建单位", prop: "xtCjbmmc" ,width:150 }, { label: "创建单位", prop: "xtCjbmmc", width: 150 },
{ label: "创建时间", prop: "xtCjsj",width:150 }, { label: "创建时间", prop: "xtCjsj", width: 150 },
] ]
}); });
@ -199,7 +196,7 @@ onMounted(() => {
//送审 //送审
const handleSend = (id) => { const handleSend = (id) => {
proxy.$confirm("确定要办结？", "警告", { type: "warning" }).then(() => { proxy.$confirm("确定要办结？", "警告", { type: "warning" }).then(() => {
qcckPost({}, "/mosty-gsxt//tbGsxtZdqt/qtbj/"+id).then(() => { qcckPost({}, "/mosty-gsxt//tbGsxtZdqt/qtbj/" + id).then(() => {
proxy.$message({ type: "success", message: "办结成功" }); proxy.$message({ type: "success", message: "办结成功" });
getList(); getList();
}); });
@ -235,7 +232,7 @@ const changeSize = (val) => {
const getList = () => { const getList = () => {
pageData.tableConfiger.loading = true; pageData.tableConfiger.loading = true;
// 群体类型D_ZDRY_RYLX(01 重点 02 普通) // 群体类型D_ZDRY_RYLX(01 重点 02 普通)
let data = { qtlx:'01',...pageData.pageConfiger, ...queryFrom.value }; let data = { qtlx: '01', ...pageData.pageConfiger, ...queryFrom.value };
qcckGet(data, "/mosty-gsxt/tbGsxtZdqt/selectPage").then((res) => { qcckGet(data, "/mosty-gsxt/tbGsxtZdqt/selectPage").then((res) => {
pageData.tableData = res.records || []; pageData.tableData = res.records || [];
pageData.total = res.total; pageData.total = res.total;
@ -260,7 +257,7 @@ const chooseData = (data) => {
}; };
// 选择申请数据数据 // 选择申请数据数据
const handleApplication = () => { const handleApplication = () => {
if (ids.value.length === 0)return ElMessage.error("请先选择需要布控的重点群体"); if (ids.value.length === 0) return ElMessage.error("请先选择需要布控的重点群体");
qcckPost({ ids: ids.value }, "/mosty-gsxt/tbGsxtZdqt/addBksq").then(() => { qcckPost({ ids: ids.value }, "/mosty-gsxt/tbGsxtZdqt/addBksq").then(() => {
ElMessage.success("申请成功"); ElMessage.success("申请成功");
visible.value = false; visible.value = false;
@ -277,7 +274,7 @@ const handleUserSelected = (val) => {
const handlefp = () => { const handlefp = () => {
if (ids.value.length === 0) return ElMessage.error("请先选择需要分配的重点群体"); if (ids.value.length === 0) return ElMessage.error("请先选择需要分配的重点群体");
qcckPost({ ids: ids.value, uid: obj.value.fpid },"/mosty-gsxt/tbGsxtZdqt/addGkmj").then(() => { qcckPost({ ids: ids.value, uid: obj.value.fpid }, "/mosty-gsxt/tbGsxtZdqt/addGkmj").then(() => {
ElMessage.success("分配成功"); ElMessage.success("分配成功");
visible.value = false; visible.value = false;
visiblefp.value = false; visiblefp.value = false;
@ -308,7 +305,7 @@ const handleZxs = () => {
}; };
// 删除数据 // 删除数据
const deleteRow = (id) =>{ const deleteRow = (id) => {
proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => { proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
qcckDelete({}, "/mosty-gsxt/tbGsxtZdqt/" + id).then(() => { qcckDelete({}, "/mosty-gsxt/tbGsxtZdqt/" + id).then(() => {
proxy.$message({ type: "success", message: "删除成功" }); proxy.$message({ type: "success", message: "删除成功" });
@ -328,7 +325,7 @@ defineExpose({});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.marks{ .marks {
padding: 0 4px; padding: 0 4px;
white-space: nowrap; white-space: nowrap;
background: #73acf1; background: #73acf1;
@ -341,5 +338,4 @@ defineExpose({});
.el-loading-mask { .el-loading-mask {
background: rgba(0, 0, 0, 0.5) !important; background: rgba(0, 0, 0, 0.5) !important;
} }
</style> </style>

9
src/views/backOfficeSystem/DeploymentDisposal/mpvGroup/model/portrayal.vue
View File

@ -5,17 +5,14 @@
<h3>群体成员画像</h3> <h3>群体成员画像</h3>
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<div style="width: 50%;"><PieChart :chartData="ywlbtj" title="业务类型"/></div> <div style="width: 50%;"><PieChart :chartData="ywlbtj" title="业务类型"/></div>
<div style="width: 50%;"><BarChart :chartData="gkjbtj" title="管控级别分布"/></div> <div style="width: 50%;"><BarChart :chartData="gkjbtj" title="管控级别分布"/></div>
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<div style="width: 50%;"><PieChart :chartData="qytj" title="区域分布"/></div> <div style="width: 50%;"><PieChart :chartData="qytj" title="区域分布"/></div>
<div style="width: 50%;"><BarChart :chartData="zyfbtj" title="管控级别分布"/></div> <div style="width: 50%;"><BarChart :chartData="zyfbtj" title="管控级别分布"/></div>
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<div style="width: 50%;"><LineChart :chartData="nlfbtj" title="年龄分布"/></div> <div style="width: 50%;"><LineChart :chartData="nlfbtj" title="年龄分布"/></div>
<div style="width: 50%;"><PieChart :chartData="whcdtj" title="文化程度分布"/></div></div> <div style="width: 50%;"><PieChart :chartData="whcdtj" title="文化程度分布"/></div></div>
</div> </div>

382
src/views/backOfficeSystem/JudgmentHome/ResearchHome/index.vue
View File

@ -3,9 +3,9 @@
<!-- 左边 --> <!-- 左边 -->
<div class="leftbox"> <div class="leftbox">
<div class="title"> <div class="title">
<span v-for="idx in 3" :key="idx" :class="'sircleL'+idx" class="sircle mr5"></span> <span v-for="idx in 3" :key="idx" :class="'sircleL' + idx" class="sircle mr5"></span>
<span class="ml10 mr10">专题统计</span> <span class="ml10 mr10">专题统计</span>
<span v-for="idx in 3" :key="idx" :class="'sircleR'+idx" class="sircle ml5"></span> <span v-for="idx in 3" :key="idx" :class="'sircleR' + idx" class="sircle ml5"></span>
</div> </div>
<div class="commCnt"> <div class="commCnt">
<div class="hh50"> <div class="hh50">
@ -26,39 +26,36 @@
<!-- 右边 --> <!-- 右边 -->
<div class="rightbox"> <div class="rightbox">
<div class="title"> <div class="title">
<span v-for="idx in 3" :key="idx" :class="'sircleL'+idx" class="sircle mr5"></span> <span v-for="idx in 3" :key="idx" :class="'sircleL' + idx" class="sircle mr5"></span>
<span class="ml10 mr10">专题研判</span> <span class="ml10 mr10">专题研判</span>
<span v-for="idx in 3" :key="idx" :class="'sircleR'+idx" class="sircle ml5"></span> <span v-for="idx in 3" :key="idx" :class="'sircleR' + idx" class="sircle ml5"></span>
<el-button class="btn" type="primary" @click="handleYP">研判报告</el-button> <el-button class="btn" type="primary" @click="handleYP">研判报告</el-button>
</div> </div>
<div class="commCnt" > <div class="commCnt">
<div ref="searchBox"> <div ref="searchBox">
<el-form :model="searchList" ref="searchFormRef" :inline="true"> <el-form :model="searchList" ref="searchFormRef" :inline="true">
<el-form-item label="类型"> <el-form-item label="类型">
<el-cascader @change="changeCascader" :disabled="readonly_lx" v-model="searchList.lx" clearable :options="cascaderList" :props="{ checkStrictly: true }" placeholder="请选择类型"/> <el-cascader ref="cascaRef" @change="changeCascader" :disabled="readonly_lx" v-model="searchList.lx" clearable
:options="cascaderList" :props="{ checkStrictly: true,multiple: true }" placeholder="请选择类型" />
</el-form-item> </el-form-item>
<el-form-item label="人员"> <el-form-item label="人员">
<el-input @change="changeRy" v-model="searchList.ry" :disabled="readonly_ry" clearable placeholder="请输入姓名或身份证"></el-input> <el-input @change="changeRy" v-model="searchList.ry" :disabled="readonly_ry" clearable
placeholder="请输入姓名或身份证"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="地点"> <el-form-item label="地点">
<div class="flex align-center"> <div class="flex align-center">
<el-select v-model="searchList.dd" @change="changeBm" style="width: 180px;" :disabled="readonly_dd" placeholder="行政区划"> <el-select v-model="searchList.dd" @change="changeBm" style="width: 180px;" :disabled="readonly_dd"
placeholder="行政区划">
<el-option label="区域" value="1"></el-option> <el-option label="区域" value="1"></el-option>
<el-option label="部门" value="2"></el-option> <el-option label="部门" value="2"></el-option>
</el-select> </el-select>
<el-input @change="changeRy" :disabled="readonly_dd" v-model="searchList.xxdz" clearable placeholder="请输入详细地址"></el-input> <el-input @change="changeRy" :disabled="readonly_dd" v-model="searchList.xxdz" clearable
placeholder="请输入详细地址"></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="时间"> <el-form-item label="时间">
<el-date-picker <el-date-picker v-model="searchList.datetimes" type="datetimerange" unlink-panels :range-separator="'至'"
v-model="searchList.datetimes" start-placeholder="开始日期时间" end-placeholder="结束日期时间" value-format="YYYY-MM-DD HH:mm:ss" />
type="datetimerange"
unlink-panels
:range-separator="'至'"
start-placeholder="开始日期时间"
end-placeholder="结束日期时间"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSearch">查询</el-button> <el-button type="primary" @click="onSearch">查询</el-button>
@ -66,40 +63,29 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<ul class="listBox" :style="{ height:pageData.boxHeight +'px'}"> <ul class="listBox" :style="{ height: pageData.boxHeight + 'px' }">
<li class="list-item" ref="listBoxRef" v-for="(it,idx) in list" :key="idx"> <li class="list-item" ref="listBoxRef" v-for="(it, idx) in list" :key="idx">
<div class="comm-title title-s">{{ it.title }}</div> <div class="comm-title title-s">{{ it.title }}</div>
<div class="list-table" > <div class="list-table">
<MyTable <MyTable :tableData="it.tableList" :tableColumn="it.tableColumn" :key="idx + '' + it.keyCount" :fixed="false"
:tableData="it.tableList" :tableHeight="pageData.tableHeight" :tabelModel="it.title" :tableConfiger="pageData.tableConfiger"
:tableColumn="it.tableColumn" :controlsWidth="pageData.controlsWidth">
:key="idx+''+it.keyCount" <template #jqlbdm="{ row }">
:fixed="false" <DictTag :tag="false" :value="row.jqlbdm" :options="JQLB" />
:tableHeight="pageData.tableHeight" </template>
:tabelModel="it.title"
:tableConfiger="pageData.tableConfiger"
:controlsWidth="pageData.controlsWidth"
>
<template #jqlbdm="{ row }">
<DictTag :tag="false" :value="row.jqlbdm" :options="JQLB" />
</template>
<template #controls="{ row }"> <template #controls="{ row }">
<el-link type="primary" size="small" @click="handleHs(row)">网上会商</el-link> <el-link type="primary" size="small" @click="handleHs(row)">网上会商</el-link>
</template> </template>
</MyTable> </MyTable>
<Pages <Pages @changeNo="changeNo($event, it.title)" @changeSize="changeSize($event, it.title)"
@changeNo="changeNo($event,it.title)" :tableHeight="pageData.tableHeight" :pageConfiger="{ ...it.pageConfiger }"></Pages>
@changeSize="changeSize($event,it.title)"
:tableHeight="pageData.tableHeight"
:pageConfiger="{ ...it.pageConfiger }"
></Pages>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<YpModel v-model="showModel" :textContent="textContent" ></YpModel> <YpModel v-model="showModel" :textContent="textContent"></YpModel>
<!-- 弹窗 --> <!-- 弹窗 -->
<DetailDialog ref="detaileRef"></DetailDialog> <DetailDialog ref="detaileRef"></DetailDialog>
</template> </template>
@ -116,13 +102,13 @@ import MyTable from "@/components/aboutTable/DarkTable.vue";
import Pages from "@/components/aboutTable/Pages.vue"; import Pages from "@/components/aboutTable/Pages.vue";
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
const router = useRouter(); const router = useRouter();
import { nextTick, onMounted, reactive,getCurrentInstance ,ref, watch } from 'vue'; import { nextTick, onMounted, reactive, getCurrentInstance, ref, watch } from 'vue';
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const { JQLB} = proxy.$dict("JQLB"); //获取字典数据 const { JQLB } = proxy.$dict("JQLB"); //获取字典数据
const readonly_lx = ref(false) const readonly_lx = ref(false)
const readonly_ry = ref(false) const readonly_ry = ref(false)
const readonly_dd = ref(false) const readonly_dd = ref(false)
const cascaRef=ref()
const showModel = ref(false); const showModel = ref(false);
const detaileRef = ref(); const detaileRef = ref();
const searchBox = ref(); const searchBox = ref();
@ -130,99 +116,101 @@ const listBoxRef = ref();
const textContent = ref(''); const textContent = ref('');
// 图数据 // 图数据
const obj = reactive({ const obj = reactive({
data_lxtj:{ data_lxtj: {
xData:['网络舆情','警情','案件','风险隐患'], xData: ['网络舆情', '警情', '案件', '风险隐患'],
color:[['#0DBAC5','#28EEBF'],['#F06C0D','#EEB416']], color: [['#0DBAC5', '#28EEBF'], ['#F06C0D', '#EEB416']],
labelColor:'#000', labelColor: '#000',
list:[ list: [
{label:'总数',val:[0,0,0,0]}, { label: '总数', val: [0, 0, 0, 0] },
] ]
}, },
data_hstj:{ data_hstj: {
xData:['网络舆情','警情','案件','风险隐患'], xData: ['网络舆情', '警情', '案件', '风险隐患'],
color:['#0386FB','#00FFFF'], color: ['#0386FB', '#00FFFF'],
labelColor:'#000', labelColor: '#000',
list:[ list: [
{label:'总数',val:[0,0,10,0]}, { label: '总数', val: [0, 0, 10, 0] },
] ]
} }
}) })
const searchList = ref({}) const searchList = ref({})
let cascaderList = ref([ let cascaderList = ref([
{ value: '01', label: '网络舆情',leaf: true }, { value: '01', label: '网络舆情', leaf: true },
{ value: '02', label: '警情',children:[ {
{ value: '021', label: '治安警情',leaf: true }, value: '02', label: '警情', children: [
{ value: '022', label: '刑事警情',leaf: true }, { value: '021', label: '治安警情', leaf: true },
{ value: '023', label: '交通警情',leaf: true }, { value: '022', label: '刑事警情', leaf: true },
] }, { value: '023', label: '交通警情', leaf: true },
{ value: '03', label: '案件',leaf: true }, ]
{ value: '04', label: '风险隐患',leaf: true }, },
{ value: '03', label: '案件', leaf: true },
{ value: '04', label: '风险隐患', leaf: true },
]) ])
// 每个列表对应的值 // 每个列表对应的值
const list = reactive([ const list = reactive([
{ {
title:'网络舆情', //标题 title: '网络舆情', //标题
tableList:[], tableList: [],
keyCount:0, keyCount: 0,
pageConfiger:{ pageConfiger: {
page:1, page: 1,
total:0, total: 0,
pageSize:6, pageSize: 6,
}, },
tableColumn:[ tableColumn: [
{ label: "舆情标题", prop: "yqbt",showOverflowTooltip: true}, { label: "舆情标题", prop: "yqbt", showOverflowTooltip: true },
{ label: "舆情内容", prop: "yqnr",showOverflowTooltip: true}, { label: "舆情内容", prop: "yqnr", showOverflowTooltip: true },
{ label: "舆情来源", prop: "yqly",showOverflowTooltip: true}, { label: "舆情来源", prop: "yqly", showOverflowTooltip: true },
{ label: "舆情时间", prop: "yqsj",showOverflowTooltip: true}, { label: "舆情时间", prop: "yqsj", showOverflowTooltip: true },
], ],
}, },
{ {
title:'警情', //标题 title: '警情', //标题
tableList:[], tableList: [],
keyCount:1, keyCount: 1,
pageConfiger:{ pageConfiger: {
page:1, page: 1,
total:0, total: 0,
pageSize:6, pageSize: 6,
}, },
tableColumn:[ tableColumn: [
{ label: "接警单编号", prop: "jjdbh",showOverflowTooltip: true}, { label: "接警单编号", prop: "jjdbh", showOverflowTooltip: true },
{ label: "报警电话", prop: "bjdh",showOverflowTooltip: true}, { label: "报警电话", prop: "bjdh", showOverflowTooltip: true },
{ label: "报警时间", prop: "bjsj",showOverflowTooltip: true}, { label: "报警时间", prop: "bjsj", showOverflowTooltip: true },
{ label: "报警内容", prop: "bjnr",showOverflowTooltip: true}, { label: "报警内容", prop: "bjnr", showOverflowTooltip: true },
{ label: "警情类型", prop: "jqlbdm",showSolt:true,showOverflowTooltip: true}, { label: "警情类型", prop: "jqlbdm", showSolt: true, showOverflowTooltip: true },
], ],
}, },
{ {
title:'案件', //标题 title: '案件', //标题
tableList:[], tableList: [],
keyCount:2, keyCount: 2,
pageConfiger:{ pageConfiger: {
page:1, page: 1,
total:0, total: 0,
pageSize:6, pageSize: 6,
}, },
tableColumn:[ tableColumn: [
{ label: "案件编号", prop: "ajbh",showOverflowTooltip: true}, { label: "案件编号", prop: "ajbh", showOverflowTooltip: true },
{ label: "案件内容", prop: "ajnr",showOverflowTooltip: true}, { label: "案件内容", prop: "ajnr", showOverflowTooltip: true },
{ label: "案件类型", prop: "ajlx",showOverflowTooltip: true}, { label: "案件类型", prop: "ajlx", showOverflowTooltip: true },
{ label: "案件时间", prop: "ajsj",showOverflowTooltip: true}, { label: "案件时间", prop: "ajsj", showOverflowTooltip: true },
], ],
}, },
{ {
title:'风险隐患', //标题 title: '风险隐患', //标题
tableList:[], tableList: [],
keyCount:3, keyCount: 3,
pageConfiger:{ pageConfiger: {
page:1, page: 1,
total:0, total: 0,
pageSize:6, pageSize: 6,
}, },
tableColumn:[ tableColumn: [
{ label: "隐患标题", prop: "yhbt",showOverflowTooltip: true}, { label: "隐患标题", prop: "yhbt", showOverflowTooltip: true },
{ label: "隐患内容", prop: "yhnr",showOverflowTooltip: true}, { label: "隐患内容", prop: "yhnr", showOverflowTooltip: true },
{ label: "隐患类型", prop: "yhlx",showOverflowTooltip: true}, { label: "隐患类型", prop: "yhlx", showOverflowTooltip: true },
{ label: "上报时间", prop: "sbsj",showOverflowTooltip: true}, { label: "上报时间", prop: "sbsj", showOverflowTooltip: true },
], ],
}, },
]) ])
@ -235,12 +223,21 @@ const pageData = reactive({
rowHieght: 61, rowHieght: 61,
showSelectType: "null", showSelectType: "null",
loading: false, loading: false,
showIndex:false, showIndex: false,
rowHeight: 30, rowHeight: 30,
}, },
controlsWidth: 120, //操作栏宽度 controlsWidth: 120, //操作栏宽度
}); });
watch(() => JQLB.value, (val) => {
if (val) {
cascaderList.value[1].children = val.map((el) => {
return { value: el.dm, label: el.zdmc, leaf: true }
})
}
},
{
deep: true, immediate: true
})
onMounted(() => { onMounted(() => {
// getCount(); //获取统计数据 // getCount(); //获取统计数据
tabHeightFn() tabHeightFn()
@ -263,8 +260,8 @@ const getCount = () => {
}; };
// 分页 // 分页
const changeNo = (e,type) =>{ const changeNo = (e, type) => {
switch(type){ switch (type) {
case '网络舆情': case '网络舆情':
list[0].pageConfiger.page = e; list[0].pageConfiger.page = e;
break; break;
@ -281,8 +278,8 @@ const changeNo = (e,type) =>{
} }
getJqList() getJqList()
} }
const changeSize = (e,type) =>{ const changeSize = (e, type) => {
switch(type){ switch (type) {
case '网络舆情': case '网络舆情':
list[0].pageConfiger.pageSize = e; list[0].pageConfiger.pageSize = e;
break; break;
@ -301,47 +298,55 @@ const changeSize = (e,type) =>{
} }
// 警情列表 // 警情列表
const getJqList = () =>{ const getJqList = () => {
let params = { let params = {
pageCurrent: list[1].pageConfiger.page, pageCurrent: list[1].pageConfiger.page,
pageSize: list[1].pageConfiger.pageSize, pageSize: list[1].pageConfiger.pageSize,
} }
lzJcjPjdbSelectPage(params).then(res=>{ lzJcjPjdbSelectPage(params).then(res => {
list[1].tableList = res.records || []; list[1].tableList = res.records || [];
list[1].pageConfiger.total = res.total; list[1].pageConfiger.total = res.total;
//模拟的统计警情接口 //模拟的统计警情接口
obj.data_lxtj.list = [{ label: '总数', val: [0,res.total,0,0] }]; obj.data_lxtj.list = [{ label: '总数', val: [0, res.total, 0, 0] }];
obj.data_hstj.list = [{ label: '总数', val: [0,res.total,0,0] }]; obj.data_hstj.list = [{ label: '总数', val: [0, res.total, 0, 0] }];
}) })
} }
const handleHs = (val) =>{ const handleHs = (val) => {
router.push({path:'/MeetingRoom',query:{tsypid:val.id}}) router.push({ path: '/MeetingRoom', query: { tsypid: val.id } })
} }
const handleYP = () =>{ const handleYP = () => {
let arr=cascaRef.value.getCheckedNodes()
searchForm.value.jqlbdms=arr.map((el)=>{
return el.value
})
let params = { let params = {
hskssj:searchForm.value.kssj, hskssj: searchForm.value.kssj,
hsjssj:searchForm.value.jssj, hsjssj: searchForm.value.jssj,
jqlbdms:searchForm.value.jqlbdms
} }
qcckPost(params,'/mosty-gsxt/wshs/getDcypbg').then(res=>{ qcckPost(params, '/mosty-gsxt/lzJcjPjdb/getJqDcypbg').then(res => {
let data = res || {}; let data = res || {};
let html = `<p class="html_bt">${data.bt}</p>` let html = `<p class="html_bt">${data.bt}</p>`
html+=`<p>${data.head}</p>` html += `<p>${data.head}</p>`
html+=`<p>${data.nr}</p>` html += `<p>${data.nr}</p>`
html+=`<p>${data.bc}</p>` html += `<p>${data.bc}</p>`
html+=`<p>${data.end}</p>` html += `<p>${data.end}</p>`
textContent.value = html; textContent.value = html;
showModel.value = true; showModel.value = true;
}) })
} }
// 选择类型 // 选择类型
const changeCascader = (val) =>{ const changeCascader = (val) => {
console.log(val,'val');
console.log(cascaRef.value.getCheckedNodes(),'++++++++');
readonly_lx.value = false; readonly_lx.value = false;
readonly_ry.value = val ? true : false readonly_ry.value = val ? true : false
readonly_dd.value = val ? true : false readonly_dd.value = val ? true : false
@ -350,7 +355,7 @@ const changeCascader = (val) =>{
} }
// 选择人员 // 选择人员
const changeRy = (val) =>{ const changeRy = (val) => {
readonly_ry.value = false; readonly_ry.value = false;
readonly_lx.value = val ? true : false readonly_lx.value = val ? true : false
readonly_dd.value = val ? true : false readonly_dd.value = val ? true : false
@ -358,7 +363,7 @@ const changeRy = (val) =>{
searchList.value.ssbm = '' searchList.value.ssbm = ''
} }
// 选择地点 // 选择地点
const changeBm = (val) =>{ const changeBm = (val) => {
readonly_dd.value = false; readonly_dd.value = false;
readonly_lx.value = val ? true : false readonly_lx.value = val ? true : false
readonly_ry.value = val ? true : false readonly_ry.value = val ? true : false
@ -366,7 +371,7 @@ const changeBm = (val) =>{
searchList.value.ry = '' searchList.value.ry = ''
} }
// 重置 // 重置
const resetForm = () =>{ const resetForm = () => {
searchForm.value = {} searchForm.value = {}
readonly_lx.value = false readonly_lx.value = false
readonly_ry.value = false readonly_ry.value = false
@ -374,10 +379,10 @@ const resetForm = () =>{
} }
// 搜索 // 搜索
const onSearch = () =>{ const onSearch = () => {
if(searchList.value.lx || searchList.value.ry || searchList.value.dd){ if (searchList.value.lx || searchList.value.ry || searchList.value.dd) {
detaileRef.value.init(searchList.value) detaileRef.value.init(searchList.value)
}else{ } else {
ElMessage.warning('请选择查询条件') ElMessage.warning('请选择查询条件')
} }
} }
@ -397,25 +402,27 @@ const tabHeightFn = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.yp—home{ .yp—home {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: 15px; padding-top: 15px;
box-sizing: border-box; box-sizing: border-box;
color: #000; color: #000;
.leftbox{
width:500px; .leftbox {
width: 500px;
height: 100%; height: 100%;
margin-right: 10px; margin-right: 10px;
background: #fff; background: #fff;
} }
.rightbox{
.rightbox {
flex: 1 0 0; flex: 1 0 0;
background: #fff; background: #fff;
} }
} }
@mixin common($width: 16px,$opacity:1){ @mixin common($width: 16px, $opacity: 1) {
height: $width; height: $width;
width: $width; width: $width;
border-radius: 50%; border-radius: 50%;
@ -424,35 +431,43 @@ const tabHeightFn = () => {
} }
// 共同 // 共同
.title{ .title {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 60px; height: 60px;
font-size: 24px; font-size: 24px;
position: relative; position: relative;
.sircle{
.sircle {
display: inline-block; display: inline-block;
} }
.sircleL1{
@include common(8px,0.5); .sircleL1 {
@include common(8px, 0.5);
} }
.sircleL2{
@include common(12px,0.75); .sircleL2 {
@include common(12px, 0.75);
} }
.sircleL3{
.sircleL3 {
@include common(16px); @include common(16px);
} }
.sircleR1{
.sircleR1 {
@include common(16px); @include common(16px);
} }
.sircleR2{
@include common(12px,0.75); .sircleR2 {
@include common(12px, 0.75);
} }
.sircleR3{
@include common(8px,0.5); .sircleR3 {
@include common(8px, 0.5);
} }
.btn{
.btn {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 10px; right: 10px;
@ -460,35 +475,37 @@ const tabHeightFn = () => {
} }
} }
.commCnt{ .commCnt {
height: calc(100% - 60px); height: calc(100% - 60px);
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
padding: 10px 20px; padding: 10px 20px;
box-sizing: border-box; box-sizing: border-box;
.comm-title{
.comm-title {
position: relative; position: relative;
font-size: 20px; font-size: 20px;
&::before{
&::before {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 78px; width: 78px;
height: 4px; height: 4px;
background: linear-gradient( 90deg, #3596F9 0%, rgba(53,150,249,0) 100%); background: linear-gradient(90deg, #3596F9 0%, rgba(53, 150, 249, 0) 100%);
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
} }
} }
.echartsBox{ .echartsBox {
height: calc(100% - 30px); height: calc(100% - 30px);
margin-top: 4px; margin-top: 4px;
} }
} }
.listBox{ .listBox {
height: calc(100% - 110px); height: calc(100% - 110px);
margin-top: 4px; margin-top: 4px;
border-radius: 10px; border-radius: 10px;
@ -496,66 +513,71 @@ const tabHeightFn = () => {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow: hidden; overflow: hidden;
.list-item{
.list-item {
width: 49.5%; width: 49.5%;
height: calc(100% / 2 - 5px); height: calc(100% / 2 - 5px);
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.02); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.02);
border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;
border: 1px solid #E8EDF6; border: 1px solid #E8EDF6;
padding: 4px 4px; padding: 4px 4px;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 5px; margin-bottom: 5px;
.title-s{
.title-s {
font-size: 16px; font-size: 16px;
} }
.list-table{
.list-table {
margin-top: 5px; margin-top: 5px;
overflow: hidden; overflow: hidden;
} }
} }
.list-item:nth-child(2n+1){
.list-item:nth-child(2n+1) {
margin-right: 1%; margin-right: 1%;
} }
} }
::v-deep .searchBox{
margin-bottom:0 !important; ::v-deep .searchBox {
margin-bottom: 0 !important;
padding: 2px !important; padding: 2px !important;
} }
::v-deep .el-table .table_blue_row { ::v-deep .el-table .table_blue_row {
background: #fff !important; background: #fff !important;
} }
::v-deep .el-table th.el-table__cell{
::v-deep .el-table th.el-table__cell {
font-size: 13px; font-size: 13px;
background: #EFF5F7; background: #EFF5F7;
} }
::v-deep .el-table__empty-block{ ::v-deep .el-table__empty-block {
width: 100%!important; width: 100% !important;
} }
::v-deep .el-scrollbar__view{ ::v-deep .el-scrollbar__view {
border-right: none; border-right: none;
} }
::v-deep .el-table .el-table__cell{ ::v-deep .el-table .el-table__cell {
padding: 0; padding: 0;
} }
::v-deep .el-table th.el-table__cell>.cell{ ::v-deep .el-table th.el-table__cell>.cell {
padding: 8px 0; padding: 8px 0;
} }
::v-deep .el-link { ::v-deep .el-link {
margin: 3px; margin: 3px;
} }
.html_bt >>>p{
.html_bt>>>p {
color: red; color: red;
} }
::v-deep .el-date-editor .el-range-separator { ::v-deep .el-date-editor .el-range-separator {
color: #333; color: #333;
} }
</style> </style>

25
src/views/backOfficeSystem/fourColorManage/warningControl/behaviorWarning/components/detail.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<el-dialog title="行为详情次数详情（1）" v-model="dialogVisible" width="60%"> <el-dialog :title="`行为详情次数详情（${pageData.tableData.length}）`" v-model="dialogVisible" width="60%">
<MyTable <MyTable
:tableData="pageData.tableData" :tableData="pageData.tableData"
:tableColumn="pageData.tableColumn" :tableColumn="pageData.tableColumn"
@ -12,6 +12,7 @@
</template> </template>
<script setup> <script setup>
import { qcckGet } from "@/api/qcckApi.js";
import MyTable from "@/components/aboutTable/MyTable.vue"; import MyTable from "@/components/aboutTable/MyTable.vue";
import { ref , reactive , defineExpose} from 'vue' import { ref , reactive , defineExpose} from 'vue'
const dialogVisible = ref(false) const dialogVisible = ref(false)
@ -30,16 +31,24 @@ const pageData = reactive({
pageCurrent: 1 pageCurrent: 1
}, //分页 }, //分页
tableColumn: [ tableColumn: [
{ label: "警情编号", prop: "jqbh"}, { label: "警情编号", prop: "jjdbh"},
{ label: "报警人", prop: "bjr" }, { label: "报警人", prop: "bjrmc" },
{ label: "报警人电话", prop: "bjrdh" }, { label: "报警人电话", prop: "bjdh" },
{ label: "报警人身份证", prop: "bjrsfzh"}, { label: "报警人身份证", prop: "bjrzjhm"},
{ label: "预警内容", prop: "yjnr", showOverflowTooltip: true }, { label: "预警内容", prop: "bjnr", showOverflowTooltip: true },
{ label: "报警时间", prop: "jsj", showOverflowTooltip: true }, { label: "报警时间", prop: "yjsj", showOverflowTooltip: true },
] ]
}); });
const init = (row) => { const init = (row) => {
dialogVisible.value = true dialogVisible.value = true;
pageData.tableConfiger.loading = true;
pageData.tableData = []
qcckGet({yjid:row.id},'/mosty-gsxt/yjzxXwyjxq/selectList').then((res)=>{
pageData.tableData = res || [];
pageData.tableConfiger.loading = false;
}).catch(()=>{
pageData.tableConfiger.loading = false;
})
} }
defineExpose({ defineExpose({

40
src/views/backOfficeSystem/fourColorManage/warningControl/behaviorWarning/index.vue
View File

@ -2,7 +2,7 @@
<div> <div>
<div class="titleBox"> <div class="titleBox">
<PageTitle title="行为预警"> <PageTitle title="行为预警">
<el-button type="primary"> <el-button type="primary" @click="exportExcel">
<span style="vertical-align: middle">导出</span> <span style="vertical-align: middle">导出</span>
</el-button> </el-button>
</PageTitle> </PageTitle>
@ -41,6 +41,7 @@
</template> </template>
<script setup> <script setup>
import * as XLSX from "xlsx";
import Detail from './components/detail.vue' import Detail from './components/detail.vue'
import PageTitle from "@/components/aboutTable/PageTitle.vue"; import PageTitle from "@/components/aboutTable/PageTitle.vue";
import Search from "@/components/aboutTable/Search.vue"; import Search from "@/components/aboutTable/Search.vue";
@ -58,13 +59,11 @@ const searchConfiger = ref(
const detailRef = ref() const detailRef = ref()
const queryFrom = ref({}); const queryFrom = ref({});
const pageData = reactive({ const pageData = reactive({
tableData: [ tableData: [], //表格数据
{ xwcs:12 ,xm:'张三' ,sfzh:'510156565656525565',dh:'15665255545',xwfz:'20',xwms:'xxxxxxxxx',xwdl:'xxxxxxx',xwzl:'xxxxxxx'}
], //表格数据
keyCount: 0, keyCount: 0,
tableConfiger: { tableConfiger: {
rowHieght: 61, rowHieght: 61,
showSelectType: "checkBox", showSelectType: "null",
loading: false, loading: false,
haveControls: false, haveControls: false,
}, },
@ -77,8 +76,8 @@ const pageData = reactive({
{ label: "姓名", prop: "xm"}, { label: "姓名", prop: "xm"},
{ label: "身份证号", prop: "sfzh" }, { label: "身份证号", prop: "sfzh" },
{ label: "电话", prop: "dh" }, { label: "电话", prop: "dh" },
{ label: "行为大类", prop: "xwdl"}, { label: "行为大类", prop: "xldlmc"},
{ label: "行为子类", prop: "xwzl", showOverflowTooltip: true }, { label: "行为子类", prop: "xwzlmc", showOverflowTooltip: true },
{ label: "行为描述", prop: "xwms", showOverflowTooltip: true }, { label: "行为描述", prop: "xwms", showOverflowTooltip: true },
{ label: "行为次数", prop: "xwcs",showSolt: true }, { label: "行为次数", prop: "xwcs",showSolt: true },
{ label: "行为分值", prop: "xwfz",}, { label: "行为分值", prop: "xwfz",},
@ -103,19 +102,32 @@ const changeSize = (val) =>{
getList() getList()
} }
const getList = () =>{ const getList = () =>{
// pageData.tableConfiger.loading = true; pageData.tableConfiger.loading = true;
// qcckGet(queryFrom.value,'/mosty-gsxt/behaviorWarning/selectPage').then((res)=>{ qcckGet(queryFrom.value,'/mosty-gsxt/yjzxXwyj/getPageList').then((res)=>{
// pageData.total = res.total || 0; pageData.total = res.total || 0;
// pageData.tableConfiger.loading = false; pageData.tableConfiger.loading = false;
// }).catch(()=>{ pageData.tableData = res.records || [];
// pageData.tableConfiger.loading = false; }).catch(()=>{
// }) pageData.tableConfiger.loading = false;
})
} }
const handleClick = (row) => { const handleClick = (row) => {
detailRef.value.init(row) detailRef.value.init(row)
} }
const exportExcel = () => {
if (pageData.tableData.length === 0) return ElMessage({ message: "暂无数据", type: "warning" });
const headers = pageData.tableColumn.map(item => item.label);
const data = pageData.tableData.map(item => {
return [item.xm, item.sfzh, item.dh, item.xldlmc, item.xwzlmc, item.xwms, item.xwcs, item.xwfz];
});
const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data]);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "sheet1");
XLSX.writeFile(workbook, "行为预警.xlsx");
}
// 表格高度计算 // 表格高度计算
const tabHeightFn = () => { const tabHeightFn = () => {
pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250; pageData.tableHeight = window.innerHeight - searchBox.value.offsetHeight - 250;

5
vue.config.js
View File

@ -3,12 +3,11 @@ const path = require("path");
function resolve(dir) { function resolve(dir) {
return path.join(__dirname, dir); return path.join(__dirname, dir);
} }
const serverHost = "http://192.168.1.32:8006"//波哥
// const serverHost = "http://47.108.232.77:9537"//波哥 // const serverHost = "http://47.108.232.77:9537"//波哥
// const serverHost = "http://192.168.3.248:8066"//波哥
// const serverHost = "http://192.168.0.231:8006"//线上 // const serverHost = "http://192.168.0.231:8006"//线上
// const serverHost = "http://192.168.1.117:8006"//周 // const serverHost = "http://192.168.1.117:8006"//周
// const serverHost = "http://192.168.1.98:8006"//毛毛 const serverHost = "http://192.168.1.98:8006"//毛毛
module.exports = { module.exports = {
// configureWebpack: { // configureWebpack: {