lonewolfyx/visiting-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
Rhett霍 2024-12-30 09:21:10 +08:00
parent 94053a0990
commit c608d2d56a
2 changed files with 242 additions and 461 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
src/views/PoliceWork/RegistVisit/index copy.vue
View File

@ -1,249 +0,0 @@
<template>
<div class="app-container">
<!-- 表单区域 -->
<el-form ref="queryParamsRef" :inline="true" :model="queryParams">
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="相关领域">
<el-select v-model="queryParams.casetype" style="width: 15vw;" @change="getLists" clearable>
<el-option
v-for="item in nj_anjian_type"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="来访类别">
<el-select v-model="queryParams.casetype" style="width: 15vw;" @change="getLists" clearable>
<el-option
v-for="item in nj_anjian_type"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="级别">
<el-select v-model="queryParams.casetype" style="width: 15vw;" @change="getLists" clearable>
<el-option
v-for="item in nj_anjian_type"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" @click="getLists">
<el-icon class="me-1">
<Search />
</el-icon>
查询
</el-button>
</el-form-item>
<el-form-item>
<el-button @click="handleRest(queryParamsRef)">
<el-icon class="me-1">
<Refresh />
</el-icon>
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-divider class="mt-0" />
<el-row class="mb-3" :gutter="10">
<el-col :span="1.5">
<el-space>
<el-button plain type="primary" @click="AddEditRegistVisitRef.showAddCase()">
<el-icon class="me-2">
<Plus />
</el-icon>
新增
</el-button>
</el-space>
</el-col>
<el-col :span="1.5">
<el-button type="info" plain icon="Upload" @click="uploadRef.showupload()">导入</el-button>
<Upload ref="uploadRef" @getList="getLists" />
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
</el-col>
</el-row>
<!-- 表格区域 -->
<el-table
ref="CaseTableRef"
v-loading="loading"
:data="CaseTables"
@row-dblclick="handleRowDblClick"
show-overflow-tooltip
>
<el-table-column label="日期" prop="name" />
<el-table-column label="上访人" prop="name" />
<el-table-column label="电话" prop="casetype" />
<el-table-column label="身份证号码" prop="unitname" />
<el-table-column label="反映事项" prop="state">
<template #default="scope">
<dict-tag :options="nj_anjian_status" :value="scope.row.state" />
</template>
</el-table-column>
<el-table-column label="是否重点对象" prop="state">
<template #default="scope">
<dict-tag :options="nj_anjian_status" :value="scope.row.state" />
</template>
</el-table-column>
<el-table-column label="级别" prop="state" width="80">
<template #default="scope">
<dict-tag :options="nj_anjian_status" :value="scope.row.state" />
</template>
</el-table-column>
<el-table-column label="处理情况" prop="depname"/>
<el-table-column fixed="right" align="center" label="操作" width="240">
<template #default="scope">
<!-- <el-button link size="small" type="warning">
<el-icon class="me-1">
<UserFilled />
</el-icon>
上访人管理
</el-button> -->
<el-button link size="small" type="primary" @click="AddEditRegistVisitRef.showEditCase(scope.row)">
<el-icon class="me-1">
<Edit />
</el-icon>
编辑
</el-button>
<el-button link size="small" type="warning" @click="AddEditRegistVisitRef.showEditCase(scope.row)">
<el-icon class="me-1">
<Edit />
</el-icon>
详情
</el-button>
<el-button link size="small" type="danger" @click="deleteCase(scope.row)">
<el-icon class="me-1">
<Delete />
</el-icon>
取消
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="paging.pageNum"
v-model:limit="paging.pageSize"
@pagination="getLists"
/>
<AddEditRegistVisit ref="AddEditRegistVisitRef" @getList="getLists" />
</div>
</template>
<script setup>
import { ElMessageBox } from "element-plus";
import AddEditRegistVisit from "./components/AddEditRegistVisit.vue";
import Upload from "./components/upload.vue"; // 引入上传组件
import { getCurrentInstance } from "vue";
import PageEnum from "@/enum/PageEnum.js";
const { proxy } = getCurrentInstance();
const { nj_anjian_type, nj_anjian_status } = proxy.useDict("nj_anjian_type", "nj_anjian_status");
const isShow = ref(true);
const queryParamsRef = ref();
const deleteStatus = ref(true);
const AddEditRegistVisitRef = ref();
const uploadRef = ref();
const upload = ref({});
const loading = ref(false);
const paging = ref({
pageNum: 1,
pageSize: PageEnum.SIZE,
});
const queryParams = ref({
name: "",
casecode: "",
brief: "",
state: "1,2",
});
const total = ref(0);
const CaseTables = ref([
{
name: "1",
},
{
name: "2",
},
]);
onMounted(() => {
getLists();
});
// 获取案件列表
const getLists = async () => {
// loading.value = true
// await getCaseInfoList(queryParams.value, paging.value).then(res => {
// CaseTables.value = res.rows
// total.value = res.total
// loading.value = false
// })
};
// 双击行时的事件处理函数
const handleRowDblClick = (row) => {
console.log("双击的行数据：", row);
AddEditRegistVisitRef.value.showAddCase(row)
// 在这里可以进行进一步的处理，比如打开编辑框或查看详情等
};
const deleteCase = async (row) => {
ElMessageBox.confirm("确定删除？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
// deleteCaseInfo(row.caseCaseinfoId).then((res) => {
// getLists();
// });
})
.catch(() => {});
};
/** 导出按钮操作 */
function handleExport() {
// proxy.download("system/user/export", {
// ...queryParams.value,
// }, `user_${new Date().getTime()}.xlsx`);
}
// 重置搜索调解
const handleRest = (formEl) => {
queryParams.value = {
name: "",
casecode: "",
brief: "",
state: "1,2",
};
getLists();
};
</script>
<style lang="scss" scoped></style>

454
src/views/PoliceWork/RegistVisit/index.vue
View File

@ -1,219 +1,249 @@
<template> <template>
<div> <div class="app-container">
<!-- 回放界面 --> <!-- 表单区域 -->
<div id="operate" class="operate"> <el-form ref="queryParamsRef" :inline="true" :model="queryParams">
<div class="module"> <el-row :gutter="20">
<div class="item"> <el-col :span="6">
<span class="label">监控点编号：</span> <el-form-item label="相关领域">
<input v-model="cameraIndexCode" type="text" /> <el-select v-model="queryParams.casetype" style="width: 15vw;" @change="getLists" clearable>
</div> <el-option
<div class="item"> v-for="item in nj_anjian_type"
<span class="label">回放开始时间：</span> :key="item.value"
<input v-model="startTime" type="text" placeholder="yyyy-MM-dd hh:mm:ss格式" /> :label="item.label"
</div> :value="item.value"
<div class="item"> />
<span class="label">回放结束时间：</span> </el-select>
<input v-model="endTime" type="text" placeholder="yyyy-MM-dd hh:mm:ss格式" /> </el-form-item>
</div> </el-col>
<div class="item" style="margin-top: 20px;margin-left: -20px;"> <el-col :span="6">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <el-form-item label="来访类别">
<button <el-select v-model="queryParams.casetype" style="width: 15vw;" @change="getLists" clearable>
style="width: 90px;padding: 0;margin: 0;" <el-option
@click="startPlayback" v-for="item in nj_anjian_type"
class="btn" :key="item.value"
> :label="item.label"
回放 :value="item.value"
</button> />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </el-select>
<button </el-form-item>
style="width: 90px;padding: 0;margin: 0;" </el-col>
@click="stopAllPlayback" <el-col :span="6">
class="btn" <el-form-item label="级别">
> <el-select v-model="queryParams.casetype" style="width: 15vw;" @change="getLists" clearable>
停止全部回放 <el-option
</button> v-for="item in nj_anjian_type"
</div> :key="item.value"
</div> :label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" @click="getLists">
<el-icon class="me-1">
<Search />
</el-icon>
查询
</el-button>
</el-form-item>
<el-form-item>
<el-button @click="handleRest(queryParamsRef)">
<el-icon class="me-1">
<Refresh />
</el-icon>
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-divider class="mt-0" />
<el-row class="mb-3" :gutter="10">
<el-col :span="1.5">
<el-space>
<el-button plain type="primary" @click="AddEditRegistVisitRef.showAddCase()">
<el-icon class="me-2">
<Plus />
</el-icon>
新增
</el-button>
</el-space>
</el-col>
<el-col :span="1.5">
<el-button type="info" plain icon="Upload" @click="uploadRef.showupload()">导入</el-button>
<Upload ref="uploadRef" @getList="getLists" />
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
</el-col>
</el-row>
<!-- 表格区域 -->
<el-table
ref="CaseTableRef"
v-loading="loading"
:data="CaseTables"
@row-dblclick="handleRowDblClick"
show-overflow-tooltip
>
<el-table-column label="日期" prop="name" />
<el-table-column label="上访人" prop="name" />
<el-table-column label="电话" prop="casetype" />
<el-table-column label="身份证号码" prop="unitname" />
<el-table-column label="反映事项" prop="state">
<template #default="scope">
<dict-tag :options="nj_anjian_status" :value="scope.row.state" />
</template>
</el-table-column>
<el-table-column label="是否重点对象" prop="state">
<template #default="scope">
<dict-tag :options="nj_anjian_status" :value="scope.row.state" />
</template>
</el-table-column>
<el-table-column label="级别" prop="state" width="80">
<template #default="scope">
<dict-tag :options="nj_anjian_status" :value="scope.row.state" />
</template>
</el-table-column>
<el-table-column label="处理情况" prop="depname"/>
<el-table-column fixed="right" align="center" label="操作" width="240">
<template #default="scope">
<!-- <el-button link size="small" type="warning">
<el-icon class="me-1">
<UserFilled />
</el-icon>
上访人管理
</el-button> -->
<el-button link size="small" type="primary" @click="AddEditRegistVisitRef.showEditCase(scope.row)">
<el-icon class="me-1">
<Edit />
</el-icon>
编辑
</el-button>
<el-button link size="small" type="warning" @click="AddEditRegistVisitRef.showEditCase(scope.row)">
<el-icon class="me-1">
<Edit />
</el-icon>
详情
</el-button>
<el-button link size="small" type="danger" @click="deleteCase(scope.row)">
<el-icon class="me-1">
<Delete />
</el-icon>
取消
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="paging.pageNum"
v-model:limit="paging.pageSize"
@pagination="getLists"
/>
<AddEditRegistVisit ref="AddEditRegistVisitRef" @getList="getLists" />
</div> </div>
</template>
<div style="margin-left: 15px;">
注意： 开始回放前请打开该文件的源代码，将 appkey、录像存储位置等信息修改为实际项目中的信息 <script setup>
</div> import { ElMessageBox } from "element-plus";
import AddEditRegistVisit from "./components/AddEditRegistVisit.vue";
<!-- 视频窗口展示 --> import Upload from "./components/upload.vue"; // 引入上传组件
<div id="playWnd" class="playWnd" style="left: 109px; top: 133px;"></div> import { getCurrentInstance } from "vue";
</div>
</template> import PageEnum from "@/enum/PageEnum.js";
<script setup> const { proxy } = getCurrentInstance();
import { onMounted, ref } from "vue"; const { nj_anjian_type, nj_anjian_status } = proxy.useDict("nj_anjian_type", "nj_anjian_status");
// 数据绑定 const isShow = ref(true);
const cameraIndexCode = ref(""); const queryParamsRef = ref();
const startTime = ref(formatDate(new Date(), "yyyy-MM-dd 00:00:00")); const deleteStatus = ref(true);
const endTime = ref(formatDate(new Date(), "yyyy-MM-dd 23:59:59")); const AddEditRegistVisitRef = ref();
const uploadRef = ref();
let oWebControl = null; const upload = ref({});
let pubKey = "";
const loading = ref(false);
// 页面加载时创建播放实例初始化
onMounted(() => { const paging = ref({
initPlugin(); pageNum: 1,
}); pageSize: PageEnum.SIZE,
});
// 初始化插件 const queryParams = ref({
function initPlugin() { name: "",
oWebControl = new WebControl({ casecode: "",
szPluginContainer: "playWnd", // 指定容器id brief: "",
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 state: "1,2",
iServicePortEnd: 15900, });
cbConnectSuccess: () => {
// 实例创建成功后需要启动服务 const total = ref(0);
oWebControl.JS_StartService("window", { const CaseTables = ref([
dllPath: "./VideoPluginConnect.dll", {
}).then(() => { name: "1",
oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: cbIntegrationCallBack,
});
oWebControl.JS_CreateWnd("playWnd", 1000, 600).then(() => {
console.log("JS_CreateWnd success");
init(); // 创建播放实例成功后初始化
});
});
}, },
cbConnectError: () => { {
console.log("cbConnectError"); name: "2",
handlePluginError();
},
cbConnectClose: () => {
console.log("cbConnectClose");
handlePluginError();
}, },
]);
onMounted(() => {
getLists();
}); });
}
// 获取案件列表
// 公共回调处理 const getLists = async () => {
function handlePluginError() { // loading.value = true
oWebControl = null; // await getCaseInfoList(queryParams.value, paging.value).then(res => {
$("#playWnd").html("插件未启动，正在尝试启动，请稍候..."); // CaseTables.value = res.rows
WebControl.JS_WakeUp("VideoWebPlugin://"); // total.value = res.total
} // loading.value = false
// })
// 初始化播放
function init() {
getPubKey(() => {
const appkey = "28730366";
const secret = setEncrypt("HSZkCJpSJ7gSUYrO6wVi");
const ip = "10.19.132.75";
const playMode = 1;
const port = 443;
const snapDir = "D:\\SnapDir";
const videoDir = "D:\\VideoDir";
const layout = "1x1";
const enableHTTPS = 1;
const encryptedFields = "secret";
const showToolbar = 1;
const showSmart = 1;
const buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";
oWebControl.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey,
secret,
ip,
playMode,
port,
snapDir,
videoDir,
layout,
enableHTTPS,
encryptedFields,
showToolbar,
showSmart,
buttonIDs,
}),
}).then(() => {
oWebControl.JS_Resize(1000, 600); // 调整窗口大小
});
});
}
// 获取公钥
function getPubKey(callback) {
oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024,
}),
}).then((oData) => {
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data;
callback();
}
});
}
// RSA加密
function setEncrypt(value) {
const encrypt = new JSEncrypt();
encrypt.setPublicKey(pubKey);
return encrypt.encrypt(value);
}
// 回放功能
function startPlayback() {
const cameraIndexCodeVal = cameraIndexCode.value;
const startTimeStamp = new Date(startTime.value.replace("-", "/").replace("-", "/")).getTime();
const endTimeStamp = new Date(endTime.value.replace("-", "/").replace("-", "/")).getTime();
const recordLocation = 0;
const transMode = 1;
const gpuMode = 0;
const wndId = -1;
oWebControl.JS_RequestInterface({
funcName: "startPlayback",
argument: JSON.stringify({
cameraIndexCode: cameraIndexCodeVal,
startTimeStamp: Math.floor(startTimeStamp / 1000).toString(),
endTimeStamp: Math.floor(endTimeStamp / 1000).toString(),
recordLocation,
transMode,
gpuMode,
wndId,
}),
});
}
// 停止回放
function stopAllPlayback() {
oWebControl.JS_RequestInterface({
funcName: "stopAllPlayback",
});
}
// 时间格式化函数
function formatDate(date, fmt) {
const o = {
"M+": date.getMonth() + 1,
"d+": date.getDate(),
"h+": date.getHours(),
"m+": date.getMinutes(),
"s+": date.getSeconds(),
"S": date.getMilliseconds(),
}; };
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); // 双击行时的事件处理函数
const handleRowDblClick = (row) => {
console.log("双击的行数据：", row);
AddEditRegistVisitRef.value.showAddCase(row)
// 在这里可以进行进一步的处理，比如打开编辑框或查看详情等
};
const deleteCase = async (row) => {
ElMessageBox.confirm("确定删除？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
// deleteCaseInfo(row.caseCaseinfoId).then((res) => {
// getLists();
// });
})
.catch(() => {});
};
/** 导出按钮操作 */
function handleExport() {
// proxy.download("system/user/export", {
// ...queryParams.value,
// }, `user_${new Date().getTime()}.xlsx`);
} }
for (let k in o) { // 重置搜索调解
if (new RegExp(`(${k})`).test(fmt)) { const handleRest = (formEl) => {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1 ? o[k] : (`00${o[k]}`).substr(`${o[k]}`.length))); queryParams.value = {
} name: "",
} casecode: "",
return fmt; brief: "",
} state: "1,2",
</script> };
getLists();
<style scoped> };
/* Your styles remain the same as in your original HTML */ </script>
</style>
<style lang="scss" scoped></style>