From d874cdc354465eeed76f7039de9e4d7e5b17dabc Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Tue, 20 Apr 2021 18:23:19 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/jfpt-Vue
---
src/components/liu-legend/Legend.vue | 19
src/views/policeTracking/policeTracking.vue | 44 +
public/map/lib/layui/css/modules/layer/myskin/FlareClusterLayer.css | 19
public/map/popup/html/FlareClusterLayer_v3 copy.html | 318 ++++++++
public/map/widgets/supervisoryMap/SupervisoryMap.js | 601 +++++++++++++++
src/views/clientManagement/clientManagement.vue | 4
src/views/realTimePolice/real.vue | 137 ++-
public/map/widgets/supervisoryMap/template.html | 253 ++++++
public/map/widgets/supervisoryMap/SupervisoryMap.css | 375 ++++++++++
public/map/images/1.gif | 0
public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js | 236 ++++--
public/map/popup/html/FlareClusterLayer_v3.html | 88 +
public/map/widgets/alertSecurity/AlertSecurity.js | 124 +-
public/map/images/real-time-callPolice-opcity.png | 0
14 files changed, 1,987 insertions(+), 231 deletions(-)
diff --git a/public/map/images/1.gif b/public/map/images/1.gif
new file mode 100644
index 0000000..dd90182
--- /dev/null
+++ b/public/map/images/1.gif
Binary files differ
diff --git a/public/map/images/real-time-callPolice-opcity.png b/public/map/images/real-time-callPolice-opcity.png
new file mode 100644
index 0000000..5f6c3d0
--- /dev/null
+++ b/public/map/images/real-time-callPolice-opcity.png
Binary files differ
diff --git a/public/map/lib/layui/css/modules/layer/myskin/FlareClusterLayer.css b/public/map/lib/layui/css/modules/layer/myskin/FlareClusterLayer.css
new file mode 100644
index 0000000..1f69535
--- /dev/null
+++ b/public/map/lib/layui/css/modules/layer/myskin/FlareClusterLayer.css
@@ -0,0 +1,19 @@
+.flare {
+ background: transparent;
+ border-radius: 10px;
+}
+
+/* .flare .layui-layer-title {
+ padding: 0 80px;
+ text-align: center;
+ background: rgb(63, 184, 33);
+ border: none;
+ color: #677788;
+ font-size: 20px;
+ border-radius: 10px 10px 0 0;
+} */
+
+.flare .layui-layer-content {
+ background: rgb(255, 255, 255);
+ border-radius: 5px 5px 5px 5px;
+}
\ No newline at end of file
diff --git a/public/map/popup/html/FlareClusterLayer_v3 copy.html b/public/map/popup/html/FlareClusterLayer_v3 copy.html
new file mode 100644
index 0000000..1993ef2
--- /dev/null
+++ b/public/map/popup/html/FlareClusterLayer_v3 copy.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+ <link rel="stylesheet" href="../style/FlareClusterLayer_v3.css">
+ <script src='../../lib/jquery.js'></script>
+ <script src='../js/FlareClusterLayer_v3.js'></script>
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+ <!-- layui -->
+ <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
+ <style>
+ a:hover {
+ color: white;
+ }
+body{
+ width: 360px;
+ height: 484px;
+ overflow: hidden;
+}
+ #appliutwo {
+ width: 330px;
+ height: 484px;
+ border-radius: 10px;
+ margin: 16px 15px 16px 15px;
+
+ /* border: springgreen solid 0.5px; */
+ }
+
+ .flare-liu-top {
+ width: 330px;
+ height: 90px;
+ /* border: rgb(211, 154, 31) solid 0.5px; */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ color: white;
+ border-radius: 5px 5px 5px 5px;
+ }
+
+ .f-l-t-heard {
+ width: 300px;
+ height: 30px;
+ font-size: 18px;
+ font-family: PingFangSC-Regular;
+ }
+
+ .f-l-t-right {
+ width: 300px;
+ height: 28px;
+ display: flex;
+ align-items: center;
+ color: white;
+ justify-content: space-around;
+ }
+
+ .f-l-t-r-msg {
+ width: 200px;
+ height: 28px;
+ }
+
+ .f-l-t-r-but {
+ width: 72.531px;
+ height: 28px;
+ line-height: 28px;
+ text-align: center;
+ background: rgba(255, 255, 255, .2);
+ color: white;
+ /* border: wheat 1px solid; */
+ }
+
+ .f-l-t-r-but a {
+ color: white;
+ width: 48.52px;
+ height: 16px;
+ }
+
+ .flare-liu-body {
+ width: 330px;
+ height: 361px;
+ /* border: rgb(106, 20, 187) solid 0.5px; */
+
+ }
+
+ .r-b-top {
+ height: 200px;
+ display: flex;
+
+ display: flex;
+ flex-direction: column;
+ }
+
+ .r-b-t-main {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ padding: 10px 0 10px 0;
+ margin-bottom: 5px;
+ }
+
+ .r-b-t-left {
+ display: block;
+ width: 27%;
+
+ }
+
+ .r-b-t-right {
+ display: block;
+ width: 70%;
+ color: #5d5d5d;
+ font-size: 12px;
+
+ }
+
+ .r-b-t-r-label {
+ float: left;
+ margin-right: 10px;
+ padding: 0 10px 0 10px;
+ border: 1px solid rgba(0, 0, 0, 0.5);
+ border-radius: 5px;
+ }
+
+ .r-b-t-r-imgsl {
+
+ float: left;
+ padding: 0 3px 0 3px;
+ }
+ </style>
+</head>
+
+<body>
+ <div id="appliutwo" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
+ <!-- 从layui传值给iframe 的占位input -->
+ <input type="text" id="sidIput" ref="sidIput" style="display:none">
+ <div class="flare-liu-top">
+ <div class="f-l-t-heard">{{name}}</div>
+ <div class="f-l-t-right">
+ <div class="f-l-t-r-msg"></div>
+ <div class="f-l-t-r-but"> <a href="#">查看详情</a> </div>
+ </div>
+ </div>
+ <div class="flare-liu-body">
+ <!-- layui -->
+ <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
+ <ul class="layui-tab-title">
+ <li class="layui-this">基本信息</li>
+ <li>other</li>
+ <!-- <li>权限分配</li>
+ <li>商品管理</li>
+ <li>订单管理</li> -->
+ </ul>
+ <div class="layui-tab-content" style="height: 100px;">
+ <div class="layui-tab-item layui-show">
+ <div class="r-b-top">
+ <div class="r-b-t-main">
+ <span class="r-b-t-left">设备名称</span>
+ <span class="r-b-t-right">{{ name }}</span>
+ </div>
+ <div class="r-b-t-main">
+ <span class="r-b-t-left">设备联系人</span>
+ <span class="r-b-t-right">{{ contacts }}: {{ calls }}</span>
+ </div>
+ <!-- 设备标签待定 -->
+ <!-- <div class="r-b-t-main">
+ <span class="r-b-t-left">设备标签</span>
+ <span class="r-b-t-right">
+ <div
+ class="r-b-t-r-label"
+ v-for="(value,index) in labels"
+ :key="index"
+ >
+ {{value}}
+ </div>
+ </span>
+ </div> -->
+ <!-- 图暂时没有 -->
+ <div class="r-b-t-main">
+ <span class="r-b-t-left" style="position: relative; top: -27px">部署图片</span>
+ <span class="r-b-t-right">
+ <div class="r-b-t-r-imgsl" v-for="(value, index) in imgsl" :key="index">
+ <el-image style="width: 68px; height: 68px" :src="value"
+ :preview-src-list="imgsl" v-show="value != 'no'">
+ </el-image>
+ <div v-show="value == 'no'" style="
+ width: 68px;
+ height: 68px;
+ text-algin: center;
+ color: rgba(0, 0, 0, 0.5);
+ ">
+ 无图片
+ </div>
+ </div>
+ </span>
+ </div>
+ <div class="r-b-t-main">
+ <span class="r-b-t-left">部署时间</span>
+ <span class="r-b-t-right">{{ deploymentTime }}</span>
+ </div>
+ </div>
+ </div>
+ <div class="layui-tab-item">
+
+ </div>
+ <!-- <div class="layui-tab-item">内容3</div>
+ <div class="layui-tab-item">内容4</div>
+ <div class="layui-tab-item">内容5</div> -->
+ </div>
+ </div>
+ </div>
+ <script src="../../lib/layui/layui.js" charset="utf-8"></script>
+ <script>
+ // var index = parent.layer.getFrameIndex(window.name);
+
+ </script>
+ <script>
+ var me = new Vue({
+ el: '#appliutwo',
+ data: {
+ num: '',
+ name: '',
+ //详细信息data
+ ourData: '',
+ // names: '',
+ contacts: '',
+ calls: '',
+ imgsl: [],
+ deploymentTime: '',
+ oldtime: '',
+ newtime: ''
+ },
+ methods: {
+ getdatas(dat) {
+ this.name = dat.deviceName;
+ me.num = dat.deviceNumber;
+ this.evaluate = "空气质量";
+ this.machineCode = "无数据" && dat.deviceNumber;
+ this.smoke = "烟雾";
+ this.proportion = "电量";
+ this.ReportTime = "最近上报：" + dat.heartbeat;
+ this.contacts = "无数据" && dat.oneContacts;
+ this.calls = "无数据" && dat.onePhone;
+ this.labels = ["无数据"] && [dat.deviceType];
+ var imgD = ["no"];
+ this.imgsl = ["no"] && imgD;
+ this.deploymentTime = "无数据" && dat.stime;
+
+ var ct = document.getElementsByClassName('flare-liu-top')[0];
+ if (dat.onlineStatus == 1) {
+ ct.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A';
+ } else {
+ ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';
+
+ }
+ }
+ },
+ mounted() {
+ this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
+ clearTimeout(this.oldtime);
+ this.ourData = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
+ // console.log(this.ourData);
+ this.getdatas(this.ourData);
+ }, 20);
+
+ window.onload = () => {
+ layui.use('element', function () {
+ var $ = layui.jquery
+ , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
+
+ //触发事件
+ var active = {
+ // tabAdd: function () {
+ // //新增一个Tab项
+ // element.tabAdd('demo', {
+ // title: '新选项' + (Math.random() * 1000 | 0) //用于演示
+ // , content: '内容' + (Math.random() * 1000 | 0)
+ // , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
+ // })
+ // }
+ // , tabDelete: function (othis) {
+ // //删除指定Tab项
+ // element.tabDelete('demo', '44'); //删除：“商品管理”
+
+
+ // othis.addClass('layui-btn-disabled');
+ // }
+ // ,
+ tabChange: function () {
+ //切换到指定Tab项
+ element.tabChange('demo', '22'); //切换到：用户管理
+ }
+ };
+
+ $('.site-demo-active').on('click', function () {
+ var othis = $(this), type = othis.data('type');
+ active[type] ? active[type].call(this, othis) : '';
+ });
+
+ //Hash地址的定位
+ var layid = location.hash.replace(/^#test=/, '');
+ element.tabChange('test', layid);
+
+ element.on('tab(test)', function (elem) {
+ location.hash = 'test=' + $(this).attr('lay-id');
+ });
+
+ });
+
+ }
+ }
+ })
+ </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/map/popup/html/FlareClusterLayer_v3.html b/public/map/popup/html/FlareClusterLayer_v3.html
index c696572..6944d37 100644
--- a/public/map/popup/html/FlareClusterLayer_v3.html
+++ b/public/map/popup/html/FlareClusterLayer_v3.html
@@ -12,19 +12,51 @@
<!-- layui -->
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
<style>
-
+ body {
+ /* border: 1px solid rgb(48, 170, 48); */
+ }
+
+ #appliu {
+ /* border: 1px solid #000; */
+ border-radius: 5px 5px 5px 5px;
+ }
+
+ .names {
+ width: 200px;
+ height: 45px;
+ color: #fff;
+ border-radius: 5px 5px 5px 5px;
+ line-height: 45px;
+ padding-left: 8px;
+ background-color: #fff;
+ /* border: 1px solid rgb(223, 52, 52); */
+ /* background-4356765795678953423465989-9=\][;'\.,/.,1i123ge: linear-gradient(to right, #FFC031, #F49055);
+ background-image: linear-gradient(to right, #3DDEA8, #1FBD9A);
+ background-image: linear-gradient(to right, #787878, #5F5F5F); */
+ }
+
+ .msgs {
+ width: 200px;
+ height: 30px;
+ line-height: 30px;
+ padding-left: 8px;
+ /* border: 1px solid rgb(30, 160, 192); */
+ }
</style>
</head>
<body>
<div id="appliu" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
- <div>{{name}}</div>
- <div>{{num}}</div>
- <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
+ <!-- 从layui传值给iframe 的占位#input1 -->
+ <input type="text" id="input1" ref="sidIputoine" style="display:none">
+ <!-- 从layui传值给iframe 的占位#input2
+ <input type="text" id="input2" ref="ip2" style="display:none" v-model='ip2'> -->
+ <div class="names">{{name}}</div>
+ <div class="msgs">{{num}}</div>
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script>
// var index = parent.layer.getFrameIndex(window.name);
-
+
</script>
<script>
var me = new Vue({
@@ -33,26 +65,46 @@
num: '',
name: ''
},
+ ourData: '',
+ // ip2: '',
+ // computed: {
+ // ip2s() {
+ // // var a = JSON.parse(this.$refs.ip2.value);
+ // var a = me.ip2;
+ // console.log(a, 'computed');
+ // return a;
+ // }
+ // },
methods: {
- GetQueryString(useName) {
- var reg = new RegExp("(^|&)" + useName + "=([^&]*)(&|$)", "i");
- var r = window.location.search.substr(1).match(reg);
- if (r != null) {
- return decodeURI(r[2]);
+ getdatas(dat) {
+ me.name = dat.deviceName.length >= 13 ? dat.deviceName.substring(0, 13) + '···' : dat.deviceName;
+ this.num = "无数据" && dat.deviceNumber;
+ var ct = document.getElementsByClassName('names')[0];
+ if (dat.onlineStatus == 1) {
+ ct.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A';
} else {
- return null;
+ ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';
+
}
}
},
mounted() {
- window.onload = () => {
- // console.log(me);
- // console.log(window.location.href)
- me.num = me.GetQueryString("num");
- me.name = me.GetQueryString("name");
- // console.log(me.num,me.name);
- }
+ this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
+ clearTimeout(this.oldtime);
+ this.ourData = JSON.parse(this.$refs.sidIputoine.value);//json对象转js对象
+ // console.log(this.ourData);
+ this.getdatas(this.ourData);
+ }, 20);
+ // window.onload = () => {
+
+ // }
+
+ },
+ watch: {
+ ip2s() {
+ console.log(this.ip2s)
+ }
}
})
</script>
diff --git a/public/map/widgets/alertSecurity/AlertSecurity.js b/public/map/widgets/alertSecurity/AlertSecurity.js
index 8844276..a8e54c0 100644
--- a/public/map/widgets/alertSecurity/AlertSecurity.js
+++ b/public/map/widgets/alertSecurity/AlertSecurity.js
@@ -204,8 +204,10 @@
var deptId = that.getQueryStringByKey('deptId');
var oneId = that.getQueryStringByKey('oneId');
+ that.createEntitys(that.addEntitys, lgtd, lttd, './images/real-time-callPolice-opcity.png');
+ that.createTwinkleEntitys(that.addEntitys, lgtd, lttd, './images/real-time-callPolice-opcity.png');
that.addPoint(that.addEntitys, lgtd, lttd, './images/jingbaored.png');
-
+
$.ajax({
url: "https://web.byisf.com/api/blade-user/pages?current=1&size=9999&work_status=&deptId=" + deptId,
type: 'get',
@@ -232,65 +234,83 @@
close: function () {
},
- // 获取当前时间，以及昨天现在的时间
- getTime: function getTime() {
- var timestamp = Date.parse(new Date());
-
- // 当前时间
- var currentTime = new Date(timestamp);
- // 年
- var currentY = currentTime.getFullYear();
- // 月
- var currentM = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1;
- // 日
- var currentD = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
- // 时
- var currentH = currentTime.getHours() < 10 ? '0' + currentTime.getHours() : currentTime.getHours();
- // 分
- var currentDd = currentTime.getMinutes() < 10 ? '0' + currentTime.getMinutes() : currentTime.getMinutes();
- // 明天
- var tomorrowTime = new Date(timestamp - 60 * 60 * 24 * 1000);
- // 年
- var tomorrowY = tomorrowTime.getFullYear();
- // 月
- var tomorrowM = tomorrowTime.getMonth() + 1 < 10 ? '0' + (tomorrowTime.getMonth() + 1) : tomorrowTime.getMonth() + 1;
- // 日
- var tomorrowD = tomorrowTime.getDate() < 10 ? '0' + tomorrowTime.getDate() : tomorrowTime.getDate();
- // 时
- var tomorrowH = tomorrowTime.getHours() < 10 ? '0' + tomorrowTime.getHours() : tomorrowTime.getHours();
- // 分
- var tomorrowDd = tomorrowTime.getMinutes() < 10 ? '0' + tomorrowTime.getMinutes() : tomorrowTime.getMinutes();
- return {
- current: currentY + '-' + currentM + '-' + currentD + ' ' + currentH + ':' + currentDd,
- tomorrow: tomorrowY + '-' + tomorrowM + '-' + tomorrowD + ' ' + tomorrowH + ':' + tomorrowDd,
- month: currentM + currentD
- };
- },
-
- // 创建实体图层
- createEntitys: function (entitys, entityContent, name, item, lgtd, lttd, outlineColors) {
-
- var symbol = new esri.symbol.PictureMarkerSymbol(outlineColors, 26, 26);
- symbol.name = name;
- var pt = new Point(lgtd, lttd, new esri.SpatialReference({
- wkid: 4326
- }));
- pt.entityData = item;
- var graphic = new esri.Graphic(pt, symbol);
- entitys.add(graphic);
-
-
- entityContent.push(item);
- },
addPoint: function (entitys, lgtd, lttd, img) {
- var symbol = new esri.symbol.PictureMarkerSymbol(img, 33, 48);
+ var symbol = new esri.symbol.PictureMarkerSymbol(img, 22, 32);
+ symbol.xoffset = 0;
+ symbol.yoffset = -2;
var pt = new Point(lgtd, lttd, new SpatialReference({
wkid: 4326
}));
var graphic = new esri.Graphic(pt, symbol);
entitys.add(graphic);
},
+ /**
+ * 添加实体的公共方法
+ * @param {*} entitys 实体类
+ * @param {Array} entityContent 存放每个点详细数据的数组
+ * @param {string} name 实体的名字
+ * @param {*} item 实体数据
+ * @param {*} lgtd 经度
+ * @param {*} lttd 纬度
+ * @param {*} outlineColors 颜色
+ */
+ createEntitys: function (entitys, lgtd, lttd, image) {
+
+ var symbol = new esri.symbol.PictureMarkerSymbol(image, 44, 44);
+
+ var width = 44;
+ var height = 44;
+ var pt = new Point(lgtd, lttd, new SpatialReference({
+ wkid: 4326
+ }));
+
+ var graphic = new esri.Graphic(pt, symbol);
+
+ setInterval(function () {
+ if (width >= 60) {
+ width = 44;
+ height = 44;
+ }
+ width += 1;
+ height += 1;
+ symbol.width = width;
+ symbol.height = height;
+ graphic.setSymbol(symbol)
+ entitys.add(graphic);
+ }, 50)
+
+ },
+ /**
+ * 添加闪烁实体的公共方法
+ * @param {*} entitys 实体类
+ * @param {*} lgtd 经度
+ * @param {*} lttd 纬度
+ * @param {*} color 颜色
+ */
+ createTwinkleEntitys: function (entitys, lgtd, lttd, image, color) {
+ var symbol = new esri.symbol.PictureMarkerSymbol(image, 64, 64);
+ var width = 64;
+ var height = 64;
+ var pt = new Point(lgtd, lttd, new SpatialReference({
+ wkid: 4326
+ }));
+
+ var graphic = new esri.Graphic(pt, symbol);
+
+ setInterval(function () {
+ if (width >= 80) {
+ width = 64;
+ height = 64;
+ }
+ width += 1;
+ height += 1;
+ symbol.width = width;
+ symbol.height = height;
+ graphic.setSymbol(symbol)
+ entitys.add(graphic);
+ }, 50)
+ },
addPoints: function (entitys, lgtd, lttd, img) {
var symbol = new esri.symbol.PictureMarkerSymbol(img, 20, 20);
diff --git a/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js b/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
index 2199920..f56d68e 100644
--- a/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
+++ b/public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js
@@ -169,7 +169,7 @@
},
_mapClick: function (e) {//地图全局点击事件 标记不能点击
// console.log('地图全局点击事件');
-
+
if (!e.target) {
return;
}
@@ -189,62 +189,144 @@
onClick: function (evt) { //标志以及聚合表示点击事件
var eour = evt.graphic.attributes.clusterCount;
- if(eour == undefined){
- var dataO = evt
+ if (eour == undefined) {
+ var dataO = evt;
+ var aa = evt.graphic.screenX;
+ var bb = evt.graphic.screenX;
var data = {
- nums : evt.graphic.attributes.deviceNumber,
- nams : evt.graphic.attributes.deviceName,
+ nums: evt.graphic.attributes.deviceNumber,
+ nams: evt.graphic.attributes.deviceName,
+ type: evt.graphic.attributes.jtype,
}
- console.log(dataO);
-
- var rightCard = (num,name,posi)=>{
- var that = this;
- var url = './popup/html/FlareClusterLayer_v3.html?num=' + num + '&name=' + name;
- layui.use('layer', function () {
- that.layuiLayer = layui.layer;
- // that.layuiLayer.config({
- // extend: 'myskin/police-details.css'
- // });
- that.layuiLayer.close(that.layuiLayer.index);
- that.layuiLayer.open({
- title: '',
- type: 2,
- shadeClose: true,
- shade: false,
- skin: 'demo-class',
- id: 'onelyOne',
- maxmin: false, //开启最大化最小化按钮
- // area: ['500px', '400px'],
- offset: posi,
- skin: 'police-details',
- content: [url,'no'],
- resize: false,
- closeBtn: 1,
- success: function(layero, index){//成功后添加全局点击关闭
- console.log(layero, index);
-
- // var a = window.onmousedown = ()=>{
- // // parent[0].layer.close(index);
- // // begins();
- // }
- var d = document.onclick = ()=>{
- parent[0].layer.close(index);
- d = '';
- }
- },
- });
+ // console.log(dataO);
+ // console.log(aa - bb);
+
+ var fCard = (posi) => {
+ var that = this,
+ url = './popup/html/FlareClusterLayer_v3.html',
+ clickD = null,
+ downs = null,
+ moves = null,
+ ups = null;
+ layui.use('layer', function () {
+ that.layuiLayer = layui.layer;
+ that.layuiLayer.config({
+ extend: 'myskin/FlareClusterLayer.css'
+ });
+ // layer.alert('layer 新皮肤');
+ that.layuiLayer.close(that.layuiLayer.index);
+ that.layuiLayer.open({
+ title: '',
+ type: 2,
+ shadeClose: false,
+ shade: false,
+ skin: 'demo-class',
+ id: 'onelyOne',
+ maxmin: false, //开启最大化最小化按钮
+ area: ['200px', '75px'],
+ // area: 'auto',
+ offset: posi,
+ skin: 'flare',
+ closeBtn: 0,//关闭按钮，可通过配置1和2来展示,0关闭
+ content: [url, 'no'],
+ resize: false,
+ scrollbar: false,
+ tipsMore: true, //允许多个tipe
+ // content: num,
+ success: function (layero, index) {//成功后添加全局点击关闭
+ $("#layui-layer-iframe" + index).contents().find("#input1").val(JSON.stringify(evt.graphic.attributes));
+ // console.log(layero, index);
+ layero[0].style.position = 'absolute';
+ downs = document.onmousedown = () => {
+ // console.log('down');//start
+ // downs = document.onmousedown = null;
+ var mx = window.event.clientX//鼠标初始位置
+ , my = window.event.clientY
+ , cx = this.offset[1].replace("px","")//初始位置
+ , cy = this.offset[0].replace("px","");
+ moves = document.onmousemove = () => {
+ // console.log('move');//move
+ // console.log(this.offset)
+ var ux = window.event.clientX//记录实时位置
+ , uy = window.event.clientY;
+ var endx = +cx + (ux - mx)// 初始位置+（鼠标初始位置-实时位置）
+ , endy = +cy + (uy - my);
+ layero[0].style.left = endx + 'px';
+ layero[0].style.top = endy + 'px';
+ // console.log(+cx, +cy,'初始位置');
+ // console.log(mx, my,'鼠标初始位置');
+ // console.log(ux, uy,'记录实时位置');
+ // console.log(ux, uy,'最后位置');
+
+ ups = document.onmouseup = () => {
+ // console.log('up');//end
+ downs = document.onmousedown = null;
+ moves = document.onmousemove = null;
+ ups = document.onmouseup = null;
+ }
+ }
+ }
+
+ clickD = document.onclick = () => {
+ parent[0].layer.close(index);
+ parent[0].layer.close(+index + 1);
+ // parent[0].layer.closeAll();
+ // console.log(111111111111)
+ clickD = document.onclick = null;
+ }
+
+ },
+ end: function () {//关闭事件
+
+ }
+ });
+ that.layuiLayer.open({//第二个iframe
+ title: '',
+ type: 2,
+ shadeClose: true,
+ shade: false,
+ skin: 'demo-class',
+ id: 'onelyTwo',
+ maxmin: false, //开启最大化最小化按钮
+ area: ['360px', '484px'],
+ // area: 'auto',
+ offset: 'r',
+ skin: 'flare',
+ isOutAnim: false,
+ closeBtn: 0,//关闭按钮，可通过配置1和2来展示,0关闭
+ content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
+ resize: false,
+ scrollbar: false,
+ // tipsMore: true, //允许多个tipe
+ // content: num,
+ success: function (layero, index) {//成功后添加全局点击关闭
+ // var z = document.onclick = ()=>{
+ // parent[0].layer.close(index);
+ // // // parent[0].layer.close(+index + 1);
+ // z = null;
+ // }
+ //尝试传值
+ //js对象转json对象
+ $("#layui-layer-iframe" + index).contents().find("input").val(JSON.stringify(evt.graphic.attributes));
+ },
})
+ })
}
- var offsetMy = [+evt.screenY - 370 + 'px',+evt.screenX - 370 + 'px'];
- rightCard (data.nums,data.nams,offsetMy);
- var begins = ()=>{
- var offsetMy = [+evt.screenY - 370 + 'px',+evt.screenX - 370 + 'px'];
- rightCard (data.nums,data.nams,offsetMy);
+ var offsetMy = [+evt.screenY - 300 + 'px', +evt.screenX - 172.5 + 'px'];
+ // var offsetMy = [+evt.graphic._shape.shape.y - 80 + 'px',+evt.graphic._shape.shape.x + 'px'];
+ fCard(offsetMy);
+ var begins = (xy) => {
+ var offsetMy = [xy.y + 'px', xy.x + 'px'];
+ fCard(offsetMy);
}
- }else {
- console.log(num,'zoom');
+ } else {
+ // var taxLotExtent = evt.graphic.geometry.getExtent();
+ // this.map.setExtent(evt.graphic._extent)
+ this.map.setZoom(this.map.getZoom() + 1)//地图中心缩放
+ // this.map.setZoom(18);
+ // console.log('111:', this.map.zoomToFullExtent(), '222:', evt, evt.graphic._extent, 'zoom');
}
- console.log(evt)
+ // console.log(evt)
this._restoreInfoWindowSettings();
if (evt.graphic.attributes.isCluster) {
@@ -444,7 +526,7 @@
dojo.query("g.cluster-group:empty", this.getNode()).forEach(dojo.destroy);
},
-
+
_graphicDraw: function (e) {
var g = e.graphic;
if (g.attributes.isCluster) {
@@ -810,11 +892,11 @@
//add a text element for the label to display the count and add to the group
var shapeCenter = this._getShapeCenter(cluster.graphicShape);
var textShape = groupShape.createText({
- x: shapeCenter.x,
- y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
- text: cluster.clusterCount,
- align: 'middle'
- })
+ x: shapeCenter.x,
+ y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
+ text: cluster.clusterCount,
+ align: 'middle'
+ })
.setFont({
size: this.textSymbol.font.size,
family: this.textSymbol.font.family,
@@ -938,10 +1020,10 @@
//create a transparent circle that contains the boundary of the flares, this is to make sure the mouse events don't fire moving in between flares
var conCircleRadius = (center.x - (bbox.x - radius - buffer)) + radius; //get the radius of the circle to contain everything
var containerCircle = groupShape.createCircle({
- cx: center.x,
- cy: center.y,
- r: conCircleRadius
- })
+ cx: center.x,
+ cy: center.y,
+ r: conCircleRadius
+ })
//.setStroke({ width: 1, color: "000" })
.setFill(new Color([0, 0, 0, 0]));
containerCircle.rawNode.setAttribute("class", "flare-object cluster-object");
@@ -1242,11 +1324,11 @@
var textShapes = [];
for (var i = 0, len = lines.length; i < len; i++) {
var textShape = tooltipGroup.createText({
- x: xPos,
- y: yPos + (i * 10),
- text: lines[i],
- align: 'middle'
- })
+ x: xPos,
+ y: yPos + (i * 10),
+ text: lines[i],
+ align: 'middle'
+ })
.setFill("#000")
.setFont({
size: 8,
@@ -1260,12 +1342,12 @@
var rectPadding = 2;
var textBox = tooltipGroup.getBoundingBox();
var rectShape = tooltipGroup.createRect({
- x: textBox.x - rectPadding,
- y: textBox.y - rectPadding,
- width: textBox.width + (rectPadding * 2),
- height: textBox.height + (rectPadding * 2),
- r: 0
- })
+ x: textBox.x - rectPadding,
+ y: textBox.y - rectPadding,
+ width: textBox.width + (rectPadding * 2),
+ height: textBox.height + (rectPadding * 2),
+ r: 0
+ })
.setFill(new Color([255, 255, 255, 0.9]))
.setStroke({
color: "#000",
@@ -1401,11 +1483,11 @@
//Have to add the flare text after the flare group animation otherwise Edge just reloads the page and dies for some reason?
if (this.shape.flareText) {
var flareText = this.shape.createText({
- x: this.shape.flareText.location.x,
- y: this.shape.flareText.location.y,
- text: this.shape.flareText.text,
- align: 'middle'
- })
+ x: this.shape.flareText.location.x,
+ y: this.shape.flareText.location.y,
+ text: this.shape.flareText.text,
+ align: 'middle'
+ })
.setFill(layer.textSymbol.color)
.setFont({
size: this.shape.flareText.textSize,
diff --git a/public/map/widgets/supervisoryMap/SupervisoryMap.css b/public/map/widgets/supervisoryMap/SupervisoryMap.css
index e69de29..0fd2a64 100644
--- a/public/map/widgets/supervisoryMap/SupervisoryMap.css
+++ b/public/map/widgets/supervisoryMap/SupervisoryMap.css
@@ -0,0 +1,375 @@
+/* .analysis-and-judgment {
+ display: none;
+} */
+
+div[open-li='analysis-and-judgment'] {
+ box-sizing: border-box;
+}
+
+div[open-li='analysis-and-judgment']>ul {
+ display: flex;
+ height: 36px;
+ line-height: 36px;
+}
+
+div[open-li='analysis-and-judgment']>ul>li {
+ flex: 1;
+ font-size: 15px;
+ text-align: center;
+ color: #7b7b7b;
+ cursor: pointer;
+ background: #E5E5E5;
+}
+
+div[open-li='analysis-and-judgment']>ul>li.on {
+ color: #677788;
+ background: #fff;
+}
+
+.analysis-and-judgment {
+ width: 360px;
+ height: calc(100%);
+ background: rgb(255, 255, 255);
+}
+
+/* 分析研判内容容器 */
+.analysis-container {
+ position: relative;
+ height: calc(100% - 38px);
+ font-size: 14px;
+}
+
+.analysis-container>div {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.analysis-container>div:nth-child(2) {
+ display: none;
+}
+
+.analysis-container>div:nth-child(3) {
+ display: none;
+}
+
+/* 类别选择，级别选择，以及热力图 */
+.analysis-container .analysis-category,
+.analysis-container .analysis-level {
+ width: 100%;
+ height: 40px;
+ line-height: 40px;
+ padding: 4px 6px 0 6px;
+ box-sizing: border-box;
+ color: #677788;
+}
+
+.analysis-container .analysis-category>ul,
+.analysis-container .analysis-level>ul {
+ display: flex;
+ height: 36px;
+ line-height: 36px;
+ align-items: center;
+}
+
+.analysis-container .analysis-category>ul>li,
+.analysis-container .analysis-level>ul>li {
+ height: 36px;
+ line-height: 36px;
+}
+
+.analysis-container .analysis-category>ul>li:first-child,
+.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2),
+.analysis-container .analysis-level>ul>li:first-child {
+ margin-right: 4px;
+ position: relative;
+ padding-left: 4px;
+ flex: 8;
+ color: #677788;
+ background: rgb(255, 255, 255);
+ border: 1px solid rgba(231, 234, 243, 1);
+ box-sizing: border-box;
+}
+
+.analysis-container .analysis-container-police .analysis-category>ul>li:first-child,
+.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) {
+ flex: 4;
+}
+
+
+.analysis-container .analysis-category>ul>li:last-child,
+.analysis-container .analysis-level>ul>li:last-child {
+ flex: 2;
+ text-align: center;
+}
+
+.analysis-container .analysis-category>ul>li:last-child input,
+.analysis-container .analysis-level>ul>li:last-child input {
+ vertical-align: middle;
+}
+
+/* 类别选择中得下拉框 */
+.analysis-container .analysis-category>ul>li:first-child div:first-child,
+.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:first-child,
+.analysis-container .analysis-level>ul>li:first-child div:first-child {
+ position: absolute;
+ top: 0;
+ left: 30px;
+ width: calc(100% - 30px);
+ height: 34px;
+ color: #677788;
+ padding-left: 10px;
+ box-sizing: border-box;
+ cursor: pointer;
+
+}
+
+.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:first-child {
+ left: 16px;
+ width: calc(100% - 16px);
+}
+
+.analysis-container .analysis-category>ul>li:first-child div:first-child i,
+.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:first-child i,
+.analysis-container .analysis-level>ul>li:first-child div:first-child i {
+ display: block;
+ position: absolute;
+ top: 50%;
+ right: 4px;
+ transform: translate(0, -50%);
+ width: 10px;
+ height: 10px;
+ background: url('../../images/select-bg.png') repeat;
+ background-size: 100% 100%;
+}
+
+.analysis-container .analysis-category>ul>li:first-child div:last-child,
+.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) div:last-child,
+.analysis-container .analysis-level>ul>li:first-child div:last-child {
+ display: none;
+ position: absolute;
+ top: 35px;
+ left: -1px;
+ z-index: 10;
+ width: calc(100% + 2px);
+}
+
+
+.analysis-container .analysis-category>ul>li:first-child ul,
+.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul,
+.analysis-container .analysis-level>ul>li:first-child ul {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ max-height: 300px;
+ height: auto;
+ overflow-y: auto;
+ overflow-x: hidden;
+ border: 1px solid rgba(231, 234, 243, 1);
+ border-top: none;
+ box-sizing: border-box;
+
+}
+
+.analysis-container .analysis-category>ul>li:first-child ul li,
+.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul li,
+.analysis-container .analysis-level>ul>li:first-child ul li {
+ flex: 1;
+ padding-left: 10px;
+ height: 34px;
+ border-top: 1px solid rgba(231, 234, 243, 1);
+ background: rgb(255, 255, 255);
+ color: #677788;
+ box-sizing: border-box;
+ cursor: pointer;
+}
+
+.analysis-container .analysis-category>ul>li:first-child ul li:hover,
+.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul li:hover,
+.analysis-container .analysis-level>ul>li:first-child ul li:hover {
+ color: #15a2fe;
+ background: #beeeff;
+}
+
+.analysis-container .analysis-category>ul>li:first-child ul li:first-child,
+.analysis-container .analysis-container-police .analysis-category>ul>li:nth-child(2) ul li:first-child,
+.analysis-container .analysis-level>ul>li:first-child ul li:first-child {
+ border: none;
+}
+
+/* 时间选择 */
+.analysis-container .analysis-selection-criteria {
+ display: flex;
+ padding: 4px 6px;
+ width: 100%;
+ height: 40px;
+ line-height: 32px;
+ color: #677788;
+ box-sizing: border-box;
+}
+
+.analysis-container .analysis-selection-criteria input {
+ border: 1px solid rgba(231, 234, 243, 0.7);
+}
+
+.analysis-container .analysis-selection-criteria input[type='text'] {
+ width: 0;
+ flex: 5;
+ padding: 0 4px;
+ color: #677788;
+ cursor: pointer;
+ background-color: #fff;
+ background: url('../../images/laydata-bg.png') no-repeat;
+ background-size: 18px 16px;
+ background-position: 98% center;
+}
+
+.analysis-container .analysis-selection-criteria input[type='button'] {
+ width: 0;
+ flex: 2;
+ color: #fff;
+ background: #377DFF;
+ cursor: pointer;
+}
+
+/* 显示信息得表格 */
+.analysis-container .analysis-container-police .analysis-table-content {
+ height: calc(100% - 80px);
+}
+
+.analysis-container .analysis-container-owner .analysis-table-content {
+ margin-top: 4px;
+ height: calc(100% - 84px);
+}
+
+.analysis-container .analysis-container-equipment .analysis-table-content {
+ margin-top: 4px;
+ height: calc(100% - 44px);
+}
+
+.analysis-container .table {
+ height: 100%;
+}
+
+.analysis-container .thead {
+ height: 31px;
+}
+
+.analysis-container .table .tbody {
+ height: calc(100% - 31px);
+ overflow-y: auto;
+ overflow-x: hidden;
+ scrollbar-width: thin;
+}
+
+
+.analysis-container .table table {
+ width: 360px;
+ border-collapse: collapse;
+ table-layout: fixed;
+ box-sizing: border-box;
+
+}
+
+.analysis-container .table table tr {
+ height: 30px;
+}
+
+.analysis-container .table table tr th,
+.analysis-container .table table tr td {
+ margin: 0;
+ padding: 0 4px;
+ border: 1px solid rgba(231, 234, 243, 1);
+ height: 30px;
+ text-align: center;
+ font-size: 14px;
+ font-weight: 400;
+ color: #677788;
+ box-sizing: border-box;
+
+ overflow: hidden;
+ /*超出的文字隐藏*/
+ text-overflow: ellipsis;
+ /*文字超出后,显示省略号*/
+ white-space: nowrap;
+ /*文字不换行*/
+ word-break: keep-all;
+ /*文字不换行*/
+}
+
+.analysis-container .table table tr td a {
+ color: #677788;
+ cursor: default;
+}
+
+.analysis-container .table table tr:first-child td {
+ border-top: none;
+
+}
+
+
+.analysis-container .table .tbody tr {
+ cursor: pointer;
+}
+
+.analysis-container .table .tbody tr td:first-child,
+.analysis-container .table .thead tr th:first-child {
+ width: 40px;
+}
+
+.analysis-container .analysis-container-police .table .tbody tr td:nth-child(2),
+.analysis-container .analysis-container-police .table .thead tr th:nth-child(2) {
+ width: 80px;
+}
+
+.analysis-container .analysis-container-police .table .tbody tr td:nth-child(3),
+.analysis-container .analysis-container-police .table .thead tr th:nth-child(3) {
+ width: 64px;
+}
+
+
+.analysis-container .analysis-container-police .table .tbody tr td:nth-child(4),
+.analysis-container .analysis-container-police .table .thead tr th:nth-child(4) {
+ width: 100px;
+}
+
+
+.analysis-container .analysis-container-police .table .tbody tr td:nth-child(5),
+.analysis-container .analysis-container-police .table .thead tr th:nth-child(5),
+.analysis-container .analysis-container-owner .table .tbody tr td:nth-child(5),
+.analysis-container .analysis-container-owner .table .thead tr th:nth-child(5),
+.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(5),
+.analysis-container .analysis-container-equipment .table .thead tr th:nth-child(5) {
+ cursor: default;
+}
+
+.analysis-container .analysis-container-police .table .tbody tr input,
+.analysis-container .analysis-container-owner .table .tbody tr input,
+.analysis-container .analysis-container-equipment .table .tbody tr input {
+ width: 42px;
+ height: 20px;
+ line-height: 20px;
+ color: #fff;
+ background: #377DFF;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ vertical-align: middle;
+}
+
+.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(2),
+.analysis-container .analysis-container-equipment .table .thead tr th:nth-child(2) {
+ width: 68px;
+}
+
+.analysis-container .analysis-container-equipment .table .tbody tr td:nth-child(4),
+.analysis-container .analysis-container-equipment .table .thead tr th:nth-child(4) {
+ width: 68px;
+}
+
+.client-max-map{
+ width: calc(100% - 360px) !important;
+ left: 360px !important;
+}
\ No newline at end of file
diff --git a/public/map/widgets/supervisoryMap/SupervisoryMap.js b/public/map/widgets/supervisoryMap/SupervisoryMap.js
index da07b11..33328be 100644
--- a/public/map/widgets/supervisoryMap/SupervisoryMap.js
+++ b/public/map/widgets/supervisoryMap/SupervisoryMap.js
@@ -126,7 +126,7 @@
layuiLayer: null,
layuiLadate: null,
tabIndex: 0,
-
+ heatmapfeatureLayer: null,//liu热力图
// 保留添加实体图层的变量
addEntitys: null,
entitysData: [],
@@ -190,6 +190,456 @@
getQueryStringByKey: function (key) {
return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
},
+ entityData: [],
+ //左侧控制栏
+ analysisAddEntitys: null,
+ constructor: function (options, srcRefNode) {
+ this._map = options.map;
+ objThis = this;
+
+
+ this.analysisAddEntitys = new GraphicsLayer({ id: 'analysisAddEntitys' });
+ // this.addOneEntitys = new GraphicsLayer({ id: 'addOneEntitys' });
+ // this.addTwoEntitys = new GraphicsLayer({ id: 'addTwoEntitys' });
+ // this.addThreeEntitys = new GraphicsLayer({ id: 'addThreeEntitys' });
+
+ this._map.addLayer(this.analysisAddEntitys);
+ this._map.addLayer(this.addOneEntitys);
+ },
+ startup: function () {
+ objThis._map.addLayer(objThis._siteLayer);
+ var that = this;
+ that.getEquipmentTable($('.analysis-container-equipment').find('.tbody tbody'),'');
+ // 顶部tab得切换事件
+ $('.analysis-and-judgment-tab li').click(function () {
+ // if (that.tabIndex == $(this).index()) return;
+ // if ($(this).index() == 1) { return };
+ // if ($(this).index() == 2) { return };
+
+ if (that.entitysData.length > 0) {
+ that.analysisAddEntitys.clear();
+ that.entitysData = [];
+ }
+
+ if (that.heatmapfeatureLayer_1.graphics.length > 0) {
+ that.heatmapfeatureLayer_1.clear();
+ that.heatmapfeatureLayer_1.setRenderer();
+ $('.analysis-category input').prop('checked', false);
+ }
+
+
+ $(this).addClass('on').siblings().removeClass('on');
+ var ind = $(this).index();
+ $($('.analysis-container > div')[ind]).stop().show().siblings().stop().hide();
+ var overText = $('#policeCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#policeCategory > div:eq(0)').text().trim();
+ var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
+ if (ind == 0) {
+ that.getArea($('#policeArea'));
+ that.getPoliceTableAnalysis($($('.analysis-container > div')[ind]).find('.tbody tbody'),
+ $('#analysis_select_time_start').val() + ':00',
+ $('#analysis_select_time_end').val() + ':00', overText, levelText)
+ } else if (ind == 1) {
+ that.getOwnerType($('#ownerCategory'));
+ that.getOwnerDj($('#ownerLevel'), '');
+ that.getOwnerTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '', '');
+ } else if (ind == 2) {
+ that.getEquipmentTable($($('.analysis-container > div')[ind]).find('.tbody tbody'), '');
+ }
+
+ that.tabIndex = $(this).index();
+ })
+
+ // 时间查询
+ $('#policeSelectTime').off('click').click(function () {
+
+ var times = $(this).prevAll();
+
+ layui.use('layer', function () {
+
+ var layer = layui.layer;
+ // 开始时间
+ var startTime = $(times[2]).val();
+ // 结束时间
+ var endTime = $(times[0]).val();
+
+ if (startTime == '') {
+
+ layer.msg('请选择开始时间！', {
+ icon: 5,
+ time: 2000 //2秒关闭（如果不配置，默认是3秒）
+ });
+ return;
+
+ } else {
+
+ if (endTime == '') {
+ layer.msg('请选择结束时间！', {
+ icon: 5,
+ time: 2000 //2秒关闭（如果不配置，默认是3秒）
+ });
+ return;
+ } else {
+
+ var text = $('#policeCategory div:eq(0)').text().trim();
+
+ var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
+ that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), startTime, endTime, text == '全部' ? '' : text, levelText);
+
+ }
+
+ }
+
+ })
+
+
+
+
+ })
+
+ // 警情列表中的点击事件
+ $('.analysis-container-police .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
+ var id = $(this).attr('term-list');
+ var url = './popup/html/police-details.html?obj=' + id;
+ layui.use('layer', function () {
+ that.layuiLayer = layui.layer;
+ that.layuiLayer.config({
+ extend: 'myskin/police-details.css'
+ });
+ that.layuiLayer.close(that.layuiLayer.index);
+ that.layuiLayer.open({
+ title: '警情详情',
+ type: 2,
+ shadeClose: true,
+ shade: false,
+ maxmin: false, //开启最大化最小化按钮
+ area: ['500px', '400px'],
+ offset: 'auto',
+ skin: 'police-details',
+ content: url,
+ closeBtn: 1,
+ });
+ })
+ })
+ $('.analysis-container-police .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
+ event.stopPropagation();
+ })
+ $('.analysis-container-police .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
+ event.stopPropagation();
+ var lgtd = Number($(this).attr('lgtd'));
+ var lttd = Number($(this).attr('lttd'));
+ var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
+ that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
+ })
+
+ // 业主列表中的点击事件
+ $('.analysis-container-owner .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
+ var id = $(this).attr('term-list');
+ var url = './popup/html/owner-details.html?id=' + id;
+ layui.use('layer', function () {
+ that.layuiLayer = layui.layer;
+ that.layuiLayer.config({
+ extend: 'myskin/owner-details.css'
+ });
+ that.layuiLayer.close(that.layuiLayer.index);
+ that.layuiLayer.open({
+ title: '业主详情',
+ type: 2,
+ shadeClose: true,
+ shade: false,
+ maxmin: false, //开启最大化最小化按钮
+ area: ['500px', '340px'],
+ offset: 'auto',
+ skin: 'owner-details',
+ content: url,
+ closeBtn: 1,
+ });
+ })
+ })
+ $('.analysis-container-owner .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
+ event.stopPropagation();
+ })
+ $('.analysis-container-owner .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
+ event.stopPropagation();
+ var lgtd = Number($(this).attr('lgtd'));
+ var lttd = Number($(this).attr('lttd'));
+ var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
+ that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
+ })
+
+ // 设备列表中的点击事件
+ $('.analysis-container-equipment .analysis-table-content .tbody').off('click', 'tr').on('click', 'tr', function () {
+ var id = $(this).attr('term-listid');
+ var url = './popup/html/equipment-details.html?obj=' + id;
+ layui.use('layer', function () {
+ that.layuiLayer = layui.layer;
+ that.layuiLayer.config({
+ extend: 'myskin/equipment-details.css'
+ });
+ that.layuiLayer.close(that.layuiLayer.index);
+ that.layuiLayer.open({
+ title: '警情详情',
+ type: 2,
+ shadeClose: true,
+ shade: false,
+ maxmin: false, //开启最大化最小化按钮
+ area: ['520px', '320px'],
+ offset: 'auto',
+ skin: 'equipment-details',
+ content: url,
+ closeBtn: 1,
+ });
+ })
+ })
+ $('.analysis-container-equipment .analysis-table-content .tbody').off('click', '.location').on('click', '.location', function (event) {
+ event.stopPropagation();
+ })
+ $('.analysis-container-equipment .analysis-table-content .tbody').off('click', '.location input').on('click', '.location input', function (event) {
+ event.stopPropagation();
+ var lgtd = Number($(this).attr('lgtd'));
+ var lttd = Number($(this).attr('lttd'));
+ var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
+ that._map.centerAndZoom(position, 18);//缩放，10是缩放级别，可以自定义，数值越大缩放越大
+ })
+
+ // 警情列表中得热力图是否选中事件
+ $('#policeHeatMap').click(function () {
+ that.checkBoxSelect(this);
+ })
+ // 业主信息列表中得热力图是否选中事件
+ $('#ownerHeatMap').click(function () {
+ that.checkBoxSelect(this);
+ })
+ // 设备信息列表的热力图是否选中事件
+ $('#equipmentHeatMap').click(function () {
+ that.checkBoxSelect(this);
+ })
+ // 警情信息中类别移入事件
+ $('#policeCategory').mouseenter(function () {
+ if ($('#policeCategory .select-list').is(':hidden')) {
+ $('#policeCategory .select-list').stop().slideDown(0);
+ }
+ })
+ // 警情信息中得类别移出事件
+ $('#policeCategory').mouseleave(function () {
+ if (!$('#policeCategory .select-list').is(':hidden')) {
+ $('#policeCategory .select-list').stop().slideUp(0);
+ }
+ })
+ // 警情信息中行政区移入事件
+ $('#policeArea').mouseenter(function () {
+ if ($('#policeArea .select-list').is(':hidden')) {
+ $('#policeArea .select-list').stop().slideDown(0);
+ }
+ })
+ // 警情信息中得行政区移出事件
+ $('#policeArea').mouseleave(function () {
+ if (!$('#policeArea .select-list').is(':hidden')) {
+ $('#policeArea .select-list').stop().slideUp(0);
+ }
+ })
+ // 业主信息中类别移入事件
+ $('#ownerCategory').mouseenter(function () {
+ if ($('#ownerCategory .select-list').is(':hidden')) {
+ $('#ownerCategory .select-list').stop().slideDown(0);
+ }
+ })
+ // 业主信息中得类别移出事件
+ $('#ownerCategory').mouseleave(function () {
+ if (!$('#ownerCategory .select-list').is(':hidden')) {
+ $('#ownerCategory .select-list').stop().slideUp(0);
+ }
+ })
+ // 业主信息中的等级移入事件
+ $('#ownerLevel').mouseenter(function () {
+ if ($('#ownerLevel .select-list').is(':hidden')) {
+ $('#ownerLevel .select-list').stop().slideDown(0);
+ }
+ })
+ // 业主信息中的等级移出事件
+ $('#ownerLevel').mouseleave(function () {
+ if (!$('#ownerLevel .select-list').is(':hidden')) {
+ $('#ownerLevel .select-list').stop().slideUp(0);
+ }
+ })
+ // 设备信息中类别移入事件
+ $('#equipmentCategory').mouseenter(function () {
+ if ($('#equipmentCategory .select-list').is(':hidden')) {
+ $('#equipmentCategory .select-list').stop().slideDown(0);
+ }
+ })
+ // 设备信息中得类别移出事件
+ $('#equipmentCategory').mouseleave(function () {
+ if (!$('#equipmentCategory .select-list').is(':hidden')) {
+ $('#equipmentCategory .select-list').stop().slideUp(0);
+ }
+ })
+ // 警情信息类，业主信息类，设备信息类别，具体项的点击事件
+ $('.analysis-container > div .select-list').off('click', 'li').on('click', 'li', function (event) {
+ // console.log(event.currentTarget.innerHTML,'innerhtml')
+ var text = $(this).text().trim();
+ // console.log(text,'text()')
+ // console.log(that.tabIndex,'tabIndex')
+
+ $(this).parent().parent().prev().html(text + '<i></i>');
+ $(this).parent().parent().stop().slideUp(0);
+
+ if ($(this).attr('areaid')) {
+ $(this).parent().parent().prev().attr('areaid', $(this).attr('areaid'));
+ } else if ($(this).attr('ownerid')) {
+ $(this).parent().parent().prev().attr('ownerid', $(this).attr('ownerid'));
+ }
+
+
+ if (that.tabIndex == 1) {
+
+ var levelText = $('#policeArea > div:eq(0)').text().trim() == '全部' ? '' : $('#policeArea > div:eq(0)').attr('areaid');
+ var overText = $('#policeCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#policeCategory > div:eq(0)').text().trim();
+
+ if ($(this).attr('areaid')) {
+ that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), $('#analysis_select_time_start').val(), $('#analysis_select_time_end').val(), overText, levelText);
+ } else {
+ that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), $('#analysis_select_time_start').val(), $('#analysis_select_time_end').val(), overText, levelText);
+ }
+
+
+ } else if (that.tabIndex == 2) {
+ var categoryText = $('#ownerCategory > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerCategory > div:eq(0)').attr('ownerid');
+ var levelText = $('#ownerLevel > div:eq(0)').text().trim() == '全部' ? '' : $('#ownerLevel > div:eq(0)').text().trim();
+
+ var parentId = $(this).parent().parent().parent().attr('id');
+ if (parentId == 'ownerCategory') {
+ that.getOwnerDj($('#ownerLevel'), categoryText);
+ that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, '');
+ } else {
+ that.getOwnerTable($('.analysis-container-owner').find('.tbody tbody'), categoryText, levelText);
+ }
+
+ } else if (that.tabIndex == 0) {
+ that.getEquipmentTable($('.analysis-container-equipment').find('.tbody tbody'), text == '全部' ? '' : text);
+ }
+
+ })
+ },
+ getArea: function (dom) {
+ dom.children('.select-list').children('ul').empty();
+ dom.children('.select-list').children('ul').append($("<li areaid='all'>全部</li>"));
+ var that = this;
+ $.ajax({
+ url: 'https://web.byisf.com/api/blade-system/region/select?code=3601',
+ type: 'GET',
+ dataType: 'JSON',
+ success: function (data) {
+ var res = data.data;
+ for (var i = 0; i < res.length; i++) {
+ dom.children('.select-list').children('ul').append($("<li areaid=" + res[i].code + ">" + res[i].name + "</li>"));
+ }
+ }
+ })
+ },
+ getPoliceTableAnalysis: function (dom, beginTime, endTime, waringType, addvcd) {
+ dom.empty();
+ var that = this;
+ $.ajax({
+ url: "https://web.byisf.com/api/blade-jfpts/alarm/alarm/page?current=1&size=99999&waringType=&beginTime=" + beginTime + "&endTime=" + endTime + "&province=36&city=3601&district=" + addvcd,
+ type: 'get',
+ dataType: 'JSON',
+ success: function (data) {
+ var result = data.data.records;
+ var str = '';
+ that.entitysData = [];
+ that.analysisAddEntitys.clear();
+ for (var a, time, t, e, y, h, i = 0; i < result.length; i++) {
+
+ if (result[i].waringType == "紧急求救") {
+ result[i].waringType = "一键求助"
+ }
+
+ that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '警情信息', {
+ lgtd: result[i].jd,
+ lttd: result[i].wd,
+ id: result[i].id
+ }, result[i].jd, result[i].wd, './images/police-situation.png');
+
+ t = result[i].alarmTime.substr(0, 10);
+ e = result[i].alarmTime.substr(11);
+ time = t + ' ' + e;
+ y = result[i].alarmTime.substr(5, 5);
+ h = result[i].alarmTime.substr(11, 5);
+ a = Number(i) + 1;
+ str += '<tr term-list=' + result[i].id + '>';
+ str += '<td>' + a + '</td>';
+ str += '<td title=' + result[i].waringType + '>' + result[i].waringType + '</td>';
+ str += '<td title=' + result[i].alarmPeople + '>' + result[i].alarmPeople + '</td>';
+ str += "<td><a href='javascript:;' title=" + time + ">" + y + ' ' + h + "</a></td>";
+ str += "<td class='location'> <input type='button' value='定位'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
+ str += '</tr>';
+ dom.append(str);
+ str = '';
+
+
+ }
+
+ for (var i = 0; i < 1000; i++) {
+ var dd = Math.random();
+ var cc = Math.random();
+ }
+ }
+ })
+ },
+ // 获取设备信息列表
+ getEquipmentTable: function (dom, deviceType) {
+ dom.empty();
+ var that = this;
+ // console.log(dom, deviceType);
+ // dom.append(deviceType);
+ $.ajax({
+ url: '/api/blade-jfpts/equipment/equipment/selectList?deviceType=' + deviceType,
+ type: 'GET',
+ dataType: 'JSON',
+ success: function (data) {
+ var result = data.data;
+ var str = '';
+ that.entitysData = [];
+ that.analysisAddEntitys.clear();
+ for (var a, i = 0; i < result.length; i++) {
+
+
+ that.createEntitysAnalysis(that.analysisAddEntitys, that.entitysData, '设备信息', {
+ lgtd: result[i].jd,
+ lttd: result[i].wd,
+ id: result[i].id
+ }, result[i].jd, result[i].wd, './images/ceshi.png');
+
+ a = Number(i) + 1;
+ str += "<tr term-listid=" + result[i].id + ">";
+ str += '<td>' + a + '</td>';
+ str += '<td title=' + result[i].deviceName + '>' + result[i].deviceName + '</td>';
+ str += '<td title=' + result[i].deviceType + '>' + result[i].deviceType + '</td>';
+ str += '<td>' + result[i].deviceNumber + '</td>';
+ str += "<td class='location'> <input type='button' value='定位'" + ' lgtd=' + result[i].jd + ' lttd=' + result[i].wd + "></td>";
+ str += '</tr>';
+ dom.append(str);
+ str = '';
+ }
+
+
+ }
+ })
+ },
+ // 创建实体图层
+ createEntitysAnalysis: function (entitys, entityContent, name, item, lgtd, lttd, outlineColors) {
+
+ var symbol = new esri.symbol.PictureMarkerSymbol(outlineColors, 16, 16);
+ symbol.name = name;
+ var pt = new Point(lgtd, lttd, new SpatialReference({ wkid: 4326 }));
+ pt.entityData = item;
+ var graphic = new esri.Graphic(pt, symbol);
+ entitys.add(graphic);
+
+
+ entityContent.push(item);
+ },
+ //左侧控制栏↑
open: function () {
var that = this;
@@ -198,18 +648,123 @@
type: 'get',
dataType: 'JSON',
success: function (res) {
-
var datas = res.data;
+ var heatmapRenderer = null;
+ that.entityData = [];
for (var i = 0; i < datas.length; i++) {
datas[i].x = Number(datas[i].jd);
datas[i].y = Number(datas[i].wd);
+ that.entityData.push({
+ lgtd: Number(datas[i].jd),
+ lttd: Number(datas[i].wd)
+ })
}
that.flareClusterLayer(datas);
-
+ that.heatmapfeatureLayer = that.heatmFeaLayers();
+ that._map.addLayer(that.heatmapfeatureLayer);
+ // that.checkBoxSelect();//左侧控制热力图重复
}
})
+ var that = this;
+ var intTime = () => {
+ var time = this.getTime();
+ $("#tabcontainer").css("width", "360px");
+ $('#mapcontentClass').addClass('client-max-map'); //追加样式
+ AppEvent.dispatchAppEvent(AppEvent.APPLICATION_RESIZE, {});
+ that.tabIndex = 0;
+ $('.analysis-and-judgment-tab li:eq(0)').addClass('on').siblings().removeClass('on');
+ $($('.analysis-container > div')[0]).stop().show().siblings().stop().hide();
+
+ that.heatmapfeatureLayer_1 = that.heatmFeaLayers();
+
+ that._map.addLayer(that.heatmapfeatureLayer_1);
+ $('#analysis_select_time_start').val(time.tomorrow);
+ $('#analysis_select_time_end').val(time.current);
+
+ layui.use('laydate', function () {
+ that.layuiLadate = layui.laydate;
+ //执行一个laydate实例 开始
+ that.layuiLadate.render({
+ elem: '#analysis_select_time_start', //指定元素
+ type: "datetime",
+ format: 'yyyy-MM-dd HH:mm',
+ trigger: 'click'
+ });
+ // 结束
+ that.layuiLadate.render({
+ elem: '#analysis_select_time_end', //指定元素
+ type: "datetime",
+ format: 'yyyy-MM-dd HH:mm',
+ trigger: 'click'
+ });
+ });
+ that.getArea($('#policeArea'));
+ that.getPoliceTableAnalysis($('.analysis-container-police').find('.tbody tbody'), time.tomorrow, time.current, '', '');
+ that.clickHand();
+
+ }
+ intTime();
},
+ heatmFeaLayers: function () {// liu 热力图渲染器，加载热力图
+
+ var layerDefinition = {
+ "geometryType": "esriGeometryPoint",
+ "fields": [{
+ "num": "num",
+ editable: true,
+ nullable: true,
+ "type": "esriFieldTypeInteger",
+ "alias": "数量"
+ }]
+ };
+ var featureCollection = {
+ layerDefinition: layerDefinition,
+ featureSet: null
+ };
+ //创建 FeatureLayer 图层
+ var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
+ mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
+ outFields: ["*"],
+ opacity: .8
+ });
+ //设置渲染方式
+
+ return featureLayer;
+ },
+
+ checkBoxSelect: function (self) {//选择热力图
+ var that = this;
+ var heatmapRenderer = null;
+ // // return
+ // 选中
+ if ($(self).prop('checked') == true) {
+ // if (1) {
+ heatmapRenderer = new HeatmapRenderer({
+ colorStops: [
+ { ratio: 0.45, color: "rgba(000,000,255,0)" },
+ { ratio: 0.55, color: "rgb(000,255,255)" },
+ { ratio: 0.65, color: "rgb(000,255,000)" },
+ { ratio: 0.75, color: "rgb(234,126,15)" },
+ { ratio: 1.00, color: "rgb(255,000,000)" },
+ ],
+ blurRadius: 42,
+ maxPixelIntensity: 100,
+ minPixelIntensity: 0
+ });
+ this.heatmapfeatureLayer.setRenderer(heatmapRenderer);
+ // 取消选中
+ var point = null;
+ for (var i = 0; i < that.entityData.length; i++) {
+ point = new esri.geometry.Point(this.entityData[i].lgtd, this.entityData[i].lttd, new esri.SpatialReference({ wkid: 4326 }));
+ this.heatmapfeatureLayer.add(new esri.Graphic(point));
+ }
+ } else {
+ this.heatmapfeatureLayer.clear();
+ this.heatmapfeatureLayer.setRenderer();
+ }
+ },
+
close: function () {
},
@@ -283,15 +838,17 @@
},
clickHand: function (e) {//top点击事件，导航
- console.log(e);
- },
+ // console.log(e);
+ },
+
+
//聚合图层事件
flareClusterLayer: function (datas) { //top聚合事件，导航
var that = this;
var preClustered = false;
- var displaySingleFlaresAtCount = 10;
+ var displaySingleFlaresAtCount = 20;
var areaDisplayMode = "";
// var allData = JSON.parse(DATA);
// DataManager.setData(allData);
@@ -308,10 +865,10 @@
displaySingleFlaresAtCount: displaySingleFlaresAtCount,
flareShowMode: "mouse",
preClustered: preClustered,
- clusterRatio: 75,
+ clusterRatio: 120,
clusterAreaDisplay: areaDisplayMode,
clusteringBegin: function (e) {
- console.log(e, "clustering begin");
+ // console.log("clustering begin");
},
clusteringComplete: function () {
console.log("clustering complete");
@@ -336,20 +893,20 @@
var template = new PopupTemplate({
title: "{name}",
fieldInfos: [{
- fieldName: "facilityType",
- label: "Facility Type",
- visible: true
- },
- {
- fieldName: "postcode",
- label: "Post Code",
- visible: true
- },
- {
- fieldName: "isOpen",
- label: "Opening Hours",
- visible: true
- }
+ fieldName: "facilityType",
+ label: "Facility Type",
+ visible: true
+ },
+ {
+ fieldName: "postcode",
+ label: "Post Code",
+ visible: true
+ },
+ {
+ fieldName: "isOpen",
+ label: "Opening Hours",
+ visible: true
+ }
]
});
diff --git a/public/map/widgets/supervisoryMap/template.html b/public/map/widgets/supervisoryMap/template.html
index 281c686..8717bad 100644
--- a/public/map/widgets/supervisoryMap/template.html
+++ b/public/map/widgets/supervisoryMap/template.html
@@ -1 +1,252 @@
-<div></div>
\ No newline at end of file
+<div class='analysis-and-judgment' open-li='analysis-and-judgment'>
+ <ul class='analysis-and-judgment-tab'>
+ <li>设备信息</li>
+ <li class='on'>警情信息</li>
+ <li class='on'>业主信息</li>
+ </ul>
+ <!-- 展示分析研判 -->
+ <div class="analysis-container">
+ <!-- 设备信息 -->
+ <div class="analysis-container-equipment">
+ <div class="analysis-category">
+ <ul>
+ <li id='equipmentCategory'>
+ 类型：
+ <div>
+ 全部
+
+ <i>
+
+ </i>
+ </div>
+ <div class='select-list'>
+ <ul>
+ <li>全部</li>
+ <li>一体化摄像头</li>
+ <li>普通枪式摄像头</li>
+ <li>红外夜视防水型摄像头</li>
+ <li>球型摄像头</li>
+ <li>高速球</li>
+ </ul>
+ </div>
+ </li>
+ <li>
+ <input type="checkbox" id='equipmentHeatMap'> 热力图
+ </li>
+ </ul>
+ </div>
+ <div class='analysis-table-content'>
+ <div class="table">
+ <div class="thead">
+ <table>
+ <thead>
+ <tr>
+ <th>序号</th>
+ <th>设备名称</th>
+ <th>设备类型</th>
+ <th>设备编码</th>
+ <th>操作</th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ <div class="tbody">
+ <table>
+ <tbody>
+
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 警情信息 -->
+ <div class="analysis-container-police">
+ <div class="analysis-category">
+ <ul>
+ <li id='policeCategory'>
+ 类型：
+ <div>
+ 全部
+ <i>
+
+ </i>
+ </div>
+ <div class='select-list'>
+ <ul>
+ <li>全部</li>
+ <li>一键求助</li>
+ </ul>
+ </div>
+ </li>
+ <li id='policeArea'>
+ 区：
+ <div>
+ 全部
+ <i>
+
+ </i>
+ </div>
+ <div class='select-list'>
+ <ul>
+ </ul>
+ </div>
+ </li>
+ <li>
+ <input type="checkbox" id='policeHeatMap'> 热力图
+ </li>
+ </ul>
+ </div>
+ <div class='analysis-selection-criteria'>
+ <input type="text" id='analysis_select_time_start' readonly> <span>-</span> <input type="text" id='analysis_select_time_end' readonly>
+ <input type="button" value='查询' id='policeSelectTime'>
+ </div>
+ <div class='analysis-table-content'>
+ <div class="table">
+ <div class="thead">
+ <table>
+ <thead>
+ <tr>
+ <th>序号</th>
+ <th>类别</th>
+ <th>接警员</th>
+ <th>日期</th>
+ <th>操作</th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ <div class="tbody">
+ <table>
+ <tbody></tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 业主信息 -->
+ <div class="analysis-container-owner">
+ <div class="analysis-category">
+ <ul>
+ <li id='ownerCategory'>
+ 类型：
+ <div>
+ 全部
+
+ <i>
+
+ </i>
+ </div>
+ <div class='select-list'>
+ <ul>
+
+ </ul>
+ </div>
+ </li>
+ <li>
+ <input type="checkbox" id='ownerHeatMap'> 热力图
+ </li>
+ </ul>
+ </div>
+ <div class="analysis-level">
+ <ul>
+ <li id='ownerLevel'>
+ 等级：
+ <div>
+ 全部
+
+ <i>
+
+ </i>
+ </div>
+ <div class='select-list'>
+ <ul>
+
+ </ul>
+ </div>
+ </li>
+ <li>
+ <!-- 级别 -->
+ </li>
+ </ul>
+ </div>
+
+ <div class='analysis-table-content'>
+ <div class="table">
+ <div class="thead">
+ <table>
+ <thead>
+ <tr>
+ <th>序号</th>
+ <th>类别</th>
+ <th>等级</th>
+ <th>名称</th>
+ <th>操作</th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ <div class="tbody">
+ <table>
+ <tbody></tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 设备信息
+ <div class="analysis-container-equipment">
+ <div class="analysis-category">
+ <ul>
+ <li id='equipmentCategory'>
+ 类型：
+ <div>
+ 全部
+
+ <i>
+
+ </i>
+ </div>
+ <div class='select-list'>
+ <ul>
+ <li>全部</li>
+ <li>一体化摄像头</li>
+ <li>普通枪式摄像头</li>
+ <li>红外夜视防水型摄像头</li>
+ <li>球型摄像头</li>
+ <li>高速球</li>
+ </ul>
+ </div>
+ </li>
+ <li>
+ <input type="checkbox" id='equipmentHeatMap'> 热力图
+ </li>
+ </ul>
+ </div>
+ <div class='analysis-table-content'>
+ <div class="table">
+ <div class="thead">
+ <table>
+ <thead>
+ <tr>
+ <th>序号</th>
+ <th>设备名称</th>
+ <th>设备类型</th>
+ <th>设备编码</th>
+ <th>操作</th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ <div class="tbody">
+ <table>
+ <tbody>
+
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div> -->
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/components/liu-legend/Legend.vue b/src/components/liu-legend/Legend.vue
index 72570c6..ed41264 100644
--- a/src/components/liu-legend/Legend.vue
+++ b/src/components/liu-legend/Legend.vue
@@ -16,11 +16,11 @@
return{
datalist:[//示例数据格式
{
- color: 'rgb(233, 39, 25)',
+ color: 'rgb(236, 83, 37)',
text: '掉线'
},
{
- color: 'black',
+ color: 'rgb(49, 49, 49)',
text: '在线'
}
]
@@ -34,21 +34,22 @@
position: absolute;
right: 0;
.l-l-o{
- color: rgba($color: #000000, $alpha: .5);
+ color: rgba($color: #000000, $alpha: .8);
+ color: rgb(49, 49, 49);
position: relative;
right: 150px;
margin-left: 10px;
- font-size: 12px;
- font-weight: 300;
+ font-size: 14px;
+ font-weight: 500;
font-family: 'Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol';
}
.l-l-Img{
display: inline-block;
- width: 7px;
- height: 7px;
+ width: 10px;
+ height: 10px;
// border: 1px solid rgb(17, 198, 253);
- border-radius: 7px;
- margin-right: 7px;
+ border-radius: 3px;
+ margin-right: 8px;
}
}
</style>
\ No newline at end of file
diff --git a/src/views/clientManagement/clientManagement.vue b/src/views/clientManagement/clientManagement.vue
index a5f5824..3e8b720 100644
--- a/src/views/clientManagement/clientManagement.vue
+++ b/src/views/clientManagement/clientManagement.vue
@@ -211,11 +211,11 @@
//legend-liu数据
datalistLIU:[
{
- color: 'rgb(233, 39, 25)',
+ color: 'rgb(236, 83, 37)',
text: '掉线'
},
{
- color: 'black',
+ color: 'rgb(49, 49, 49)',
text: '在线'
}
],
diff --git a/src/views/policeTracking/policeTracking.vue b/src/views/policeTracking/policeTracking.vue
index 3372671..df39cc2 100644
--- a/src/views/policeTracking/policeTracking.vue
+++ b/src/views/policeTracking/policeTracking.vue
@@ -295,6 +295,31 @@
class="el-collapse-item__header focusing is-active"
>
<div class="avue-group__header avue-group">
+ <i class="el-icon-document avue-group__icon"></i>
+ <h1 class="avue-group__title">对讲信息</h1>
+ </div>
+ </div>
+ </div>
+
+ <el-card class="receiving-alarm-box">
+ <div v-for="(item, index) in audios" :key="index" style="margin: 10px 0; width: 100%; height: 40px;">
+ <audio :src="item.address" style="width: 40%; height: 100%;" controls></audio>
+ </div>
+ </el-card>
+
+ <div
+ style="margin-top: 20px"
+ role="tab"
+ aria-expanded="true"
+ aria-controls="el-collapse-content-823"
+ aria-describedby="el-collapse-content-823"
+ >
+ <div
+ role="button"
+ tabindex="0"
+ class="el-collapse-item__header focusing is-active"
+ >
+ <div class="avue-group__header avue-group">
<i class="el-icon-s-custom avue-group__icon"></i>
<h1 class="avue-group__title">保安信息</h1>
</div>
@@ -608,6 +633,7 @@
baseUrl: "",
oldVideoSatart: false,
vaddress: null,
+ audios: [],
};
},
created() {
@@ -618,7 +644,7 @@
},
mounted() {
this.getList();
-
+ this.getAudios();
this.$refs.mapDiv.onload = () => {
window.frames[0].init("AlertSecurity", {
x: this.form.jd,
@@ -790,7 +816,9 @@
getList() {
var that = this;
axios
- .get(`/api/blade-user/pages?current=1&size=9999&work_status=&deptId=${that.form.deptId}`)
+ .get(
+ `/api/blade-user/pages?current=1&size=9999&work_status=&deptId=${that.form.deptId}`
+ )
.then(function (res) {
that.tableData = [];
var i = 0;
@@ -849,6 +877,18 @@
this.$refs.multipleTable.clearSelection();
}
},
+
+ getAudios() {
+ axios({
+ method: "get",
+ url: "/api/blade-jfpts/avideo/list",
+ params: {
+ jid: this.form.id,
+ },
+ }).then((resdata) => {
+ this.audios = resdata.data.data.records;
+ });
+ },
},
};
</script>
diff --git a/src/views/realTimePolice/real.vue b/src/views/realTimePolice/real.vue
index c4c4e10..39fe652 100644
--- a/src/views/realTimePolice/real.vue
+++ b/src/views/realTimePolice/real.vue
@@ -1,9 +1,3 @@
-/*
- * @Author: Morpheus
- * @Date: 2021-03-17 15:21:33
- * @Last Modified by: Morpheus
- * @Last Modified time: 2021-04-12 17:28:33
- */
<template>
<basic-container>
<avue-crud
@@ -69,20 +63,23 @@
</template>
<template slot="menuLeft">
- <el-button type="warning"
- size="mini"
- plain
- icon="el-icon-download"
- @click="handleExport">导出
+ <el-button
+ type="warning"
+ size="mini"
+ plain
+ icon="el-icon-download"
+ @click="handleExport"
+ >导出
</el-button>
- <el-button type="warning"
- size="small"
- plain
- icon="el-icon-pie-chart"
- @click="handleExportStatis">导出报表
+ <el-button
+ type="warning"
+ size="small"
+ plain
+ icon="el-icon-pie-chart"
+ @click="handleExportStatis"
+ >导出报表
</el-button>
</template>
-
<template slot-scope="{ row }" slot="jtype">
<el-tag
@@ -413,7 +410,7 @@
</el-drawer>
</basic-container>
</template>
-
+
<script>
import { getList, remove, update, add, getclient } from "@/api/real/real";
import { mapGetters } from "vuex";
@@ -494,7 +491,7 @@
type: "datetime",
format: "yyyy-MM-dd",
valueFormat: "yyyy-MM-dd",
- searchValue:[this.getStartTime(),this.getEndTime()],
+ searchValue: [this.getStartTime(), this.getEndTime()],
searchRange: true,
searchSpan: 5,
hide: true,
@@ -1128,18 +1125,26 @@
};
});
},
- getStartTime(){
- if (this.$route.query.startTime != undefined && this.$route.query.startTime != null && this.$route.query.startTime != "" ) {
- return this.$route.query.startTime
- }
- return '';
- },
- getEndTime(){
- if (this.$route.query.endTime != undefined && this.$route.query.endTime != null && this.$route.query.endTime != "" ) {
- return this.$route.query.endTime
- }
- return '';
- },
+ getStartTime() {
+ if (
+ this.$route.query.startTime != undefined &&
+ this.$route.query.startTime != null &&
+ this.$route.query.startTime != ""
+ ) {
+ return this.$route.query.startTime;
+ }
+ return "";
+ },
+ getEndTime() {
+ if (
+ this.$route.query.endTime != undefined &&
+ this.$route.query.endTime != null &&
+ this.$route.query.endTime != ""
+ ) {
+ return this.$route.query.endTime;
+ }
+ return "";
+ },
handleManage(row) {
this.form = row;
this.peopleList = [
@@ -1467,30 +1472,66 @@
this.$confirm("是否导出实时警情数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
- type: "warning"
+ type: "warning",
}).then(() => {
- window.open(`/api/blade-jfpts/alarm/alarm/export-alarm?beginTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&waringType=${this.$route.query.waringType}&timeDesc=${this.$route.query.timeDesc}`);
+ window.open(
+ `/api/blade-jfpts/alarm/alarm/export-alarm?beginTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&waringType=${this.$route.query.waringType}&timeDesc=${this.$route.query.timeDesc}`
+ );
});
},
//数据报表导出
- handleExportStatis() {
- this.$confirm("是否导出实时警情数据?", "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(() => {
- let beginTime = this.$route.query.startTime==undefined? '':this.$route.query.startTime;
- let endTime = this.$route.query.endTime==undefined? '':this.$route.query.endTime;
- let waringType = this.$route.query.waringType==undefined? '':this.$route.query.waringType;
- let timeDesc = this.$route.query.timeDesc==undefined? '':this.$route.query.timeDesc;
- window.open(`http://localhost:8108/ureport/preview?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`);
- //window.open(`http://localhost:8108/ureport/excel?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`);
- });
+ handleExportStatis() {
+ this.$confirm("是否导出实时警情数据?", "提示", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning",
+ }).then(() => {
+ let beginTime =
+ this.$route.query.startTime == undefined
+ ? ""
+ : this.$route.query.startTime;
+ let endTime =
+ this.$route.query.endTime == undefined
+ ? ""
+ : this.$route.query.endTime;
+ let waringType =
+ this.$route.query.waringType == undefined
+ ? ""
+ : this.$route.query.waringType;
+ let timeDesc =
+ this.$route.query.timeDesc == undefined
+ ? ""
+ : this.$route.query.timeDesc;
+ window.open(
+ `http://localhost:8108/ureport/preview?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`
+ );
+ //window.open(`http://localhost:8108/ureport/excel?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`);
+ });
+ },
+ getStartTime() {
+ if (
+ this.$route.query.startTime != undefined &&
+ this.$route.query.startTime != null &&
+ this.$route.query.startTime != ""
+ ) {
+ return this.$route.query.startTime;
}
+ return "";
+ },
+ getEndTime() {
+ if (
+ this.$route.query.endTime != undefined &&
+ this.$route.query.endTime != null &&
+ this.$route.query.endTime != ""
+ ) {
+ return this.$route.query.endTime;
+ }
+ return "";
+ },
},
};
</script>
-
+
<style>
.el-card__body .waringTypeClass {
width: 12%;
@@ -1605,4 +1646,4 @@
.tabFontSize {
font-size: 15px;
}
-</style>
+</style>
\ No newline at end of file
--
Gitblit v1.9.3