lcw
This commit is contained in:
@ -783,3 +783,11 @@ export const RyGjDeleteById = (id) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 检查站列表
|
||||
export const selectJczFullList = (params) => {
|
||||
return request({
|
||||
url: api + `/jcz/selectJczFullList `,
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
BIN
src/assets/images/jc.png
Normal file
BIN
src/assets/images/jc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
src/assets/images/lsjt.png
Normal file
BIN
src/assets/images/lsjt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/images/lsza.png
Normal file
BIN
src/assets/images/lsza.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/images/znzp.png
Normal file
BIN
src/assets/images/znzp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
175
src/components/BaseChart.vue
Normal file
175
src/components/BaseChart.vue
Normal file
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="base-chart">
|
||||
<div ref="chartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, watch } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
colors: {
|
||||
type: Array,
|
||||
default: () => ["#00f0ff", "#0066ff", "#ff9900", "#00cc66"]
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
const chartRef = ref(null);
|
||||
let chart = null;
|
||||
|
||||
const createChartOption = (data, colors, total) => {
|
||||
return {
|
||||
title: {
|
||||
text: `${total}`,
|
||||
subtext: "总数",
|
||||
left: "center",
|
||||
top: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 24,
|
||||
fontWeight: "normal"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: "50px",
|
||||
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
rich: {
|
||||
value: {
|
||||
color: "#fff"
|
||||
},
|
||||
percentage: {
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
blue: {
|
||||
color: colors[0]
|
||||
},
|
||||
lightBlue: {
|
||||
color: colors[1]
|
||||
},
|
||||
orange: {
|
||||
color: colors[2]
|
||||
},
|
||||
green: {
|
||||
color: colors[3]
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: (name) => {
|
||||
const item = data.find((d) => d.name === name);
|
||||
return `${name} ${item.value}`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["55%", "70%"],
|
||||
center: ["50%", "55%"],
|
||||
data: data.map((item) => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color[0] },
|
||||
{ offset: 1, color: item.color[1] }
|
||||
])
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: "none"
|
||||
},
|
||||
z: 2
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "85%"],
|
||||
center: ["50%", "55%"],
|
||||
data: data.map((item) => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color1[0] },
|
||||
{ offset: 1, color: item.color1[1] }
|
||||
])
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: "none"
|
||||
},
|
||||
z: 1,
|
||||
silent: true
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
const initChart = () => {
|
||||
if (chartRef.value) {
|
||||
chart = echarts.init(chartRef.value);
|
||||
chart.setOption(createChartOption(props.data, props.colors, props.total));
|
||||
}
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
chart?.resize();
|
||||
};
|
||||
|
||||
watch(
|
||||
() => [props.data, props.total],
|
||||
() => {
|
||||
if (chart) {
|
||||
chart.setOption(createChartOption(props.data, props.colors, props.total));
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
chart?.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.base-chart {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
132
src/components/aboutTable/FormMessage.vue
Normal file
132
src/components/aboutTable/FormMessage.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<el-form ref="elform" :model="listQuery" :label-width="props.labelWidth" :rules="props.rules" :inline="props.inline" :label-position="props.position" :disabled="props.disabled">
|
||||
|
||||
<el-form-item v-for="(item, idx) in props.formList" :style="item.width && { width: item.width }" :prop="item.prop" :label="item.label" :label-width="item.labelWidth" :key="idx">
|
||||
<!-- input表单 input-->
|
||||
<MOSTY.Other v-if="item.type == 'input'" width="100%" clearable v-model="listQuery[item.prop]" :placeholder="`请输入${item.label}`" :disabled="item.disabled" :readonly="item.readonly" @blur="inputBlur($event,item)" />
|
||||
|
||||
<el-input v-model="listQuery[item.prop]" v-else-if="item.type == 'textarea'" type="textarea" :rows="item.rows || 3" :placeholder="`请输入${item.label}`" :disabled="item.disabled" @blur="inputBlur($event,item)"/>
|
||||
<!-- 数值 inputNumber-->
|
||||
<el-input type="number" v-model="listQuery[item.prop]" v-else-if="item.type == 'inputNumber'" :placeholder="`请输入${item.label}`" :disabled="item.disabled" @blur="inputBlur($event,item)"/>
|
||||
<!-- 数值 number-->
|
||||
<el-input-number v-model="listQuery[item.prop]" v-else-if="item.type == 'number'" :step="item.step || 1" style="width: 100%" :min="item.min || 0" :max="item.max || 1000" :disabled="item.disabled" />
|
||||
|
||||
<!--选择 select-->
|
||||
<MOSTY.Select v-else-if="item.type == 'select'" filterable :multiple="item.multiple" v-model="listQuery[item.prop]" :dictEnum="item.options" width="100%" clearable :placeholder="`请选择${item.label}`" :disabled="item.disabled" />
|
||||
|
||||
<!-- 部门department -->
|
||||
<template v-else-if="item.type === 'department'">
|
||||
<MOSTY.Department style="width: 100%;" clearable :isAll="item.isAll" @getDepValue="getdep($event, item.depMc)" :multiple="item.multiple" v-model="listQuery[item.prop]" :placeholder="listQuery[item.depMc] ? listQuery[item.depMc] : '请选择'" :disabled="item.disabled" />
|
||||
</template>
|
||||
|
||||
<!-- 上传 upload -->
|
||||
<MOSTY.Upload v-else-if="item.type == 'upload'" width="100%" v-model="listQuery[item.prop]" :isImg="item.isImg" :limit="item.limit" :disabled="item.disabled" />
|
||||
|
||||
<!--选择checkbox -->
|
||||
<MOSTY.CheckBox v-else-if="item.type == 'checkbox'" width="100%" clearable v-model="listQuery[item.prop]" :checkList="item.options" :placeholder="`请选择${item.label}`" :disabled="item.disabled" />
|
||||
|
||||
<!-- 单选radio -->
|
||||
<el-radio-group v-model="listQuery[item.prop]" v-else-if="item.type == 'radio'" :disabled="item.disabled">
|
||||
<el-radio v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<!-- 时间选择 -->
|
||||
<el-time-picker v-else-if="item.type == 'time'" v-model="listQuery[item.prop]" placeholder="选择时间" style="width: 100%" :disabled="item.disabled" />
|
||||
<el-date-picker v-else-if="item.type == 'date'" v-model="listQuery[item.prop]" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%" :disabled="item.disabled" />
|
||||
<el-date-picker v-else-if="item.type == 'datetime'" v-model="listQuery[item.prop]" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间" style="width: 100%" :disabled="item.disabled" />
|
||||
<el-date-picker v-else-if="item.type == 'datetimerange'" v-model="listQuery[item.prop]" type="datetimerange" :shortcuts="shortcuts" range-separator="To" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="选择开始时间" end-placeholder="选择结束时间" style="width: 100%" :disabled="item.disabled" />
|
||||
<el-date-picker v-else-if="item.type == 'daterange'" v-model="listQuery[item.prop]" type="daterange" range-separator="To" value-format="YYYY-MM-DD" start-placeholder="选择开始日期" end-placeholder="选择开始日期" style="width: 100%" :disabled="item.disabled" />
|
||||
|
||||
<el-switch v-else-if="item.type == 'switch'" v-model="listQuery[item.prop]" class="ml-2" :disabled="item.disabled" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
|
||||
|
||||
<template v-else-if="item.type === 'slot'">
|
||||
<slot :name="item.prop"></slot>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { ref, defineProps, defineEmits, defineExpose, watch, watchEffect, readonly } from "vue";
|
||||
const props = defineProps({
|
||||
//循环的值
|
||||
formList: {
|
||||
default: [],
|
||||
type: Array
|
||||
},
|
||||
rules: {
|
||||
default: {},
|
||||
type: Object
|
||||
},
|
||||
labelWidth: {
|
||||
default: "140px",
|
||||
type: String
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
position: {
|
||||
default: 'right',
|
||||
type: String
|
||||
},
|
||||
});
|
||||
const elform = ref();
|
||||
const listQuery = ref({});
|
||||
const emits = defineEmits(["update:modelValue", "blur"]);
|
||||
// 提交
|
||||
const submit = (resfun) => {
|
||||
elform.value.validate((valid) => {
|
||||
if (!valid) return false;
|
||||
resfun(listQuery.value);
|
||||
});
|
||||
};
|
||||
|
||||
const getdep = (e, val) => {
|
||||
if (val) {
|
||||
if (Array.isArray(e)) {
|
||||
listQuery.value[val] = e ? e.map(item => item.orgName) : '';
|
||||
} else {
|
||||
listQuery.value[val] = e ? e.orgName : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
const reset = () => {
|
||||
elform.value.resetFields()
|
||||
}
|
||||
|
||||
// 修改这里的watch逻辑，避免无限循环
|
||||
let isUpdatingFromProps = false;
|
||||
const inputBlur = (e,item) => {
|
||||
if(typeof item?.blur == 'function') {
|
||||
item.blur();
|
||||
}
|
||||
// emits('blur', e, item);
|
||||
}
|
||||
watch(() => listQuery.value, (newVal) => {
|
||||
if (newVal && !isUpdatingFromProps) {
|
||||
emits("update:modelValue", newVal);
|
||||
}
|
||||
}, { deep: true });
|
||||
|
||||
watch(() => props.modelValue, (newVal) => {
|
||||
// 只有在新值确实变化时才更新（避免空值覆盖）
|
||||
if (newVal && Object.keys(newVal).length > 0) {
|
||||
isUpdatingFromProps = true;
|
||||
listQuery.value = { ...newVal };
|
||||
setTimeout(() => {
|
||||
isUpdatingFromProps = false;
|
||||
}, 0);
|
||||
}
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
defineExpose({ submit, reset });
|
||||
</script>
|
||||
@ -1,6 +1,9 @@
|
||||
|
||||
<template>
|
||||
<el-dialog v-model="modelValue" width="60%" custom-class="container" @close="close" :title="title" align-center>
|
||||
<div ref="searchBox">
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData" >
|
||||
@ -21,7 +24,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref,watch,getCurrentInstance } from 'vue'
|
||||
import { reactive, ref, watch, getCurrentInstance } from 'vue'
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import MyTable from '@/components/aboutTable/MyTable.vue'
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import { ysSxtgetPageList } from "@/api/yszx";
|
||||
@ -40,6 +44,29 @@ const props = defineProps({
|
||||
default: '选择感知源'
|
||||
}
|
||||
})
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "编号",
|
||||
prop: "sbbh",
|
||||
placeholder: "请输入编号",
|
||||
showType: "input"
|
||||
},
|
||||
{
|
||||
label: "感知源名称",
|
||||
prop: "sbmc",
|
||||
placeholder: "请输入感知源名称",
|
||||
showType: "input"
|
||||
}
|
||||
]);
|
||||
const queryCondition=ref()
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
queryCondition.value = { ...queryCondition.value, ...val };
|
||||
getList()
|
||||
};
|
||||
|
||||
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "choose"])
|
||||
const dataLsit= ref();
|
||||
const pageData = reactive({
|
||||
@ -70,7 +97,8 @@ const pageData = reactive({
|
||||
})
|
||||
const getList = () => {
|
||||
pageData.tableConfiger.loading = true;
|
||||
const promes={
|
||||
const promes = {
|
||||
...queryCondition.value,
|
||||
// ssbm: propsGzyList.ssbm,
|
||||
pageSize: pageData.pageConfiger.pageSize,
|
||||
pageCurrent: pageData.pageConfiger.pageCurrent,
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
* @Description: 系统切换窗口
|
||||
-->
|
||||
<template>
|
||||
<!-- append-to-body -->
|
||||
<div class="a">
|
||||
|
||||
|
||||
<el-dialog
|
||||
@ -12,9 +10,10 @@
|
||||
class="switch-sys-dialog"
|
||||
modal-class="switch-sys-dialog-modal"
|
||||
:show-close="false"
|
||||
width="75%"
|
||||
width="1600"
|
||||
background-color='#00000080'
|
||||
align-center
|
||||
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
@close="handleModalClick"
|
||||
>
|
||||
@ -32,7 +31,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -49,7 +47,7 @@ const props = defineProps({
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const list = [
|
||||
{ label: '俯瞰系统', value: 1, url: `https://tyyy.lz.dsj.xz/overlooking/home`, icon: fk },
|
||||
{ label: '俯瞰系统', value: 1, url: `https://tyyy.lz.dsj.xz/overlooking/home`, icon: fk },
|
||||
{ label: '统一门户', value: 2, url: 'https://tyyy.lz.dsj.xz/portal/home', icon: ty },
|
||||
{ label: '智慧派出所', value: 3, url: 'https://pcs.lz.dsj.xz:9020/index.html', icon: pcs },
|
||||
]
|
||||
@ -70,11 +68,6 @@ const handleModalClick = () => {
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.a{
|
||||
::v-deep(.el-dialog){
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
body .el-overlay .el-overlay-dialog .el-dialog{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
@ -128,6 +121,8 @@ body .el-overlay .el-overlay-dialog .el-dialog{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(.el-dialog) {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
72
src/composables/useWarningData.js
Normal file
72
src/composables/useWarningData.js
Normal file
@ -0,0 +1,72 @@
|
||||
import { ref } from "vue";
|
||||
import { jczgetYjbqtj } from "@/api/mosty-jcz";
|
||||
import { choseRbgb } from "@/utils/tools";
|
||||
|
||||
export function useWarningData() {
|
||||
const loading = ref(false);
|
||||
const error = ref(null);
|
||||
|
||||
// 定义颜色数组，为每个预警类型分配不同的颜色
|
||||
const colorPairs = [
|
||||
["#00f0ff", "#0066ff"], // 蓝色渐变
|
||||
["#ff9900", "#ff6600"], // 橙色渐变
|
||||
["#00cc66", "#009933"], // 绿色渐变
|
||||
["#ff6699", "#ff3366"], // 粉色渐变
|
||||
["#9966ff", "#6633ff"], // 紫色渐变
|
||||
["#ffcc00", "#ff9900"] // 黄色渐变
|
||||
];
|
||||
|
||||
const fetchWarningData = async (warningType) => {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
const res = await jczgetYjbqtj({ yjLx: warningType });
|
||||
return res;
|
||||
} catch (err) {
|
||||
error.value = err;
|
||||
return [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const processWarningData = (data) => {
|
||||
const total = data
|
||||
.map((el) => el.sl)
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
|
||||
const processedData = data.map((item, index) => {
|
||||
// 为每个预警类型分配不同的颜色，循环使用颜色数组
|
||||
const colorIndex = index % colorPairs.length;
|
||||
const [color, color2] = colorPairs[colorIndex];
|
||||
|
||||
return {
|
||||
value: item.sl,
|
||||
name: item.yjbq,
|
||||
color: [color, color2],
|
||||
color1: [choseRbgb(color, 0.3), choseRbgb(color2, 0.3)]
|
||||
};
|
||||
});
|
||||
|
||||
return { processedData, total };
|
||||
};
|
||||
|
||||
const getVehicleWarningData = async () => {
|
||||
const data = await fetchWarningData(1);
|
||||
return processWarningData(data);
|
||||
};
|
||||
|
||||
const getPersonWarningData = async () => {
|
||||
const data = await fetchWarningData(2);
|
||||
return processWarningData(data);
|
||||
};
|
||||
|
||||
return {
|
||||
loading,
|
||||
error,
|
||||
getVehicleWarningData,
|
||||
getPersonWarningData,
|
||||
fetchWarningData,
|
||||
processWarningData
|
||||
};
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<header>
|
||||
<div class="logo flex align-center" @click="goToHome"><img width="45" class="mr10" src="@/assets/images/jinghui.png"
|
||||
alt="">林芝公安治安防控管理平台</div>
|
||||
alt="">林芝市智慧公安检查</div>
|
||||
<div class="right">
|
||||
<div><img src="@/assets/images/peo.png" /></div>
|
||||
<div class="detail">
|
||||
|
||||
@ -219,6 +219,7 @@
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { jczsavel, Xfbbupdate } from "@/api/mosty-jcz.js";
|
||||
import { qcckGet } from "@/api/qcckApi";
|
||||
import { ElMessage } from "element-plus";
|
||||
import ChooseTable from "@/components/chooseList/chooseTable.vue";
|
||||
import { timeValidate } from "@/utils/tools.js";
|
||||
@ -253,8 +254,18 @@ let pageType = ref("add");
|
||||
const mjData = ref([]);
|
||||
const fjData = ref([]);
|
||||
const isDetail=ref(false)
|
||||
//
|
||||
const getjyqx = () => {
|
||||
qcckGet({}, "/mosty-jcz/tpJczJyqx/getJyqxList").then((res) => {
|
||||
console.log(res);
|
||||
listQuery.value.qxList = res;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
getjyqx()
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
|
||||
@ -3,116 +3,30 @@
|
||||
<div class="head_box">
|
||||
<span class="title">{{ pageInfo[pageType].title }}</span>
|
||||
<div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
v-if="['add', 'edit'].includes(pageType)"
|
||||
@click="_onSave"
|
||||
>保存</el-button
|
||||
>
|
||||
<el-button size="small" type="primary" v-if="['add', 'edit'].includes(pageType)" @click="_onSave">保存</el-button>
|
||||
<el-button size="small" @click="close">关闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cntinfo">
|
||||
<el-form ref="elform" :model="form" :inline="true" label-position="top">
|
||||
<el-form-item prop="ssbmdm" label="预警类型" style="width: 40%">
|
||||
<el-select
|
||||
clearable
|
||||
disabled
|
||||
v-model="listQuery.yjLx"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_YJLX"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="感知源名称" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.yjGzymc"
|
||||
placeholder="感知源名称"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="scode" label="预警发生时间" style="width: 40%">
|
||||
<el-date-picker
|
||||
v-model="listQuery.yjSj"
|
||||
type="datetime"
|
||||
placeholder="请选中开始时间"
|
||||
format="YYYY-MM-DD hh:mm:ss"
|
||||
disabled
|
||||
value-format="YYYY-MM-DD hh:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="sbmc" label="预警对象" style="width: 40%">
|
||||
<el-input
|
||||
v-model="DX"
|
||||
placeholder="请输入装备名称"
|
||||
clearable
|
||||
disabled
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预警地址" style="width: 40%">
|
||||
<el-input
|
||||
v-model="listQuery.yjDz"
|
||||
placeholder="请输入预警地址"
|
||||
disabled
|
||||
clearable
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预警级别" style="width: 40%">
|
||||
<el-select
|
||||
clearable
|
||||
disabled
|
||||
v-model="listQuery.yjJb"
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dict.D_BZ_YJJB"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预警内容" style="width: 100%">
|
||||
<el-input
|
||||
v-model="listQuery.yjNr"
|
||||
disabled
|
||||
placeholder="请输入关键字"
|
||||
show-word-limit
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="预警图片">
|
||||
<el-image
|
||||
:preview-src-list="[listQuery.yjTp]"
|
||||
fit="cover"
|
||||
style="width: 100px; height: 100px"
|
||||
:src="listQuery.yjTp"
|
||||
></el-image>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<FormMessage :disabled="true" v-model="listQuery" :formList="formData" ref="elform" :rules="rules" position="top">
|
||||
<template #yjRyxm="{ row }">
|
||||
<el-input v-if="listQuery.yjLx == '1'" v-model="listQuery.yjRyxm" placeholder="请输入预警接收人姓名" clearable
|
||||
style="width: 100%" />
|
||||
<el-input v-else v-model="listQuery.yjClcph" placeholder="请输入预警接收人手机号" clearable style="width: 100%" />
|
||||
</template>
|
||||
<template #yjTp="{ row }">
|
||||
<el-image :preview-src-list="[listQuery.yjTp]" fit="cover" style="width: 100px; height: 100px"
|
||||
:src="listQuery.yjTp"></el-image>
|
||||
</template>
|
||||
</FormMessage>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import FormMessage from "@/components/aboutTable/FormMessage.vue";
|
||||
import { TcsbsaveTcsbsave, Tcsbupdate } from "@/api/mosty-jcz.js";
|
||||
import { Right, Back } from "@element-plus/icons-vue";
|
||||
import { baseselectPage } from "@/api/mosty-base";
|
||||
@ -120,7 +34,7 @@ import { ElMessage } from "element-plus";
|
||||
const props = defineProps({
|
||||
dict: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
default: () => { }
|
||||
}
|
||||
});
|
||||
|
||||
@ -147,14 +61,12 @@ const propsTree = ref({
|
||||
multiple: false
|
||||
});
|
||||
// 初始化数据
|
||||
const DX = ref();
|
||||
const init = (type, row) => {
|
||||
pageType.value = type;
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
tabHeightFn();
|
||||
if (type == "edit" || type == "detail") {
|
||||
DX.value = row.yjRyxm ? row.yjRyxm : row.yjClcph;
|
||||
listQuery.value = { ...row };
|
||||
} else {
|
||||
listQuery.value = {};
|
||||
@ -165,8 +77,26 @@ const init = (type, row) => {
|
||||
const close = () => {
|
||||
dialogForm.value = false;
|
||||
listQuery.value = {};
|
||||
DX.value = "";
|
||||
};
|
||||
const formData = ref()
|
||||
watch(() => props.dict, (newVal, oldVal) => {
|
||||
if (newVal) {
|
||||
formData.value = [
|
||||
{ label: "预警类型", prop: "yjLx", type: "select", options: props.dict.D_BZ_YJLX, width: '45%' },
|
||||
{ label: "感知源名称", prop: "yjGzymc", type: "input", width: '45%' },
|
||||
{ label: "请选中开始时间", prop: "yjSj", type: "datetime", width: '45%' },
|
||||
{ label: "预警对象", prop: "yjRyxm", type: "slot", width: '45%' },
|
||||
{ label: "预警标签", prop: "yjbqmc", type: "input", width: '45%' },
|
||||
{ label: "所属部门", prop: "ssbm", type: "input", width: '45%' },
|
||||
{ label: "预警地址", prop: "yjDz", type: "input", width: '45%' },
|
||||
{ label: "预警级别", prop: "yjJb", type: "select", options: props.dict.D_BZ_YJJB, width: '45%' },
|
||||
{ label: "预警内容", prop: "yjNr", type: "textarea", width: '100%' },
|
||||
{ label: "预警图片", prop: "yjTp", type: "slot", width: '100%' }
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 表格高度计算
|
||||
const tableHeight1 = ref();
|
||||
const tabHeightFn = () => {
|
||||
@ -179,21 +109,25 @@ defineExpose({ init });
|
||||
<style lang="scss" scoped>
|
||||
.dialog {
|
||||
padding: 20px;
|
||||
|
||||
.head_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cntinfo {
|
||||
height: calc(100% - 70px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.my_transfer {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
|
||||
.btn {
|
||||
width: 50px;
|
||||
display: flex;
|
||||
@ -201,53 +135,65 @@ defineExpose({ init });
|
||||
justify-content: center;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.left {
|
||||
margin: 12px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.tableBox {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.serch {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
// height: 96px;
|
||||
> .el-form--inline {
|
||||
>.el-form--inline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
> .el-form-item--default {
|
||||
|
||||
>.el-form-item--default {
|
||||
width: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 380px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.phone {
|
||||
width: 95px;
|
||||
height: 120px;
|
||||
|
||||
.el-image {
|
||||
width: 95px;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-upload {
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
border: 1px dashed #e0e0e0;
|
||||
margin-bottom: 14px;
|
||||
|
||||
.el-icon {
|
||||
margin-top: 34px;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -8,15 +8,9 @@
|
||||
<Search :searchArr="searchConfiger" @submit="onSearch" />
|
||||
</div>
|
||||
<div class="tabBox">
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData"
|
||||
>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseData">
|
||||
<template #yjTp="{ row }">
|
||||
<div class="phone">
|
||||
<el-image v-if="row.tp" :src="urlImg + row.yjTp" fit="cover" lazy />
|
||||
@ -32,15 +26,10 @@
|
||||
<el-link type="primary" @click="addEdit('detail', row)">详情</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
<!-- 编辑详情 -->
|
||||
<!-- 编辑详情 -->
|
||||
@ -54,11 +43,12 @@ import MyTable from "@/components/aboutTable/MyTable.vue";
|
||||
import Pages from "@/components/aboutTable/Pages.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import Search from "@/components/aboutTable/Search.vue";
|
||||
import { jczgetPageList } from "@/api/mosty-jcz.js";
|
||||
import { jczgetPageList, selectJczFullList } from "@/api/mosty-jcz.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, watch } from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const urlImg = "/mosty-api/mosty-base/minio/image/download/";
|
||||
const { D_BZ_YJLX, D_BZ_YJJB } = proxy.$dict("D_BZ_YJLX", "D_BZ_YJJB");
|
||||
const jczList = ref()
|
||||
const searchConfiger = ref([
|
||||
{
|
||||
label: "预警类型",
|
||||
@ -66,6 +56,12 @@ const searchConfiger = ref([
|
||||
placeholder: "预警类型",
|
||||
showType: "select",
|
||||
options: D_BZ_YJLX
|
||||
}, {
|
||||
label: "所属检查站",
|
||||
prop: "jczid",
|
||||
placeholder: "所属检查站",
|
||||
showType: "select",
|
||||
options: {}
|
||||
},
|
||||
{
|
||||
label: "发生时间",
|
||||
@ -73,12 +69,6 @@ const searchConfiger = ref([
|
||||
placeholder: "发生时间",
|
||||
showType: "datetimerange"
|
||||
}
|
||||
// {
|
||||
// label: "预警对象",
|
||||
// prop: "yjLx",
|
||||
// placeholder: "请输入预警对象",
|
||||
// showType: "input"
|
||||
// }
|
||||
]);
|
||||
|
||||
const detailDiloag = ref();
|
||||
@ -107,6 +97,8 @@ const pageData = reactive({
|
||||
});
|
||||
onMounted(() => {
|
||||
tabHeightFn();
|
||||
getselectJczFullList()
|
||||
|
||||
});
|
||||
|
||||
//查询条件
|
||||
@ -124,17 +116,34 @@ const getjczgetXfllList = () => {
|
||||
pageData.tableConfiger.loading = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 获取检查站数据
|
||||
|
||||
const getselectJczFullList = () => {
|
||||
selectJczFullList().then((res) => {
|
||||
console.log(res);
|
||||
|
||||
jczList.value = res.map(item => ({
|
||||
label: item.jczmc,
|
||||
value: item.id
|
||||
}))
|
||||
searchConfiger.value[1].options = jczList.value
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
getjczgetXfllList();
|
||||
// 搜索
|
||||
const onSearch = (val) => {
|
||||
console.log(val);
|
||||
|
||||
const startTime = {
|
||||
startTime : val.startTime[0],
|
||||
endTime : val.startTime[1]
|
||||
...val,
|
||||
startTime: val.startTime ? val.startTime[0] : "",
|
||||
endTime: val.startTime ? val.startTime[1] : ""
|
||||
}
|
||||
|
||||
queryCondition.value = { ...queryCondition.value,...startTime};
|
||||
queryCondition.value = { ...queryCondition.value, ...startTime };
|
||||
getjczgetXfllList();
|
||||
};
|
||||
|
||||
|
||||
@ -1,13 +1,19 @@
|
||||
<template>
|
||||
<div class="mian_box">
|
||||
<div class="item" v-for="item in dataList" :key="item">{{ item.zdmc }}:<span
|
||||
@click="openDialog(item.dm)">{{ item.num }}</span></div>
|
||||
<div class="item" v-for="item in dataList" :key="item">
|
||||
<img :src="item.img" alt="" class="item-img" />
|
||||
<div class="item-content">
|
||||
<div class="item-title">{{ item.zdmc }}</div>
|
||||
<div @click="openDialog(item.dm)" class="item-num">{{ item.num }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pointList v-model="pointListShow" :lxType="lxType" />
|
||||
</template>
|
||||
<script setup>
|
||||
import pointList from "./pointList.vue";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import { divide } from "lodash";
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
const lxType = ref();
|
||||
const pointListShow = ref(false);
|
||||
@ -23,9 +29,37 @@ const openDialog = (val) => {
|
||||
onMounted(() => {
|
||||
getTotal()
|
||||
})
|
||||
|
||||
const dataContent = [
|
||||
{
|
||||
key: '临时交通卡点',
|
||||
img: require('@/assets/images/lsjt.png'),
|
||||
},
|
||||
{
|
||||
key: '智能抓拍',
|
||||
img: require('@/assets/images/znzp.png'),
|
||||
},
|
||||
{
|
||||
key: '公安检查站',
|
||||
img: require('@/assets/images/jc.png'),
|
||||
}, {
|
||||
key: '临时治安卡点',
|
||||
img: require('@/assets/images/lsza.png'),
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
const getTotal = () => {
|
||||
qcckGet({}, "/mosty-jcz/jcztj/jczZqlxtj").then(res => {
|
||||
dataList.value = res;
|
||||
dataList.value = res.map(item => {
|
||||
const content = dataContent.findIndex(items => items.key == item.zdmc)
|
||||
return {
|
||||
...item,
|
||||
img: dataContent[content].img
|
||||
}
|
||||
});
|
||||
console.log(dataList.value);
|
||||
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -37,5 +71,35 @@ const getTotal = () => {
|
||||
color: #fff;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
flex-wrap: wrap;
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
.item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item-num {
|
||||
text-align: center;
|
||||
color: #00f0ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,234 +2,56 @@
|
||||
<div class="warning-analysis">
|
||||
<div class="chart-section">
|
||||
<h2 class="section-title">人员预警分析</h2>
|
||||
<div ref="vehicleChartRef" class="chart-container"></div>
|
||||
<BaseChart :data="vehicleData" :total="vehicleTotal" />
|
||||
</div>
|
||||
<div class="chart-section">
|
||||
<h2 class="section-title">车辆预警分析</h2>
|
||||
<div ref="personChartRef" class="chart-container"></div>
|
||||
<BaseChart :data="personData" :total="personTotal" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { choseRbgb } from "@/utils/tools";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { jczgetYjbqtj } from "@/api/mosty-jcz";
|
||||
import * as echarts from "echarts";
|
||||
import { ref, onMounted } from "vue";
|
||||
import BaseChart from "@/components/BaseChart.vue";
|
||||
import { useWarningData } from "@/composables/useWarningData";
|
||||
|
||||
const vehicleChartRef = ref(null);
|
||||
const personChartRef = ref(null);
|
||||
let vehicleChart = null;
|
||||
let personChart = null;
|
||||
const createChartOption = (data, colors, total) => {
|
||||
return {
|
||||
title: {
|
||||
text: `${total}`,
|
||||
subtext: "总数",
|
||||
left: "center",
|
||||
top: "center", //top待调整
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 24,
|
||||
fontWeight: "normal"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
top: 0,
|
||||
bottom: "50px",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
rich: {
|
||||
value: {
|
||||
color: "#fff"
|
||||
},
|
||||
percentage: {
|
||||
padding: [0, 0, 0, 10]
|
||||
},
|
||||
blue: {
|
||||
color: colors[0]
|
||||
},
|
||||
lightBlue: {
|
||||
color: colors[1]
|
||||
},
|
||||
orange: {
|
||||
color: colors[2]
|
||||
},
|
||||
green: {
|
||||
color: colors[3]
|
||||
}
|
||||
}
|
||||
},
|
||||
formatter: (name) => {
|
||||
const item = data.find((d) => d.name === name);
|
||||
return `${name} ${item.value}`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["55%", "70%"],
|
||||
center: ["50%", "55%"],
|
||||
data: data.map((item) => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color[0] },
|
||||
{ offset: 1, color: item.color[1] }
|
||||
])
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: "none"
|
||||
},
|
||||
z: 2
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["65%", "85%"],
|
||||
center: ["50%", "55%"],
|
||||
data: data.map((item) => ({
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: item.color1[0] },
|
||||
{ offset: 1, color: item.color1[1] }
|
||||
])
|
||||
}
|
||||
})),
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: "none"
|
||||
},
|
||||
z: 1,
|
||||
silent: true
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
const randomHexColor = () => {
|
||||
return "#" + Math.floor(Math.random() * 16777215).toString(16);
|
||||
};
|
||||
const { getVehicleWarningData, getPersonWarningData } = useWarningData();
|
||||
|
||||
const initCharts = async () => {
|
||||
let clTotal = 0;
|
||||
let ryTotal = 0;
|
||||
vehicleChart = echarts.init(vehicleChartRef.value);
|
||||
personChart = echarts.init(personChartRef.value);
|
||||
const colors = ["#00f0ff", "#0066ff", "#ff9900", "#00cc66"];
|
||||
// 车辆预警数据
|
||||
const res = await jczgetYjbqtj({ yjLx: 1 });
|
||||
const res2 = await jczgetYjbqtj({ yjLx: 2 });
|
||||
clTotal = res2
|
||||
.map((el) => el.sl)
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
ryTotal = res
|
||||
.map((el) => el.sl)
|
||||
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
||||
const vehicleData = ref([]);
|
||||
const vehicleTotal = ref(0);
|
||||
const personData = ref([]);
|
||||
const personTotal = ref(0);
|
||||
|
||||
const vehicleData = res.map((item) => {
|
||||
const color = randomHexColor();
|
||||
const color2 = randomHexColor();
|
||||
return {
|
||||
value: item.sl,
|
||||
name: item.yjbq,
|
||||
// colorType: color,
|
||||
color: [color, color2],
|
||||
color1: [choseRbgb(color, 0.3), choseRbgb(color2, 0.3)]
|
||||
};
|
||||
});
|
||||
const initData = async () => {
|
||||
const vehicleResult = await getVehicleWarningData();
|
||||
vehicleData.value = vehicleResult.processedData;
|
||||
vehicleTotal.value = vehicleResult.total;
|
||||
|
||||
// 人员预警数据
|
||||
const personData = res2.map((item) => {
|
||||
const color = randomHexColor();
|
||||
const color2 = randomHexColor();
|
||||
return {
|
||||
value: item.sl,
|
||||
name: item.yjbq,
|
||||
// colorType: color,
|
||||
color: [color, color2],
|
||||
color1: [choseRbgb(color, 0.3), choseRbgb(color2, 0.3)]
|
||||
};
|
||||
});
|
||||
// [
|
||||
// {
|
||||
// value: 25,
|
||||
// name: "涉稳人员",
|
||||
// colorType: "blue",
|
||||
// color: ["#00f0ff", "#00a0cc"],
|
||||
// color1: [choseRbgb("#00f0ff", 0.3), choseRbgb("#00a0cc", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 30,
|
||||
// name: "涉毒人员",
|
||||
// colorType: "lightBlue",
|
||||
// color: ["#0066ff", "#0044cc"],
|
||||
// color1: [choseRbgb("#0066ff", 0.3), choseRbgb("#0044cc", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 17,
|
||||
// name: "涉黄人员",
|
||||
// colorType: "orange",
|
||||
// color: ["#ff9900", "#cc7a00"],
|
||||
// color1: [choseRbgb("#ff9900", 0.3), choseRbgb("#cc7a00", 0.3)]
|
||||
// },
|
||||
// {
|
||||
// value: 28,
|
||||
// name: "前科人员",
|
||||
// colorType: "green",
|
||||
// color: ["#00cc66", "#009944"],
|
||||
// color1: [choseRbgb("#00cc66", 0.3), choseRbgb("#009944", 0.3)]
|
||||
// }
|
||||
// ];
|
||||
vehicleChart.setOption(createChartOption(vehicleData, colors, ryTotal));
|
||||
personChart.setOption(createChartOption(personData, colors, clTotal));
|
||||
};
|
||||
|
||||
const handleResize = () => {
|
||||
vehicleChart?.resize();
|
||||
personChart?.resize();
|
||||
const personResult = await getPersonWarningData();
|
||||
personData.value = personResult.processedData;
|
||||
personTotal.value = personResult.total;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initCharts();
|
||||
window.addEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
vehicleChart?.dispose();
|
||||
personChart?.dispose();
|
||||
initData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.warning-analysis {
|
||||
padding: 20px;
|
||||
// padding: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
height: 50%;
|
||||
height: 40%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
// margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 90%);
|
||||
@ -248,9 +70,4 @@ onUnmounted(() => {
|
||||
background: url("~@/assets/images/bg_02.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: calc(100% - 40px);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -266,6 +266,7 @@ const getMapData = () => {
|
||||
// background: url("~@/assets/images/border_L_T.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 右边
|
||||
@ -275,13 +276,13 @@ const getMapData = () => {
|
||||
box-sizing: border-box;
|
||||
|
||||
.asideL-top {
|
||||
height: 20%;
|
||||
height: 25%;
|
||||
background: url("~@/assets/images/border_R_T.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.asideL-bottom {
|
||||
height: 60%;
|
||||
height: 50%;
|
||||
background: url("~@/assets/images/border_R_B.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@ -203,10 +203,10 @@
|
||||
<div class="btItem">警用器械</div>
|
||||
<div class="info">
|
||||
<el-form-item>
|
||||
<div v-for="(item, index) in listQuery.qxList" :key="index" style="width: 50%; margin-bottom: 10px">
|
||||
<div class="flex">
|
||||
<div style="width: 30%">{{ item.qxmc }}：</div>
|
||||
<el-input-number v-model="item.qxsl" :step="1" />
|
||||
<div v-for="(item, index) in listQuery.qxList" :key="index" class="qx-item">
|
||||
<div class="flex align-center qx-item-inner">
|
||||
<div class="qx-name">{{ item.qxmc }}</div>
|
||||
<el-input-number v-model="item.qxsl" :step="1" class="qx-input" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
@ -222,6 +222,7 @@ import { ref, reactive, getCurrentInstance, onMounted, watch } from "vue";
|
||||
import * as MOSTY from "@/components/MyComponents/index";
|
||||
import { jczqueryById } from "@/api/mosty-jcz";
|
||||
import { jczsavel, Xfbbupdate } from "@/api/mosty-jcz.js";
|
||||
import { qcckGet } from "@/api/qcckApi";
|
||||
import { ElMessage } from "element-plus";
|
||||
import ChooseTable from "@/components/chooseList/chooseTable.vue";
|
||||
import ChoosePersonnel from "@/components/chooseList/choosePersonnel.vue";
|
||||
@ -288,32 +289,39 @@ const fz = (val) => {
|
||||
});
|
||||
return data;
|
||||
};
|
||||
const getjyqx = () => {
|
||||
qcckGet({
|
||||
pageSize: 1000,
|
||||
pageCurrent: 1
|
||||
}, "/mosty-jcz/tpJczJyqx/getJyqxList").then((res) => {
|
||||
listQuery.value.qxList = res.records.map((item) => {
|
||||
return {
|
||||
qxmc: item.qxMc,
|
||||
qxsl: 0
|
||||
}
|
||||
}) || []
|
||||
|
||||
init();
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const init = (type) => {
|
||||
|
||||
|
||||
pageType.value = type == undefined || type == 'add' ? "add" : "detail";
|
||||
console.log(type);
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
if (props.row) {
|
||||
if (props.row.data) {
|
||||
pageType.value = "detail"
|
||||
listQuery.value = { ...props.row };
|
||||
if (props.row.ryList && props.row.ryList.length > 0) {
|
||||
const data = fz(props.row.ryList);
|
||||
mjData.value = data.filter((item) => item.fl == "01");
|
||||
fjData.value = data.filter((item) => item.fl == "02");
|
||||
}
|
||||
if (listQuery.value.qxList && listQuery.value.qxList.length == 0) {
|
||||
listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
|
||||
return { qxmc: item.label, qxsl: 0 };
|
||||
});
|
||||
}
|
||||
} else {
|
||||
pageType.value = "add";
|
||||
listQuery.value.qxList = props.dic.D_BZ_JYQXFL.map((item) => {
|
||||
return { qxmc: item.label, qxsl: 0 };
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
watch(
|
||||
() => props.row,
|
||||
@ -324,7 +332,7 @@ watch(
|
||||
);
|
||||
const routerList = ref({})
|
||||
onMounted(() => {
|
||||
init();
|
||||
getjyqx()
|
||||
routerList.value = route.query
|
||||
});
|
||||
// 验证规则
|
||||
@ -521,6 +529,7 @@ const chooseDataGzy = (val) => {
|
||||
margin-top: 1px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
.gapline {
|
||||
height: 1px;
|
||||
@ -585,6 +594,27 @@ const chooseDataGzy = (val) => {
|
||||
padding-left: 100px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.qx-item {
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.qx-item-inner {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.qx-name {
|
||||
min-width: 100px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.qx-input {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item--default {
|
||||
|
||||
Reference in New Issue
Block a user