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 @@
<strong></strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
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
src/App.vue
......@@ -29,13 +29,15 @@ export default {
window.oneSearchTableHeight = document.body.clientHeight - 280 + "px";
window.twoSearchTableHeight = document.body.clientHeight - 315 + "px";
}
}
};
</script>
<style lang="scss">
#app {
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;
-moz-osx-font-smoothing: grayscale;
}
......
src/api/baseUrl.js
......@@ -3,15 +3,15 @@ import axios from "axios";
console.log(process.env.NODE_ENV);
switch (process.env.NODE_ENV) {
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://vion-panda.51vip.biz:52510';
// baseUrl = 'http://vion-panda.51vip.biz:52510';
break;
case "pre":
baseUrl = "https://pre-server.feleti.cn"; // 预上线环境url
break;
case "production":
baseUrl = "http://192.168.9.133:20080"; // 生产环境url
baseUrl = "http://192.168.9.233:20080"; // 生产环境url
break;
}
......
src/assets/css/public.css
......@@ -10,7 +10,7 @@ body{
background: #fff!important;
}
.el-main{
background: #f5f7f9;
background: #F7F6F9;
}
.home,.home-box{
height: 100%;
......@@ -253,11 +253,11 @@ body{
}
.card-hover:hover {
webkit-transform: translateY(-4px) scale(1);
webkit-transform: translateY(-4px) scale(2);
-moz-transform: translateY(-4px) scale(1.01);
-ms-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);
box-shadow: 0 14px 24px rgba(62,57,107,.1);
}
......@@ -285,6 +285,9 @@ body{
.pausebox{
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
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
src/main.js
......@@ -9,10 +9,11 @@ import resetCss from "./assets/resetElementCss/index.css";
import api from "./api/install";
import "./assets/css/public.css";
import echarts from "echarts";
// import "./assets/icon/icon1/iconfont.css";
import "./assets/icon/icon2/iconfont.css";
import "./assets/icon/icon3/iconfont.css";
import "../src/assets/js/vporto";
import { buildCode } from "../src/assets/js/buildcodes";
import particles from "particles.js";
Vue.use(particles);
import moment from "moment";
Vue.prototype.$echarts = echarts;
Vue.prototype.$moment = moment;
......
src/views/Layout/index.vue
......@@ -3,17 +3,26 @@
<el-container class="home-box">
<el-header class="headers">
<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">
<span>{{ curdate }}</span>
<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>
</el-header>
<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>
<div class="nav">
<div class="nav" id="topnav" v-show="isfull">
<div class="nav-tag-box">
<el-tag
v-for="(tag, index) in topbarArr"
......@@ -43,10 +52,10 @@ export default {
data() {
return {
curdate: "",
isopen:true,
isopen: true,
conHeight: 0,
menuwidth: "15vw",
full: false,
menuwidth: "300px",
isfull: true,
topbarArr: []
};
},
......@@ -78,10 +87,11 @@ export default {
getDate() {
let date = new Date();
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 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 w = date.getDay();
let wtext = "";
......@@ -139,19 +149,46 @@ export default {
console.log(this.permission_routers);
this.conHeight = window.innerHeight - 65;
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];
if (e && e.keyCode == 122) {
// 按 Esc
if (this.full) {
this.menuwidth = "254px";
this.full = false;
return;
if (that.isfull) {
that.isfull = false;
console.log(1)
} else {
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(() => {
this.getDate();
}, 1000);
......
src/views/Layout/menu.vue
......@@ -6,6 +6,7 @@
:collapse="isCollapse"
@select="handleSelect"
:unique-opened="true"
wdth="116vw"
>
<el-submenu index="1" class="menu-icon">
<template slot="title">
......@@ -86,9 +87,11 @@ export default {
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
box-shadow: 0px -3px 8px 0px rgba(40,49,101,0.13);
}
.box{
height 100%;
box-shadow:0px -3px 8px 0px rgba(40,49,101,0.13);
}
.menu-icon i{
font-size 14px;
......
src/views/Login.vue
<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 -->
<!-- <vue-particles
color="#dedede"
......@@ -54,6 +54,7 @@
</template>
<script>
let particlesConfig = require("../assets/js/particles.json");
let sha1 = require("js-sha1");
import types from "../store/types.js";
export default {
......@@ -268,7 +269,10 @@ export default {
}
},
watch: {},
mounted() {},
mounted() {
particlesJS('login',particlesConfig);
document.body.style.overflow = "hidden";
},
created() {
this.initHeight();
let _this = this;
......@@ -284,6 +288,15 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#login{
width: 100%;
height: 100%;
background-color: #e76392;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
#particles {
position: absolute;
width: 100%;
......
src/views/behaviorShow/devInfo.vue
<template>
<div class="devinfo-box">
<div class="item-box">
<div class="icon icon-fanxing-fenxiziyuan"></div>
<div class="item-info-box">
<div>分析资源</div>
<div><span>64</span> 路</div>
</div>
</div>
<div class="item-box">
<div class="icon icon-fanxing-yunhanglushu"></div>
<div class="item-info-box">
<div>运行路数</div>
<div> <span>47</span> 路</div>
</div>
</div>
<div class="item-box">
<div class="icon icon-fanxing-yunhangyichang"></div>
<div class="item-info-box">
<div>运行异常</div>
<div><span>6</span> 个</div>
</div>
</div>
<div class="item-box">
<div class="icon icon-fanxing-xinxicunchu"></div>
<div class="item-info-box">
<div>信息存储量</div>
<div><span>1.2</span> T</div>
......@@ -41,14 +37,7 @@ export default {
<style scoped="scoped" lang="stylus">
.devinfo-box {
width: 8vw;
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
margin-top 10vh
.item-box{
margin-top 2vh
overflow hidden
......@@ -57,29 +46,66 @@ export default {
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{
height 45px;
color #000
width 8vw
border-bottom 1px solid #E5E5E5
float left
display flex
margin-left 1vw
width 4vw
font-size 16px;
div:first-child{
flex 1
color:rgba(102,102,102,1)
}
div:last-child span{
div:last-child{
color:rgba(68,68,68,1);
font-size 20px
width 3vw
line-height 2.5vh
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>
\ No newline at end of file
src/views/sceneManage/index.vue
......@@ -26,14 +26,15 @@
stoptask: item.status != 'Running'
}"
>
<i
<!-- <i
:class="{
'el-icon-fanxin-yiyunhangrenwuliebiao':
item.status == 'Running',
' el-icon-fanxin-task-pause': item.status != 'Running',
icon: true
}"
></i>
></i> -->
<!-- <span class="el-icon-caret-bottom" style="display:inline-block"></span> -->
<span class="task-title">{{ item.task_name }}</span>
</span>
<ol v-if="index == subindex">
......@@ -100,7 +101,7 @@ export default {
return {
searchInfo: "",
taskdata: [],
subtaskdata: [],
subtaskdata: "",
subTasks: [],
subindex: -1,
playurl: "",
......@@ -127,7 +128,8 @@ export default {
this.$store.commit("setocxstate", 1);
this.currentSubtaskId = vdata.subtask_id;
this.subtaskdata = vdata;
this.$refs.setting.getTaskParams();
console.log('vdata',vdata)
this.$refs.setting.TaskParams(vdata.subtask_id);
if (vdata.running_status != "Running") {
this.$message({
message: "该任务没有运行，无法获取分析视频和抓拍信息",
......@@ -276,16 +278,19 @@ export default {
.task-lsit{
display inline-block
cursor pointer
font-size 14px
color rgba(102, 102, 102, 1)
margin-top 15px
.icon {
padding-left 10px
}
}
.runningtask{
// color rgba(1, 206, 184, 0.56);
color #999697;
color rgba(102, 102, 102, 1)
}
.stoptask{
color #999697
color rgba(102, 102, 102, 1)
.icon {
font-size 22px
margin-left -2px
......@@ -308,7 +313,7 @@ export default {
height 30px
padding-left 30px
line-height 30px
font-size 14px
font-size 13px
color #666666
// width calc(100% - 30px);
overflow hidden
......
src/views/sceneManage/setting/index.vue
......@@ -9,23 +9,37 @@
style="width: 80%;float:left"
height="25vh"
@current-change="handleCurrentChange"
v-loading="loading"
>
<el-table-column label="序号" type="index" width="50" align="center">
</el-table-column>
<el-table-column align="center" label="预置位编号" width="180">
<el-table-column align="center" label="预置位编号" width="120">
<template slot-scope="scope">
<div>
{{ setpositionnum(scope.row.position_num) }}
</div>
</template>
</el-table-column>
<el-table-column align="center" label="预设位置配置" width="180">
<el-table-column align="center" label="预设位置配置" width="120">
<template>
<div class="yzw-setbox">
<span class="icon el-icon-delete" @click="resetRoi"></span>
</div>
</template>
</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="参数设置">
<template slot-scope="scope">
<div class="table-set">
......@@ -34,7 +48,7 @@
<span @click="setDemarcate(scope.row, scope.$index)"
>标定设置</span
>
<span @click="setTimer(scope.row, scope.$index)">时间设置</span>
<!-- <span @click="setTimer(scope.row, scope.$index)">时间设置</span> -->
</div>
</template>
</el-table-column>
......@@ -79,61 +93,7 @@
<div>
<demarcate ref="demarcate"></demarcate>
</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>
</div>
</template>
<script>
......@@ -142,15 +102,16 @@ import demarcate from "./demarcate";
import parameter from "./parameter";
import ytconfig from "./ytconfig";
import handleparam from "./handleparam";
import setTimer from "./setTimer";
export default {
data() {
return {
timer: 0,
loading:false,
polling_state: false,
timersel: 0,
timerDialog: false,
curindex: 0,
timeroptions: [5, 10, 15, 20, 30, 40, 50, 60],
timerscenes: null,
currentRow: null,
taskInfo: {
......@@ -169,7 +130,8 @@ export default {
demarcate,
parameter,
ytconfig,
handleparam
handleparam,
setTimer
},
methods: {
setParam(scenesdata, index) {
......@@ -198,9 +160,13 @@ export default {
this.$refs.yt.openyt(this.currentRow);
}
},
getTaskParams() {
this.$api.task.getTaskParams(this.taskid, this.subtaskid).then(data => {
this.taskInfo = data;
TaskParams(subid) {
this.loading = true;
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) {
......@@ -211,13 +177,29 @@ export default {
this.timer = data.runtime;
},
resetRoi() {
this.$store.commit("setocxstate", 0);
this.$confirm("删除预置位信息, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.taskInfo.mtasks[0].scenes.map(ele => {
if (ele.scene_unid == this.currentRow.scene_unid) {
ele.config = {};
ele.rois = [];
ele.runtime = 0;
}
});
this.subRoi(this.taskInfo.mtasks);
})
.catch(() => {
this.$store.commit("setocxstate", 1);
this.$message({
type: "info",
message: "已取消删除"
});
});
},
setpositionnum(index) {
return index == -1 ? "未设置" : index;
......@@ -273,11 +255,10 @@ export default {
});
this.subRoi(this.taskInfo.mtasks);
},
submitTimer(item) {
submitTimer(item, stimer) {
this.taskInfo.mtasks[0].scenes.map(ele => {
if (ele.scene_unid == this.currentRow.scene_unid) {
ele.runtime = this.timer;
ele.pollingState = this.polling_state;
if (ele.scene_unid == item.scene_unid) {
ele.runtime = stimer;
}
});
this.subRoi(this.taskInfo.mtasks);
......@@ -295,6 +276,7 @@ export default {
type: "success"
});
this.$store.commit("setocxstate", 1);
this.TaskParams(this.subtaskid);
}
});
},
......@@ -370,13 +352,15 @@ export default {
}
},
watch: {
subtaskid(val) {
this.$api.task.getTaskParams(this.taskid, val).then(res => {
this.taskInfo = res;
this.switchstate = res.alternate_status == 1 ? true : false;
console.log(res.data);
});
}
// subtaskid(val) {
// this.loading = true;
// this.$api.task.getTaskParams(this.taskid, val).then(res => {
// this.taskInfo = res;
// this.switchstate = res.alternate_status == 1 ? true : false;
// this.loading = false;
// this.$forceUpdate();
// });
// }
}
};
</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 @@
</el-form-item>
<el-form-item label="时间计划">
<el-select v-model="formData.period">
<el-option :value="1" label="全天"></el-option>
<el-option :value="0" label="时间"></el-option>
<el-option :value="true" label="全天"></el-option>
<el-option :value="false" label="时间"></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间" v-show="formData.plate_time != 'day'">
......@@ -68,10 +68,15 @@
</el-select>
</el-form-item>
<el-form-item label="设备类型">
<el-input
v-model="formData.plate_type"
placeholder="请选择"
></el-input>
<el-select v-model="formData.plate_type">
<el-option
v-for="(item, index) in freeList"
:key="index"
:value="item.device_id"
>
{{ item.device_id }}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="优先级">
<el-select
......@@ -117,6 +122,10 @@ export default {
pedittype: {
type: String,
default: "add"
},
freeList: {
type: Array,
default: []
}
},
watch: {},
......@@ -137,7 +146,7 @@ export default {
},
priority: "",
plate_type: "",
plate_time: "",
plate_time: ""
};
}
if (type == "edit") {
......@@ -184,8 +193,8 @@ export default {
source_type: "pull_video_stream",
dev_unid: this.dev_unid,
node_count: 0,
start_dt: this.formData.period === 1 ? "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]),
start_dt: this.formData.period ? "2020-03-27 00:00:00" : this.setUtcTime(this.formData.timer[0]),
end_dt: this.formData.period ? "3020-03-27 00:00:00" : this.setUtcTime(this.formData.timer[1]),
priority: this.formData.priority,
store_conf_unid: this.formData.store_conf.unid,
period: this.formData.period,
......
src/views/taskManage/index.vue
......@@ -226,6 +226,7 @@
<editset
ref="editset"
:pedittype="pedittype"
:freeList="freeList"
@refresh="getTaskList"
></editset>
<editvideo
......
src/views/taskManage/subtask.vue
......@@ -17,7 +17,7 @@
:key="index"
:value="item.device_id"
>
{{ item.in_ip }}
{{ item.device_id }}
</el-option>
</el-select>
</span>
......
src/views/trafficShow/eventTypedis.vue
<template>
<div>
<div class="chart-header-box">
<div class="header-title ">事件类型分布</div>
<div class="header-title">事件类型分布</div>
</div>
<div id="eventchart" class="eventchart"></div>
</div>
......@@ -16,25 +16,27 @@ export default {
},
methods: {
initchart(data) {
let xData = [], chartData = [];
let xData = [],
chartData = [];
if (data && data.length > 0) {
data.map(ele => {
data.map((ele, index) => {
if (index < 6) {
let obj = {
name:ele.event_name,
value:ele.total_num
name: ele.event_name,
value: ele.total_num
};
xData.push(ele.event_name);
chartData.push(obj);
}
xData.push(ele.event_name)
chartData.push(obj)
})
});
}
var color = [
"#0069FF",
"#3BB7FF",
"#FF9630",
"#FFC62E",
"#87D14B",
"#7460EE",
"#f59a8f",
"#FFC62E",
"#FF9630"
];
var xdata = xData;
let maychart = this.$echarts.init(document.getElementById("eventchart"));
......@@ -49,7 +51,11 @@ export default {
data: xdata,
itemWidth: 6,
itemHeight: 8,
itemGap: 10,
itemGap: 15,
icon: "circle",
textStyle:{
color :"#000"
},
/*formatter:function(name){
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 ;
......@@ -69,7 +75,7 @@ export default {
type: "pie",
clockwise: false, //饼图的扇区是否是顺时针排布
minAngle: 2, //最小的扇区角度（0 ~ 360）
radius: ["50%", "70%"],
radius: ["52%", "70%"],
center: ["30%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
......@@ -113,14 +119,14 @@ export default {
};
maychart.setOption(option);
},
getTrafficType(){
getTrafficType() {
this.$api.show.getTrafficType().then(res => {
this.initchart(res.list_data);
})
});
}
},
mounted() {
this.getTrafficType()
this.getTrafficType();
}
};
</script>
......@@ -128,12 +134,14 @@ export default {
<style lang="stylus" scoped>
.chart-header-box {
height: 3vh;
padding 5px;
overflow: hidden;
font-size: 14px;
}
.header-title{
line-height 3vh;
padding-left 5px
padding-left 5px;
color:#000;
}
.eventchart {
height: 22vh;
......
src/views/trafficShow/illegaltrend.vue
......@@ -2,6 +2,7 @@
<div>
<div class="chart-header-box">
<el-col :span="5" class="header-title">违法事件趋势</el-col>
<div class="sel-box">
<span class="header-label">违法</span>
<div class="header-select">
<el-select v-model="illtype" @change="getTrafficHour">
......@@ -34,6 +35,7 @@
</el-select>
</div>
</div>
</div>
<div id="illtrendchart" class="illtrendchart"></div>
</div>
</template>
......@@ -82,6 +84,7 @@ export default {
let maychart = this.$echarts.init(
document.getElementById("illtrendchart")
);
var color = ["rgba(59, 184, 255", "rgba(116, 96, 238"];
let option = {
tooltip: {
trigger: "axis",
......@@ -90,18 +93,19 @@ export default {
}
},
legend: {
data: ["违法", "事件", "重点车辆"],
align: "right",
bottom: 0,
right: "10%",
y: "0px",
itemWidth: 5,
itemHeight: 5,
textStyle: {
color: "#666"
color: "#8C8C8C",
fontSize: 12
},
itemGap: 30,
itemWidth: 30,
itemHeight: 10
icon: "circle",
data: ["违法", "事件", "重点车辆"]
},
grid: {
top: "10%",
top: "9%",
left: "3%",
right: "10%",
bottom: "10%",
......@@ -173,8 +177,6 @@ export default {
for (let i = 0; i < xData.length; i++) {
if (ele.hour == xData[i]) {
d.push(ele.total_num);
} else {
d.push(0);
}
}
});
......@@ -182,18 +184,43 @@ export default {
})(),
itemStyle: {
normal: {
color: "#0069FF"
color: "#3BB8FF"
}
},
lineStyle: {
normal: {
width: 1,
shadowColor: "rgba(0,0,0,0.4)",
shadowColor: "#3BB8FF",
shadowBlur: 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: "事件",
type: "line",
......@@ -268,6 +295,7 @@ export default {
key_vehicle_type: this.special_type
};
this.$api.show.getTrafficHour(data).then(res => {
console.log('违法事件趋势',res);
this.initchart(res);
});
},
......@@ -289,29 +317,35 @@ export default {
<style lang="stylus" scoped>
.chart-header-box {
height: 3vh;
overflow: hidden;
font-size: 14px;
.sel-box{
float right;
margin-right 20px
}
}
.header-title {
padding 5px 10px
line-height: 3vh;
color #000;
}
.illtrendchart {
height: 26vh;
width: 30vw;
height: 30vh;
width: 35vw;
}
.header-label {
font-size: 12px;
line-height: 3vh;
float: left;
margin:6px 0 0px 15px;
}
.header-select {
width: 4.5vw;
margin: 0.2vh 0.5vw 0 0.2vw;
margin: 8px 0.5vw 0 0.2vw;
float: left;
}
</style>
src/views/trafficShow/index.vue
<template>
<el-row
:gutter="10"
:gutter="12"
style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden"
>
<el-col :span="15">
<div class="mapbox">
<div id="map" class="maps">
<div class="search-vchan">
<el-input
placeholder="请输入内容"
suffix-icon="el-icon-search"
v-model="vchanname"
class="input-with-select"
>
<el-button
slot="append"
type="primary"
icon="el-icon-search"
@click="searchvchan"
></el-button>
</el-input>
</div>
<showmap ref="map"></showmap>
<div class="eventlist-box card-hover">
<!-- <eventList></eventList> -->
<div class="devinfobox">
<devInfo></devInfo>
</div>
<showmap ref="map"></showmap>
<div class="video-box" v-show="ocxstatus">
<div class="video-box-close" @click="closeocx"></div>
<!-- <mPlayvideo :playersrc="playurl"></mPlayvideo> -->
<!-- <videoPlay ref="mapvideo1" :playurl="playurl"></videoPlay> -->
<videoPlay2 ref="mapvideo2" :playurl="playurl2"></videoPlay2>
<!-- <videoPlay ref="mapvideo" :playurl="playurl"></videoPlay> -->
<!-- <videoPlay2 ref="mapvideo2" :playurl="playurl2"></videoPlay2> -->
</div>
</div>
</div>
<div style="clear: both;"></div>
......@@ -39,36 +31,54 @@
<div class="header-title">重点车辆分布</div>
<div class="collect-content">
<el-col :span="6" class="content-item">
<div class="item-num">{{ snapData.kakou_total_snap_num }}</div>
<div>卡口总量</div>
<div class="zd-icon" style="color:#FF9630">
<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 :span="6" class="content-item">
<div class="item-num">{{ snapData.event_total_snap_num }}</div>
<div>事件总量</div>
<div class="zd-icon" style="color:#3BB7FF">
<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 :span="6" class="content-item">
<div class="item-num">{{ snapData.illega_total_snap_num }}</div>
<div>违法总量</div>
<div class="zd-icon" style="color:#0069FF">
<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 :span="6" class="content-item">
<div class="item-num">
{{ snapData.key_vehicle_total_snap_num }}
<div class="zd-icon" style="color:#7460EE">
<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>
</el-col>
</div>
</div>
</el-row>
</el-col>
<el-col :span="9">
<el-row style="margin-top:1vh;background:#fff">
<el-row style="background:#fff">
<div class="card-hover">
<illegaltrend></illegaltrend>
</div>
</el-row>
<el-row :gutter="12" class="event-type-box" style="margin-top:1.5vh">
<el-col :span="16">
<div class="right-item-box card-hover">
<el-col :span="16" class="card-hover">
<div class="right-item-box">
<eventTypedis></eventTypedis>
</div>
</el-col>
......@@ -77,7 +87,7 @@
<div class="title">重点车辆分布</div>
<div class="car-dis-info">
<div class="left-icon">
<span class="icon-fanxing-zhatuchezhuapai"></span>
<span class="icon-fanxing-zhatuchezhuapai1"></span>
</div>
<div class="right-content">
<div><span class="car-num">10</span>辆</div>
......@@ -86,7 +96,10 @@
</div>
<div class="car-dis-info">
<div class="left-icon">
<span class="icon-fanxing-weixianpin"></span>
<span
class="icon-fanxing-weixianpin1"
style="color:#FF9630"
></span>
</div>
<div class="right-content">
<div><span class="car-num">10</span>辆</div>
......@@ -95,7 +108,10 @@
</div>
<div class="car-dis-info">
<div class="left-icon">
<span class="icon-fanxing-zhongxingguanshi"></span>
<span
class="icon-fanxing-zhatuchezhuapai1"
style="color:#36BEA6"
></span>
</div>
<div class="right-content">
<div class><span class="car-num">29</span>辆</div>
......@@ -108,7 +124,7 @@
<div style="clear: both;"></div>
</el-col>
<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="title">实时数据</div>
<alarmEvent @event="alarmevent"></alarmEvent>
......@@ -121,7 +137,7 @@
<script>
// import mPlayvideo from "../public/mapvideo"
// import videoPlay from "../public/mapvideo";
import videoPlay2 from "../public/mapvideo2";
// import videoPlay2 from "../public/mapvideo2";
import showmap from "./map";
import illegaltrend from "./illegaltrend";
import eventTypedis from "./eventTypedis";
......@@ -138,7 +154,7 @@ export default {
keyVehicleData: [],
illageList: [],
setShow: false,
ocxstatus: true,
ocxstatus: false,
archiveUnid: 0,
snap_num: 0,
playurl: {},
......@@ -157,7 +173,7 @@ export default {
showmap,
// mPlayvideo,
// videoPlay,
videoPlay2,
// videoPlay2,
illegaltrend,
eventTypedis,
alarmEvent,
......@@ -180,7 +196,7 @@ export default {
methods: {
alarmevent(data) {
//移动地图
this.$refs.map.movemap(data);
this.$refs.map.movemap(data,null,2);
},
searchvchan() {
this.$refs.map.searchvchan(this.vchanname);
......@@ -208,11 +224,11 @@ export default {
<style scoped="scoped" lang="stylus">
.collect-box {
height: 11.8vh;
height: 11.2vh;
background: #fff;
margin-top .5vh
margin-top 1.5vh
.header-title {
padding: 10px 0px 0 20px;
padding: 10px 0px 0 10px;
width:113px;
height:20px;
font-size:14px;
......@@ -222,20 +238,34 @@ export default {
.collect-content {
margin-top: 1.6vh;
overflow hidden
.content-item {
display flex
text-align: center;
border-right: 1px solid #E5E5E5;
align-items center
justify-items center
overflow hidden
}
.content-item:last-child {
border-right: 0;
}
}
.item-num {
font-size: 16px;
color: #444444;
.zd-icon {
margin 0 10px 0 20px
span {
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 {
.lnum {
width: 37px;
}
.mapbox{
background #fff;
overflow hidden
}
.maps {
height: 45vh;
float left;
height: 49vh;
width: 100%;
margin-bottom: 8px;
position: relative;
background url('./map.png') -12px -3px;
background-size 100% 110%
}
.el-table__body tr {
......@@ -361,19 +397,18 @@ export default {
.event-type-box {
width: 100%;
height: 26.5vh;
overflow: hidden;
height: 27vh;
}
.right-item-box {
height: 27vh;
background: #fff;
overflow: hidden;
}
.right-item-box .title {
padding-left: 5px;
padding: 5px 10px;
line-height: 3vh;
color:rgba(0,0,0,1);
}
.car-dis-info {
......@@ -389,10 +424,10 @@ export default {
overflow hidden
span {
font-size: 30px;
color rgba(179,229,252,1);
background #3BB7FF;
color:#0069FF
}
}
}
......@@ -405,7 +440,7 @@ export default {
.eventlist-box {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
z-index: 1000;
}
......@@ -440,11 +475,18 @@ export default {
height:200px;
}
.search-vchan{
width 270px;
width 170px;
position: absolute;
top: 12px;
z-index 900;
right 10px;
border-radius 3px;
left 20px;
border-radius 5px;
}
.devinfobox {
position absolute
top 40px
left 10
z-index 100
}
</style>
src/views/trafficShow/map.vue
......@@ -22,18 +22,9 @@
</div>
</div>
<div id="taskinfopopup" class="ol-popup info-popup">
<a
href="#"
id="task-popup-closer"
class="ol-popup-closer"
@click="closetaskpopup"
></a>
<div>
<span>{{ infoData.vchan_name }}</span>
<span></span>
<span></span>
<span></span>
<span></span>
<!-- <span>{{ infoData.vchan_name }}</span> -->
<span>鼠标点击显示视频</span>
</div>
</div>
</div>
......@@ -242,17 +233,20 @@ export default {
let data = feature.getProperties().cameraInfo;
that.playvideo(data);
console.log("视频播放地址", data);
});
});
//鼠标移入标注点
map.on("pointermove", e => {
if (map.hasFeatureAtPixel(e.pixel)) {
var pixel = map.getEventPixel(e.originalEvent);
map.forEachFeatureAtPixel(pixel, function(feature) {
let data = feature.getProperties().cameraInfo;
that.infoData = data;
that.showTaskInfo(data);
});
} else {
this.closetaskpopup();
}
});
},
movemap(data, point, type) {
......@@ -264,6 +258,7 @@ export default {
});
if (type && type == 2) {
this.addLayer(data, pos);
console.log('alarmdata',data);
}
},
closepopup() {
......@@ -281,9 +276,15 @@ export default {
return false;
},
closetaskpopup() {
try {
infooverlay.setPosition(undefined);
if (taskcloser) {
taskcloser.blur();
}
return false;
} catch (error) {
console.log(error);
}
},
addLayer(pdata, pos) {
document.getElementById("popup").style.display = "block";
......@@ -317,11 +318,7 @@ export default {
});
let color = "#156BB1"; //设置气泡颜色
//添加svg图标需注意 width,height要和 new Icon 的imgSize保持一致
// let 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 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>';
// let cameraIcon = new Image();
// cameraIcon.src = "data:image/svg+xml," + escape(svg);
icon.setStyle(
......@@ -330,26 +327,26 @@ export default {
image: new Icon({
// img: cameraIcon,
// crossOrigin: "anonymous",
// imgSize: [38, 38],
// marginTop: 100
// imgSize: [40, 40],
marginTop: 10,
anchor: [0.5, 36],
anchorXUnits: "fraction",
anchorYUnits: "pixels",
src: require("./bioazhu.png")
}),
text: new Text({
text: data.vchan_name,
textBaseline: "top",
font: "normal 12px 微软雅黑",
lineHeight: "0px",
fill: new Fill({
color: "red"
})
src: require("./dian.png")
}),
// text: new Text({
// text: data.vchan_name,
// textBaseline: "top",
// font: "normal 12px 微软雅黑",
// lineHeight: "0px",
// fill: new Fill({
// color: "red"
// })
// }),
stroke: new Stroke({
color: "red",
width: 21,
marginTop: 100
marginTop: 10
})
})
);
......@@ -363,8 +360,9 @@ export default {
element: taskInfocontaniner,
autoPan: true,
position: pos,
offset: [-23, -20],
autoPanAnimation: {
duration: 50
duration: 150
}
});
map.addOverlay(infooverlay);
......@@ -375,6 +373,7 @@ export default {
overlay = new Overlay({
element: videocontainer,
autoPan: true,
offset: [-2, -40],
position: pos,
autoPanAnimation: {
duration: 50
......@@ -456,6 +455,9 @@ export default {
</script>
<style lang="stylus" scoped>
.maps{
background:url("./map.png")
}
.ol-control button{
display:none!important;
background:red!important
......@@ -486,7 +488,6 @@ export default {
left: -50px;
width: 20vw;
height 25vh;
overflow hidden
}
.ol-popup:after, .ol-popup:before {
top: 100%;
......@@ -528,8 +529,22 @@ export default {
}
}
.info-popup {
width 10vw;
height 100px;
width 125px;
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{
float: left;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!