maojiacai/ba_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7f6783108b5eca01c6bd666ea6a57b44c98ca2e6
ba_web/src/views/homeMy/index.vue

971 lines
26 KiB
Vue
Raw Normal View History

'保安项目提交'
2025-09-22 09:01:41 +08:00
<!--
* @Author: ZR
* @Date: 2023-11-06 09:43:52
* @LastEditTime: 2024-10-09 10:29:23
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
-->
<template>
<div class="bigScrenn">
<!-- 头部 -->
<GdMap :isShow="true" />
<Head></Head>
<div class="leftSiecle transition" :style="{ left: showClassL ? '-20px' : '442px' }"
@click="showClassL = !showClassL"></div>
<div class="asideBox transition" :style="{ left: showClassL ? '-446px' : '0px' }">
<!-- 工作情况 -->
<div class="boder-small back-color">
<WorkCondition />
</div>
<!-- 街面巡组 -->
<div class="boder-small">
<StreetGroup />
</div>
<div class="boder-small">
<Spxl />
<!-- <div class="common-title flex">
<div>视频巡逻</div>
<div class="flex">
<el-select v-model="spTwoValue" class="mr6" placeholder="Select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="spTwoValue" placeholder="Select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
<div class="comom-cnt">
<VideoPatrols></VideoPatrols>
</div> -->
</div>
</div>
<div class="search_box">
<el-input v-model="keywords" style="max-width: 600px" placeholder="请输入关键词">
<template #append>
<el-button @click="searchFn" type="primary" style="background-color: #409eff;border: none;color: #fff;">搜索</el-button>
</template>
</el-input>
</div>
<div class="rightSiecle transition" :style="{ right: showClassR ? '-20px' : '442px' }"
@click="showClassR = !showClassR"></div>
<div class="asideBox transition" :style="{ right: showClassR ? '-446px' : '0px' }">
<div class="lineOption">
<div class="option" @click="openZdXl('ck')">
<div>巡逻</div>
<div>路线</div>
</div>
<div class="option" @click="openZdXl('zd')">
<div>制定</div>
<div>路线</div>
</div>
</div>
<div class="boder-middle">
<StreetCondition />
</div>
<div class="boder-small">
<div class="common-title flex">
无人机巡逻
<el-select v-model="spTwoValue" placeholder="Select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="comom-cnt">
<DronePatrols></DronePatrols>
</div>
</div>
</div>
<div class="statisModel" :class="isShowCount ? 'showCount' : 'heddenCount'">
<CountModel />
</div>
<!-- 底部按钮 -->
<BottomBtn />
<!-- 指令时间按钮 -->
<div class="addBox transition" :style="{ right: showClassR ? '0px' : '394px' }">
<el-popover :width="481" trigger="click" placement="left" v-model:visible="showVisibleZdrw"
:append-to-body="false">
<template #reference>
<div @click="clickAddZdrw" class="imgBox">
<span>指导巡逻</span>
</div>
</template>
<div class="depBox">
关键字：
<div style="margin-left: 14px; width: 80%">
<el-input v-model="listQueryZd.keyWord" placeholder="请输入关键字"></el-input>
</div>
</div>
<div class="depBox">
是否巡逻：
<div style="width: 80%">
<el-select v-model="listQueryZd.sfxl" placeholder="请选择是否巡逻" style="width: 100%">
<el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
}}</el-option>
</el-select>
</div>
</div>
<div class="depBox">
所属部门：
<MOSTY.Department clearable width="80%" v-model="listQueryZd.ssbmdm" />
</div>
<el-radio-group v-model="selectTime_Zd" @change="changeYcTime">
<el-radio label="今日" />
<el-radio label="昨日" />
<el-radio label="本周" />
<el-radio label="本月" />
<el-radio label="近30日" />
<el-radio label="本季度" />
<el-radio label="近半年" />
<el-radio label="近一年" />
<el-radio label="自定义" />
</el-radio-group>
<div>
<el-date-picker v-model="zdTime" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" :teleported="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 95%"
:readonly="zdTime == '自定义' ? false : true" />
</div>
<CheckBox :data="zldwList" @changeData="changeDataZldrw" />
<div class="footerBtns">
<el-button @click="handleZd">上图</el-button>
<el-button @click="calcelZd('cancel')">取消</el-button>
</div>
</el-popover>
<el-popover :width="481" trigger="click" placement="left" v-model:visible="showVisible" :append-to-body="false">
<template #reference>
<div @click="clickAddEvent" class="imgBox">
<span>重点巡逻</span>
</div>
</template>
<div class="depBox">
关键字：
<div style="margin-left: 14px; width: 80%">
<el-input v-model="listQuery.keyWord" placeholder="请输入关键字"></el-input>
</div>
</div>
<div class="depBox">
是否巡逻：
<div style="width: 80%">
<el-select v-model="listQuery.sfxl" placeholder="请选择是否巡逻" style="width: 100%">
<el-option v-for="item in D_BZ_SF" :key="item" :label="item.label" :value="item.value">{{ item.label
}}</el-option>
</el-select>
</div>
</div>
<div class="depBox">
所属部门：
<MOSTY.Department clearable width="80%" v-model="listQuery.ssbmdm" />
</div>
<el-radio-group v-model="selectTime_yc" @change="changeYcTime">
<el-radio label="今日" />
<el-radio label="昨日" />
<el-radio label="本周" />
<el-radio label="本月" />
<el-radio label="近30日" />
<el-radio label="本季度" />
<el-radio label="近半年" />
<el-radio label="近一年" />
<el-radio label="自定义" />
</el-radio-group>
<div>
<el-date-picker v-model="fzycTime" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" :teleported="false" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 95%"
:readonly="selectTime_yc == '自定义' ? false : true" />
</div>
<CheckBox :data="timeList" @changeData="changeDataBC" />
<div class="footerBtns">
<el-button @click="handleFzyc">上图</el-button>
<el-button @click="calcelFzyc('cancel')">取消</el-button>
</div>
</el-popover>
<el-popover :width="226" trigger="click" placement="left" v-model:visible="showVisibleWarning"
:append-to-body="false">
<template #reference>
<div @click="showVisibleWarning = !showVisibleWarning" class="imgBox">
<span>下发指令</span>
</div>
</template>
<div class="footerBtns">
<el-button @click="clickXfzl">公安资源</el-button>
<el-button @click="clickQfqz">群防群治人员</el-button>
</div>
</el-popover>
</div>
<!-- 左边弹窗 -->
<LeftDialog :isPosition="showClassL" />
<!-- 中间边弹窗 -->
<CenterDialog />
<!-- 右边弹窗 -->
<RightDialog :isPosition="showClassR" />
<!-- 警组弹框弹框 -->
<PoliceGroupInfo v-if="show.jzgroup" :data="jzxqList" />
<!-- 下发指令 -->
<XiafaZl />
<!-- 群防群治 -->
<QFQZ />
<!-- 下发指令详情 -->
<ZlxfList />
<!-- 犯罪预测 -->
<FzycDialog v-if="show.fzyc" :data="fzycInfo" />
<!-- 选房区警情 -->
<XfqJq />
<!-- 意见收集 -->
<YjsjDialog :isShow="show.yisj" v-if="show.yisj" @closeDialog="show.yisj = false" />
// 指定路线
<ZdlxDialog :isShow="show.zdlx" v-if="show.zdlx" @closeDialog="show.zdlx = false" />
</div>
<teleport to="#app" v-if="visibleDialog">
<WarningCenter v-model="show.yjzx" v-if="show.yjzx" @closeDialog="visibleDialog = false" />
<XssbInfo v-model="show.xssb" v-if="show.xssb" @closeDialog="visibleDialog = false" />
<BbtsInfo v-model="show.bbts" v-if="show.bbts" @closeDialog="visibleDialog = false" />
<PiliceCaseCount v-model="show.jqtj" v-if="show.jqtj" @closeDialog="visibleDialog = false" />
<DwryCount v-model="show.dwryts" v-if="show.dwryts" @closeDialog="visibleDialog = false" />
</teleport>
<!-- @refresh="getList" -->
<XfrwDialog ref="xfDiloag"></XfrwDialog>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
import { timeValidate } from "@/utils/tools.js";
import { qcckGet, qcckPost } from '@/api/qcckApi'
import { ElNotification } from "element-plus";
import WarningCenter from "./modelDialog/warningCenter.vue";
import YjsjDialog from "./modelDialog/yjsjDialog.vue";
import ZdlxDialog from "./modelDialog/zdlxDialog.vue";
import XssbInfo from "./modelDialog/xssbInfo.vue";
import BbtsInfo from "./modelDialog/bbtsInfo.vue";
import PiliceCaseCount from "./modelDialog/piliceCaseCount.vue";
import DwryCount from "./modelDialog/dwryCount.vue";
import { queryListfzyc, queryListZdrw, tbYsSxtList, getSelectVigilant } from "@/api/dpApi/home.js";
import { getRecentDay, getThistWeekDare } from "@/utils/tools.js";
import * as MOSTY from "@/components/MyComponents/index";
import emitter from "@/utils/eventBus.js";
import GdMap from "@/components/GdMap/index.vue";
import Head from "./layout/head.vue";
import CheckBox from "@/components/checkBox/index";
import XiafaZl from "./components/dialog/xiafaZl.vue";
import QFQZ from "./components/dialog/qfqz.vue";
import ZlxfList from "./components/dialog/zlxfList.vue";
import XfqJq from "./components/xfqJq/index.vue";
import WorkCondition from "./layout/workCondition.vue";
import Spxl from "./layout/spxl.vue";
import StreetGroup from "./layout/streetGroup.vue";
import StreetCondition from "./layout/streetCondition.vue";
import CountModel from "./layout/statisticsModel.vue";
import LeftDialog from "./components/leftDialog.vue";
import CenterDialog from "./components/centerDialog.vue";
import RightDialog from "./components/rightDialog.vue";
import BottomBtn from "./layout/bottomBtn.vue";
import PoliceGroupInfo from "./layout/streetInfo.vue";
import FzycDialog from "./layout/fzycDialog.vue";
// import { queryListZdrw } from '@/api/dpApi/home'
lcw
2025-09-26 12:56:52 +08:00
// import XfrwDialog from '@/views/backOfficeSystem/AlarmLinkage/PatrolLine/components/xfrwDialog.vue'
'保安项目提交'
2025-09-22 09:01:41 +08:00
import {
onMounted,
ref,
onUnmounted,
watch,
getCurrentInstance,
reactive
} from "vue";
const visibleDialog = ref(false);
const keywords = ref("")
const show = reactive({
yjzx: false,
jqtj: false,
bbts: false, //群访信息
xssb: false, //线索上报
dwryts: false, //单位人员统计
yisj: false, //意见收集
fzyc: false, //犯罪预测
zdlx: false, //制定路线
jzgroup: false //展示警组弹窗
});
const showVisibleZdrw = ref(false);
const showVisibleWarning = ref(false);
const { proxy } = getCurrentInstance();
const { D_BZ_SF, D_BZ_SD } = proxy.$dict("D_BZ_SF", "D_BZ_SD");
const showVisible = ref(false);
const selectTime_yc = ref("今日"); //犯罪预测时间类型
const selectTime_Zd = ref("今日"); //犯罪预测时间类型
const listQuery = ref({});
const listQueryZd = ref({});
const fzycTime = ref([getRecentDay(0), getRecentDay(0)]);
const zdTime = ref([getRecentDay(0), getRecentDay(0)]);
const circleList = ref([]);
const showClassL = ref(false); //左列折叠
const showClassR = ref(false); //右列折叠
const jzxqList = ref({}); //警组列表详情
const fzycInfo = ref({}); //犯罪预测
const spvalue = ref("Option1");
const spTwoValue = ref("Option1");
const options = ref([
{
value: "Option1",
label: "Option1"
},
{
value: "Option2",
label: "Option2"
},
{
value: "Option3",
label: "Option3"
},
{
value: "Option4",
label: "Option4"
},
{
value: "Option5",
label: "Option5"
}
]);
const timeList = ref({
list: [
"09:00-13:00",
"13:00-17:00",
"17:00-21:00",
"21:00-01:00",
"01:00-09:00"
],
hasChoose: []
});
const condition = ref()
const zldwList = reactive({
list: [],
hasChoose: []
});
const isShowCount = ref(false); //是否展示统计
watch(
() => showClassR.value,
(val) => {
emitter.emit("followUp", !val);
}
);
watch(
() => D_BZ_SD,
(val) => {
zldwList.list = val.value.map((v) => {
return v.label;
});
},
{ immediate: true, deep: true }
);
onMounted(() => {
window.openTk = openTk;
getListData();
// 融合通迅
let idEntityCard = window.localStorage.getItem("idEntityCard");
let sfrh = window.localStorage.getItem("SFRH");
if (sfrh == 1 && idEntityCard) {
try {
SPPUC.init(
idEntityCard,
"",
function () { },
function (device_id, type, [lng, lat, speed]) { }
);
} catch { }
}
// 展示犯罪预测
emitter.on("showFzycInfo", (res) => {
show.fzyc = res.type ? true : false;
fzycInfo.value = res.info;
});
// 展示警组
emitter.on("showJzInfo", (res) => {
show.jzgroup = res ? true : false;
if (res) {
res.txzb =
typeof res.txzb == "string"
? JSON.parse(res.txzb)
: res.txzb
? res.txzb
: [];
res.pbmj =
typeof res.pbmj == "string"
? JSON.parse(res.pbmj)
: res.pbmj
? res.pbmj
: [];
res.pbfj =
typeof res.pbfj == "string"
? JSON.parse(res.pbfj)
: res.pbfj
? res.pbfj
: [];
res.jyqx =
typeof res.jyqx == "string"
? JSON.parse(res.jyqx)
: res.jyqx
? res.jyqx
: [];
res.pbcl =
typeof res.pbcl == "string"
? JSON.parse(res.pbcl)
: res.pbcl
? res.pbcl
: [];
jzxqList.value = res;
jzxqList.value.openJyqx = [];
jzxqList.value.openTxzb = [];
}
if (!show.jzgroup) {
emitter.emit("deleteText"); //清除巡防区文字
emitter.emit("deletePointArea", "xfq"); //清除巡防区
}
});
//获取条件
emitter.on("conditions", (val) => {
condition.value = val
});
emitter.on("showWarning", (val) => {
visibleDialog.value = true;
switch (val) {
case "YJZX": //预警中心
show.yjzx = true;
break;
case "JQTJ": //警情统计
show.jqtj = true;
break;
case "QFXS": //群防线索
show.xssb = true;
break;
case "BBTS": //报备提示
show.bbts = true;
break;
case "DWRYTJ": //单位人员统计
show.dwryts = true;
break;
case "YJSJ": //意见收集
show.yisj = true;
break;
}
});
// 线索上报 推送播放
emitter.on("socketXSSB", (val) => {
val.tp = val.tp ? val.tp.split(",") : [];
let html = `
<div class="newCard">
<div class="title two_text_detail">${val.nr}</div>
<div class="text">
上报人：<span class="info">${val.xm}（ ${val.lxdh} ）</span></span>
</div>
<div class="text">
线索上报类型：<span class="info">${val.lxmc}</span></span>
</div>
<div class="text">图片：`;
val.tp.forEach((it) => {
lcw
2025-09-26 12:56:52 +08:00
html += `<img style="width:60px; height:60px; margin-left:2px;" src="/bagl/mosty-base/minio/image/download/${it}" />`;
'保安项目提交'
2025-09-22 09:01:41 +08:00
});
html += ` </div></div>`;
ElNotification({
type: "warning",
title: "线索上报",
showClose: true,
dangerouslyUseHTMLString: true,
position: "bottom-right",
message: html
}); //消息推送
});
});
const openTk = (id) => {
let obj = circleList.value.find((item) => {
return item.id == id;
});
if (obj) emitter.emit("showAj", [obj]);
};
// 搜索
const searchFn = () => {
emitter.emit("deletePointArea", "search_bxd");
emitter.emit("removeAll", "search_bxx");
qcckGet({ keyword: keywords.value }, "/mosty-jmxf/jbldBxx/getBxxByKeyWord").then(res => {
let lis = res || []
let coords = []
let bxd = []
lis.forEach(v => {
let obj = { coords: [v.zb], text: v.bxxMc }
let zbd= v.bxds?v.bxds.map(item => {
return {
jd: item.jd,
wd: item.wd,
bxdMc:item.bxdMc,
icon: item.sfdk == '0' || item.sfdk==null ? require("@/assets/point/zsdw.png") : require("@/assets/point/ydk.png")
}
}):[]
bxd = [...bxd, ...zbd]
coords.push(obj)
})
emitter.emit("echoLine", { coords, width: 4, flag: "search_bxx", type: 'dash', isclear: true, color: '#ff0000' });
handlePoint(bxd, "", "search_bxd", 0.6, '#FF0000');
})
}
// 获取列表
function getListData() {
// , zdjqtjlx: "03", czzt: "0,1"
let data = { pageSize: 1000, pageNum: 1 };
getSelectVigilant(data).then((res) => {
circleList.value = res.records;
for (let i = 0; i < res.records.length; i++) {
const el = res.records[i];
emitter.emit("SsCircle", el);
let { jd, wd } = el;
emitter.emit("addPointArea", {
coords: [{ jd, wd }],
icon: require("@/assets/point/sos.png"),
flag: "sosPoint"
});
}
});
}
//点击下发指令
function clickXfzl() {
emitter.emit("removePlot", "quanXuan");
emitter.emit("deletePointArea", "centerpoint");
emitter.emit("closeAllDialog");
emitter.emit("showZlxf");
}
//点击群防群治
function clickQfqz() {
emitter.emit("removePlot", "quanXuan");
emitter.emit("deletePointArea", "centerpoint");
emitter.emit("closeAllDialog");
emitter.emit("showQfqz");
}
//点击犯罪预测
function clickAddEvent() {
showVisible.value = !showVisible.value;
if (!showVisible.value) calcelFzyc("");
}
//点击指导任务
function clickAddZdrw() {
showVisibleZdrw.value = !showVisibleZdrw.value;
if (!showVisibleZdrw.value) calcelZd("");
}
// 犯罪预测时间选择
function changeYcTime(val) {
let time = [];
switch (val) {
case "今日":
time = [getRecentDay(0), getRecentDay(0)];
break;
case "昨日":
time = [getRecentDay(-1), getRecentDay(-1)];
break;
case "本周":
time = getThistWeekDare("week");
break;
case "本月":
time = getThistWeekDare("month");
break;
case "近30日":
time = [getRecentDay(-30), getRecentDay(0)];
break;
case "本季度":
time = getThistWeekDare("quarter");
break;
case "近半年":
time = [getRecentDay(-181), getRecentDay(0)];
break;
case "近一年":
time = [getRecentDay(-365), getRecentDay(0)];
break;
}
fzycTime.value = time;
}
// 取消犯罪预测
function calcelFzyc(val) {
fzycTime.value = [getRecentDay(0), getRecentDay(0)];
listQuery.value = { ssbmdm: "" };
selectTime_yc.value = "今日";
showVisible.value = false;
timeList.value.hasChoose = [];
}
// 取消犯罪预测
function calcelZd(val) {
zdTime.value = [getRecentDay(0), getRecentDay(0)];
listQueryZd.value = { ssbmdm: "" };
selectTime_Zd.value = "今日";
showVisibleZdrw.value = false;
zldwList.hasChoose = [];
}
// 选择班次
function changeDataBC(val) {
timeList.value.hasChoose = val;
}
// 选择指导任务
function changeDataZldrw(val) {
zldwList.hasChoose = val;
}
// 指导巡逻
function handleZd() {
emitter.emit("deletePointArea", "zdxl_zdrw");
let list = D_BZ_SD.value.filter((v) => {
if (zldwList.hasChoose.includes(v.label)) return v;
});
let params = {
...listQueryZd.value,
sdList: list.map((v) => {
return v.value;
}),
kssj: zdTime.value[0],
jssj: zdTime.value[1]
};
queryListZdrw(params).then((res) => {
if (res.length == 0) return false;
let cc = [];
let list = res.map((el, index) => {
let centerPoint = [el.zxX, el.zxY];
if (index == 0) cc = centerPoint;
let position = [
[Number(el.x1), Number(el.y1)],
[Number(el.x2), Number(el.y2)]
];
let text = el.dz + " " + el.xfsd;
let obj = {
position: position,
text,
id: el.id,
userData: el,
sfxl: el.sfxl
};
return obj;
});
let arr1 = list.filter((v) => {
return v.sfxl == 1;
});
let arr2 = list.filter((v) => {
return v.sfxl != 1;
});
let params1 = {
fontColor: "#b51209",
coords: arr2,
type: "rectangle",
flag: "zdxl_zdrw",
color: "rgba(255,255,0,0.5)",
linecolor: "#f51616"
};
let params2 = {
fontColor: "#b51209",
coords: arr1,
type: "rectangle",
flag: "zdxl_zdrw",
color: "rgba(255,255,0,0.5)",
linecolor: "#1C97FF"
};
emitter.emit("echoPlane", params1);
emitter.emit("echoPlane", params2);
emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
});
}
// 犯罪预测
function handleFzyc() {
emitter.emit("deletePointArea", "zdxl_fzyc");
let list = timeList.value.hasChoose.map((item) => {
return item.slice(0, 2) + item.slice(5, 8);
});
let params = {
...listQuery.value,
bcList: list,
kssj: fzycTime.value[0],
jssj: fzycTime.value[1]
};
queryListfzyc(params).then((res) => {
if (res.length == 0) return false;
let cc = [];
let list = res.map((el, index) => {
let centerPoint = [el.zxX, el.zxY];
if (index == 0) cc = centerPoint;
let position = [
[Number(el.x1), Number(el.y1)],
[Number(el.x2), Number(el.y2)]
];
let text = el.realDate + " " + el.bc;
let obj = {
position: position,
text,
id: el.id,
userData: el,
sfxl: el.sfxl
};
return obj;
});
let arr1 = list.filter((v) => {
return v.sfxl == 1;
});
let arr2 = list.filter((v) => {
return v.sfxl != 1;
});
let params1 = {
fontColor: "#12fdb8",
coords: arr2,
type: "rectangle",
flag: "zdxl_fzyc",
color: "rgba(2,20,51,0.5)",
linecolor: "#f51616"
};
let params2 = {
fontColor: "#12fdb8",
coords: arr1,
type: "rectangle",
flag: "zdxl_fzyc",
color: "rgba(2,20,51,0.5)",
linecolor: "#1C97FF"
};
emitter.emit("echoPlane", params1);
emitter.emit("echoPlane", params2);
emitter.emit("setMapCenter", { location: cc, zoomLevel: 14 });
});
}
const xfDiloag = ref(false)
//打开定制路线
const openZdXl = (val) => {
if (val == 'zd') {
show.zdlx = true;
} else {
emitter.emit("openZdXl", { show: true, type: 'ck' });
}
};
// 处理撒点
function handlePoint(arr, icon, flag, scale, fontColor) {
let list = arr.filter((item) => {
item.identification = flag;
return item.jd && item.wd;
});
if (list.length > 0) emitter.emit("addPointArea", { coords: list, icon: icon, flag: flag, scale, fontColor,showTitle:true });
}
onUnmounted(() => {
emitter.off("showWarning");
});
</script>
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
// 中间统计数据
.statisModel {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
}
.Rank {
left: 500px;
position: absolute;
z-index: 999;
color: #010f30;
font-size: 20px;
top: 100px;
left: 390px;
cursor: pointer;
}
.showCount {
width: 1100px;
height: 90px;
transition: height 1s;
-webkit-transition: height 1s;
}
.heddenCount {
width: 1100px;
height: 0px;
transition: height 1s;
-webkit-transition: height 1s;
}
.transition {
transition: all 0.5s;
}
.lineOption {
position: absolute;
z-index: 99;
bottom: 100px;
left: -100px;
.option {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
background: url('~@/assets/images/quan.png') no-repeat center center;
background-size: 100% 100%;
width: 80px;
margin-bottom: 10px;
margin: auto;
height: 80px;
border-radius: 50%;
margin: auto 0;
color: #0f6cd4;
div {
width: 99%;
text-align: center;
}
}
}
.depBox {
display: flex;
align-items: center;
color: #00bfff;
margin-bottom: 10px;
}
.addBox {
color: #fff;
::v-deep .el-radio {
width: 74px;
margin-right: 15px;
color: #fff;
}
}
.footerBtns {
margin-top: 10px;
text-align: center;
}
::v-deep .el-input__inner {
background-color: transparent;
border: 1px solid #224ab5;
// color: #fff;
margin-right: 10px;
}
::v-deep .el-range-editor .el-range-input {
background: transparent;
// color: #fff;
}
::v-deep .el-date-editor .el-range-separator {
color: #fff;
}
::v-deep .el-checkbox {
color: #fff;
}
::v-deep .el-popper.is-light {
background: #00314e;
border: 1px solid #00314e;
}
::v-deep .el-popper.is-light .el-popper__arrow::before {
background: #00314e;
}
.common-title {
padding: 0 10px 0 54px;
box-sizing: border-box;
font-size: 22px;
font-family: "YSBTH";
background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
-webkit-background-clip: text;
justify-content: space-between;
}
.comom-cnt {
height: calc(100% - 30px);
padding: 4px 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
min-height: 0;
}
::v-deep .el-select .el-input__inner {
// width: 100px;
height: 30px;
// background: #061628;
// background: url("~@/assets/images/streetBi/xzk.png") no-repeat center center;
background-size: 100% 100%;
// border: 1px solid #0072ff;
border-radius: 2px;
// color: #fff !important;
}
.search_box {
position: absolute;
top: 90px;
left: 448px;
z-index: 99;
::v-deep .el-input__inner {
color: #606266 !important;
width: 20vw;
margin-right: 0;
}
}
</style>
<style>
.el-notification {
background: #052955;
border: 1px solid #ff0526;
box-shadow: inset 0 0 10px #ff0526;
}
.el-notification__content,
.el-notification__title {
color: #fff;
}
.newCard {
line-height: 20px;
font-size: 14px;
background: #052955;
}
.newCard .text {
font-size: 12px;
color: #6585af;
}
.newCard .text span {
color: #0093ed;
}
.newCard .picture {
display: flex;
}
.newCard .picture .pictureLeft {
width: 60px;
height: 60px;
margin-right: 2px;
}
.el-notification.right {
right: 410px;
}
.el-notification .el-notification--warning {
color: #ff0526;
}
.el-notification .el-notification__closeBtn {
color: #fff;
top: 4px;
right: 4px;
}
</style>
Reference in New Issue Copy Permalink