From 0397e2fb15fbccc77d6da16196d30ae54114aa2f Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 06 Sep 2021 16:52:47 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/zhba_regulatory
---
src/views/home/index.scss | 49
src/views/home/index_1600_900.scss | 698 ++++++++++++++
src/views/map/carGps.vue | 13
src/views/home/index.vue | 128 +-
vue.config.js | 6
public/carVideo/children1.html | 503 ++++++++++
src/views/home/index_1280_1024.scss | 699 ++++++++++++++
public/carVideo/children.html | 17
src/components/map/main.vue | 14
src/views/securityUnitOperation/economicAnalysis.vue | 65 +
src/views/securityUnitOperation/operationAnalysis.vue | 345 +++++-
public/carVideo/parent.html | 323 +++---
12 files changed, 2,511 insertions(+), 349 deletions(-)
diff --git a/public/carVideo/children.html b/public/carVideo/children.html
index 4ed36a9..00bb9e4 100644
--- a/public/carVideo/children.html
+++ b/public/carVideo/children.html
@@ -110,10 +110,10 @@
<textarea id="initParam" type="text" style="width:260px;height:200px;">
{
"argument": {
- "appkey": "26589653",
- "ip": "61.131.136.18",
- "port": 10443,
- "secret": "hSzZW0VHfyHgJziMemOx",
+ "appkey": "26864254",
+ "ip": "47.49.21.159",
+ "port": 443,
+ "secret": "oC2JAzu6PH5OqqcbGQCy",
"enableHTTPS": 1,
"layout": "1x1",
"playMode": 0
@@ -136,7 +136,7 @@
<textarea id="playParam" type="text" style="width:260px;height:200px;">
{
"argument": {
- "cameraIndexCode": "1f792961883543c6868cc8b200291962",
+ "cameraIndexCode": "36015602001310925219",
"ezvizDirect": 0,
"gpuMode": 0,
"streamMode": 0,
@@ -386,7 +386,12 @@
});
}
- initPlugin();
+ function close() {
+ if (oWebControl != null) {
+ oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+ oWebControl.JS_Disconnect().then(function () { }, function () { });
+ }
+ }
// 获取公钥
diff --git a/public/carVideo/children1.html b/public/carVideo/children1.html
new file mode 100644
index 0000000..4ed36a9
--- /dev/null
+++ b/public/carVideo/children1.html
@@ -0,0 +1,503 @@
+<!doctype html>
+<html>
+
+<head>
+ <title>预览Demo</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta http-equiv="Pragma" content="no-cache" />
+ <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
+ <meta http-equiv="Expires" content="0" />
+</head>
+<style>
+ html,
+ body {
+ padding: 0;
+ margin: 0;
+ }
+
+ .playWnd {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ margin: auto;
+ width: 800px;
+ height: 400px;
+ color: #fff;
+ }
+
+ .cbInfoDiv {
+ float: left;
+ width: 360px;
+ margin-left: 16px;
+ border: 1px solid #7F9DB9;
+ }
+
+ .cbInfo {
+ height: 200px;
+ padding: 5px;
+ border: 1px solid #7F9DB9;
+ word-break: break-all;
+ overflow: scroll／auto;
+ }
+
+ .operate {
+ margin-top: 24px;
+ display: none;
+ }
+
+ .operate::after {
+ content: '';
+ display: block;
+ clear: both;
+ }
+
+ .operate .btns {
+ height: 32px;
+ }
+
+ .module {
+ float: left;
+ width: 120px;
+ min-height: 290px;
+ margin-left: 10px;
+ padding: 16px 8px;
+ box-sizing: border-box;
+ border: 1px solid #e5e5e5;
+ }
+
+ .module .item {
+ margin-bottom: 4px;
+ }
+
+ .module .label {
+ width: 150px;
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 8px;
+ text-align: right;
+ }
+
+ .module input[type="text"],
+ .module select {
+ box-sizing: border-box;
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 0;
+ width: 150px;
+ min-height: 20px;
+ }
+
+ .module .btn {
+ min-width: 80px;
+ min-height: 24px;
+ margin-top: 16px;
+ margin-left: 158px;
+ }
+</style>
+
+<body>
+ <div id="playWnd" class="playWnd"></div>
+ <div id="operate" class="operate">
+ <!--初始化、反初始化、设置认证信息接口调用入口。
+ 1.插件所有接口都需要在调用初始化并返回成功后才能调用
+ 2.设置认证信息仅适用于对接多平台时的情况，具体参照开发指南
+ 3.反初始化后，插件资源销毁-->
+ <div class="module" style="left:30px;height:30px;width:280px;padding:10;margin:10;">
+ <div class="item">
+ <label>初始化相关参数：</label>
+ <textarea id="initParam" type="text" style="width:260px;height:200px;">
+ {
+ "argument": {
+ "appkey": "26589653",
+ "ip": "61.131.136.18",
+ "port": 10443,
+ "secret": "hSzZW0VHfyHgJziMemOx",
+ "enableHTTPS": 1,
+ "layout": "1x1",
+ "playMode": 0
+ },
+ "funcName": "init"
+ }
+ </textarea>
+ </div>
+ <div class="item">
+
+ <button style="width:10px;padding:0;margin:0;" id="initBtn" class="btn">执行</button>
+ </div>
+ </div>
+
+ <!--单个点位播放、批量点位播放、批量停止播放、全部停止播放接口调用入口。
+ 1.authUuid为对接多平台时必须的播放字段，对接单平台时，可不指定-->
+ <div class="module" style="height:30;width:280px;padding:10;margin:10;">
+ <div class="item">
+ <label>播放相关参数：</label>
+ <textarea id="playParam" type="text" style="width:260px;height:200px;">
+ {
+ "argument": {
+ "cameraIndexCode": "1f792961883543c6868cc8b200291962",
+ "ezvizDirect": 0,
+ "gpuMode": 0,
+ "streamMode": 0,
+ "transMode": 1,
+ "wndId": -1
+ },
+ "funcName": "startPreview"
+ }
+ </textarea>
+ </div>
+ <div class="item">
+
+ <button style="width:10px;padding:0;margin:0;" id="playBtn" class="btn">执行</button>
+ </div>
+ </div>
+ <div class="module" style="height:50;width:300px;padding:10;margin:10;">
+ <legend>返回值信息</legend>
+ <div id="cbInfo" class="cbInfo"></div>
+ <button style="width:80px;height:24px;padding:30;margin:0;" id="clear">清空</button>
+ </div>
+ </div>
+</body>
+<script src="jquery-1.12.4.min.js"></script>
+<script src="jsencrypt.min.js"></script>
+<script src="jsWebControl-1.0.0.min.js"></script>
+
+<script type="text/javascript">
+ // 插件对象实例，初始化为null，需要创建多个插件窗口时，需要定义多个插件对象实例变量，各个变量唯一标志对应的插件实例
+ var oWebControl = null;
+ var bIE = (!!window.ActiveXObject || 'ActiveXObject' in window); // 是否为IE浏览器
+ var pubKey = ''; // demo中未使用加密，可根据需求参照开发指南自行使用加密功能
+ var initCount = 0; // 异常重启计数
+ var iframePos = {}; // iframe相对文档的位置
+ var parentTitle = ''; // 父页面标题
+ var iframeClientPos = null; // iframe相对视窗的位置
+ var iframeParentShowSize = null; // 视窗大小 width height
+
+ // 标签关闭
+ $(window).unload(function () {
+ if (oWebControl != null) {
+ oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+ oWebControl.JS_Disconnect().then(function () { }, function () { });
+ }
+ });
+
+ // 步骤1：监听父页面的消息
+ window.addEventListener('message', function (e) {
+ if (e && e.data) {
+ console.log(e.data.action, 9595);
+
+ switch (e.data.action) {
+
+ case 'sendTitle': // 父页面将其标题发送过来，子页面保存该标题，以便创建插件窗口成功后将标题设置回给父页面
+ parentTitle = e.data.info;
+ break;
+ case 'updatePos': // 更新插件位置：JS_CreateWnd时需要父页面计算滚动条偏移量，初始偏移量叠加该偏移量作为iframe的偏移量，防止插件窗口与DIV窗口初始不贴合情况
+ var scrollValue = e.data.scrollValue; // 滚动条滚动偏移量
+
+ console.log(iframePos, scrollValue, iframePos.left + scrollValue.left, iframePos.top + scrollValue.top)
+
+ oWebControl.JS_SetDocOffset({
+ top: 240,
+ left: 410,
+ }); // 更新插件窗口位置
+
+ oWebControl.JS_Resize(800, 400);
+ setWndCover();
+ break;
+ case 'updateInitParam':
+ iframePos = e.data.iframeOffset; // iframe与文档的偏移量
+ iframeClientPos = e.data.iframeClientPos; // iframe相对视窗的位置
+ iframeParentShowSize = e.data.showSize; // 视窗大小
+ break;
+ case 'resize':
+ iframeParentShowSize = e.data.showSize; // 视窗大小
+ iframePos = e.data.iframeOffset; // iframe与文档的偏移量
+ iframeClientPos = e.data.iframeClientPos; // iframe相对视窗的位置
+ setWndCover();
+ break;
+ case 'scroll':
+ iframeParentShowSize = e.data.showSize; // 视窗大小
+ iframePos = e.data.iframeOffset; // iframe与文档的偏移量
+ iframeClientPos = e.data.iframeClientPos; // iframe相对视窗的位置
+ var scrollValue = e.data.scrollValue; // 滚动条滚动偏移量
+ if (oWebControl) {
+ oWebControl.JS_SetDocOffset({
+ left: iframePos.left + scrollValue.left,
+ top: iframePos.top + scrollValue.top
+ }); // 更新插件窗口位置
+ oWebControl.JS_Resize(800, 400);
+ setWndCover();
+ }
+ break;
+ default:
+ break;
+ }
+ }
+ });
+
+ // 顶部：iframe.getBoundingClientRect().top小于0并且其绝对值超过DIV.get(0).getBoundingClientRect().top部分需要剪切
+ // 底部：(iframe.getBoundingClientRect().bottom - iframe父窗口可视域高度，为H1)为不可见部分
+ // ($(window).height() - DIV.get(0).getBoundingClientRect().bottom)
+ // 为DIV底部与其所在iframe底部之间的距离H2，H1-H2的值大于0则表示DIV有部分在不可见区域
+ // 左边：iframe.getBoundingClientRect().left小于0并且其绝对值超过DIV.get(0).getBoundingClientRect().left部分需要剪切
+ // 右边：(iframe宽度 - DIV.get(0).getBoundingClientRect().right表示DIV右边与其父iframe右边之间的距离，为W1)
+ // (iframe父窗口可视域宽度-iframe.getBoundingClientRect().left表示iframe左边与iframe父窗口可视域右边之间的距离，为W2)
+ // (iframe宽度 - W2 - W1)如果大于0，则表示DIV右边超出了iframe父窗口可视域，需要剪切超过的部分
+ function setWndCover() {
+ if (oWebControl) {
+ // 准备要用到的一些数据
+ var iframeWndHeight = $(window).height(); // iframe窗口高度
+ var iframeWndWidth = $(window).width(); // iframe窗口宽度
+ var divLeft = $("#playWnd").get(0).getBoundingClientRect().left;
+ var divTop = $("#playWnd").get(0).getBoundingClientRect().top;
+
+
+
+
+ var divRight = $("#playWnd").get(0).getBoundingClientRect().right;
+ var divBottom = $("#playWnd").get(0).getBoundingClientRect().bottom;
+
+
+ var divWidth = $("#playWnd").width();
+ var divHeight = $("#playWnd").height();
+
+ // divLeft = (divLeft > 800 || divLeft == 0) ? 800 : divLeft;
+
+ // divTop = (divTop > 400 || divTop == 0) ? 400 : divTop;
+
+ // divRight = (divRight > 800 || divRight == 0) ? 800 : divRight;
+
+ // divBottom = (divBottom > 400 || divBottom == 0) ? 400 : divBottom;
+
+
+ console.log(iframeWndHeight, iframeWndWidth, divLeft, divTop, divRight, divBottom, divWidth, divHeight, 548)
+
+ oWebControl.JS_RepairPartWindow(0, 0, 801, 401); // 多1个像素点防止还原后边界缺失一个像素条
+
+ // 判断剪切矩形的上边距
+ if (iframeClientPos.top < 0 && Math.abs(iframeClientPos.top) > divTop) {
+ var deltaTop = Math.abs(iframeClientPos.top) - divTop;
+ oWebControl.JS_CuttingPartWindow(0, 0, 801, deltaTop + 1);
+ //console.log({deltaTop: deltaTop});
+ }
+
+ // 判断剪切矩形的左边距
+ if (iframeClientPos.left < 0 && Math.abs(iframeClientPos.left) > divLeft) {
+ var deltaLeft = Math.abs(iframeClientPos.left) - divLeft;
+ //console.log({deltaLeft: deltaLeft});
+ oWebControl.JS_CuttingPartWindow(0, 0, deltaLeft, 401); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
+ }
+
+ // 判断剪切矩形的右边距
+ var W1 = iframeWndWidth - divRight;
+ var W2 = iframeParentShowSize.width - iframeClientPos.left;
+ if (W2 < divWidth) {
+ var deltaRight = iframeWndWidth - W2 - W1;
+ if (deltaRight > 0) {
+ oWebControl.JS_CuttingPartWindow(800 - deltaRight, 0, deltaRight + 1, 401);
+ }
+ }
+
+ // 判断剪切矩形的下边距
+ var H1 = iframeClientPos.bottom - iframeParentShowSize.height;
+ var H2 = iframeWndHeight - divBottom;
+ var deltaBottom = H1 - H2;
+ //console.log({deltaBottom: deltaBottom});
+ if (deltaBottom > 0) {
+ oWebControl.JS_CuttingPartWindow(0, 400 - deltaBottom, 801, deltaBottom + 1);
+ }
+ }
+ }
+
+ // 创建插件实例，并启动本地服务建立websocket连接，创建插件窗口
+ function initPlugin() {
+ oWebControl = new WebControl({
+ szPluginContainer: "playWnd",
+ iServicePortStart: 15900,
+ iServicePortEnd: 15909,
+ szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
+ cbConnectSuccess: function () {
+ initCount = 0;
+ setCallbacks();
+ oWebControl.JS_StartService("window", {
+ dllPath: "./VideoPluginConnect.dll"
+ }).then(function () {
+ // 步骤2：JS_CreateWnd时指定cbSetDocTitle回调，并在回调中向父页面发送更新标题消息，标题为回调出来的uuid
+ oWebControl.JS_CreateWnd("playWnd", 800, 400, {
+ cbSetDocTitle: function (uuid) {
+ oWebControl._pendBg = false;
+ window.parent.postMessage({
+ action: 'updateTitle',
+ msg: '子页面通知父页面修改title',
+ info: uuid
+ }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
+ }
+ }).then(function () {
+ // 步骤3：JS_CreateWnd成功后通知父页面将其标题修改回去
+ console.log("JS_CreateWnd success");
+ window.parent.postMessage({
+ action: 'updateTitle',
+ msg: '子页面通知父页面更新title',
+ info: parentTitle
+ }, '\*');
+
+ // 步骤4：发消息更新插件窗口位置：这里不直接更新的原因是，父页面默认可能就存在滚动条，此时有滚动量
+ window.parent.postMessage({
+ action: 'updatePos',
+ msg: '更新Pos'
+ }, '\*');
+
+ initBtnClicked();
+
+ setTimeout(function () {
+ $("#playBtn").trigger('click');
+ }, 3000)
+ });
+ }, function () {
+ console.log("JS_CreateWnd fail");
+ });
+ },
+ cbConnectError: function () {
+ console.log("cbConnectError");
+ oWebControl = null;
+ $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
+ WebControl.JS_WakeUp("VideoWebPlugin://");
+ initCount++;
+ if (initCount < 3) {
+ setTimeout(function () {
+ initPlugin();
+ }, 3000)
+ } else {
+ $("#playWnd").html("插件启动失败，请检查插件是否安装！<a href='./VideoWebPlugin.exe' target='_blank' style='color: var(--mcblue)'>点击下载</a>");
+ }
+ },
+ cbConnectClose: function (bNormalClose) {
+ // 异常断开：bNormalClose = false
+ // JS_Disconnect正常断开：bNormalClose = true
+ if (true == bNormalClose) {
+ console.log("cbConnectClose normal");
+ } else {
+ console.log("cbConnectClose exception");
+ }
+
+ oWebControl = null;
+ }
+ });
+ }
+
+ initPlugin();
+
+
+ // 获取公钥
+ function getPubKey(callback) {
+ oWebControl.JS_RequestInterface({
+ funcName: "getRSAPubKey",
+ argument: JSON.stringify({
+ keyLength: 1024
+ })
+ }).then(function (oData) {
+ console.log(oData)
+ if (oData.responseMsg.data) {
+ pubKey = oData.responseMsg.data
+ callback()
+ }
+ })
+ }
+
+ // 设置窗口控制回调
+ function setCallbacks() {
+ oWebControl.JS_SetWindowControlCallback({
+ cbIntegrationCallBack: cbIntegrationCallBack
+ });
+ }
+
+ // 推送消息
+ function cbIntegrationCallBack(oData) {
+ showCBInfo(JSON.stringify(oData.responseMsg));
+ }
+
+ // RSA加密
+ function setEncrypt(value) {
+ var encrypt = new JSEncrypt();
+ encrypt.setPublicKey(pubKey);
+ return encrypt.encrypt(value);
+ }
+
+ function requestInterface(value) {
+ oWebControl.JS_RequestInterface(JSON.parse(value)).then(function (oData) {
+ console.log(oData)
+ showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
+ });
+ }
+
+ // 显示接口返回的消息及插件回调信息
+ function showCBInfo(szInfo, type) {
+ if (type === 'error') {
+ szInfo = "<div style='color: red;'>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo +
+ "</div>";
+ } else {
+ szInfo = "<div>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
+ }
+ $("#cbInfo").html(szInfo + $("#cbInfo").html());
+
+
+
+ }
+
+ function initBtnClicked() {
+ var param = $("#initParam").val();
+ //删除字符串中的回车换行
+ param = param.replace(/(\s*)/g, "");
+
+ // 执行初始化
+ requestInterface(param);
+ }
+
+ $("#initBtn").click(function () {
+ initBtnClicked();
+ })
+
+ // $('#initBtn').trigger("click");
+
+ $("#playBtn").click(function () {
+ var param = $("#playParam").val();
+ //删除字符串中的回车换行
+ param = param.replace(/(\s*)/g, "");
+
+ console.log(param, 232323)
+
+ // 执行预览
+ requestInterface(param);
+ })
+
+ // 清空
+ $("#clear").click(function () {
+ $("#cbInfo").html('');
+ })
+
+ // 格式化时间
+ function dateFormat(oDate, fmt) {
+ var o = {
+ "M+": oDate.getMonth() + 1, //月份
+ "d+": oDate.getDate(), //日
+ "h+": oDate.getHours(), //小时
+ "m+": oDate.getMinutes(), //分
+ "s+": oDate.getSeconds(), //秒
+ "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
+ "S": oDate.getMilliseconds() //毫秒
+ };
+ if (/(y+)/.test(fmt)) {
+ fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
+ }
+ for (var k in o) {
+ if (new RegExp("(" + k + ")").test(fmt)) {
+ fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k])
+ .length)));
+ }
+ }
+ return fmt;
+ }
+</script>
+
+</html>
diff --git a/public/carVideo/parent.html b/public/carVideo/parent.html
index 4283c32..ccfe324 100644
--- a/public/carVideo/parent.html
+++ b/public/carVideo/parent.html
@@ -2,31 +2,30 @@
<html>
<head>
- <title>Window Demo</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta http-equiv="Pragma" content="no-cache" />
- <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
- <meta http-equiv="Expires" content="0" />
+ <title>Window Demo</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta http-equiv="Pragma" content="no-cache" />
+ <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
+ <meta http-equiv="Expires" content="0" />
</head>
<style>
- html,
- body {
- padding: 0;
- margin: 0;
- width: 100%;
- height: 100%;
- }
+ html,
+ body {
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ }
- .iframe {
- width: 100%;
- height: 100%;
- }
+ .iframe {
+ width: 100%;
+ height: 100%;
+ }
</style>
<body>
- <!-- 步骤1：src指定待嵌入的子页面，scrolling指定no禁用滚动条 -->
- <iframe id="iframe1" class="iframe" src="children.html" scrolling="no"
- frameborder="0"></iframe>
+ <!-- 步骤1：src指定待嵌入的子页面，scrolling指定no禁用滚动条 -->
+ <iframe id="iframe1" class="iframe" src="children.html" scrolling="no" frameborder="0"></iframe>
</body>
<script src="jquery-1.12.4.min.js"></script>
<script src="jsencrypt.min.js"></script>
@@ -34,151 +33,159 @@
<!-- <script src="JsonToXml.js"></script>
<script src="jsWebControl-Bridge.js"></script> -->
<script type="text/javascript">
- // 步骤2：嵌入子页面的页面中在iframe的onload事件中向子页面抛以下消息
- var iframeWin = document.getElementById("iframe1"); {
- iframeWin.onload = function () {
- iframeWin.contentWindow.postMessage({
- action: 'sendTitle', // 告诉子页面本页面的标题（action自行指定，但需要与子页面中监听的action保持一致
- msg: '将标题发给子页面',
- info: document.title
- }, '\*');
- iframeWin.contentWindow.postMessage({
- action: 'updateInitParam', // 告诉子页面一些初始值，包括浏览器视窗高度与宽度、iframe偏离文档的位置、iframe相对视窗的位置
- msg: '更新子页面一些初始值',
- showSize: { // 浏览器视窗高度与宽度
- width: 800,
- height: 400
- },
- iframeOffset: { // iframe偏离文档的位置
- left: iframeWin.offsetLeft,
- top: iframeWin.offsetTop
- },
- iframeClientPos: { // iframe相对视窗的位置
- left: iframeWin.getBoundingClientRect().left,
- right: iframeWin.getBoundingClientRect().right,
- top: iframeWin.getBoundingClientRect().top,
- bottom: iframeWin.getBoundingClientRect().bottom
- }
- }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
+ // 步骤2：嵌入子页面的页面中在iframe的onload事件中向子页面抛以下消息
+ var iframeWin = document.getElementById("iframe1"); {
+ iframeWin.onload = function () {
+ iframeWin.contentWindow.postMessage({
+ action: 'sendTitle', // 告诉子页面本页面的标题（action自行指定，但需要与子页面中监听的action保持一致
+ msg: '将标题发给子页面',
+ info: document.title
+ }, '\*');
+ iframeWin.contentWindow.postMessage({
+ action: 'updateInitParam', // 告诉子页面一些初始值，包括浏览器视窗高度与宽度、iframe偏离文档的位置、iframe相对视窗的位置
+ msg: '更新子页面一些初始值',
+ showSize: { // 浏览器视窗高度与宽度
+ width: 800,
+ height: 400
+ },
+ iframeOffset: { // iframe偏离文档的位置
+ left: iframeWin.offsetLeft,
+ top: iframeWin.offsetTop
+ },
+ iframeClientPos: { // iframe相对视窗的位置
+ left: iframeWin.getBoundingClientRect().left,
+ right: iframeWin.getBoundingClientRect().right,
+ top: iframeWin.getBoundingClientRect().top,
+ bottom: iframeWin.getBoundingClientRect().bottom
}
+ }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
}
+ }
- // 步骤3：监听嵌入子页面的事件
- window.addEventListener('message', function (e) {
- console.log(e.data.msg);
- if (e && e.data) {
- switch (e.data.action) {
- case 'updateTitle': // 本页面收到子页面通知更新标题通知，更新本页面标题
- document.title = e.data.info;
- break;
- case 'updatePos':
- var scrollLeftValue = document.documentElement.scrollLeft;
- var scrollTopValue = document.documentElement.scrollTop;
- iframeWin.contentWindow.postMessage({
- action: 'updatePos',
- msg: '更新Pos',
- scrollValue: { // 滚动条滚动的偏移量
- left: -1 * scrollLeftValue,
- top: -1 * scrollTopValue,
- }
- }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
- break;
- default:
- break;
- }
- }
- });
-
- // 步骤4：兼听本页面的resize事件，并将一些状态值发送给嵌入的子页面
- var resizeTimer = null;
- var resizeDate;
- $(window).resize(function () {
- resizeDate = new Date();
- if (resizeTimer === null) {
- resizeTimer = setTimeout(checkResizeEndTimer, 100);
- }
- });
-
- function checkResizeEndTimer() {
- if (new Date() - resizeDate > 100) { // resize结束后再发消息，避免残影问题
- clearTimeout(resizeTimer);
- resizeTimer = null;
- postResizeEvent();
- } else {
- setTimeout(checkResizeEndTimer, 100);
- }
- }
-
- function postResizeEvent() {
- iframeWin.contentWindow.postMessage({
- action: 'resize',
- msg: 'resize事件',
- showSize: { // 告诉嵌入的子页面视窗高度与宽度
- width: $(window).width(),
- height: $(window).height()
- },
- iframeClientPos: { // iframe相对视窗的位置
- left: iframeWin.getBoundingClientRect().left,
- right: iframeWin.getBoundingClientRect().right,
- top: iframeWin.getBoundingClientRect().top,
- bottom: iframeWin.getBoundingClientRect().bottom
- },
- iframeOffset: { // iframe偏离文档的位置
- left: iframeWin.offsetLeft,
- top: iframeWin.offsetTop
- }
- }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
- }
-
- // 步骤5：兼听本页面的scroll事件，并将一些状态值发送给嵌入的子页面
- // 为性能考虑，可以在定时器中处理
- var scrollTimer = null;
- var scrollDate;
- $(window).scroll(function (event) {
- postScrollEvent();
- scrollDate = new Date();
- if (scrollTimer === null) {
- scrollTimer = setTimeout(checkScrollEndTimer, 100);
- }
- });
-
- function checkScrollEndTimer() {
- if (new Date() - scrollDate > 100) { // resize结束后再发消息，避免残影问题
- clearTimeout(scrollTimer);
- scrollTimer = null;
- } else {
- postScrollEvent();
- setTimeout(checkScrollEndTimer, 100);
- }
- }
-
- function postScrollEvent() {
- // 计算滚动条偏移量
- var scrollLeftValue = document.documentElement.scrollLeft;
- var scrollTopValue = document.documentElement.scrollTop;
- iframeWin.contentWindow.postMessage({
- action: 'scroll',
- msg: 'scroll事件',
+ // 步骤3：监听嵌入子页面的事件
+ window.addEventListener('message', function (e) {
+ console.log(e.data.msg);
+ if (e && e.data) {
+ switch (e.data.action) {
+ case 'updateTitle': // 本页面收到子页面通知更新标题通知，更新本页面标题
+ document.title = e.data.info;
+ break;
+ case 'updatePos':
+ var scrollLeftValue = document.documentElement.scrollLeft;
+ var scrollTopValue = document.documentElement.scrollTop;
+ iframeWin.contentWindow.postMessage({
+ action: 'updatePos',
+ msg: '更新Pos',
scrollValue: { // 滚动条滚动的偏移量
- left: -1 * scrollLeftValue,
- top: -1 * scrollTopValue,
- },
- iframeClientPos: { // iframe相对视窗的位置
- left: iframeWin.getBoundingClientRect().left,
- right: iframeWin.getBoundingClientRect().right,
- top: iframeWin.getBoundingClientRect().top,
- bottom: iframeWin.getBoundingClientRect().bottom
- },
- showSize: { // 告诉嵌入的子页面视窗高度与宽度
- width: $(window).width(), // 视窗宽度
- height: $(window).height() // 视窗高度
- },
- iframeOffset: { // iframe偏离文档的位置
- left: iframeWin.offsetLeft,
- top: iframeWin.offsetTop
+ left: -1 * scrollLeftValue,
+ top: -1 * scrollTopValue,
}
- }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
+ }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
+ break;
+ default:
+ break;
+ }
}
+ });
+
+ // 步骤4：兼听本页面的resize事件，并将一些状态值发送给嵌入的子页面
+ var resizeTimer = null;
+ var resizeDate;
+ $(window).resize(function () {
+ resizeDate = new Date();
+ if (resizeTimer === null) {
+ resizeTimer = setTimeout(checkResizeEndTimer, 100);
+ }
+ });
+
+ function closeVideo() {
+ document.getElementById('iframe1').contentWindow.close()
+ }
+
+ function startVideo() {
+ document.getElementById('iframe1').contentWindow.initPlugin()
+ }
+
+ function checkResizeEndTimer() {
+ if (new Date() - resizeDate > 100) { // resize结束后再发消息，避免残影问题
+ clearTimeout(resizeTimer);
+ resizeTimer = null;
+ postResizeEvent();
+ } else {
+ setTimeout(checkResizeEndTimer, 100);
+ }
+ }
+
+ function postResizeEvent() {
+ iframeWin.contentWindow.postMessage({
+ action: 'resize',
+ msg: 'resize事件',
+ showSize: { // 告诉嵌入的子页面视窗高度与宽度
+ width: $(window).width(),
+ height: $(window).height()
+ },
+ iframeClientPos: { // iframe相对视窗的位置
+ left: iframeWin.getBoundingClientRect().left,
+ right: iframeWin.getBoundingClientRect().right,
+ top: iframeWin.getBoundingClientRect().top,
+ bottom: iframeWin.getBoundingClientRect().bottom
+ },
+ iframeOffset: { // iframe偏离文档的位置
+ left: iframeWin.offsetLeft,
+ top: iframeWin.offsetTop
+ }
+ }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
+ }
+
+ // 步骤5：兼听本页面的scroll事件，并将一些状态值发送给嵌入的子页面
+ // 为性能考虑，可以在定时器中处理
+ var scrollTimer = null;
+ var scrollDate;
+ $(window).scroll(function (event) {
+ postScrollEvent();
+ scrollDate = new Date();
+ if (scrollTimer === null) {
+ scrollTimer = setTimeout(checkScrollEndTimer, 100);
+ }
+ });
+
+ function checkScrollEndTimer() {
+ if (new Date() - scrollDate > 100) { // resize结束后再发消息，避免残影问题
+ clearTimeout(scrollTimer);
+ scrollTimer = null;
+ } else {
+ postScrollEvent();
+ setTimeout(checkScrollEndTimer, 100);
+ }
+ }
+
+ function postScrollEvent() {
+ // 计算滚动条偏移量
+ var scrollLeftValue = document.documentElement.scrollLeft;
+ var scrollTopValue = document.documentElement.scrollTop;
+ iframeWin.contentWindow.postMessage({
+ action: 'scroll',
+ msg: 'scroll事件',
+ scrollValue: { // 滚动条滚动的偏移量
+ left: -1 * scrollLeftValue,
+ top: -1 * scrollTopValue,
+ },
+ iframeClientPos: { // iframe相对视窗的位置
+ left: iframeWin.getBoundingClientRect().left,
+ right: iframeWin.getBoundingClientRect().right,
+ top: iframeWin.getBoundingClientRect().top,
+ bottom: iframeWin.getBoundingClientRect().bottom
+ },
+ showSize: { // 告诉嵌入的子页面视窗高度与宽度
+ width: $(window).width(), // 视窗宽度
+ height: $(window).height() // 视窗高度
+ },
+ iframeOffset: { // iframe偏离文档的位置
+ left: iframeWin.offsetLeft,
+ top: iframeWin.offsetTop
+ }
+ }, '\*'); // '\*'表示跨域参数，请结合自身业务合理设置
+ }
</script>
</html>
diff --git a/src/components/map/main.vue b/src/components/map/main.vue
index ddca33a..2e69e7e 100644
--- a/src/components/map/main.vue
+++ b/src/components/map/main.vue
@@ -125,6 +125,12 @@
// })
// })
+
+
+
+
+
+
var projection = getProjection("EPSG:4326");
var projectionExtent = projection.getExtent();
var size = getWidth(projectionExtent) / 256;
@@ -174,6 +180,12 @@
})
})
+
+
+
+
+
+
this.parentParameter();
@@ -327,7 +339,7 @@
},
parentParameter () {
- this.$emit('childParameter', this.ol2d)
+ this.$emit('childParameter', this.ol2d)
}
}
}
diff --git a/src/views/home/index.scss b/src/views/home/index.scss
index ee94929..b3f7c47 100644
--- a/src/views/home/index.scss
+++ b/src/views/home/index.scss
@@ -1,8 +1,6 @@
.bajgxt-home {
height: 100%;
width: 100%;
- // width: 1920px;
- // height: 1080px;
background: url("../../../public/img/bajgxt/backimg.png") no-repeat;
background-size: 100% 100%;
@@ -20,16 +18,6 @@
text-align: center;
line-height: 77px;
}
- // span:nth-child(2) {
- // position: absolute;
- // margin-top: 22px;
- // margin-left: 26%;
- // font-size: 22px;
- // cursor: pointer;
- // &:hover {
- // color: #90cef0;
- // }
- // }
img {
position: absolute;
margin-top: 22px;
@@ -47,20 +35,15 @@
color: #90cef0;
}
}
- .side {
- width: 27%;
- height: 100%;
- }
.content {
margin: 5px 20px 20px 20px;
- // height: calc(100% - 77px);
- // width: 100%;
height: calc(100% - 102px);
width: calc(100% - 40px);
display: flex;
.left,
.right {
- @extend .side;
+ width: 27%;
+ height: 100%;
}
.middle {
width: calc(46% - 50px);
@@ -75,7 +58,7 @@
width: 100%;
height: 260px;
}
- .echartClass {
+ .echartClass_1920 {
// height: 100%;
width: 100%;
height: calc(100% - 70px);
@@ -88,7 +71,7 @@
background-size: 100% 100%;
position: relative;
#left1Echart {
- @extend .echartClass;
+ @extend .echartClass_1920;
height: calc(100% - 140px) !important;
margin-top: 68px;
}
@@ -101,7 +84,7 @@
margin-top: 25px;
position: relative;
#left2Echart {
- @extend .echartClass;
+ @extend .echartClass_1920;
}
}
}
@@ -113,7 +96,7 @@
height: 28%;
position: relative;
#right1Echart {
- @extend .echartClass;
+ @extend .echartClass_1920;
}
}
.right2 {
@@ -124,7 +107,7 @@
margin-top: 30px;
position: relative;
#right2Echart {
- @extend .echartClass;
+ @extend .echartClass_1920;
}
}
.right3 {
@@ -134,7 +117,7 @@
background-size: 100% 100%;
margin-top: 25px;
#right3Echart {
- @extend .echartClass;
+ @extend .echartClass_1920;
}
}
}
@@ -424,7 +407,7 @@
}
/deep/ .el-table__body-wrapper {
overflow: auto;
- height: 100%;
+ height: calc(100% - 50px);
}
}
.left2-btn {
@@ -628,10 +611,11 @@
right: 47px;
margin-top: 76px;
.block1 {
- width: 30px;
- height: 15px;
+ width: 10px;
+ height: 10px;
background: #008dec;
- margin-top: 7px;
+ margin-top: 10px;
+ border-radius: 100%;
}
span:nth-child(2) {
color: #fff;
@@ -650,10 +634,11 @@
right: 47px;
margin-top: 135px;
.block1 {
- width: 30px;
- height: 15px;
+ width: 10px;
+ height: 10px;
background: #886eff;
- margin-top: 7px;
+ margin-top: 10px;
+ border-radius: 100%;
}
span:nth-child(2) {
color: #fff;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index bc6c395..ceec846 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -699,7 +699,7 @@
selectJy,
selectWg,
punishList,
- lazyTrees,
+ lazyTrees
} from "../../api/index/index";
import car from "@/assets/img/car.png";
@@ -728,7 +728,7 @@
materialNum: 0,
punishNum: 0,
wgNum: 0,
- ymwsNum: 0,
+ ymwsNum: 0
},
carNum: 0,
peoNum: 0,
@@ -738,7 +738,7 @@
left1Echart: null,
left2Echart: null,
mapEchart: null,
- right3Echart: null,
+ right3Echart: null
},
left1loading: true,
left2loading: true,
@@ -755,7 +755,7 @@
wz: 0,
kqy: 0,
nan: 0,
- nv: 0,
+ nv: 0
},
left2EchartType: 0,
poorPerformanceType: 3,
@@ -765,29 +765,29 @@
total: 0,
current: 1,
type: "zg",
- title: "资格异常人员清单",
+ title: "资格异常人员清单"
},
dialogTable: {
wgTable: [],
jyTable: [],
- ymTable: [],
+ ymTable: []
},
props: {
children: "children",
label: "title",
- value: "id",
+ value: "id"
},
node1: {}, //选中的记录
- node2: {},
+ node2: {}
};
},
computed: {
text() {
return {
id: this.number,
- val: this.textArr[this.number],
+ val: this.textArr[this.number]
};
- },
+ }
},
methods: {
//点击节点
@@ -841,7 +841,7 @@
// 左侧表的接口返回数据
initEchart() {
- securityTotal().then((res) => {
+ securityTotal().then(res => {
if (res.data.code == 200) {
let securityData = res.data.data;
if (!this.echarts.left1Echart) {
@@ -855,10 +855,10 @@
}
this.left1loading = false;
});
- seCountI({ jurisdiction: "", deptid: "" }).then((res) => {
+ seCountI({ jurisdiction: "", deptid: "" }).then(res => {
if (res.data.code == 200) {
let data = res.data.data;
- data.forEach((item) => {
+ data.forEach(item => {
if (item.stats === "0") {
this.leftData.zz = item.num;
}
@@ -879,7 +879,8 @@
this.$message.error(res.msg);
}
});
- selectFj().then((res) => {
+ selectFj().then(res => {
+ debugger;
if (res.data.code === 200) {
if (!this.echarts.right3Echart) {
this.echarts.right3Echart = echarts.init(
@@ -903,7 +904,7 @@
this.echarts.left2Echart.clear();
}
if (type === 0) {
- holderNum().then((res) => {
+ holderNum().then(res => {
if (res.data.code === 200) {
let data = res.data.data;
this.echarts.left2Echart = echarts.init(
@@ -916,7 +917,7 @@
this.left2loading = false;
});
} else {
- seCountUg({ jurisdiction: "", deptid: "" }).then((res) => {
+ seCountUg({ jurisdiction: "", deptid: "" }).then(res => {
if (res.data.code === 200) {
this.echarts.left2Echart = echarts.init(
document.getElementById("left2Echart")
@@ -950,7 +951,7 @@
this.middleloading = false;
this.textArr = [];
if (type === 2) {
- this.tableData.forEach((item) => {
+ this.tableData.forEach(item => {
let obj =
"押运车辆车牌号" +
item.carNum +
@@ -965,7 +966,7 @@
this.textArr.push(obj);
});
} else if (type === 1) {
- this.tableData.forEach((item) => {
+ this.tableData.forEach(item => {
let obj =
"押运人员" +
item.name +
@@ -978,7 +979,7 @@
this.textArr.push(obj);
});
} else if (type === 3) {
- this.tableData.forEach((item) => {
+ this.tableData.forEach(item => {
let obj =
"枪支编号" +
item.number +
@@ -999,21 +1000,21 @@
let middleData = {
1: {
table: [],
- geoData: [],
+ geoData: []
},
2: {
table: [],
- geoData: [],
+ geoData: []
},
3: {
table: [],
- geoData: [],
- },
+ geoData: []
+ }
};
- getLiveLocationVoList({ type: type }).then((res) => {
+ getLiveLocationVoList({ type: type }).then(res => {
if (res.data.code === 200) {
let allData = res.data.data;
- allData.forEach((m) => {
+ allData.forEach(m => {
let obj = {
location: m.location,
name: m.name,
@@ -1021,7 +1022,7 @@
linkman: m.linkman,
company: m.company,
tel: m.tel,
- carNum: m.carNum,
+ carNum: m.carNum
};
// let geoObj = {
@@ -1030,7 +1031,7 @@
// };
middleData[m.type]["geoData"].push([
Number(m.longitude),
- Number(m.latitude),
+ Number(m.latitude)
]);
middleData[m.type]["table"].push(obj);
});
@@ -1056,36 +1057,38 @@
zIndex: 4,
title: "影像",
source: new XYZ({
- url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
- }),
+ url:
+ "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 行政区划
+ })
}),
new Tile({
zIndex: 5,
title: "道路+中文注记",
source: new XYZ({
- url: "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
- }),
- }),
+ url:
+ "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 注记
+ })
+ })
],
view: new View({
projection: "EPSG:4326",
center: [115.892151, 28.676493],
- zoom: 10,
- }),
+ zoom: 10
+ })
});
this.carVectorLayer = new VectorLayer({
zIndex: 99,
- source: new VectorSource(),
+ source: new VectorSource()
});
this.peoVectorLayer = new VectorLayer({
zIndex: 99,
- source: new VectorSource(),
+ source: new VectorSource()
});
this.gunVectorLayer = new VectorLayer({
zIndex: 99,
- source: new VectorSource(),
+ source: new VectorSource()
});
this.map.addLayer(this.carVectorLayer);
this.map.addLayer(this.peoVectorLayer);
@@ -1095,7 +1098,7 @@
},
// 获取辖区列表
getOfficeData() {
- lazyTrees().then((res) => {
+ lazyTrees().then(res => {
if (res.data.code === 200) {
this.options1 = res.data.data;
this.options2 = res.data.data;
@@ -1137,7 +1140,7 @@
}
},
getWgTable() {
- this.dialogTable.wgTable.forEach((item) => {
+ this.dialogTable.wgTable.forEach(item => {
let czl = 0;
if (Number(item.cznum) !== 0 && Number(item.znum) !== 0) {
czl =
@@ -1155,7 +1158,7 @@
this.gridData.total = this.dialogTable.wgTable.length;
},
getJyTable() {
- this.dialogTable.jyTable.forEach((item) => {
+ this.dialogTable.jyTable.forEach(item => {
let pql = 0;
if (Number(item.painum) !== 0 && Number(item.znum) !== 0) {
pql =
@@ -1183,9 +1186,9 @@
let params = {
current: this.gridData.current,
size: 10,
- jurisdiction: this.value2,
+ jurisdiction: this.value2
};
- punishList(params).then((res) => {
+ punishList(params).then(res => {
if (res.data.code === 200) {
this.gridData.data = res.data.data.records;
this.gridData.total = res.data.data.total;
@@ -1223,9 +1226,9 @@
current: this.gridData.current,
size: 10,
examinationType: 1,
- jurisdiction: this.value1,
+ jurisdiction: this.value1
};
- qualificationPages(params).then((res) => {
+ qualificationPages(params).then(res => {
if (res.data.code === 200) {
this.gridData.data = res.data.data.records;
this.gridData.total = res.data.data.total;
@@ -1246,9 +1249,9 @@
let params = {
current: this.gridData.current,
size: 10,
- jurisdiction: this.value2,
+ jurisdiction: this.value2
};
- punishList(params).then((res) => {
+ punishList(params).then(res => {
if (res.data.code === 200) {
this.gridData.data = res.data.data.records;
this.gridData.total = res.data.data.total;
@@ -1259,7 +1262,7 @@
},
// 经营不善
getMaterial() {
- selectJy({ jurisdiction: this.value2 }).then((res) => {
+ selectJy({ jurisdiction: this.value2 }).then(res => {
if (res.data.code === 200) {
this.rightData.materialNum = res.data.data.count;
this.dialogTable.jyTable = res.data.data.List;
@@ -1271,7 +1274,7 @@
},
// 有名无实
getselectYs() {
- selectYs({ jurisdiction: this.value2 }).then((res) => {
+ selectYs({ jurisdiction: this.value2 }).then(res => {
if (res.data.code === 200) {
this.rightData.ymwsNum = res.data.data.count;
this.dialogTable.ymTable = res.data.data.List;
@@ -1283,7 +1286,7 @@
},
// 违规经营
getselectWg() {
- selectWg({ jurisdiction: this.value2 }).then((res) => {
+ selectWg({ jurisdiction: this.value2 }).then(res => {
if (res.data.code === 200) {
this.rightData.wgNum = res.data.data.count;
this.dialogTable.wgTable = res.data.data.list;
@@ -1313,8 +1316,8 @@
// this.rightData.qualification = 45;
selectBx({
jurisdiction: this.value1,
- type: this.poorPerformanceType,
- }).then((res) => {
+ type: this.poorPerformanceType
+ }).then(res => {
if (res.data.code === 200) {
this.rightData.poorPerformance = res.data.data[0].count;
} else {
@@ -1324,8 +1327,8 @@
});
selectExtype({
jurisdiction: this.value1,
- type: this.poorPerformanceType,
- }).then((res) => {
+ type: this.poorPerformanceType
+ }).then(res => {
if (res.data.code === 200) {
this.rightData.qualification = res.data.data[0].count;
} else {
@@ -1364,7 +1367,7 @@
// this.$router.push({ path: "/register/index" });
// this.$router.push({ path: "/securityGuardManagement/register" });
this.$router.push({ path: website.fistPage.value });
- },
+ }
},
mounted() {
this.initEchart();
@@ -1375,12 +1378,25 @@
this.getTableData(0);
// this.initMapEchart();
this.getOfficeData();
- },
+ }
};
</script>
<style lang="scss" scoped>
-@import "./index.scss";
+// 适配分辨率1280*1024
+@media screen and (max-width: 1280px) {
+ @import "./index_1280_1024.scss";
+}
+// 适配分辨率1600*900
+@media screen and (min-width: 1281px) and (max-width: 1600px) {
+ @import "./index_1600_900.scss";
+}
+// 适配分辨率1920*1080
+@media screen and (min-width: 1601px) and (max-width: 1920px) {
+ @import "./index.scss";
+}
+
+// @import "./index.scss";
/deep/ .el-select-dropdown {
border: 1px solid #9199ab;
background-color: #022c53;
diff --git a/src/views/home/index_1280_1024.scss b/src/views/home/index_1280_1024.scss
new file mode 100644
index 0000000..85157b8
--- /dev/null
+++ b/src/views/home/index_1280_1024.scss
@@ -0,0 +1,699 @@
+.bajgxt-home {
+ height: 100%;
+ width: 100%;
+ background: url("../../../public/img/bajgxt/backimg.png") no-repeat;
+ background-size: 100% 100%;
+
+ .head-title {
+ background: url("../../../public/img/bajgxt/title2.png") no-repeat;
+ background-size: 100% 100%;
+ width: 100%;
+ height: 77px;
+ text-align: center;
+ // position: relative;
+ span {
+ font-family: "Arial Normal", "Arial", sans-serif;
+ font-size: 36px;
+ color: #ffffff;
+ text-align: center;
+ line-height: 77px;
+ }
+ img {
+ position: absolute;
+ margin-top: 22px;
+ margin-left: 29%;
+ }
+ }
+ .sub-title {
+ float: right;
+ color: #fff;
+ margin-right: 52px;
+ font-size: 18px;
+ margin-top: -35px;
+ cursor: pointer;
+ &:hover {
+ color: #90cef0;
+ }
+ }
+ .content {
+ margin: 5px 20px 20px 20px;
+ height: calc(100% - 102px);
+ width: calc(100% - 40px);
+ display: flex;
+ .left,
+ .right {
+ width: 27%;
+ height: 100%;
+ }
+ .middle {
+ width: calc(46% - 50px);
+ height: 100%;
+ margin: 0px 25px;
+ position: relative;
+ }
+ }
+ .leftimg {
+ background: url("../../../public/img/bajgxt/left1.png") no-repeat;
+ background-size: contain;
+ width: 100%;
+ height: 260px;
+ }
+ .echartClass_1280 {
+ // height: 100%;
+ width: 100%;
+ height: calc(100% - 70px);
+ }
+ .left {
+ .left1 {
+ background: url("../../../public/img/bajgxt/left1.png") no-repeat;
+ height: 60%;
+ width: 100%;
+ background-size: 100% 100%;
+ position: relative;
+ #left1Echart {
+ @extend .echartClass_1280;
+ height: calc(100% - 140px) !important;
+ margin-top: 68px;
+ }
+ }
+ .left2 {
+ background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
+ height: calc(40% - 25px);
+ width: 100%;
+ background-size: 100% 100%;
+ margin-top: 25px;
+ position: relative;
+ #left2Echart {
+ @extend .echartClass_1280;
+ }
+ }
+ }
+ .right {
+ .right1 {
+ background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
+ background-size: 100% 100%;
+ width: 100%;
+ height: 28%;
+ position: relative;
+ #right1Echart {
+ @extend .echartClass_1280;
+ }
+ }
+ .right2 {
+ background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
+ background-size: 100% 100%;
+ width: 100%;
+ height: 28%;
+ margin-top: 30px;
+ position: relative;
+ #right2Echart {
+ @extend .echartClass_1280;
+ }
+ }
+ .right3 {
+ background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
+ height: calc(40% - 25px);
+ width: 100%;
+ background-size: 100% 100%;
+ margin-top: 25px;
+ #right3Echart {
+ @extend .echartClass_1280;
+ }
+ }
+ }
+ .title-pane {
+ display: inline-flex;
+ height: 55px;
+ img {
+ width: 25px;
+ height: 25px;
+ margin: 19px 10px 0px 10px;
+ }
+ span {
+ line-height: 68px;
+ color: #fff;
+ font-size: 17px;
+ }
+ }
+ .title-pane1 {
+ display: inline-flex;
+ height: 41px;
+ img {
+ width: 25px;
+ height: 25px;
+ margin: 8.5px 10px 0px 10px;
+ }
+ span {
+ line-height: 46px;
+ color: #fff;
+ font-size: 17px;
+ }
+ }
+ .title-pane2 {
+ display: inline-flex;
+ height: 53px;
+ img {
+ width: 25px;
+ height: 25px;
+ margin: 13.5px 10px 0px 10px;
+ }
+ span {
+ line-height: 59px;
+ color: #fff;
+ font-size: 17px;
+ }
+ }
+
+ .middle {
+ .mapimg {
+ background: url("../../../public/img/bajgxt/u3.png") no-repeat;
+ background-size: 100% 100%;
+ height: 60%;
+ width: 100%;
+ #map {
+ width: calc(100% - 40px);
+ height: calc(100% - 40px);
+ margin: 0px 20px;
+ top: 20px;
+ position: relative;
+ }
+ }
+
+ .table {
+ margin-top: 25px;
+ height: calc(40% - 25px);
+ width: 100%;
+ background: url("../../../public/img/bajgxt/table.png") no-repeat;
+ background-size: 100% 100%;
+ position: relative;
+ .table-title {
+ background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ width: 267px;
+ margin-top: -13px;
+ height: 50px;
+ margin-left: calc(50% - 135.5px);
+ color: #fff;
+ font-size: 20px;
+ text-align: center;
+ line-height: 54px;
+ }
+ .lefttop {
+ background: url("../../../public/img/bajgxt/lefttop.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ left: -7px;
+ top: -9px;
+ }
+ .leftbottom {
+ background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ left: -7px;
+ bottom: -7px;
+ }
+ .righttop {
+ background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ left: calc(100% - 37px);
+ top: -9px;
+ }
+ .rightbottom {
+ background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ left: calc(100% - 37px);
+ bottom: -7px;
+ }
+ }
+ }
+ .middle {
+ .el-table {
+ width: calc(100% - 40px);
+ height: calc(100% - 65px);
+ margin: 0px 20px 15px;
+ top: 50px;
+ }
+ /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
+ background: #031d4b !important;
+ }
+ /deep/ .el-table--enable-row-transition .el-table__body td,
+ /deep/ .el-table th,
+ .el-table tr {
+ background: #03225b !important;
+ }
+ /deep/ .el-table .cell {
+ color: #fff;
+ text-align: center;
+ }
+ /deep/ .el-table td,
+ .el-table th.is-leaf {
+ border-bottom-color: transparent;
+ }
+ /deep/ .el-table__header th {
+ border-bottom: 1px solid #031a38 !important;
+ }
+ /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
+ background-color: #b0caf3;
+ }
+ }
+
+ /deep/ .el-input__inner {
+ height: 27px;
+ color: #fff !important;
+ font-size: 14px;
+ background-color: transparent !important;
+ border-color: transparent !important;
+ border-radius: 2px;
+ }
+ /deep/ .el-input {
+ width: 138px;
+ }
+ /deep/ .el-select {
+ line-height: 52px;
+ position: absolute;
+ right: 14px;
+ }
+ /deep/ .el-input__icon {
+ line-height: 53px;
+ }
+ /deep/ .el-select:hover .el-input__inner,
+ /deep/ .el-select .el-input.is-focus .el-input__inner {
+ border: none;
+ }
+ /deep/ .el-table,
+ /deep/ .el-table__expanded-cell,
+ /deep/ .el-table--border::after,
+ /deep/ .el-table--group::after,
+ /deep/ .el-table::before {
+ background-color: transparent !important;
+ }
+ .card-text {
+ height: 30px;
+ padding: 8px 10px;
+ color: #fff;
+ font-size: 14px;
+ text-align: center;
+ span:nth-child(2) {
+ color: red;
+ font-size: 21px;
+ margin: 0px 10px;
+ font-weight: bold;
+ }
+ span:nth-child(4) {
+ margin-left: 15px;
+ }
+ span:nth-child(5) {
+ margin: 0px 10px;
+ color: red;
+ font-size: 20px;
+ }
+ }
+ .right-content {
+ height: calc(100% - 71px);
+ width: calc(100% - 30px);
+ padding: 15px;
+ }
+ .card-list {
+ margin-top: 10px !important;
+ margin: 10px 60px 15px 5px;
+ display: flex;
+ height: 50px;
+ line-height: 50px;
+ img:first-child {
+ height: 50px;
+ z-index: 22;
+ }
+ img:nth-child(2) {
+ position: absolute;
+ margin-left: 13px;
+ width: 30px;
+ height: 30px;
+ margin-top: 10px;
+ z-index: 22;
+ }
+ img:nth-child(3) {
+ margin-left: -20px;
+ height: 50px;
+ }
+ span:nth-child(4) {
+ color: red;
+ font-size: 26px;
+ display: block;
+ width: 71px;
+ margin-left: -74px;
+ text-align: center;
+ }
+ span:nth-child(5) {
+ color: #7ff3f4;
+ font-size: 15px;
+ display: block;
+ width: 129px;
+ margin-left: 22px;
+ }
+ }
+ .mapBtn,
+ .mapBtn:nth-child(2),
+ .mapBtn:nth-child(3) {
+ position: absolute;
+ z-index: 99;
+ color: #fff;
+ background: #014e84;
+ margin-top: 38px;
+ margin-left: calc(100% - 140px);
+ border-radius: 11px;
+ height: 43px;
+ display: inline-flex;
+ width: 107px;
+ cursor: pointer;
+ img {
+ margin: 8px 3px 8px 5px;
+ height: 28px;
+ width: 30px;
+ }
+ .text {
+ width: 100px;
+ text-align: center;
+ margin: 3px;
+ span:nth-child(1) {
+ width: 100%;
+ display: block;
+ font-size: 10px;
+ }
+ span:nth-child(2) {
+ width: 100%;
+ display: block;
+ color: red;
+ font-size: 17px;
+ font-weight: bold;
+ }
+ }
+ &:hover {
+ box-shadow: 0px 0px 10px #7ff3f4;
+ }
+ }
+ .mapBtn:nth-child(2) {
+ margin-top: 100px;
+ }
+ .mapBtn:nth-child(3) {
+ margin-top: 160px;
+ }
+ /deep/ .el-table__body-wrapper {
+ overflow: auto;
+ height: calc(100% - 50px);
+ }
+}
+.left2-btn {
+ height: 19px;
+ width: 60px;
+ background-color: #4478d0;
+ color: #fff;
+ font-size: 0.1rem !important;
+ font-weight: 700;
+
+ line-height: 19px !important;
+ text-align: center;
+ position: absolute;
+ cursor: pointer;
+}
+.left2-btn.btn1 {
+ right: 78px;
+ margin-top: 22px;
+}
+.left2-btn.btn2 {
+ right: 12px;
+ margin-top: 22px;
+}
+.left2-btn.date {
+ right: 22px;
+ margin-top: 12px;
+}
+.left2-btn.mounce {
+ right: 22px;
+ margin-top: 57px;
+}
+.left2-btn.all {
+ right: 22px;
+ margin-top: 101px;
+}
+
+.rightData {
+ position: relative;
+ color: #fff;
+ background: #010945;
+ border-radius: 11px;
+ height: 50px;
+ display: inline-flex;
+ width: 125px;
+ cursor: pointer;
+ font-weight: 700;
+ img {
+ margin: 12px;
+ height: 20px;
+ width: 22px;
+ }
+ .text {
+ width: 100px;
+ text-align: center;
+ // margin: 3px;
+ line-height: 21px;
+ span:nth-child(1) {
+ width: 100%;
+ display: block;
+ font-size: 13px;
+ }
+ span:nth-child(2) {
+ width: 100%;
+ display: block;
+ color: #00ccff;
+ font-size: 14px;
+ }
+ }
+}
+.rightData1 {
+ margin-left: 9px;
+ margin-top: 10px;
+}
+.rightData2 {
+ margin-left: 35px;
+ margin-top: 10px;
+}
+.rightData3 {
+ margin-top: 17px;
+ margin-left: 9px;
+}
+.rightData4 {
+ margin-top: 17px;
+ margin-left: 35px;
+}
+.rightData5 {
+ margin-top: 8px;
+ margin-left: 42px;
+}
+
+.textBox {
+ width: 70%;
+ height: 58px;
+ // margin: 0 auto;
+ overflow: hidden;
+ position: absolute;
+ text-align: left;
+ color: #09b560;
+ left: 20px;
+ top: 20px;
+ font-size: 15px;
+ .text {
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ }
+ .slide-enter-active,
+ .slide-leave-active {
+ transition: all 0.5s linear;
+ }
+ .slide-enter {
+ transform: translateY(20px) scale(1);
+ opacity: 1;
+ }
+ .slide-leave-to {
+ transform: translateY(-20px) scale(0.8);
+ opacity: 0;
+ }
+}
+.leftEchartTitle {
+ height: 30px;
+ display: flex;
+ line-height: 30px;
+ margin-top: 10px;
+ margin-left: 15px;
+ position: absolute;
+ .block1 {
+ width: 17px;
+ height: 8px;
+ background: #2ec7c9;
+ border-radius: 3px;
+ margin-top: 11px;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 12px;
+ margin: 0px 3px 0px 3px;
+ }
+ span:nth-child(3) {
+ color: #2ec7c9;
+ font-size: 14px;
+ font-weight: 700;
+ display: block;
+ width: 41px;
+ text-align: center;
+ }
+ span:nth-child(4) {
+ font-size: 12px;
+ color: #2ec7c9;
+ }
+}
+.leftEchartTitle2 {
+ right: 18px;
+ .block1 {
+ background: #b6a2de;
+ }
+ span:nth-child(3) {
+ color: #b6a2de;
+ // font-size: 15px;
+ }
+}
+.leftEchartTitle3 {
+ margin-top: 37px;
+ .block1 {
+ background: #5ab1ef;
+ }
+ span:nth-child(3) {
+ color: #5ab1ef;
+ // font-size: 15px;
+ }
+}
+.leftEchartTitle4 {
+ margin-top: 37px;
+ right: 15px;
+ .block1 {
+ background: #ffb980;
+ }
+ span:nth-child(2) {
+ width: 77px;
+ }
+ span:nth-child(3) {
+ color: #ffb980;
+ // font-size: 15px;
+ }
+}
+.leftEchartTitle5 {
+ margin-top: 64px;
+ .block1 {
+ background: #fc8452;
+ }
+ span:nth-child(3) {
+ color: #fc8452;
+ font-size: 15px;
+ }
+}
+.bayHover {
+ background-color: #0445b5;
+ color: #fff !important;
+}
+.leftEchartTitle.xbNan {
+ right: 20px;
+ margin-top: 76px;
+ .block1 {
+ width: 10px;
+ height: 10px;
+ background: #008dec;
+ margin-top: 10px;
+ border-radius: 100%;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 12px;
+ }
+ span:nth-child(3) {
+ color: #008dec;
+ font-size: 15px;
+ }
+ span:nth-child(4) {
+ font-size: 12px;
+ color: #008dec;
+ }
+}
+.leftEchartTitle.xbNv {
+ right: 20px;
+ margin-top: 135px;
+ .block1 {
+ width: 10px;
+ height: 10px;
+ background: #886eff;
+ margin-top: 10px;
+ border-radius: 100%;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 12px;
+ }
+ span:nth-child(3) {
+ color: #886eff;
+ font-size: 15px;
+ }
+ span:nth-child(4) {
+ font-size: 12px;
+ color: #886eff;
+ }
+}
+.showDialog:hover {
+ cursor: pointer;
+}
+.bajgxt-home {
+ /deep/.dialog {
+ z-index: 10000000 !important;
+ .el-table {
+ top: 0px !important;
+ margin: 0px !important;
+ width: 100% !important;
+ height: calc(100% - 50px) !important;
+ .el-table__header {
+ background-color: #2d5cc8 !important;
+ }
+ .el-table__body-wrapper {
+ height: calc(100% - 50px);
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+ }
+ .el-pagination {
+ color: #a2a5a5;
+ }
+ .btn-prev,
+ .btn-next {
+ background: transparent !important;
+ }
+ .el-dialog__body {
+ padding: 10px 20px;
+ height: calc(100% - 60px);
+ .el-input {
+ width: 50px !important;
+ border-bottom: 1px solid #8a7b7b !important;
+ }
+ }
+ }
+ /deep/ .el-dialog {
+ width: 80% !important;
+ height: 77%;
+ }
+}
diff --git a/src/views/home/index_1600_900.scss b/src/views/home/index_1600_900.scss
new file mode 100644
index 0000000..90cc048
--- /dev/null
+++ b/src/views/home/index_1600_900.scss
@@ -0,0 +1,698 @@
+.bajgxt-home {
+ height: 100%;
+ width: 100%;
+ background: url("../../../public/img/bajgxt/backimg.png") no-repeat;
+ background-size: 100% 100%;
+
+ .head-title {
+ background: url("../../../public/img/bajgxt/title2.png") no-repeat;
+ background-size: 100% 100%;
+ width: 100%;
+ height: 77px;
+ text-align: center;
+ // position: relative;
+ span {
+ font-family: "Arial Normal", "Arial", sans-serif;
+ font-size: 36px;
+ color: #ffffff;
+ text-align: center;
+ line-height: 77px;
+ }
+ img {
+ position: absolute;
+ margin-top: 22px;
+ margin-left: 29%;
+ }
+ }
+ .sub-title {
+ float: right;
+ color: #fff;
+ margin-right: 52px;
+ font-size: 18px;
+ margin-top: -35px;
+ cursor: pointer;
+ &:hover {
+ color: #90cef0;
+ }
+ }
+ .content {
+ margin: 5px 20px 20px 20px;
+ height: calc(100% - 102px);
+ width: calc(100% - 40px);
+ display: flex;
+ .left,
+ .right {
+ width: 27%;
+ height: 100%;
+ }
+ .middle {
+ width: calc(46% - 50px);
+ height: 100%;
+ margin: 0px 25px;
+ position: relative;
+ }
+ }
+ .leftimg {
+ background: url("../../../public/img/bajgxt/left1.png") no-repeat;
+ background-size: contain;
+ width: 100%;
+ height: 260px;
+ }
+ .echartClass_1600_900 {
+ // height: 100%;
+ width: 100%;
+ height: calc(100% - 70px);
+ }
+ .left {
+ .left1 {
+ background: url("../../../public/img/bajgxt/left1.png") no-repeat;
+ height: 60%;
+ width: 100%;
+ background-size: 100% 100%;
+ position: relative;
+ #left1Echart {
+ @extend .echartClass_1600_900;
+ height: calc(100% - 140px) !important;
+ margin-top: 68px;
+ }
+ }
+ .left2 {
+ background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
+ height: calc(40% - 25px);
+ width: 100%;
+ background-size: 100% 100%;
+ margin-top: 25px;
+ position: relative;
+ #left2Echart {
+ @extend .echartClass_1600_900;
+ }
+ }
+ }
+ .right {
+ .right1 {
+ background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
+ background-size: 100% 100%;
+ width: 100%;
+ height: 28%;
+ position: relative;
+ #right1Echart {
+ @extend .echartClass_1600_900;
+ }
+ }
+ .right2 {
+ background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
+ background-size: 100% 100%;
+ width: 100%;
+ height: 28%;
+ margin-top: 30px;
+ position: relative;
+ #right2Echart {
+ @extend .echartClass_1600_900;
+ }
+ }
+ .right3 {
+ background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
+ height: calc(40% - 25px);
+ width: 100%;
+ background-size: 100% 100%;
+ margin-top: 25px;
+ #right3Echart {
+ @extend .echartClass_1600_900;
+ }
+ }
+ }
+ .title-pane {
+ display: inline-flex;
+ height: 44px;
+ img {
+ width: 26px;
+ height: 26px;
+ margin: 12px 10px 0px 10px;
+ }
+ span {
+ line-height: 54px;
+ color: #fff;
+ font-size: 17px;
+ }
+ }
+ .title-pane1 {
+ display: inline-flex;
+ height: 33px;
+ img {
+ width: 26px;
+ height: 26px;
+ margin: 3.5px 10px 0px 10px;
+ }
+ span {
+ line-height: 33px;
+ color: #fff;
+ font-size: 17px;
+ }
+ }
+ .title-pane2 {
+ display: inline-flex;
+ height: 41px;
+ img {
+ width: 26px;
+ height: 26px;
+ margin: 8.5px 10px 0px 10px;
+ }
+ span {
+ line-height: 50px;
+ color: #fff;
+ font-size: 17px;
+ }
+ }
+
+ .middle {
+ .mapimg {
+ background: url("../../../public/img/bajgxt/u3.png") no-repeat;
+ background-size: 100% 100%;
+ height: 60%;
+ width: 100%;
+ #map {
+ width: calc(100% - 40px);
+ height: calc(100% - 40px);
+ margin: 0px 20px;
+ top: 20px;
+ position: relative;
+ }
+ }
+
+ .table {
+ margin-top: 25px;
+ height: calc(40% - 25px);
+ width: 100%;
+ background: url("../../../public/img/bajgxt/table.png") no-repeat;
+ background-size: 100% 100%;
+ position: relative;
+ .table-title {
+ background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ width: 267px;
+ margin-top: -13px;
+ height: 50px;
+ margin-left: calc(50% - 135.5px);
+ color: #fff;
+ font-size: 20px;
+ text-align: center;
+ line-height: 54px;
+ }
+ .lefttop {
+ background: url("../../../public/img/bajgxt/lefttop.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ left: -7px;
+ top: -9px;
+ }
+ .leftbottom {
+ background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ left: -7px;
+ bottom: -7px;
+ }
+ .righttop {
+ background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ left: calc(100% - 37px);
+ top: -9px;
+ }
+ .rightbottom {
+ background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ left: calc(100% - 37px);
+ bottom: -7px;
+ }
+ }
+ }
+ .middle {
+ .el-table {
+ width: calc(100% - 40px);
+ height: calc(100% - 65px);
+ margin: 0px 20px 15px;
+ top: 50px;
+ }
+ /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
+ background: #031d4b !important;
+ }
+ /deep/ .el-table--enable-row-transition .el-table__body td,
+ /deep/ .el-table th,
+ .el-table tr {
+ background: #03225b !important;
+ }
+ /deep/ .el-table .cell {
+ color: #fff;
+ text-align: center;
+ }
+ /deep/ .el-table td,
+ .el-table th.is-leaf {
+ border-bottom-color: transparent;
+ }
+ /deep/ .el-table__header th {
+ border-bottom: 1px solid #031a38 !important;
+ }
+ /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
+ background-color: #b0caf3;
+ }
+ }
+
+ /deep/ .el-input__inner {
+ height: 27px;
+ color: #fff !important;
+ font-size: 14px;
+ background-color: transparent !important;
+ border-color: transparent !important;
+ border-radius: 2px;
+ }
+ /deep/ .el-input {
+ width: 138px;
+ }
+ /deep/ .el-select {
+ line-height: 42px;
+ position: absolute;
+ right: 14px;
+ }
+ /deep/ .el-input__icon {
+ line-height: 43px;
+ }
+ /deep/ .el-select:hover .el-input__inner,
+ /deep/ .el-select .el-input.is-focus .el-input__inner {
+ border: none;
+ }
+ /deep/ .el-table,
+ /deep/ .el-table__expanded-cell,
+ /deep/ .el-table--border::after,
+ /deep/ .el-table--group::after,
+ /deep/ .el-table::before {
+ background-color: transparent !important;
+ }
+ .card-text {
+ height: 30px;
+ padding: 8px 10px;
+ color: #fff;
+ font-size: 14px;
+ text-align: center;
+ span:nth-child(2) {
+ color: red;
+ font-size: 21px;
+ margin: 0px 10px;
+ font-weight: bold;
+ }
+ span:nth-child(4) {
+ margin-left: 15px;
+ }
+ span:nth-child(5) {
+ margin: 0px 10px;
+ color: red;
+ font-size: 20px;
+ }
+ }
+ .right-content {
+ height: calc(100% - 71px);
+ width: calc(100% - 30px);
+ padding: 15px;
+ }
+ .card-list {
+ margin-top: 0px !important;
+ margin: 0px 60px 12px 10px;
+ display: flex;
+ height: 50px;
+ line-height: 50px;
+ img:first-child {
+ height: 50px;
+ z-index: 22;
+ }
+ img:nth-child(2) {
+ position: absolute;
+ margin-left: 13px;
+ width: 30px;
+ height: 30px;
+ margin-top: 9px;
+ z-index: 22;
+ }
+ img:nth-child(3) {
+ margin-left: -20px;
+ }
+ span:nth-child(4) {
+ color: red;
+ font-size: 26px;
+ display: block;
+ width: 71px;
+ margin-left: -78px;
+ text-align: center;
+ }
+ span:nth-child(5) {
+ color: #7ff3f4;
+ font-size: 17px;
+ display: block;
+ width: 129px;
+ margin-left: 16px;
+ }
+ }
+ .mapBtn,
+ .mapBtn:nth-child(2),
+ .mapBtn:nth-child(3) {
+ position: absolute;
+ z-index: 99;
+ color: #fff;
+ background: #014e84;
+ margin-top: 38px;
+ margin-left: calc(100% - 140px);
+ border-radius: 11px;
+ height: 43px;
+ display: inline-flex;
+ width: 107px;
+ cursor: pointer;
+ img {
+ margin: 8px 3px 8px 5px;
+ height: 28px;
+ width: 30px;
+ }
+ .text {
+ width: 100px;
+ text-align: center;
+ margin: 3px;
+ span:nth-child(1) {
+ width: 100%;
+ display: block;
+ font-size: 10px;
+ }
+ span:nth-child(2) {
+ width: 100%;
+ display: block;
+ color: red;
+ font-size: 17px;
+ font-weight: bold;
+ }
+ }
+ &:hover {
+ box-shadow: 0px 0px 10px #7ff3f4;
+ }
+ }
+ .mapBtn:nth-child(2) {
+ margin-top: 100px;
+ }
+ .mapBtn:nth-child(3) {
+ margin-top: 160px;
+ }
+ /deep/ .el-table__body-wrapper {
+ overflow: auto;
+ height: calc(100% - 50px);
+ }
+}
+.left2-btn {
+ height: 21px;
+ width: 69px;
+ background-color: #4478d0;
+ color: #fff;
+ font-size: 13px !important;
+ font-weight: 700;
+
+ line-height: 21px !important;
+ text-align: center;
+ position: absolute;
+ cursor: pointer;
+}
+.left2-btn.btn1 {
+ right: 106px;
+ margin-top: 16px;
+}
+.left2-btn.btn2 {
+ right: 25px;
+ margin-top: 16px;
+}
+.left2-btn.date {
+ right: 35px;
+ margin-top: 0px;
+}
+.left2-btn.mounce {
+ right: 35px;
+ margin-top: 44px;
+}
+.left2-btn.all {
+ right: 35px;
+ margin-top: 87px;
+}
+
+.rightData {
+ position: relative;
+ color: #fff;
+ background: #010945;
+ border-radius: 11px;
+ height: 50px;
+ display: inline-flex;
+ width: 142px;
+ cursor: pointer;
+ font-weight: 700;
+ img {
+ margin: 12px;
+ height: 25px;
+ width: 27px;
+ }
+ .text {
+ width: 100px;
+ text-align: center;
+ // margin: 3px;
+ line-height: 25px;
+ span:nth-child(1) {
+ width: 100%;
+ display: block;
+ font-size: 14px;
+ }
+ span:nth-child(2) {
+ width: 100%;
+ display: block;
+ color: #00ccff;
+ font-size: 15px;
+ }
+ }
+}
+.rightData1 {
+ margin-left: 29px;
+ margin-top: 0px;
+}
+.rightData2 {
+ margin-left: 58px;
+ margin-top: 0px;
+}
+.rightData3 {
+ margin-top: 10px;
+ margin-left: 29px;
+}
+.rightData4 {
+ margin-top: 10px;
+ margin-left: 58px;
+}
+.rightData5 {
+ margin-top: 8px;
+ margin-left: 42px;
+}
+
+.textBox {
+ width: 70%;
+ height: 58px;
+ // margin: 0 auto;
+ overflow: hidden;
+ position: absolute;
+ text-align: left;
+ color: #09b560;
+ left: 20px;
+ top: 20px;
+ font-size: 15px;
+ .text {
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ }
+ .slide-enter-active,
+ .slide-leave-active {
+ transition: all 0.5s linear;
+ }
+ .slide-enter {
+ transform: translateY(20px) scale(1);
+ opacity: 1;
+ }
+ .slide-leave-to {
+ transform: translateY(-20px) scale(0.8);
+ opacity: 0;
+ }
+}
+.leftEchartTitle {
+ height: 30px;
+ display: flex;
+ line-height: 30px;
+ margin-top: 10px;
+ margin-left: 18px;
+ position: absolute;
+ .block1 {
+ width: 18px;
+ height: 9px;
+ background: #2ec7c9;
+ border-radius: 3px;
+ margin-top: 11px;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 13px;
+ margin: 0px 10px 0px 3px;
+ }
+ span:nth-child(3) {
+ color: #2ec7c9;
+ font-size: 17px;
+ font-weight: 700;
+ display: block;
+ width: 65px;
+ text-align: center;
+ }
+ span:nth-child(4) {
+ font-size: 13px;
+ color: #2ec7c9;
+ }
+}
+.leftEchartTitle2 {
+ right: 18px;
+ .block1 {
+ background: #b6a2de;
+ }
+ span:nth-child(3) {
+ color: #b6a2de;
+ font-size: 15px;
+ }
+}
+.leftEchartTitle3 {
+ margin-top: 37px;
+ .block1 {
+ background: #5ab1ef;
+ }
+ span:nth-child(3) {
+ color: #5ab1ef;
+ font-size: 15px;
+ }
+}
+.leftEchartTitle4 {
+ margin-top: 37px;
+ right: 18px;
+ .block1 {
+ background: #ffb980;
+ }
+ span:nth-child(2) {
+ width: 77px;
+ }
+ span:nth-child(3) {
+ color: #ffb980;
+ font-size: 15px;
+ }
+}
+.leftEchartTitle5 {
+ margin-top: 64px;
+ .block1 {
+ background: #fc8452;
+ }
+ span:nth-child(3) {
+ color: #fc8452;
+ font-size: 15px;
+ }
+}
+.bayHover {
+ background-color: #0445b5;
+ color: #fff !important;
+}
+.leftEchartTitle.xbNan {
+ right: 47px;
+ margin-top: 76px;
+ .block1 {
+ width: 10px;
+ height: 10px;
+ background: #008dec;
+ margin-top: 10px;
+ border-radius: 100%;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 13px;
+ }
+ span:nth-child(3) {
+ color: #008dec;
+ font-size: 17px;
+ }
+ span:nth-child(4) {
+ font-size: 13px;
+ color: #008dec;
+ }
+}
+.leftEchartTitle.xbNv {
+ right: 47px;
+ margin-top: 135px;
+ .block1 {
+ width: 10px;
+ height: 10px;
+ background: #886eff;
+ margin-top: 10px;
+ border-radius: 100%;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 13px;
+ }
+ span:nth-child(3) {
+ color: #886eff;
+ font-size: 17px;
+ }
+ span:nth-child(4) {
+ font-size: 13px;
+ color: #886eff;
+ }
+}
+.showDialog:hover {
+ cursor: pointer;
+}
+.bajgxt-home {
+ /deep/.dialog {
+ z-index: 10000000 !important;
+ .el-table {
+ top: 0px !important;
+ margin: 0px !important;
+ width: 100% !important;
+ height: calc(100% - 50px) !important;
+ .el-table__header {
+ background-color: #2d5cc8 !important;
+ }
+ .el-table__body-wrapper {
+ height: calc(100% - 50px);
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+ }
+ .el-pagination {
+ color: #a2a5a5;
+ }
+ .btn-prev,
+ .btn-next {
+ background: transparent !important;
+ }
+ .el-dialog__body {
+ padding: 10px 20px;
+ height: calc(100% - 60px);
+ .el-input {
+ width: 50px !important;
+ border-bottom: 1px solid #8a7b7b !important;
+ }
+ }
+ }
+ /deep/ .el-dialog {
+ width: 80% !important;
+ height: 77%;
+ }
+}
diff --git a/src/views/map/carGps.vue b/src/views/map/carGps.vue
index 4581d5c..65e3e29 100644
--- a/src/views/map/carGps.vue
+++ b/src/views/map/carGps.vue
@@ -2,7 +2,7 @@
* @Author: Morpheus
* @Date: 2021-07-05 16:31:54
* @Last Modified by: Morpheus
- * @Last Modified time: 2021-08-14 10:57:44
+ * @Last Modified time: 2021-09-03 16:20:17
* menu-name 押运人员定位
*/
<template>
@@ -126,8 +126,10 @@
:modal='false'
:visible.sync="dialogVisible"
:before-close="dialogBeforeClose"
+ :close-on-click-modal='false'
class="car-video-box">
<iframe src="/carVideo/parent.html"
+ ref="videoIframe"
frameborder="0"></iframe>
</el-dialog>
</el-col>
@@ -303,9 +305,18 @@
if (cont != undefined) {
that.dialogVisible = true
+
+ that.$refs.videoIframe.contentWindow.startVideo()
}
})
+ },
+
+ dialogBeforeClose() {
+ this.dialogVisible = false
+
+ this.$refs.videoIframe.contentWindow.closeVideo()
+
}
},
diff --git a/src/views/securityUnitOperation/economicAnalysis.vue b/src/views/securityUnitOperation/economicAnalysis.vue
index be41faf..94707c8 100644
--- a/src/views/securityUnitOperation/economicAnalysis.vue
+++ b/src/views/securityUnitOperation/economicAnalysis.vue
@@ -325,6 +325,57 @@
};
</script>
<style lang="scss" scoped>
+@media screen and (max-width: 1280px) {
+ .box-card {
+ font-size: 15px;
+ width: 128px;
+ background: #00aaf1;
+ height: 117px;
+ text-align: center;
+ margin-right: 28px;
+ box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
+ line-height: 36px;
+ span:nth-child(2) {
+ color: #06ffff;
+ font-size: 31px;
+ }
+ }
+ .col-content {
+ margin-top: 39px !important;
+ }
+}
+// 适配分辨率1600*900
+@media screen and (min-width: 1281px) and (max-width: 1600px) {
+ .box-card {
+ font-size: 15px;
+ width: 128px;
+ background: #00aaf1;
+ height: 117px;
+ text-align: center;
+ margin-right: 66px;
+ box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
+ line-height: 36px;
+ span:nth-child(2) {
+ color: #06ffff;
+ font-size: 31px;
+ }
+ }
+}
+@media screen and(min-width:1601px) and (max-width: 1920px) {
+ .box-card {
+ width: 150px;
+ background: #00aaf1;
+ height: 135px;
+ text-align: center;
+ margin-right: 66px;
+ box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
+ line-height: 40px;
+ span:nth-child(2) {
+ color: #06ffff;
+ font-size: 34px;
+ }
+ }
+}
.page1 {
height: 100%;
width: 100%;
@@ -362,23 +413,11 @@
font-weight: 600;
}
}
-.box-card {
- width: 150px;
- background: #00aaf1;
- height: 135px;
- text-align: center;
- margin-right: 66px;
- box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
- line-height: 40px;
-}
+
.box-card span {
display: block;
width: 100%;
color: #fff;
-}
-.box-card span:nth-child(2) {
- color: #06ffff;
- font-size: 34px;
}
.rowTitle {
height: 40px;
diff --git a/src/views/securityUnitOperation/operationAnalysis.vue b/src/views/securityUnitOperation/operationAnalysis.vue
index 3da4c0b..defe937 100644
--- a/src/views/securityUnitOperation/operationAnalysis.vue
+++ b/src/views/securityUnitOperation/operationAnalysis.vue
@@ -414,6 +414,271 @@
};
</script>
<style lang="scss" scoped>
+@media screen and (max-width: 1280px) {
+ .box-card {
+ font-size: 15px;
+ width: 128px;
+ background: #00aaf1;
+ height: 117px;
+ text-align: center;
+ margin-right: 28px;
+ box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
+ line-height: 36px;
+ span:nth-child(2) {
+ color: #06ffff;
+ font-size: 31px;
+ }
+ }
+ .col-content {
+ margin-top: 39px !important;
+ }
+ .leftEchartTitle.qing {
+ right: 10px;
+ margin-top: 42px;
+ .block1 {
+ background: #73c0de;
+ margin-top: 11px;
+ width: 10px;
+ height: 10px;
+ border-radius: 100%;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 12px;
+ margin: 0px 3px 0px 3px;
+ }
+ span:nth-child(3) {
+ color: #73c0de;
+ font-size: 15px;
+ width: 45px;
+ }
+ span:nth-child(4) {
+ font-size: 12px;
+ color: #73c0de;
+ }
+ }
+ .leftEchartTitle.zhong {
+ right: 10px;
+ margin-top: 83px;
+ .block1 {
+ width: 10px;
+ height: 10px;
+ border-radius: 100%;
+ background: #fac858;
+ margin-top: 11px;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 12px;
+ margin: 0px 3px 0px 3px;
+ }
+ span:nth-child(3) {
+ color: #fac858;
+ font-size: 15px;
+ width: 45px;
+ }
+ span:nth-child(4) {
+ font-size: 12px;
+ color: #fac858;
+ }
+ }
+ .leftEchartTitle.lao {
+ right: 10px;
+ margin-top: 125px;
+ .block1 {
+ width: 10px;
+ height: 10px;
+ border-radius: 100%;
+ background: #91cc75;
+ margin-top: 11px;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 12px;
+ margin: 0px 3px 0px 3px;
+ }
+ span:nth-child(3) {
+ color: #91cc75;
+ font-size: 15px;
+ width: 45px;
+ }
+ span:nth-child(4) {
+ font-size: 12px;
+ color: #91cc75;
+ }
+ }
+}
+// 适配分辨率1600*900
+@media screen and (min-width: 1281px)and (max-width: 1600px) {
+ .box-card {
+ font-size: 15px;
+ width: 128px;
+ background: #00aaf1;
+ height: 117px;
+ text-align: center;
+ margin-right: 66px;
+ box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
+ line-height: 36px;
+ span:nth-child(2) {
+ color: #06ffff;
+ font-size: 31px;
+ }
+ }
+ .leftEchartTitle.qing {
+ right: 37px;
+ margin-top: 42px;
+ .block1 {
+ width: 10px;
+ height: 10px;
+ background: #73c0de;
+ margin-top: 10px;
+ border-radius: 100%;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 13px;
+ }
+ span:nth-child(3) {
+ color: #73c0de;
+ font-size: 17px;
+ }
+ span:nth-child(4) {
+ font-size: 13px;
+ color: #73c0de;
+ }
+ }
+ .leftEchartTitle.zhong {
+ right: 37px;
+ margin-top: 83px;
+ .block1 {
+ width: 10px;
+ height: 10px;
+ background: #fac858;
+ margin-top: 10px;
+ border-radius: 100%;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 13px;
+ }
+ span:nth-child(3) {
+ color: #fac858;
+ font-size: 17px;
+ }
+ span:nth-child(4) {
+ font-size: 13px;
+ color: #fac858;
+ }
+ }
+ .leftEchartTitle.lao {
+ right: 37px;
+ margin-top: 125px;
+ .block1 {
+ width: 10px;
+ height: 10px;
+ background: #91cc75;
+ margin-top: 10px;
+ border-radius: 100%;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 13px;
+ }
+ span:nth-child(3) {
+ color: #91cc75;
+ font-size: 17px;
+ }
+ span:nth-child(4) {
+ font-size: 13px;
+ color: #91cc75;
+ }
+ }
+}
+@media screen and (min-width: 1601px)and (max-width: 1920px) {
+ .box-card {
+ width: 150px;
+ background: #00aaf1;
+ height: 135px;
+ text-align: center;
+ margin-right: 66px;
+ box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
+ line-height: 40px;
+ span:nth-child(2) {
+ color: #06ffff;
+ font-size: 34px;
+ }
+ }
+ .leftEchartTitle.qing {
+ right: 37px;
+ margin-top: 42px;
+ .block1 {
+ width: 10px;
+ height: 10px;
+ background: #73c0de;
+ margin-top: 10px;
+ border-radius: 100%;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 13px;
+ }
+ span:nth-child(3) {
+ color: #73c0de;
+ font-size: 17px;
+ }
+ span:nth-child(4) {
+ font-size: 13px;
+ color: #73c0de;
+ }
+ }
+ .leftEchartTitle.zhong {
+ right: 37px;
+ margin-top: 83px;
+ .block1 {
+ width: 10px;
+ height: 10px;
+ background: #fac858;
+ margin-top: 10px;
+ border-radius: 100%;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 13px;
+ }
+ span:nth-child(3) {
+ color: #fac858;
+ font-size: 17px;
+ }
+ span:nth-child(4) {
+ font-size: 13px;
+ color: #fac858;
+ }
+ }
+ .leftEchartTitle.lao {
+ right: 37px;
+ margin-top: 125px;
+ .block1 {
+ width: 10px;
+ height: 10px;
+ background: #91cc75;
+ margin-top: 10px;
+ border-radius: 100%;
+ }
+ span:nth-child(2) {
+ color: #fff;
+ font-size: 13px;
+ }
+ span:nth-child(3) {
+ color: #91cc75;
+ font-size: 17px;
+ }
+ span:nth-child(4) {
+ font-size: 13px;
+ color: #91cc75;
+ }
+ }
+}
+
.page1 {
height: 100%;
width: 100%;
@@ -452,23 +717,11 @@
font-weight: 600;
}
}
-.box-card {
- width: 150px;
- background: #00aaf1;
- height: 135px;
- text-align: center;
- margin-right: 66px;
- box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
- line-height: 40px;
-}
+
.box-card span {
display: block;
width: 100%;
color: #fff;
-}
-.box-card span:nth-child(2) {
- color: #06ffff;
- font-size: 34px;
}
.rowTitle {
height: 40px;
@@ -540,72 +793,6 @@
span:nth-child(4) {
font-size: 13px;
color: #2ec7c9;
- }
-}
-.leftEchartTitle.qing {
- right: 37px;
- margin-top: 42px;
- .block1 {
- width: 30px;
- height: 15px;
- background: #73c0de;
- margin-top: 7px;
- }
- span:nth-child(2) {
- color: #fff;
- font-size: 13px;
- }
- span:nth-child(3) {
- color: #73c0de;
- font-size: 17px;
- }
- span:nth-child(4) {
- font-size: 13px;
- color: #73c0de;
- }
-}
-.leftEchartTitle.zhong {
- right: 37px;
- margin-top: 83px;
- .block1 {
- width: 30px;
- height: 15px;
- background: #fac858;
- margin-top: 7px;
- }
- span:nth-child(2) {
- color: #fff;
- font-size: 13px;
- }
- span:nth-child(3) {
- color: #fac858;
- font-size: 17px;
- }
- span:nth-child(4) {
- font-size: 13px;
- color: #fac858;
- }
-}
-.leftEchartTitle.lao {
- right: 37px;
- margin-top: 125px;
- .block1 {
- width: 30px;
- height: 15px;
- background: #91cc75;
- margin-top: 7px;
- }
- span:nth-child(2) {
- color: #fff;
- font-size: 13px;
- }
- span:nth-child(3) {
- color: #91cc75;
- font-size: 17px;
- }
- span:nth-child(4) {
- font-size: 13px;
- color: #91cc75;
}
}
</style>
diff --git a/vue.config.js b/vue.config.js
index c82e3eb..ea7ab98 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -30,10 +30,10 @@
// target: 'http://192.168.0.109:1',
//远程演示服务地址,可用于直接启动项目
// target: 'http://2h3f861221.wicp.vip:58646',
- // target: 'http://s16s652780.51mypc.cn/api',
- // target: 'http://192.168.0.114:82',
- // target: 'http://192.168.0.109:82',
target: 'http://s16s652780.51mypc.cn/api',
+ // target: 'http://192.168.0.114:82',
+ // target: 'http://192.168.0.108:82',
+ // target: 'http://s16s652780.51mypc.cn/api',
// 服务器使用
// target: 'http://localhost:82',
ws: true,
--
Gitblit v1.9.3