Skip to content

platform / fanxing_new

Go to a project
Commit cf475910 by 潘建波
Options

增加首页星云图

1 parent 614844c3
Expand all
Inline Side-by-side
Showing 34 changed files with 1714 additions and 273 deletions
dist.zip
No preview for this file type
public/index.html
...@@ -15,8 +15,6 @@ ...@@ -15,8 +15,6 @@
<strong></strong> <strong></strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected -->
</body> </body>
<script> <script>
function connectCamera(szDeviceIp, szUser, szPass, camType) { function connectCamera(szDeviceIp, szUser, szPass, camType) {
......
public/js/app.js 0 → 100644
/* -----------------------------------------------
/* How to use? : Check the GitHub README
/* ----------------------------------------------- */
/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
/*
particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.js loaded - callback');
});
*/
/* Otherwise just put the config content (json): */
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}
);
\ No newline at end of file \ No newline at end of file
src/App.vue
...@@ -29,13 +29,15 @@ export default { ...@@ -29,13 +29,15 @@ export default {
window.oneSearchTableHeight = document.body.clientHeight - 280 + "px"; window.oneSearchTableHeight = document.body.clientHeight - 280 + "px";
window.twoSearchTableHeight = document.body.clientHeight - 315 + "px"; window.twoSearchTableHeight = document.body.clientHeight - 315 + "px";
} }
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
#app { #app {
height: 100%; height: 100%;
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; // font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
font-family: "Microsoft YaHei","微软雅黑",Arial,sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
......
src/api/baseUrl.js
...@@ -3,15 +3,15 @@ import axios from "axios"; ...@@ -3,15 +3,15 @@ import axios from "axios";
console.log(process.env.NODE_ENV); console.log(process.env.NODE_ENV);
switch (process.env.NODE_ENV) { switch (process.env.NODE_ENV) {
case "development": case "development":
baseUrl = "http://192.168.9.233:20080"; // 测试环境url baseUrl = "http://192.168.9.133:20080"; // 测试环境url
// baseUrl = "http://192.168.9.61:8086"; // baseUrl = "http://192.168.9.61:8086";
baseUrl = 'http://vion-panda.51vip.biz:52510'; // baseUrl = 'http://vion-panda.51vip.biz:52510';
break; break;
case "pre": case "pre":
baseUrl = "https://pre-server.feleti.cn"; // 预上线环境url baseUrl = "https://pre-server.feleti.cn"; // 预上线环境url
break; break;
case "production": case "production":
baseUrl = "http://192.168.9.133:20080"; // 生产环境url baseUrl = "http://192.168.9.233:20080"; // 生产环境url
break; break;
} }
......
src/assets/css/public.css
...@@ -10,7 +10,7 @@ body{ ...@@ -10,7 +10,7 @@ body{
background: #fff!important; background: #fff!important;
} }
.el-main{ .el-main{
background: #f5f7f9; background: #F7F6F9;
} }
.home,.home-box{ .home,.home-box{
height: 100%; height: 100%;
...@@ -253,11 +253,11 @@ body{ ...@@ -253,11 +253,11 @@ body{
} }
.card-hover:hover { .card-hover:hover {
webkit-transform: translateY(-4px) scale(1); webkit-transform: translateY(-4px) scale(2);
-moz-transform: translateY(-4px) scale(1.01); -moz-transform: translateY(-4px) scale(1.01);
-ms-transform: translateY(-4px) scale(1.01); -ms-transform: translateY(-4px) scale(1.01);
-o-transform: translateY(-4px) scale(1.01); -o-transform: translateY(-4px) scale(1.01);
transform: translateY(-4px) scale(1.01); transform: translateY(-4px) scale(1);
-webkit-box-shadow: 0 14px 24px rgba(62,57,107,.1); -webkit-box-shadow: 0 14px 24px rgba(62,57,107,.1);
box-shadow: 0 14px 24px rgba(62,57,107,.1); box-shadow: 0 14px 24px rgba(62,57,107,.1);
} }
...@@ -285,6 +285,9 @@ body{ ...@@ -285,6 +285,9 @@ body{
.pausebox{ .pausebox{
background:rgba(232,84,30,1); background:rgba(232,84,30,1);
} }
.errorbox{ .alarm-event-box .el-table .el-table__header th{
background: none!important;
}
.el-submenu__title{
font-size: 15px;
} }
\ No newline at end of file \ No newline at end of file
src/assets/icon/icon3/demo.css 0 → 100644
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
src/assets/icon/icon3/iconfont.eot 0 → 100644
No preview for this file type
src/assets/icon/icon3/iconfont.json 0 → 100644
{
"id": "1726233",
"name": "fanxig_new02",
"font_family": "iconfont",
"css_prefix_text": "icon",
"description": "",
"glyphs": [
{
"icon_id": "13885707",
"name": "删 除(2)",
"font_class": "shanchu",
"unicode": "e600",
"unicode_decimal": 58880
},
{
"icon_id": "13885708",
"name": "删 除(1)",
"font_class": "shanchu1",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "13885709",
"name": "上",
"font_class": "shang",
"unicode": "e602",
"unicode_decimal": 58882
},
{
"icon_id": "13885710",
"name": "任务数量",
"font_class": "renwushuliang",
"unicode": "e603",
"unicode_decimal": 58883
},
{
"icon_id": "13885711",
"name": "删 除",
"font_class": "shanchu2",
"unicode": "e604",
"unicode_decimal": 58884
},
{
"icon_id": "13885712",
"name": "天气",
"font_class": "tianqi",
"unicode": "e605",
"unicode_decimal": 58885
},
{
"icon_id": "13885713",
"name": "系统信息",
"font_class": "xitongxinxi",
"unicode": "e606",
"unicode_decimal": 58886
},
{
"icon_id": "13885714",
"name": "系统版本",
"font_class": "xitongbanben",
"unicode": "e607",
"unicode_decimal": 58887
},
{
"icon_id": "13885715",
"name": "右下",
"font_class": "youxia",
"unicode": "e608",
"unicode_decimal": 58888
},
{
"icon_id": "13885716",
"name": "修 改 copy",
"font_class": "xiugaicopy",
"unicode": "e609",
"unicode_decimal": 58889
},
{
"icon_id": "13885717",
"name": "设备信息",
"font_class": "shebeixinxi",
"unicode": "e60a",
"unicode_decimal": 58890
},
{
"icon_id": "13885718",
"name": "暂停",
"font_class": "zanting",
"unicode": "e60b",
"unicode_decimal": 58891
},
{
"icon_id": "13885719",
"name": "删 除(3)",
"font_class": "shanchu3",
"unicode": "e60c",
"unicode_decimal": 58892
},
{
"icon_id": "13885720",
"name": "修 改",
"font_class": "xiugai",
"unicode": "e60d",
"unicode_decimal": 58893
},
{
"icon_id": "13885721",
"name": "特殊车辆总量",
"font_class": "teshucheliangzongliang",
"unicode": "e60e",
"unicode_decimal": 58894
},
{
"icon_id": "13885722",
"name": "左下",
"font_class": "zuoxia",
"unicode": "e60f",
"unicode_decimal": 58895
},
{
"icon_id": "13885723",
"name": "下",
"font_class": "xia",
"unicode": "e610",
"unicode_decimal": 58896
},
{
"icon_id": "13885724",
"name": "违法总量",
"font_class": "weifazongliang",
"unicode": "e611",
"unicode_decimal": 58897
},
{
"icon_id": "13885725",
"name": "危险品(1)",
"font_class": "weixianpin",
"unicode": "e612",
"unicode_decimal": 58898
},
{
"icon_id": "13885726",
"name": "左上",
"font_class": "zuoshang",
"unicode": "e613",
"unicode_decimal": 58899
},
{
"icon_id": "13885727",
"name": "用户名",
"font_class": "yonghuming",
"unicode": "e614",
"unicode_decimal": 58900
},
{
"icon_id": "13885728",
"name": "icon 选中系统运维",
"font_class": "iconxuanzhongxitongyunwei",
"unicode": "e615",
"unicode_decimal": 58901
},
{
"icon_id": "13885729",
"name": "右上",
"font_class": "youshang",
"unicode": "e616",
"unicode_decimal": 58902
},
{
"icon_id": "13885730",
"name": "重型罐式",
"font_class": "zhongxingguanshi",
"unicode": "e617",
"unicode_decimal": 58903
},
{
"icon_id": "13885731",
"name": "重置",
"font_class": "zhongzhi",
"unicode": "e618",
"unicode_decimal": 58904
},
{
"icon_id": "13885732",
"name": "icon 选中任务管理(2)",
"font_class": "iconxuanzhongrenwuguanli",
"unicode": "e619",
"unicode_decimal": 58905
},
{
"icon_id": "13885733",
"name": "运行路数",
"font_class": "yunhanglushu",
"unicode": "e61a",
"unicode_decimal": 58906
},
{
"icon_id": "13885734",
"name": "单选／选中",
"font_class": "danxuanxuanzhong",
"unicode": "e61b",
"unicode_decimal": 58907
},
{
"icon_id": "13885735",
"name": "事件总量",
"font_class": "shijianzongliang",
"unicode": "e61c",
"unicode_decimal": 58908
},
{
"icon_id": "13885736",
"name": "icon 选中智能检索(1)",
"font_class": "iconxuanzhongzhinengjiansuo",
"unicode": "e61d",
"unicode_decimal": 58909
},
{
"icon_id": "13885737",
"name": "渣土车抓拍(1)",
"font_class": "zhatuchezhuapai",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "13885738",
"name": "icon 选中任务管理",
"font_class": "iconxuanzhongrenwuguanli1",
"unicode": "e61f",
"unicode_decimal": 58911
},
{
"icon_id": "13885739",
"name": "icon 选中资源管理(2)",
"font_class": "iconxuanzhongziyuanguanli",
"unicode": "e620",
"unicode_decimal": 58912
},
{
"icon_id": "13885740",
"name": " 右",
"font_class": "you",
"unicode": "e621",
"unicode_decimal": 58913
},
{
"icon_id": "13885741",
"name": "icon 选中资源管理",
"font_class": "iconxuanzhongziyuanguanli1",
"unicode": "e622",
"unicode_decimal": 58914
},
{
"icon_id": "13885742",
"name": "icon 选中首页",
"font_class": "iconxuanzhongshouye",
"unicode": "e623",
"unicode_decimal": 58915
},
{
"icon_id": "13885743",
"name": "运行异常",
"font_class": "yunhangyichang",
"unicode": "e624",
"unicode_decimal": 58916
},
{
"icon_id": "13885744",
"name": "icon 选中首页(3)",
"font_class": "iconxuanzhongshouye1",
"unicode": "e625",
"unicode_decimal": 58917
},
{
"icon_id": "13885745",
"name": "icon 选中首页(1)",
"font_class": "iconxuanzhongshouye2",
"unicode": "e626",
"unicode_decimal": 58918
},
{
"icon_id": "13885746",
"name": "icon 选中智能检索",
"font_class": "iconxuanzhongzhinengjiansuo1",
"unicode": "e627",
"unicode_decimal": 58919
},
{
"icon_id": "13885747",
"name": "信息存储",
"font_class": "xinxicunchu",
"unicode": "e628",
"unicode_decimal": 58920
},
{
"icon_id": "13885748",
"name": "卡口总量",
"font_class": "kakouzongliang",
"unicode": "e629",
"unicode_decimal": 58921
},
{
"icon_id": "13885749",
"name": "多选／选中",
"font_class": "duoxuanxuanzhong",
"unicode": "e62a",
"unicode_decimal": 58922
},
{
"icon_id": "13885750",
"name": "启动",
"font_class": "qidong",
"unicode": "e62b",
"unicode_decimal": 58923
},
{
"icon_id": "13885751",
"name": "在用分析资源",
"font_class": "zaiyongfenxiziyuan",
"unicode": "e62c",
"unicode_decimal": 58924
},
{
"icon_id": "13885752",
"name": "重型罐",
"font_class": "zhongxingguan",
"unicode": "e62d",
"unicode_decimal": 58925
},
{
"icon_id": "13885753",
"name": "icon 选中任务管理(1)",
"font_class": "iconxuanzhongrenwuguanli2",
"unicode": "e62e",
"unicode_decimal": 58926
},
{
"icon_id": "13885754",
"name": "icon 选中资源管理(1)",
"font_class": "iconxuanzhongziyuanguanli2",
"unicode": "e62f",
"unicode_decimal": 58927
},
{
"icon_id": "13885755",
"name": "密码",
"font_class": "mima",
"unicode": "e630",
"unicode_decimal": 58928
},
{
"icon_id": "13885756",
"name": "icon 选中首页(2)",
"font_class": "iconxuanzhongshouye3",
"unicode": "e631",
"unicode_decimal": 58929
},
{
"icon_id": "13885757",
"name": "定位 位置",
"font_class": "dingweiweizhi",
"unicode": "e632",
"unicode_decimal": 58930
},
{
"icon_id": "13885758",
"name": "可用资源",
"font_class": "keyongziyuan",
"unicode": "e633",
"unicode_decimal": 58931
},
{
"icon_id": "13885759",
"name": "分析资源",
"font_class": "fenxiziyuan",
"unicode": "e634",
"unicode_decimal": 58932
},
{
"icon_id": "13885760",
"name": "迁移",
"font_class": "qianyi",
"unicode": "e635",
"unicode_decimal": 58933
},
{
"icon_id": "13885761",
"name": "渣土车抓拍",
"font_class": "zhatuchezhuapai1",
"unicode": "e636",
"unicode_decimal": 58934
},
{
"icon_id": "13885762",
"name": "左",
"font_class": "zuo",
"unicode": "e637",
"unicode_decimal": 58935
},
{
"icon_id": "13885763",
"name": "危险品",
"font_class": "weixianpin1",
"unicode": "e638",
"unicode_decimal": 58936
},
{
"icon_id": "13885764",
"name": "定位 位置(1)",
"font_class": "dingweiweizhi1",
"unicode": "e639",
"unicode_decimal": 58937
},
{
"icon_id": "13885765",
"name": "icon 选中 智能检索",
"font_class": "iconxuanzhongzhinengjiansuo2",
"unicode": "e63a",
"unicode_decimal": 58938
},
{
"icon_id": "13885766",
"name": "icon 选中系统管理",
"font_class": "iconxuanzhongxitongguanli",
"unicode": "e63b",
"unicode_decimal": 58939
}
]
}
src/assets/icon/icon3/iconfont.ttf 0 → 100644
No preview for this file type
src/assets/icon/icon3/iconfont.woff 0 → 100644
No preview for this file type
src/assets/icon/icon3/iconfont.woff2 0 → 100644
No preview for this file type
src/assets/js/particles.json 0 → 100644
{
"particles": {
"number": {
"value": 60,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 4,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 100,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "Window",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
\ No newline at end of file \ No newline at end of file
src/main.js
...@@ -9,10 +9,11 @@ import resetCss from "./assets/resetElementCss/index.css"; ...@@ -9,10 +9,11 @@ import resetCss from "./assets/resetElementCss/index.css";
import api from "./api/install"; import api from "./api/install";
import "./assets/css/public.css"; import "./assets/css/public.css";
import echarts from "echarts"; import echarts from "echarts";
// import "./assets/icon/icon1/iconfont.css"; import "./assets/icon/icon3/iconfont.css";
import "./assets/icon/icon2/iconfont.css";
import "../src/assets/js/vporto"; import "../src/assets/js/vporto";
import { buildCode } from "../src/assets/js/buildcodes"; import { buildCode } from "../src/assets/js/buildcodes";
import particles from "particles.js";
Vue.use(particles);
import moment from "moment"; import moment from "moment";
Vue.prototype.$echarts = echarts; Vue.prototype.$echarts = echarts;
Vue.prototype.$moment = moment; Vue.prototype.$moment = moment;
......
src/views/Layout/index.vue
...@@ -3,17 +3,26 @@ ...@@ -3,17 +3,26 @@
<el-container class="home-box"> <el-container class="home-box">
<el-header class="headers"> <el-header class="headers">
<img class="logoImg" src="../../assets/img/home/logo.png" alt="" /> <img class="logoImg" src="../../assets/img/home/logo.png" alt="" />
<span :class="{'el-icon-s-fold':isopen,'el-icon-s-unfold':!isopen,'menu-switch':true}" @click="openmenu"></span> <span
:class="{
'el-icon-s-fold': isopen,
'el-icon-s-unfold': !isopen,
'menu-switch': true
}"
@click="openmenu"
></span>
<div class="headRight"> <div class="headRight">
<span>{{ curdate }}</span> <span>{{ curdate }}</span>
<img src="../../assets/img/home/user.png" alt="" /> <img src="../../assets/img/home/user.png" alt="" />
<span class="exit" @click="logout()">退出<i class="el-icon-arrow-down"></i></span> <span class="exit" @click="logout()"
>退出<i class="el-icon-arrow-down"></i
></span>
</div> </div>
</el-header> </el-header>
<el-container style="min-height:calc(100vh - 64px);"> <el-container style="min-height:calc(100vh - 64px);">
<menus @setTopBar="setTopBar" ref="leftmenu"></menus> <menus @setTopBar="setTopBar" ref="leftmenu" v-show="isfull"></menus>
<el-main> <el-main>
<div class="nav"> <div class="nav" id="topnav" v-show="isfull">
<div class="nav-tag-box"> <div class="nav-tag-box">
<el-tag <el-tag
v-for="(tag, index) in topbarArr" v-for="(tag, index) in topbarArr"
...@@ -43,10 +52,10 @@ export default { ...@@ -43,10 +52,10 @@ export default {
data() { data() {
return { return {
curdate: "", curdate: "",
isopen:true, isopen: true,
conHeight: 0, conHeight: 0,
menuwidth: "15vw", menuwidth: "300px",
full: false, isfull: true,
topbarArr: [] topbarArr: []
}; };
}, },
...@@ -78,10 +87,11 @@ export default { ...@@ -78,10 +87,11 @@ export default {
getDate() { getDate() {
let date = new Date(); let date = new Date();
let Y = date.getFullYear(); let Y = date.getFullYear();
let M = date.getMonth() > 10 ? date.getMonth() : `0${date.getMonth()}`; let M = date.getMonth() > 10 ? date.getMonth() : `0${date.getMonth() + 1}`;
let D = date.getDate() > 10 ? date.getDate() : `0${date.getDate()}`; let D = date.getDate() > 10 ? date.getDate() : `0${date.getDate()}`;
let h = date.getHours() > 10 ? date.getHours() : `0${date.getHours()}`; let h = date.getHours() > 10 ? date.getHours() : `0${date.getHours()}`;
let m = date.getMinutes() > 10 ? date.getMinutes() : `0${date.getMinutes()}`; let m =
date.getMinutes() > 10 ? date.getMinutes() : `0${date.getMinutes()}`;
let s = date.getSeconds(); let s = date.getSeconds();
let w = date.getDay(); let w = date.getDay();
let wtext = ""; let wtext = "";
...@@ -139,19 +149,46 @@ export default { ...@@ -139,19 +149,46 @@ export default {
console.log(this.permission_routers); console.log(this.permission_routers);
this.conHeight = window.innerHeight - 65; this.conHeight = window.innerHeight - 65;
console.log(this.conHeight); console.log(this.conHeight);
document.addEventListener("keydown", event => { //监听退出全屏事件
var that = this;
document.onkeydown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0]; var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 122) { if (e && e.keyCode == 122) {
// 按 Esc if (that.isfull) {
if (this.full) { that.isfull = false;
this.menuwidth = "254px"; console.log(1)
this.full = false; } else {
return; that.isfull = true;
console.log(2)
} }
this.menuwidth = 0;
this.full = true;
} }
}); };
// window.onresize = function() {
// console.log("full",that.isfull)
// if (that.isfull) {
// that.isfull = false;
// console.log(1)
// } else {
// that.isfull = true;
// console.log(2)
// }
// };
// function checkFull() {
// var isFull =
// document.fullscreenEnabled ||
// window.fullScreen ||
// document.webkitIsFullScreen ||
// document.msFullscreenEnabled;
// //to fix : false || undefined == undefined
// if (isFull === undefined) {
// isFull = false;
// }
// return isFull;
// }
setInterval(() => { setInterval(() => {
this.getDate(); this.getDate();
}, 1000); }, 1000);
......
src/views/Layout/menu.vue
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
:collapse="isCollapse" :collapse="isCollapse"
@select="handleSelect" @select="handleSelect"
:unique-opened="true" :unique-opened="true"
wdth="116vw"
> >
<el-submenu index="1" class="menu-icon"> <el-submenu index="1" class="menu-icon">
<template slot="title"> <template slot="title">
...@@ -86,9 +87,11 @@ export default { ...@@ -86,9 +87,11 @@ export default {
.el-menu-vertical-demo:not(.el-menu--collapse) { .el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px; width: 200px;
min-height: 400px; min-height: 400px;
box-shadow: 0px -3px 8px 0px rgba(40,49,101,0.13);
} }
.box{ .box{
height 100%; height 100%;
box-shadow:0px -3px 8px 0px rgba(40,49,101,0.13);
} }
.menu-icon i{ .menu-icon i{
font-size 14px; font-size 14px;
......
src/views/Login.vue
<template> <template>
<div id="login" :style="{ height: innerHeight + 'px' }"> <div id="login" :style="{ height: innerHeight + 'px' }" class="js-count-particles" >
<!-- ie空白解决方法https://blog.csdn.net/heyNewbie/article/details/99623550 --> <!-- ie空白解决方法https://blog.csdn.net/heyNewbie/article/details/99623550 -->
<!-- <vue-particles <!-- <vue-particles
color="#dedede" color="#dedede"
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
</template> </template>
<script> <script>
let particlesConfig = require("../assets/js/particles.json");
let sha1 = require("js-sha1"); let sha1 = require("js-sha1");
import types from "../store/types.js"; import types from "../store/types.js";
export default { export default {
...@@ -268,7 +269,10 @@ export default { ...@@ -268,7 +269,10 @@ export default {
} }
}, },
watch: {}, watch: {},
mounted() {}, mounted() {
particlesJS('login',particlesConfig);
document.body.style.overflow = "hidden";
},
created() { created() {
this.initHeight(); this.initHeight();
let _this = this; let _this = this;
...@@ -284,6 +288,15 @@ export default { ...@@ -284,6 +288,15 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
#login{
width: 100%;
height: 100%;
background-color: #e76392;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
#particles { #particles {
position: absolute; position: absolute;
width: 100%; width: 100%;
......
src/views/behaviorShow/devInfo.vue
<template> <template>
<div class="devinfo-box"> <div class="devinfo-box">
<div class="item-box"> <div class="item-box">
<div class="icon icon-fanxing-fenxiziyuan"></div>
<div class="item-info-box"> <div class="item-info-box">
<div>分析资源</div> <div>分析资源</div>
<div><span>64</span> 路</div> <div><span>64</span> 路</div>
</div> </div>
</div> </div>
<div class="item-box"> <div class="item-box">
<div class="icon icon-fanxing-yunhanglushu"></div>
<div class="item-info-box"> <div class="item-info-box">
<div>运行路数</div> <div>运行路数</div>
<div> <span>47</span> 路</div> <div> <span>47</span> 路</div>
</div> </div>
</div> </div>
<div class="item-box"> <div class="item-box">
<div class="icon icon-fanxing-yunhangyichang"></div>
<div class="item-info-box"> <div class="item-info-box">
<div>运行异常</div> <div>运行异常</div>
<div><span>6</span> 个</div> <div><span>6</span> 个</div>
</div> </div>
</div> </div>
<div class="item-box"> <div class="item-box">
<div class="icon icon-fanxing-xinxicunchu"></div>
<div class="item-info-box"> <div class="item-info-box">
<div>信息存储量</div> <div>信息存储量</div>
<div><span>1.2</span> T</div> <div><span>1.2</span> T</div>
...@@ -41,14 +37,7 @@ export default { ...@@ -41,14 +37,7 @@ export default {
<style scoped="scoped" lang="stylus"> <style scoped="scoped" lang="stylus">
.devinfo-box { .devinfo-box {
width: 8vw; margin-top 10vh
height: 28vh;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.19);
background:rgba(255,255,255,1);
box-shadow:0px 5px 8px 0px rgba(0,0,0,0.2),0px 0px 4px 0px rgba(0,0,0,0.19);
border-radius:6px;
overflow hidden
.item-box{ .item-box{
margin-top 2vh margin-top 2vh
overflow hidden overflow hidden
...@@ -57,29 +46,66 @@ export default { ...@@ -57,29 +46,66 @@ export default {
margin-top 2vh margin-top 2vh
} }
} }
.icon{
margin-left .6vw
width 1.7vw
height 3.5vh
float left
font-size 28px
line-height 3.5vh
text-align center
color #3BB7FF
background:rgba(179,229,252,.21);
}
.item-info-box{ .item-info-box{
height 45px;
color #000
width 8vw
border-bottom 1px solid #E5E5E5
float left float left
display flex
margin-left 1vw margin-left 1vw
width 4vw font-size 16px;
div:first-child{ div:first-child{
flex 1
color:rgba(102,102,102,1) color:rgba(102,102,102,1)
} }
div:last-child span{ div:last-child{
color:rgba(68,68,68,1); color:rgba(68,68,68,1);
font-size 20px width 3vw
line-height 2.5vh line-height 2.5vh
letter-spacing 20 letter-spacing 20
span {
font-size 20px
display inline-block
width 1.5vw
font-weight 600
}
}
}
.item-box:nth-child(1) {
.item-info-box{
div:last-child{
span{
color #FF9630
}
}
}
}
.item-box:nth-child(2) {
.item-info-box{
div:last-child{
span{
color #3BB7FF
}
}
}
}
.item-box:nth-child(3) {
.item-info-box{
div:last-child{
span{
color #0069FF
}
}
}
}
.item-box:nth-child(4) {
.item-info-box{
div:last-child{
span{
color #7460EE
}
}
} }
} }
</style> </style>
\ No newline at end of file \ No newline at end of file
src/views/sceneManage/index.vue
...@@ -26,14 +26,15 @@ ...@@ -26,14 +26,15 @@
stoptask: item.status != 'Running' stoptask: item.status != 'Running'
}" }"
> >
<i <!-- <i
:class="{ :class="{
'el-icon-fanxin-yiyunhangrenwuliebiao': 'el-icon-fanxin-yiyunhangrenwuliebiao':
item.status == 'Running', item.status == 'Running',
' el-icon-fanxin-task-pause': item.status != 'Running', ' el-icon-fanxin-task-pause': item.status != 'Running',
icon: true icon: true
}" }"
></i> ></i> -->
<!-- <span class="el-icon-caret-bottom" style="display:inline-block"></span> -->
<span class="task-title">{{ item.task_name }}</span> <span class="task-title">{{ item.task_name }}</span>
</span> </span>
<ol v-if="index == subindex"> <ol v-if="index == subindex">
...@@ -100,7 +101,7 @@ export default { ...@@ -100,7 +101,7 @@ export default {
return { return {
searchInfo: "", searchInfo: "",
taskdata: [], taskdata: [],
subtaskdata: [], subtaskdata: "",
subTasks: [], subTasks: [],
subindex: -1, subindex: -1,
playurl: "", playurl: "",
...@@ -127,7 +128,8 @@ export default { ...@@ -127,7 +128,8 @@ export default {
this.$store.commit("setocxstate", 1); this.$store.commit("setocxstate", 1);
this.currentSubtaskId = vdata.subtask_id; this.currentSubtaskId = vdata.subtask_id;
this.subtaskdata = vdata; this.subtaskdata = vdata;
this.$refs.setting.getTaskParams(); console.log('vdata',vdata)
this.$refs.setting.TaskParams(vdata.subtask_id);
if (vdata.running_status != "Running") { if (vdata.running_status != "Running") {
this.$message({ this.$message({
message: "该任务没有运行，无法获取分析视频和抓拍信息", message: "该任务没有运行，无法获取分析视频和抓拍信息",
...@@ -276,16 +278,19 @@ export default { ...@@ -276,16 +278,19 @@ export default {
.task-lsit{ .task-lsit{
display inline-block display inline-block
cursor pointer cursor pointer
font-size 14px
color rgba(102, 102, 102, 1)
margin-top 15px
.icon { .icon {
padding-left 10px padding-left 10px
} }
} }
.runningtask{ .runningtask{
// color rgba(1, 206, 184, 0.56); // color rgba(1, 206, 184, 0.56);
color #999697; color rgba(102, 102, 102, 1)
} }
.stoptask{ .stoptask{
color #999697 color rgba(102, 102, 102, 1)
.icon { .icon {
font-size 22px font-size 22px
margin-left -2px margin-left -2px
...@@ -308,7 +313,7 @@ export default { ...@@ -308,7 +313,7 @@ export default {
height 30px height 30px
padding-left 30px padding-left 30px
line-height 30px line-height 30px
font-size 14px font-size 13px
color #666666 color #666666
// width calc(100% - 30px); // width calc(100% - 30px);
overflow hidden overflow hidden
......
src/views/sceneManage/setting/index.vue
...@@ -9,23 +9,37 @@ ...@@ -9,23 +9,37 @@
style="width: 80%;float:left" style="width: 80%;float:left"
height="25vh" height="25vh"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
v-loading="loading"
> >
<el-table-column label="序号" type="index" width="50" align="center"> <el-table-column label="序号" type="index" width="50" align="center">
</el-table-column> </el-table-column>
<el-table-column align="center" label="预置位编号" width="180"> <el-table-column align="center" label="预置位编号" width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<div> <div>
{{ setpositionnum(scope.row.position_num) }} {{ setpositionnum(scope.row.position_num) }}
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="预设位置配置" width="180"> <el-table-column align="center" label="预设位置配置" width="120">
<template> <template>
<div class="yzw-setbox"> <div class="yzw-setbox">
<span class="icon el-icon-delete" @click="resetRoi"></span> <span class="icon el-icon-delete" @click="resetRoi"></span>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="时间设置" width="160">
<template slot-scope="scope">
<div class="yzw-setbox">
<setTimer
ref="settimer"
:runtime="scope.row.runtime"
:runindex="scope.$index"
@timerchange="submitTimer(scope.row, $event)"
></setTimer>
</div>
</template>
</el-table-column>
<el-table-column prop="address" align="center" label="参数设置"> <el-table-column prop="address" align="center" label="参数设置">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="table-set"> <div class="table-set">
...@@ -34,7 +48,7 @@ ...@@ -34,7 +48,7 @@
<span @click="setDemarcate(scope.row, scope.$index)" <span @click="setDemarcate(scope.row, scope.$index)"
>标定设置</span >标定设置</span
> >
<span @click="setTimer(scope.row, scope.$index)">时间设置</span> <!-- <span @click="setTimer(scope.row, scope.$index)">时间设置</span> -->
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -79,61 +93,7 @@ ...@@ -79,61 +93,7 @@
<div> <div>
<demarcate ref="demarcate"></demarcate> <demarcate ref="demarcate"></demarcate>
</div> </div>
<div> <div></div>
<el-dialog
title="时间设置"
:visible.sync="timerDialog"
width="18%"
top="15%"
:before-close="handleTimerClose"
>
<div class="settimertype">
<span class="title">时间长度:</span>
<div class="timer-sel">
<el-select v-model="timersel" placeholder="请选择">
<el-option label="下拉选择" :value="0"> </el-option>
<el-option label="自定义" :value="1"> </el-option>
</el-select>
</div>
</div>
<div class="sel-box" v-show="timersel == 0">
<span class="title">长度选择:</span>
<div class="timer-sel">
<el-select v-model="timer" placeholder="请选择">
<el-option
v-for="(item, index) in timeroptions"
:key="index"
:label="item"
:value="item"
>
</el-option>
</el-select>
</div>
</div>
<div class="sel-box" v-show="timersel == 1">
<span class="title">时间长度:</span>
<div class="timer-sel">
<el-input v-model="timer" style="padding-right:23px"></el-input>
</div>
</div>
<div class="sel-box">
<span class="title">开启轮休:</span>
<div class="timer-sel">
<el-switch
width="30"
v-model="polling_state"
active-color="#13ce66"
inactive-color="#ff4949"
>
</el-switch>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handleTimerClose">取 消</el-button>
<el-button type="primary" @click="submitTimer">确 定</el-button>
</span>
</el-dialog>
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -142,15 +102,16 @@ import demarcate from "./demarcate"; ...@@ -142,15 +102,16 @@ import demarcate from "./demarcate";
import parameter from "./parameter"; import parameter from "./parameter";
import ytconfig from "./ytconfig"; import ytconfig from "./ytconfig";
import handleparam from "./handleparam"; import handleparam from "./handleparam";
import setTimer from "./setTimer";
export default { export default {
data() { data() {
return { return {
timer: 0, timer: 0,
loading:false,
polling_state: false, polling_state: false,
timersel: 0, timersel: 0,
timerDialog: false, timerDialog: false,
curindex: 0, curindex: 0,
timeroptions: [5, 10, 15, 20, 30, 40, 50, 60],
timerscenes: null, timerscenes: null,
currentRow: null, currentRow: null,
taskInfo: { taskInfo: {
...@@ -169,7 +130,8 @@ export default { ...@@ -169,7 +130,8 @@ export default {
demarcate, demarcate,
parameter, parameter,
ytconfig, ytconfig,
handleparam handleparam,
setTimer
}, },
methods: { methods: {
setParam(scenesdata, index) { setParam(scenesdata, index) {
...@@ -198,9 +160,13 @@ export default { ...@@ -198,9 +160,13 @@ export default {
this.$refs.yt.openyt(this.currentRow); this.$refs.yt.openyt(this.currentRow);
} }
}, },
getTaskParams() { TaskParams(subid) {
this.$api.task.getTaskParams(this.taskid, this.subtaskid).then(data => { this.loading = true;
this.taskInfo = data; this.$api.task.getTaskParams(this.taskid, subid).then(res => {
this.taskInfo = res;
this.switchstate = res.alternate_status == 1 ? true : false;
this.loading = false;
this.$forceUpdate();
}); });
}, },
setTimer(data) { setTimer(data) {
...@@ -211,13 +177,29 @@ export default { ...@@ -211,13 +177,29 @@ export default {
this.timer = data.runtime; this.timer = data.runtime;
}, },
resetRoi() { resetRoi() {
this.$store.commit("setocxstate", 0);
this.$confirm("删除预置位信息, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.taskInfo.mtasks[0].scenes.map(ele => { this.taskInfo.mtasks[0].scenes.map(ele => {
if (ele.scene_unid == this.currentRow.scene_unid) { if (ele.scene_unid == this.currentRow.scene_unid) {
ele.config = {}; ele.config = {};
ele.rois = []; ele.rois = [];
ele.runtime = 0;
} }
}); });
this.subRoi(this.taskInfo.mtasks); this.subRoi(this.taskInfo.mtasks);
})
.catch(() => {
this.$store.commit("setocxstate", 1);
this.$message({
type: "info",
message: "已取消删除"
});
});
}, },
setpositionnum(index) { setpositionnum(index) {
return index == -1 ? "未设置" : index; return index == -1 ? "未设置" : index;
...@@ -273,11 +255,10 @@ export default { ...@@ -273,11 +255,10 @@ export default {
}); });
this.subRoi(this.taskInfo.mtasks); this.subRoi(this.taskInfo.mtasks);
}, },
submitTimer(item) { submitTimer(item, stimer) {
this.taskInfo.mtasks[0].scenes.map(ele => { this.taskInfo.mtasks[0].scenes.map(ele => {
if (ele.scene_unid == this.currentRow.scene_unid) { if (ele.scene_unid == item.scene_unid) {
ele.runtime = this.timer; ele.runtime = stimer;
ele.pollingState = this.polling_state;
} }
}); });
this.subRoi(this.taskInfo.mtasks); this.subRoi(this.taskInfo.mtasks);
...@@ -295,6 +276,7 @@ export default { ...@@ -295,6 +276,7 @@ export default {
type: "success" type: "success"
}); });
this.$store.commit("setocxstate", 1); this.$store.commit("setocxstate", 1);
this.TaskParams(this.subtaskid);
} }
}); });
}, },
...@@ -370,13 +352,15 @@ export default { ...@@ -370,13 +352,15 @@ export default {
} }
}, },
watch: { watch: {
subtaskid(val) { // subtaskid(val) {
this.$api.task.getTaskParams(this.taskid, val).then(res => { // this.loading = true;
this.taskInfo = res; // this.$api.task.getTaskParams(this.taskid, val).then(res => {
this.switchstate = res.alternate_status == 1 ? true : false; // this.taskInfo = res;
console.log(res.data); // this.switchstate = res.alternate_status == 1 ? true : false;
}); // this.loading = false;
} // this.$forceUpdate();
// });
// }
} }
}; };
</script> </script>
......
src/views/sceneManage/setting/setTimer.vue 0 → 100644
<template>
<div class="timer-sel">
<el-select v-model="settimer" placeholder="请选择" @change="changet">
<el-option
v-for="(item, index) in timeroptions"
:key="index"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
settimer: 0,
timeroptions: [{name:5,value:5},{name:10,value:10},{name:15,value:15},{name:30,value:30},{name:"不限时",value:-1}]
};
},
methods: {
changet(val) {
this.$emit("timerchange", val);
},
},
props: ["runtime","runindex"],
updated(v){
this.$nextTick(function(){
// alert(v)
this.settimer = this.runtime;
});
},
mounted() {
this.settimer = this.runtime;
if (this.runindex == 0 && (this.runtime == 0 ||this.runtime == -1)) {
this.settimer = -1;
}
},
watch:{
runtime(val) {
this.settimer = val;
}
}
};
</script>
<style></style>
src/views/taskManage/editSet.vue
...@@ -38,8 +38,8 @@ ...@@ -38,8 +38,8 @@
</el-form-item> </el-form-item>
<el-form-item label="时间计划"> <el-form-item label="时间计划">
<el-select v-model="formData.period"> <el-select v-model="formData.period">
<el-option :value="1" label="全天"></el-option> <el-option :value="true" label="全天"></el-option>
<el-option :value="0" label="时间"></el-option> <el-option :value="false" label="时间"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="时间" v-show="formData.plate_time != 'day'"> <el-form-item label="时间" v-show="formData.plate_time != 'day'">
...@@ -68,10 +68,15 @@ ...@@ -68,10 +68,15 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="设备类型"> <el-form-item label="设备类型">
<el-input <el-select v-model="formData.plate_type">
v-model="formData.plate_type" <el-option
placeholder="请选择" v-for="(item, index) in freeList"
></el-input> :key="index"
:value="item.device_id"
>
{{ item.device_id }}
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="优先级"> <el-form-item label="优先级">
<el-select <el-select
...@@ -117,6 +122,10 @@ export default { ...@@ -117,6 +122,10 @@ export default {
pedittype: { pedittype: {
type: String, type: String,
default: "add" default: "add"
},
freeList: {
type: Array,
default: []
} }
}, },
watch: {}, watch: {},
...@@ -137,7 +146,7 @@ export default { ...@@ -137,7 +146,7 @@ export default {
}, },
priority: "", priority: "",
plate_type: "", plate_type: "",
plate_time: "", plate_time: ""
}; };
} }
if (type == "edit") { if (type == "edit") {
...@@ -184,8 +193,8 @@ export default { ...@@ -184,8 +193,8 @@ export default {
source_type: "pull_video_stream", source_type: "pull_video_stream",
dev_unid: this.dev_unid, dev_unid: this.dev_unid,
node_count: 0, node_count: 0,
start_dt: this.formData.period === 1 ? "2020-03-27 00:00:00" : this.setUtcTime(this.formData.timer[0]), start_dt: this.formData.period ? "2020-03-27 00:00:00" : this.setUtcTime(this.formData.timer[0]),
end_dt: this.formData.period === 1 ? "2020-03-27 00:00:00" : this.setUtcTime(this.formData.timer[1]), end_dt: this.formData.period ? "3020-03-27 00:00:00" : this.setUtcTime(this.formData.timer[1]),
priority: this.formData.priority, priority: this.formData.priority,
store_conf_unid: this.formData.store_conf.unid, store_conf_unid: this.formData.store_conf.unid,
period: this.formData.period, period: this.formData.period,
......
src/views/taskManage/index.vue
...@@ -226,6 +226,7 @@ ...@@ -226,6 +226,7 @@
<editset <editset
ref="editset" ref="editset"
:pedittype="pedittype" :pedittype="pedittype"
:freeList="freeList"
@refresh="getTaskList" @refresh="getTaskList"
></editset> ></editset>
<editvideo <editvideo
......
src/views/taskManage/subtask.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
:key="index" :key="index"
:value="item.device_id" :value="item.device_id"
> >
{{ item.in_ip }} {{ item.device_id }}
</el-option> </el-option>
</el-select> </el-select>
</span> </span>
......
src/views/trafficShow/eventTypedis.vue
<template> <template>
<div> <div>
<div class="chart-header-box"> <div class="chart-header-box">
<div class="header-title ">事件类型分布</div> <div class="header-title">事件类型分布</div>
</div> </div>
<div id="eventchart" class="eventchart"></div> <div id="eventchart" class="eventchart"></div>
</div> </div>
...@@ -16,25 +16,27 @@ export default { ...@@ -16,25 +16,27 @@ export default {
}, },
methods: { methods: {
initchart(data) { initchart(data) {
let xData = [], chartData = []; let xData = [],
chartData = [];
if (data && data.length > 0) { if (data && data.length > 0) {
data.map(ele => { data.map((ele, index) => {
if (index < 6) {
let obj = { let obj = {
name:ele.event_name, name: ele.event_name,
value:ele.total_num value: ele.total_num
};
xData.push(ele.event_name);
chartData.push(obj);
} }
xData.push(ele.event_name) });
chartData.push(obj)
})
} }
var color = [ var color = [
"#0069FF", "#0069FF",
"#3BB7FF", "#3BB7FF",
"#FF9630", "#FF9630",
"#FFC62E",
"#87D14B",
"#7460EE", "#7460EE",
"#f59a8f", "#FFC62E",
"#FF9630"
]; ];
var xdata = xData; var xdata = xData;
let maychart = this.$echarts.init(document.getElementById("eventchart")); let maychart = this.$echarts.init(document.getElementById("eventchart"));
...@@ -49,7 +51,11 @@ export default { ...@@ -49,7 +51,11 @@ export default {
data: xdata, data: xdata,
itemWidth: 6, itemWidth: 6,
itemHeight: 8, itemHeight: 8,
itemGap: 10, itemGap: 15,
icon: "circle",
textStyle:{
color :"#000"
},
/*formatter:function(name){ /*formatter:function(name){
var oa = option.series[0].data; var oa = option.series[0].data;
var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ; var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
...@@ -69,7 +75,7 @@ export default { ...@@ -69,7 +75,7 @@ export default {
type: "pie", type: "pie",
clockwise: false, //饼图的扇区是否是顺时针排布 clockwise: false, //饼图的扇区是否是顺时针排布
minAngle: 2, //最小的扇区角度（0 ~ 360） minAngle: 2, //最小的扇区角度（0 ~ 360）
radius: ["50%", "70%"], radius: ["52%", "70%"],
center: ["30%", "50%"], center: ["30%", "50%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
...@@ -113,14 +119,14 @@ export default { ...@@ -113,14 +119,14 @@ export default {
}; };
maychart.setOption(option); maychart.setOption(option);
}, },
getTrafficType(){ getTrafficType() {
this.$api.show.getTrafficType().then(res => { this.$api.show.getTrafficType().then(res => {
this.initchart(res.list_data); this.initchart(res.list_data);
}) });
} }
}, },
mounted() { mounted() {
this.getTrafficType() this.getTrafficType();
} }
}; };
</script> </script>
...@@ -128,12 +134,14 @@ export default { ...@@ -128,12 +134,14 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
.chart-header-box { .chart-header-box {
height: 3vh; height: 3vh;
padding 5px;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 14px;
} }
.header-title{ .header-title{
line-height 3vh; line-height 3vh;
padding-left 5px padding-left 5px;
color:#000;
} }
.eventchart { .eventchart {
height: 22vh; height: 22vh;
......
src/views/trafficShow/illegaltrend.vue
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<div> <div>
<div class="chart-header-box"> <div class="chart-header-box">
<el-col :span="5" class="header-title">违法事件趋势</el-col> <el-col :span="5" class="header-title">违法事件趋势</el-col>
<div class="sel-box">
<span class="header-label">违法</span> <span class="header-label">违法</span>
<div class="header-select"> <div class="header-select">
<el-select v-model="illtype" @change="getTrafficHour"> <el-select v-model="illtype" @change="getTrafficHour">
...@@ -34,6 +35,7 @@ ...@@ -34,6 +35,7 @@
</el-select> </el-select>
</div> </div>
</div> </div>
</div>
<div id="illtrendchart" class="illtrendchart"></div> <div id="illtrendchart" class="illtrendchart"></div>
</div> </div>
</template> </template>
...@@ -82,6 +84,7 @@ export default { ...@@ -82,6 +84,7 @@ export default {
let maychart = this.$echarts.init( let maychart = this.$echarts.init(
document.getElementById("illtrendchart") document.getElementById("illtrendchart")
); );
var color = ["rgba(59, 184, 255", "rgba(116, 96, 238"];
let option = { let option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
...@@ -90,18 +93,19 @@ export default { ...@@ -90,18 +93,19 @@ export default {
} }
}, },
legend: { legend: {
data: ["违法", "事件", "重点车辆"], right: "10%",
align: "right", y: "0px",
bottom: 0, itemWidth: 5,
itemHeight: 5,
textStyle: { textStyle: {
color: "#666" color: "#8C8C8C",
fontSize: 12
}, },
itemGap: 30, icon: "circle",
itemWidth: 30, data: ["违法", "事件", "重点车辆"]
itemHeight: 10
}, },
grid: { grid: {
top: "10%", top: "9%",
left: "3%", left: "3%",
right: "10%", right: "10%",
bottom: "10%", bottom: "10%",
...@@ -173,8 +177,6 @@ export default { ...@@ -173,8 +177,6 @@ export default {
for (let i = 0; i < xData.length; i++) { for (let i = 0; i < xData.length; i++) {
if (ele.hour == xData[i]) { if (ele.hour == xData[i]) {
d.push(ele.total_num); d.push(ele.total_num);
} else {
d.push(0);
} }
} }
}); });
...@@ -182,18 +184,43 @@ export default { ...@@ -182,18 +184,43 @@ export default {
})(), })(),
itemStyle: { itemStyle: {
normal: { normal: {
color: "#0069FF" color: "#3BB8FF"
} }
}, },
lineStyle: { lineStyle: {
normal: { normal: {
width: 1, width: 1,
shadowColor: "rgba(0,0,0,0.4)", shadowColor: "#3BB8FF",
shadowBlur: 10, shadowBlur: 10,
shadowOffsetY: 10 shadowOffsetY: 10
} }
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: color[1] + ", 0.3)"
},
{
offset: 0.8,
color: color[1] + ", 0)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10
} }
}, },
symbol: "circle",
symbolSize: 5
},
{ {
name: "事件", name: "事件",
type: "line", type: "line",
...@@ -268,6 +295,7 @@ export default { ...@@ -268,6 +295,7 @@ export default {
key_vehicle_type: this.special_type key_vehicle_type: this.special_type
}; };
this.$api.show.getTrafficHour(data).then(res => { this.$api.show.getTrafficHour(data).then(res => {
console.log('违法事件趋势',res);
this.initchart(res); this.initchart(res);
}); });
}, },
...@@ -289,29 +317,35 @@ export default { ...@@ -289,29 +317,35 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
.chart-header-box { .chart-header-box {
height: 3vh;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 14px;
.sel-box{
float right;
margin-right 20px
}
} }
.header-title { .header-title {
padding 5px 10px
line-height: 3vh; line-height: 3vh;
color #000;
} }
.illtrendchart { .illtrendchart {
height: 26vh; height: 30vh;
width: 30vw; width: 35vw;
} }
.header-label { .header-label {
font-size: 12px; font-size: 12px;
line-height: 3vh; line-height: 3vh;
float: left; float: left;
margin:6px 0 0px 15px;
} }
.header-select { .header-select {
width: 4.5vw; width: 4.5vw;
margin: 0.2vh 0.5vw 0 0.2vw; margin: 8px 0.5vw 0 0.2vw;
float: left; float: left;
} }
</style> </style>
src/views/trafficShow/index.vue
<template> <template>
<el-row <el-row
:gutter="10" :gutter="12"
style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden" style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden"
> >
<el-col :span="15"> <el-col :span="15">
<div class="mapbox">
<div id="map" class="maps"> <div id="map" class="maps">
<div class="search-vchan"> <div class="search-vchan">
<el-input <el-input
placeholder="请输入内容" placeholder="请输入内容"
suffix-icon="el-icon-search"
v-model="vchanname" v-model="vchanname"
class="input-with-select" class="input-with-select"
> >
<el-button
slot="append"
type="primary"
icon="el-icon-search"
@click="searchvchan"
></el-button>
</el-input> </el-input>
</div> </div>
<showmap ref="map"></showmap> <div class="devinfobox">
<div class="eventlist-box card-hover">
<!-- <eventList></eventList> -->
<devInfo></devInfo> <devInfo></devInfo>
</div> </div>
<showmap ref="map"></showmap>
<div class="video-box" v-show="ocxstatus"> <div class="video-box" v-show="ocxstatus">
<div class="video-box-close" @click="closeocx"></div> <div class="video-box-close" @click="closeocx"></div>
<!-- <videoPlay2 ref="mapvideo2" :playurl="playurl2"></videoPlay2> -->
<!-- <mPlayvideo :playersrc="playurl"></mPlayvideo> --> </div>
<!-- <videoPlay ref="mapvideo1" :playurl="playurl"></videoPlay> -->
<videoPlay2 ref="mapvideo2" :playurl="playurl2"></videoPlay2>
<!-- <videoPlay ref="mapvideo" :playurl="playurl"></videoPlay> -->
</div> </div>
</div> </div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
...@@ -39,36 +31,54 @@ ...@@ -39,36 +31,54 @@
<div class="header-title">重点车辆分布</div> <div class="header-title">重点车辆分布</div>
<div class="collect-content"> <div class="collect-content">
<el-col :span="6" class="content-item"> <el-col :span="6" class="content-item">
<div class="item-num">{{ snapData.kakou_total_snap_num }}</div> <div class="zd-icon" style="color:#FF9630">
<div>卡口总量</div> <span class="icon-fanxing-kakouzongliang"></span>
</div>
<div>
<div class="zd-title">卡口数量</div>
<div class="zd-num">{{ snapData.kakou_total_snap_num }}</div>
</div>
</el-col> </el-col>
<el-col :span="6" class="content-item"> <el-col :span="6" class="content-item">
<div class="item-num">{{ snapData.event_total_snap_num }}</div> <div class="zd-icon" style="color:#3BB7FF">
<div>事件总量</div> <span class="icon-fanxing-shijianzongliang"></span>
</div>
<div>
<div class="zd-title">事件总量</div>
<div class="zd-num">{{ snapData.event_total_snap_num }}</div>
</div>
</el-col> </el-col>
<el-col :span="6" class="content-item"> <el-col :span="6" class="content-item">
<div class="item-num">{{ snapData.illega_total_snap_num }}</div> <div class="zd-icon" style="color:#0069FF">
<div>违法总量</div> <span class="icon-fanxing-weifazongliang"></span>
</div>
<div>
<div class="zd-title">违法总量</div>
<div class="zd-num">{{ snapData.illega_total_snap_num }}</div>
</div>
</el-col> </el-col>
<el-col :span="6" class="content-item"> <el-col :span="6" class="content-item">
<div class="item-num"> <div class="zd-icon" style="color:#7460EE">
{{ snapData.key_vehicle_total_snap_num }} <span class="icon-fanxing-teshucheliangzongliang"></span>
</div>
<div>
<div class="zd-title">特殊车辆总量</div>
<div class="zd-num">{{ snapData.key_vehicle_total_snap_num }}</div>
</div> </div>
<div>特殊车辆总量</div>
</el-col> </el-col>
</div> </div>
</div> </div>
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="9"> <el-col :span="9">
<el-row style="margin-top:1vh;background:#fff"> <el-row style="background:#fff">
<div class="card-hover"> <div class="card-hover">
<illegaltrend></illegaltrend> <illegaltrend></illegaltrend>
</div> </div>
</el-row> </el-row>
<el-row :gutter="12" class="event-type-box" style="margin-top:1.5vh"> <el-row :gutter="12" class="event-type-box" style="margin-top:1.5vh">
<el-col :span="16"> <el-col :span="16" class="card-hover">
<div class="right-item-box card-hover"> <div class="right-item-box">
<eventTypedis></eventTypedis> <eventTypedis></eventTypedis>
</div> </div>
</el-col> </el-col>
...@@ -77,7 +87,7 @@ ...@@ -77,7 +87,7 @@
<div class="title">重点车辆分布</div> <div class="title">重点车辆分布</div>
<div class="car-dis-info"> <div class="car-dis-info">
<div class="left-icon"> <div class="left-icon">
<span class="icon-fanxing-zhatuchezhuapai"></span> <span class="icon-fanxing-zhatuchezhuapai1"></span>
</div> </div>
<div class="right-content"> <div class="right-content">
<div><span class="car-num">10</span>辆</div> <div><span class="car-num">10</span>辆</div>
...@@ -86,7 +96,10 @@ ...@@ -86,7 +96,10 @@
</div> </div>
<div class="car-dis-info"> <div class="car-dis-info">
<div class="left-icon"> <div class="left-icon">
<span class="icon-fanxing-weixianpin"></span> <span
class="icon-fanxing-weixianpin1"
style="color:#FF9630"
></span>
</div> </div>
<div class="right-content"> <div class="right-content">
<div><span class="car-num">10</span>辆</div> <div><span class="car-num">10</span>辆</div>
...@@ -95,7 +108,10 @@ ...@@ -95,7 +108,10 @@
</div> </div>
<div class="car-dis-info"> <div class="car-dis-info">
<div class="left-icon"> <div class="left-icon">
<span class="icon-fanxing-zhongxingguanshi"></span> <span
class="icon-fanxing-zhatuchezhuapai1"
style="color:#36BEA6"
></span>
</div> </div>
<div class="right-content"> <div class="right-content">
<div class><span class="car-num">29</span>辆</div> <div class><span class="car-num">29</span>辆</div>
...@@ -108,7 +124,7 @@ ...@@ -108,7 +124,7 @@
<div style="clear: both;"></div> <div style="clear: both;"></div>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-row class="clearpright" style="margin-top:2vh"> <el-row class="clearpright" style="margin-top:1.5vh">
<div class="right-item-box card-hover"> <div class="right-item-box card-hover">
<div class="title">实时数据</div> <div class="title">实时数据</div>
<alarmEvent @event="alarmevent"></alarmEvent> <alarmEvent @event="alarmevent"></alarmEvent>
...@@ -121,7 +137,7 @@ ...@@ -121,7 +137,7 @@
<script> <script>
// import mPlayvideo from "../public/mapvideo" // import mPlayvideo from "../public/mapvideo"
// import videoPlay from "../public/mapvideo"; // import videoPlay from "../public/mapvideo";
import videoPlay2 from "../public/mapvideo2"; // import videoPlay2 from "../public/mapvideo2";
import showmap from "./map"; import showmap from "./map";
import illegaltrend from "./illegaltrend"; import illegaltrend from "./illegaltrend";
import eventTypedis from "./eventTypedis"; import eventTypedis from "./eventTypedis";
...@@ -138,7 +154,7 @@ export default { ...@@ -138,7 +154,7 @@ export default {
keyVehicleData: [], keyVehicleData: [],
illageList: [], illageList: [],
setShow: false, setShow: false,
ocxstatus: true, ocxstatus: false,
archiveUnid: 0, archiveUnid: 0,
snap_num: 0, snap_num: 0,
playurl: {}, playurl: {},
...@@ -157,7 +173,7 @@ export default { ...@@ -157,7 +173,7 @@ export default {
showmap, showmap,
// mPlayvideo, // mPlayvideo,
// videoPlay, // videoPlay,
videoPlay2, // videoPlay2,
illegaltrend, illegaltrend,
eventTypedis, eventTypedis,
alarmEvent, alarmEvent,
...@@ -180,7 +196,7 @@ export default { ...@@ -180,7 +196,7 @@ export default {
methods: { methods: {
alarmevent(data) { alarmevent(data) {
//移动地图 //移动地图
this.$refs.map.movemap(data); this.$refs.map.movemap(data,null,2);
}, },
searchvchan() { searchvchan() {
this.$refs.map.searchvchan(this.vchanname); this.$refs.map.searchvchan(this.vchanname);
...@@ -208,11 +224,11 @@ export default { ...@@ -208,11 +224,11 @@ export default {
<style scoped="scoped" lang="stylus"> <style scoped="scoped" lang="stylus">
.collect-box { .collect-box {
height: 11.8vh; height: 11.2vh;
background: #fff; background: #fff;
margin-top .5vh margin-top 1.5vh
.header-title { .header-title {
padding: 10px 0px 0 20px; padding: 10px 0px 0 10px;
width:113px; width:113px;
height:20px; height:20px;
font-size:14px; font-size:14px;
...@@ -222,20 +238,34 @@ export default { ...@@ -222,20 +238,34 @@ export default {
.collect-content { .collect-content {
margin-top: 1.6vh; margin-top: 1.6vh;
overflow hidden
.content-item { .content-item {
display flex
text-align: center; text-align: center;
border-right: 1px solid #E5E5E5; align-items center
justify-items center
overflow hidden
} }
.content-item:last-child { .content-item:last-child {
border-right: 0; border-right: 0;
} }
} }
.zd-icon {
.item-num { margin 0 10px 0 20px
font-size: 16px; span {
color: #444444; font-size 32px
}
}
.zd-num{
font-size: 24px;
font-weight 600
color: #424242;
margin-top 5px
}
.zd-title{
font-size: 14px;
color: #000;
} }
} }
...@@ -347,12 +377,18 @@ export default { ...@@ -347,12 +377,18 @@ export default {
.lnum { .lnum {
width: 37px; width: 37px;
} }
.mapbox{
background #fff;
overflow hidden
}
.maps { .maps {
height: 45vh; float left;
height: 49vh;
width: 100%; width: 100%;
margin-bottom: 8px; margin-bottom: 8px;
position: relative; position: relative;
background url('./map.png') -12px -3px;
background-size 100% 110%
} }
.el-table__body tr { .el-table__body tr {
...@@ -361,19 +397,18 @@ export default { ...@@ -361,19 +397,18 @@ export default {
.event-type-box { .event-type-box {
width: 100%; width: 100%;
height: 26.5vh; height: 27vh;
overflow: hidden;
} }
.right-item-box { .right-item-box {
height: 27vh; height: 27vh;
background: #fff; background: #fff;
overflow: hidden;
} }
.right-item-box .title { .right-item-box .title {
padding-left: 5px; padding: 5px 10px;
line-height: 3vh; line-height: 3vh;
color:rgba(0,0,0,1);
} }
.car-dis-info { .car-dis-info {
...@@ -389,10 +424,10 @@ export default { ...@@ -389,10 +424,10 @@ export default {
overflow hidden overflow hidden
span { span {
font-size: 30px; font-size: 30px;
color rgba(179,229,252,1); color:#0069FF
background #3BB7FF;
} }
} }
} }
...@@ -405,7 +440,7 @@ export default { ...@@ -405,7 +440,7 @@ export default {
.eventlist-box { .eventlist-box {
position: absolute; position: absolute;
left: 10px; right: 10px;
top: 10px; top: 10px;
z-index: 1000; z-index: 1000;
} }
...@@ -440,11 +475,18 @@ export default { ...@@ -440,11 +475,18 @@ export default {
height:200px; height:200px;
} }
.search-vchan{ .search-vchan{
width 270px; width 170px;
position: absolute; position: absolute;
top: 12px; top: 12px;
z-index 900; z-index 900;
right 10px; left 20px;
border-radius 3px; border-radius 5px;
}
.devinfobox {
position absolute
top 40px
left 10
z-index 100
} }
</style> </style>
src/views/trafficShow/map.vue
...@@ -22,18 +22,9 @@ ...@@ -22,18 +22,9 @@
</div> </div>
</div> </div>
<div id="taskinfopopup" class="ol-popup info-popup"> <div id="taskinfopopup" class="ol-popup info-popup">
<a
href="#"
id="task-popup-closer"
class="ol-popup-closer"
@click="closetaskpopup"
></a>
<div> <div>
<span>{{ infoData.vchan_name }}</span> <!-- <span>{{ infoData.vchan_name }}</span> -->
<span></span> <span>鼠标点击显示视频</span>
<span></span>
<span></span>
<span></span>
</div> </div>
</div> </div>
</div> </div>
...@@ -242,17 +233,20 @@ export default { ...@@ -242,17 +233,20 @@ export default {
let data = feature.getProperties().cameraInfo; let data = feature.getProperties().cameraInfo;
that.playvideo(data); that.playvideo(data);
console.log("视频播放地址", data); console.log("视频播放地址", data);
}); });
}); });
//鼠标移入标注点 //鼠标移入标注点
map.on("pointermove", e => { map.on("pointermove", e => {
if (map.hasFeatureAtPixel(e.pixel)) {
var pixel = map.getEventPixel(e.originalEvent); var pixel = map.getEventPixel(e.originalEvent);
map.forEachFeatureAtPixel(pixel, function(feature) { map.forEachFeatureAtPixel(pixel, function(feature) {
let data = feature.getProperties().cameraInfo; let data = feature.getProperties().cameraInfo;
that.infoData = data; that.infoData = data;
that.showTaskInfo(data); that.showTaskInfo(data);
}); });
} else {
this.closetaskpopup();
}
}); });
}, },
movemap(data, point, type) { movemap(data, point, type) {
...@@ -264,6 +258,7 @@ export default { ...@@ -264,6 +258,7 @@ export default {
}); });
if (type && type == 2) { if (type && type == 2) {
this.addLayer(data, pos); this.addLayer(data, pos);
console.log('alarmdata',data);
} }
}, },
closepopup() { closepopup() {
...@@ -281,9 +276,15 @@ export default { ...@@ -281,9 +276,15 @@ export default {
return false; return false;
}, },
closetaskpopup() { closetaskpopup() {
try {
infooverlay.setPosition(undefined); infooverlay.setPosition(undefined);
if (taskcloser) {
taskcloser.blur(); taskcloser.blur();
}
return false; return false;
} catch (error) {
console.log(error);
}
}, },
addLayer(pdata, pos) { addLayer(pdata, pos) {
document.getElementById("popup").style.display = "block"; document.getElementById("popup").style.display = "block";
...@@ -317,11 +318,7 @@ export default { ...@@ -317,11 +318,7 @@ export default {
}); });
let color = "#156BB1"; //设置气泡颜色 let color = "#156BB1"; //设置气泡颜色
//添加svg图标需注意 width,height要和 new Icon 的imgSize保持一致 //添加svg图标需注意 width,height要和 new Icon 的imgSize保持一致
// let svg = // let svg = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585897688450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2671" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28"><defs><style type="text/css"></style></defs><path d="M512 320a192.096 192.096 0 0 1 0.256 384H512a192 192 0 1 1 0-384z" fill="#2b5ffa" p-id="2672"></path></svg>';
// '<svg t="1540524238971" class="icon" style="text-align:center" x="0px" y="0px" width="28px" height="28px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4126" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><defs><style type="text/css"></style></defs>' +
// '<path fill="' +
// color +
// '" d="M865.309 291.918c-19.289-45.606-46.897-86.557-82.06-121.719-35.161-35.162-76.114-62.771-121.718-82.06-47.23-19.976-97.385-30.105-149.072-30.105S410.618 68.163 363.388 88.139c-45.605 19.289-86.557 46.898-121.719 82.06-35.162 35.161-62.771 76.114-82.06 121.719-19.976 47.229-30.105 97.384-30.105 149.071 0 51.687 10.129 101.841 30.105 149.07 19.289 45.605 46.898 86.558 82.06 121.72 35.162 35.161 76.114 62.771 121.719 82.06 11.201 4.738 22.569 8.914 34.081 12.541l-58.051 143.991-17.783 0c-14.129 0-25.583 11.454-25.583 25.583s11.454 25.583 25.583 25.583l352.169 0c0.063 0 0.124 0.007 0.187 0.007 0.101 0 0.203-0.006 0.303-0.007l35.985 0c14.13 0 25.583-11.454 25.583-25.583s-11.453-25.583-25.583-25.583l-18.876 0-57.565-146.13c24.322-8.109 47.832-18.654 70.119-31.546 57.156-33.063 105.093-80.61 138.628-137.502 34.561-58.633 52.83-125.787 52.83-194.204C895.414 389.302 885.285 339.148 865.309 291.918zM513.814 146.1c26.472 0 48.01 21.537 48.01 48.01 0 26.472-21.537 48.01-48.01 48.01s-48.011-21.537-48.011-48.01C465.804 167.638 487.342 146.1 513.814 146.1zM512.54 688.835c-111.982 0-203.086-91.104-203.086-203.086 0-111.982 91.104-203.086 203.086-203.086 111.981 0 203.086 91.104 203.086 203.086C715.626 597.731 624.521 688.835 512.54 688.835z" p-id="4127"></path><path d="M512.54 333.829c-83.769 0-151.921 68.152-151.921 151.921 0 83.769 68.15 151.921 151.921 151.921 83.769 0 151.921-68.15 151.921-151.921C664.461 401.98 596.309 333.829 512.54 333.829z" p-id="4128"></path><path d="M513.814 197.265c1.739 0 3.154-1.415 3.154-3.155 0-1.74-1.415-3.155-3.154-3.155-1.74 0-3.155 1.415-3.155 3.155C510.659 195.85 512.074 197.265 513.814 197.265z" p-id="4129"></path><path d="M636.408 950.372 636.408 950.372 636.408 950.373Z" p-id="4130"></path></svg>';
// let cameraIcon = new Image(); // let cameraIcon = new Image();
// cameraIcon.src = "data:image/svg+xml," + escape(svg); // cameraIcon.src = "data:image/svg+xml," + escape(svg);
icon.setStyle( icon.setStyle(
...@@ -330,26 +327,26 @@ export default { ...@@ -330,26 +327,26 @@ export default {
image: new Icon({ image: new Icon({
// img: cameraIcon, // img: cameraIcon,
// crossOrigin: "anonymous", // crossOrigin: "anonymous",
// imgSize: [38, 38], // imgSize: [40, 40],
// marginTop: 100 marginTop: 10,
anchor: [0.5, 36], anchor: [0.5, 36],
anchorXUnits: "fraction", anchorXUnits: "fraction",
anchorYUnits: "pixels", anchorYUnits: "pixels",
src: require("./bioazhu.png") src: require("./dian.png")
}),
text: new Text({
text: data.vchan_name,
textBaseline: "top",
font: "normal 12px 微软雅黑",
lineHeight: "0px",
fill: new Fill({
color: "red"
})
}), }),
// text: new Text({
// text: data.vchan_name,
// textBaseline: "top",
// font: "normal 12px 微软雅黑",
// lineHeight: "0px",
// fill: new Fill({
// color: "red"
// })
// }),
stroke: new Stroke({ stroke: new Stroke({
color: "red", color: "red",
width: 21, width: 21,
marginTop: 100 marginTop: 10
}) })
}) })
); );
...@@ -363,8 +360,9 @@ export default { ...@@ -363,8 +360,9 @@ export default {
element: taskInfocontaniner, element: taskInfocontaniner,
autoPan: true, autoPan: true,
position: pos, position: pos,
offset: [-23, -20],
autoPanAnimation: { autoPanAnimation: {
duration: 50 duration: 150
} }
}); });
map.addOverlay(infooverlay); map.addOverlay(infooverlay);
...@@ -375,6 +373,7 @@ export default { ...@@ -375,6 +373,7 @@ export default {
overlay = new Overlay({ overlay = new Overlay({
element: videocontainer, element: videocontainer,
autoPan: true, autoPan: true,
offset: [-2, -40],
position: pos, position: pos,
autoPanAnimation: { autoPanAnimation: {
duration: 50 duration: 50
...@@ -456,6 +455,9 @@ export default { ...@@ -456,6 +455,9 @@ export default {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.maps{
background:url("./map.png")
}
.ol-control button{ .ol-control button{
display:none!important; display:none!important;
background:red!important background:red!important
...@@ -486,7 +488,6 @@ export default { ...@@ -486,7 +488,6 @@ export default {
left: -50px; left: -50px;
width: 20vw; width: 20vw;
height 25vh; height 25vh;
overflow hidden
} }
.ol-popup:after, .ol-popup:before { .ol-popup:after, .ol-popup:before {
top: 100%; top: 100%;
...@@ -528,8 +529,22 @@ export default { ...@@ -528,8 +529,22 @@ export default {
} }
} }
.info-popup { .info-popup {
width 10vw; width 125px;
height 100px; height 30px;
line-height 30px;
border-radius 5px
padding 0 0 0 10px;
color #fff;
background #333;
}
.info-popup:after {
disply block
content ""
position absolute
bottom -15px
left 75px
border: 6px solid transparent;
border-top-color: #333 ;
} }
.pop-info{ .pop-info{
float: left; float: left;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!