jianguan
/
supervise-monitor-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页修改代码加地图，质物监测页面修改，菜单修改

master
zyc@123456 2 years ago
parent
b5d71d8705
commit
67d1bdc630
7 changed files with 415 additions and 272 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/全国/geojson.json
  2. 50
      src/layout/components/Sidebar/index.vue
  3. 29
      src/views/daping/daping.vue
  4. 53
      src/views/dashboard/components/HomeMap.vue
  5. 2
      src/views/echarts/components/PieChartrenyuan.vue
  6. 428
      src/views/index.vue
  7. 124
      src/views/renlianshibie/renlianshibieList.vue

1
src/assets/全国/geojson.json
View File

File diff suppressed because one or more lines are too long

50
src/layout/components/Sidebar/index.vue
View File

@ -177,26 +177,16 @@
// path: "/shebeitaizhang/shebeitaizhangList", // path: "/shebeitaizhang/shebeitaizhangList",
// }] // }]
}, },
{ // {
alwaysShow: true, // alwaysShow: true,
component: "cangkuguanli", // component: "cangkuguanli",
meta: { // meta: {
icon: "el-icon-menu", // icon: "el-icon-menu",
title: "仓库管理", // title: "仓库管理",
}, // },
name: "", // name: "",
path: "/cangkuguanli/cangkuguanliList", // path: "/cangkuguanli/cangkuguanliList",
// children: [{ // },
// alwaysShow: true,
// component: "index",
// meta: {
// icon: "el-icon-help",
// title: "仓库管理",
// },
// name: "/cangkuguanli/cangkuguanliList",
// path: "/cangkuguanli/cangkuguanliList",
// }]
},
{ {
alwaysShow: true, alwaysShow: true,
component: "baojingchaxun", component: "baojingchaxun",
@ -267,16 +257,16 @@
// name: "", // name: "",
// path: "/xiaoxi/xiaoxiList", // path: "/xiaoxi/xiaoxiList",
// }, // },
{ // {
alwaysShow: true, // alwaysShow: true,
component: "daping", // component: "daping",
meta: { // meta: {
icon: "icon-jiance", // icon: "icon-jiance",
title: "布防大屏", // title: "布防大屏",
}, // },
name: "", // name: "",
path: "/daping", // path: "/daping",
} // }
], ],
params: { params: {
sourceSid: '5b8b2224-7272-4c56-a8d6-1dc426e2f3df', sourceSid: '5b8b2224-7272-4c56-a8d6-1dc426e2f3df',

29
src/views/daping/daping.vue
View File

@ -1307,6 +1307,34 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/*chrome滚动条颜色设置*/
*::-webkit-scrollbar {
width: 7px;
height: 10px;
background-color: transparent;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
*::-webkit-scrollbar-track {
background-color: transparent;
}
/*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
background-color: #021b50;
border-radius: 6px;
}
/*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar {
display: none
}
.scrollbarShow::-webkit-scrollbar {
display: block
}
.backToHome { .backToHome {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -1317,6 +1345,7 @@
.backToHome:hover {color: #087dba; .backToHome:hover {color: #087dba;
// background: #087dba; // background: #087dba;
} }
.dapingmu { .dapingmu {
overflow: hidden; overflow: hidden;
background-color: #0a173c; background-color: #0a173c;

53
src/views/dashboard/components/HomeMap.vue
View File

@ -15,7 +15,8 @@
import * as echarts from 'echarts' import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize' import resize from './mixins/resize'
import xt_data from '@/assets/河北省/邢台市/geojson.json' // import xt_data from '@/assets/河北省/邢台市/geojson.json'
import xt_data from '@/assets/全国/geojson.json'
export default { export default {
mixins: [resize], mixins: [resize],
data() { data() {
@ -100,38 +101,42 @@ export default {
var option = {} var option = {}
console.log(JSON.stringify(this.countyData)) console.log(JSON.stringify(this.countyData))
this.countyData = [ this.countyData = [
{ 'name': '襄都区', 'value': '48', 'county': { 'title': '襄都区', 'jwd': '114.492019,37.061614', 'personCount': '22831', 'departmentCount': '48', 'areaCode': '130502' }}, { 'name': '北京', 'value': '48', 'county': { 'title': '北京', 'jwd': '114.52153 , 38.04831', 'personCount': '22831', 'departmentCount': '48', 'ad': '110000' }},
{ 'name': '信都区', 'value': '131', 'county': { 'title': '信都区', 'jwd': '114.468435,37.059882', 'personCount': '12487', 'departmentCount': '131', 'areaCode': '130503' }},
{ 'name': '任泽区', 'value': '67', 'county': { 'title': '任泽区', 'jwd': '114.671936,37.120983', 'personCount': '10179', 'departmentCount': '67', 'areaCode': '130505' }},
{ 'name': '南和区', 'value': '16', 'county': { 'title': '南和区', 'jwd': '114.683762,37.005041', 'personCount': '3909', 'departmentCount': '16', 'areaCode': '130506' }}, { 'name': '邢东新区', 'value': '4', 'county': { 'title': '邢东新区', 'jwd': '114.597268,37.096124', 'personCount': '806', 'departmentCount': '4', 'areaCode': '130591' }}]
{ 'name': '临城县', 'value': '30', 'county': { 'title': '临城县', 'jwd': '114.506873,37.444009', 'personCount': '4023', 'departmentCount': '18', 'areaCode': '130522' }}, // { 'name': '襄都区', 'value': '48', 'county': { 'title': '襄都区', 'jwd': '114.492019,37.061614', 'personCount': '22831', 'departmentCount': '48', 'areaCode': '130502' }},
{ 'name': '内丘县', 'value': '29', 'county': { 'title': '内丘县', 'jwd': '114.511523,37.287663', 'personCount': '6724', 'departmentCount': '19', 'areaCode': '130523' }}, // { 'name': '信都区', 'value': '131', 'county': { 'title': '信都区', 'jwd': '114.468435,37.059882', 'personCount': '12487', 'departmentCount': '131', 'areaCode': '130503' }},
{ 'name': '柏乡县', 'value': '70', 'county': { 'title': '柏乡县', 'jwd': '114.693382,37.483596', 'personCount': '1625', 'departmentCount': '7', 'areaCode': '130524' }}, // { 'name': '任泽区', 'value': '67', 'county': { 'title': '任泽区', 'jwd': '114.671936,37.120983', 'personCount': '10179', 'departmentCount': '67', 'areaCode': '130505' }},
{ 'name': '隆尧县', 'value': '10', 'county': { 'title': '隆尧县', 'jwd': '114.776348,37.350925', 'personCount': '44038', 'departmentCount': '10', 'areaCode': '130525' }}, // { 'name': '南和区', 'value': '16', 'county': { 'title': '南和区', 'jwd': '114.683762,37.005041', 'personCount': '3909', 'departmentCount': '16', 'areaCode': '130506' }},
{ 'name': '宁晋县', 'value': '71', 'county': { 'title': '宁晋县', 'jwd': '114.921027,37.618956', 'personCount': '13381', 'departmentCount': '71', 'areaCode': '130528' }}, // { 'name': '临城县', 'value': '30', 'county': { 'title': '临城县', 'jwd': '114.506873,37.444009', 'personCount': '4023', 'departmentCount': '18', 'areaCode': '130522' }},
{ 'name': '巨鹿县', 'value': '55', 'county': { 'title': '巨鹿县', 'jwd': '115.038782,37.21768', 'personCount': '8627', 'departmentCount': '55', 'areaCode': '130529' }}, // { 'name': '内丘县', 'value': '29', 'county': { 'title': '内丘县', 'jwd': '114.511523,37.287663', 'personCount': '6724', 'departmentCount': '19', 'areaCode': '130523' }},
{ 'name': '新河县', 'value': '8', 'county': { 'title': '新河县', 'jwd': '115.247537,37.526216', 'personCount': '212', 'departmentCount': '8', 'areaCode': '130530' }}, // { 'name': '柏乡县', 'value': '70', 'county': { 'title': '柏乡县', 'jwd': '114.693382,37.483596', 'personCount': '1625', 'departmentCount': '7', 'areaCode': '130524' }},
{ 'name': '广宗县', 'value': '27', 'county': { 'title': '广宗县', 'jwd': '115.142797,37.075548', 'personCount': '4903', 'departmentCount': '27', 'areaCode': '130531' }}, // { 'name': '隆尧县', 'value': '10', 'county': { 'title': '隆尧县', 'jwd': '114.776348,37.350925', 'personCount': '44038', 'departmentCount': '10', 'areaCode': '130525' }},
{ 'name': '平乡县', 'value': '39', 'county': { 'title': '平乡县', 'jwd': '115.029218,37.069404', 'personCount': '1884', 'departmentCount': '39', 'areaCode': '130532' }}, // { 'name': '宁晋县', 'value': '71', 'county': { 'title': '宁晋县', 'jwd': '114.921027,37.618956', 'personCount': '13381', 'departmentCount': '71', 'areaCode': '130528' }},
{ 'name': '威县', 'value': '14', 'county': { 'title': '威县', 'jwd': '115.272749,36.983272', 'personCount': '4831', 'departmentCount': '14', 'areaCode': '130533' }}, // { 'name': '巨鹿县', 'value': '55', 'county': { 'title': '巨鹿县', 'jwd': '115.038782,37.21768', 'personCount': '8627', 'departmentCount': '55', 'areaCode': '130529' }},
{ 'name': '清河县', 'value': '25', 'county': { 'title': '清河县', 'jwd': '115.668999,37.059991', 'personCount': '6240', 'departmentCount': '25', 'areaCode': '130534' }}, // { 'name': '新河县', 'value': '8', 'county': { 'title': '新河县', 'jwd': '115.247537,37.526216', 'personCount': '212', 'departmentCount': '8', 'areaCode': '130530' }},
{ 'name': '临西县', 'value': '7', 'county': { 'title': '临西县', 'jwd': '115.498684,36.8642', 'personCount': '1903', 'departmentCount': '7', 'areaCode': '130535' }}, // { 'name': '广宗县', 'value': '27', 'county': { 'title': '广宗县', 'jwd': '115.142797,37.075548', 'personCount': '4903', 'departmentCount': '27', 'areaCode': '130531' }},
{ 'name': '经济开发区', 'value': '22', 'county': { 'title': '经济开发区', 'jwd': '114.565733,37.061690', 'personCount': '24184', 'departmentCount': '22', 'areaCode': '130571' }}, // { 'name': '平乡县', 'value': '39', 'county': { 'title': '平乡县', 'jwd': '115.029218,37.069404', 'personCount': '1884', 'departmentCount': '39', 'areaCode': '130532' }},
{ 'name': '南宫市', 'value': '24', 'county': { 'title': '南宫市', 'jwd': '115.398102,37.359668', 'personCount': '8200', 'departmentCount': '24', 'areaCode': '130581' }}, // { 'name': '威县', 'value': '14', 'county': { 'title': '威县', 'jwd': '115.272749,36.983272', 'personCount': '4831', 'departmentCount': '14', 'areaCode': '130533' }},
{ 'name': '沙河市', 'value': '23', 'county': { 'title': '沙河市', 'jwd': '114.504902,36.861903', 'personCount': '4745', 'departmentCount': '23', 'areaCode': '130582' }}, // { 'name': '清河县', 'value': '25', 'county': { 'title': '清河县', 'jwd': '115.668999,37.059991', 'personCount': '6240', 'departmentCount': '25', 'areaCode': '130534' }},
{ 'name': '邢东新区', 'value': '4', 'county': { 'title': '邢东新区', 'jwd': '114.597268,37.096124', 'personCount': '806', 'departmentCount': '4', 'areaCode': '130591' }}] // { 'name': '临西县', 'value': '7', 'county': { 'title': '临西县', 'jwd': '115.498684,36.8642', 'personCount': '1903', 'departmentCount': '7', 'areaCode': '130535' }},
// { 'name': '经济开发区', 'value': '22', 'county': { 'title': '经济开发区', 'jwd': '114.565733,37.061690', 'personCount': '24184', 'departmentCount': '22', 'areaCode': '130571' }},
// { 'name': '南宫市', 'value': '24', 'county': { 'title': '南宫市', 'jwd': '115.398102,37.359668', 'personCount': '8200', 'departmentCount': '24', 'areaCode': '130581' }},
// { 'name': '沙河市', 'value': '23', 'county': { 'title': '沙河市', 'jwd': '114.504902,36.861903', 'personCount': '4745', 'departmentCount': '23', 'areaCode': '130582' }},
// { 'name': '邢东新区', 'value': '4', 'county': { 'title': '邢东新区', 'jwd': '114.597268,37.096124', 'personCount': '806', 'departmentCount': '4', 'areaCode': '130591' }}]
echarts.registerMap('xingtai', xt_data, {}) echarts.registerMap('xingtai', xt_data, {})
option = { option = {
title: { title: {
text: '邢台市', text: '全国仓库分布图',
// subtext: 'Data from www.census.gov', // subtext: 'Data from www.census.gov',
left: 'center', left: 'center',
textStyle: { textStyle: {
fontSize: 24, fontSize: 24,
color: '#fff' color: '#026193'
// fontWeight: 'bolder' // 字体加粗 // fontWeight: 'bolder' // 字体加粗
}, },
show: false show: true
}, },
tooltip: { tooltip: {
alwaysShowContent: true, alwaysShowContent: true,

2
src/views/echarts/components/PieChartrenyuan.vue
View File

@ -135,7 +135,7 @@ export default {
color: color, color: color,
// color:[ 'green','blue'], // color:[ 'green','blue'],
// roseType: 'radius', // roseType: 'radius',
radius: [55, 60], radius: [35, 40],
center: ['50%', '50%'], center: ['50%', '50%'],
data: Data.seriesData, data: Data.seriesData,
// roseType: 'area', // roseType: 'area',

428
src/views/index.vue
View File

@ -1,176 +1,166 @@
<template> <template>
<div class="webindex"> <div class="webindex">
<div class="tops"> <div class="zongcons">
<!-- 第1个 --> <div class="maps">
<div class="topbox"> <div class="wenboxs">
<div class="toptitle">入侵报警</div> <div class="wenbox">
<div class="mids"> <div class="tubiao"><span class="myiconfont icon-shishijiance1 tolzi"></span></div>
<div class="lefts"> <div class="tos">
<div class="icon myiconfont iconbox iconbox_yellow">&#xe608;</div> <div class="tit nums">河北仓库<span class="num">39</span>家</div>
</div> <div class="tit nums">货物数<span class="num">4575</span>个</div>
<div class="rights"> </div>
<div class="note">正常：<span class="bluezi">26</span></div> </div>
<div class="note">离线：<span class="huizi">12</span></div> <div class="wenbox">
<div class="note">报警：<span class="redzi">11</span></div> <div class="tubiao"><span class="myiconfont icon-louyuzidonghua tolzi"></span></div>
<div class="tos">
<div class="tit nums">河北仓库<span class="num">39</span>家</div>
<div class="tit nums">货物数<span class="num">4575</span>个</div>
</div>
</div>
<div class="wenbox">
<div class="tubiao"><span class="myiconfont icon-shebeitaizhang tolzi"></span></div>
<div class="tos">
<div class="tit nums">北京仓库<span class="num">39</span>家</div>
<div class="tit nums">货物数<span class="num">4575</span>个</div>
</div>
</div>
<div class="wenbox">
<div class="tubiao"><span class="myiconfont icon-zhihuilouyu tolzi"></span></div>
<div class="tos">
<div class="tit nums">上海仓库<span class="num">39</span>家</div>
<div class="tit nums">货物数<span class="num">4575</span>个</div>
</div>
</div>
<div class="wenbox">
<div class="tubiao"><span class="myiconfont icon-rizhi2 tolzi"></span></div>
<div class="tos">
<div class="tit nums">江苏仓库<span class="num">39</span>家</div>
<div class="tit nums">货物数<span class="num">4575</span>个</div>
</div>
</div>
</div> </div>
<home-map></home-map>
</div> </div>
</div> <!-- 第3行 -->
<!-- 第2个 --> <div class="con">
<div class="topbox"> <!-- 第1 -->
<div class="toptitle">视频监控</div> <div class="news">
<div class="mids"> <div class="title">
<div class="lefts"> <div class="newstits">报警信息</div>
<div class="icon myiconfont iconbox iconbox_blue">&#xe64a;</div> <div class="more" @click="toMore()">更多></div>
</div>
<div class="content">
<div class="newsli" v-for="(item, index) in Datalist" :key="index" @click="toinfo()">
<div class="dot">&bull;</div>
<div class="tit">{{item.title}}</div>
<div class="time">{{item.createTime}}</div>
</div>
</div>
</div> </div>
<div class="rights"> <!-- 第1 -->
<div class="note">正常：<span class="bluezi">36</span></div> <div class="news">
<div class="note">离线：<span class="huizi">16</span></div> <div class="title">
<div class="note"><span class="redzi"></span></div> <div class="newstits">提醒任务</div>
<div class="more" @click="toMore()">更多></div>
</div>
<div class="content">
<div class="newsli" v-for="(item, index) in Datalista" :key="index" @click="toinfo()">
<div class="dot">&bull;</div>
<div class="tit">{{item.title}}</div>
<div class="time">{{item.createTime}}</div>
</div>
</div>
</div> </div>
<!-- -->
</div> </div>
</div> </div>
<!-- 第3个 -->
<div class="topbox">
<div class="toptitle">门禁管理</div> <div class="rightbars tops">
<div class="mids"> <!-- 第1个 -->
<div class="lefts">
<div class="icon myiconfont iconbox iconbox_zi">&#xe60b;</div> <div class="topboxs">
</div> <div class="topbox">
<div class="rights"> <div class="toptitle">入侵报警</div>
<div class="note">正常：<span class="bluezi">38</span></div> <div class="mids">
<div class="note">离线：<span class="huizi">15</span></div> <div class="lefts">
<div class="note">报警：<span class="redzi">12</span></div> <div class="icon myiconfont iconbox iconbox_yellow">&#xe608;</div>
</div>
<div class="rights">
<div class="note">正常：<span class="bluezi">26</span></div>
<div class="note">离线：<span class="huizi">12</span></div>
<div class="note">报警：<span class="redzi">11</span></div>
</div>
<div class="bar">
<pie-chartrenyuan :chart-data="ruqinbaojing_Chart"></pie-chartrenyuan>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 第4个 --> <!-- 第2个 -->
<div class="topbox"> <div class="topboxs">
<div class="toptitle">电子围栏</div> <div class="topbox">
<div class="mids"> <div class="toptitle">视频监控</div>
<div class="lefts"> <div class="mids">
<div class="icon myiconfont iconbox iconbox_red">&#xe9f7;</div> <div class="lefts">
<div class="icon myiconfont iconbox iconbox_blue">&#xe64a;</div>
</div>
<div class="rights">
<div class="note">正常：<span class="bluezi">36</span></div>
<div class="note">离线：<span class="huizi">16</span></div>
<div class="note"><span class="redzi"></span></div>
</div>
<div class="bar">
<pie-chartrenyuan :chart-data="shipinjiankong_Chart" ></pie-chartrenyuan>
</div> </div>
<div class="rights">
<div class="note">正常：<span class="bluezi">26</span></div>
<div class="note">离线：<span class="huizi">12</span></div>
<div class="note">报警：<span class="redzi">11</span></div>
</div> </div>
</div> </div>
</div> </div>
<!-- 第5个 --> <!-- 第3个 -->
<!-- <div class="topbox"> <div class="topboxs">
<div class="toptitle">电子巡更</div> <div class="topbox">
<div class="mids"> <div class="toptitle">门禁管理</div>
<div class="lefts"> <div class="mids">
<div class="icon myiconfont iconbox iconbox_green">&#xe64c;</div> <div class="lefts">
</div> <div class="icon myiconfont iconbox iconbox_zi">&#xe60b;</div>
<div class="rights"> </div>
<div class="note">正常：<span class="bluezi">39</span></div> <div class="rights">
<div class="note">离线：<span class="huizi">15</span></div> <div class="note">正常：<span class="bluezi">38</span></div>
<div class="note">报警：<span class="redzi">12</span></div> <div class="note">离线：<span class="huizi">15</span></div>
</div> <div class="note">报警：<span class="redzi">12</span></div>
</div> </div>
</div> --> <div class="bar">
<!-- 11 --> <pie-chartrenyuan :chart-data="menjinguanli_Chart"></pie-chartrenyuan>
</div> </div>
<!-- 饼图 -->
<div class="tbars">
<!-- 第1个图表 -->
<div class="tbar">
<div class="title"><span class="iconfont icon-jiating greenzi"></span>入侵报警</div>
<div class="bar">
<pie-chartrenyuan :chart-data="ruqinbaojing_Chart"></pie-chartrenyuan>
</div>
</div>
<!-- 第1个图表 -->
<div class="tbar">
<div class="title"><span class="iconfont icon-jiating greenzi"></span>视频监控</div>
<div class="bar">
<pie-chartrenyuan :chart-data="shipinjiankong_Chart" ></pie-chartrenyuan>
</div>
</div>
<!-- 第1个图表 -->
<div class="tbar">
<div class="title"><span class="iconfont icon-jiating greenzi"></span>门禁管理</div>
<div class="bar">
<pie-chartrenyuan :chart-data="menjinguanli_Chart"></pie-chartrenyuan>
</div>
</div>
<!-- 第1个图表 -->
<div class="tbar">
<div class="title"><span class="iconfont icon-jiating greenzi"></span>电子围栏</div>
<div class="bar">
<pie-chartrenyuan :chart-data="dianziweilan_Chart"></pie-chartrenyuan>
</div>
</div>
<!-- 第1个图表 -->
<!-- <div class="tbar">
<div class="title"><span class="iconfont icon-jiating greenzi"></span>电子巡更</div>
<div class="bar">
<pie-chartrenyuan :chart-data="dianzixungeng_Chart"></pie-chartrenyuan>
</div>
</div> -->
</div>
<!-- 第3行 -->
<div class="con">
<!-- 第1 -->
<div class="news">
<div class="title">
<div class="newstits">报警信息</div>
<div class="more" @click="toMore()">更多></div>
</div>
<div class="content">
<div class="newsli" v-for="(item, index) in Datalist" :key="index" @click="toinfo()">
<div class="dot">&bull;</div>
<div class="tit">{{item.title}}</div>
<div class="time">{{item.createTime}}</div>
</div>
</div>
</div>
<!-- 第1 -->
<div class="news">
<div class="title">
<div class="newstits">提醒任务</div>
<div class="more" @click="toMore()">更多></div>
</div>
<div class="content">
<div class="newsli" v-for="(item, index) in Datalista" :key="index" @click="toinfo()">
<div class="dot">&bull;</div>
<div class="tit">{{item.title}}</div>
<div class="time">{{item.createTime}}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 第1 --> <!-- 第4个 -->
<div class="news"> <div class="topboxs">
<div class="title"> <div class="topbox">
<div class="newstits">待办</div> <div class="toptitle">电子围栏</div>
<div class="more" @click="toMore()">更多></div> <div class="mids">
</div> <div class="lefts">
<div class="content"> <div class="icon myiconfont iconbox iconbox_red">&#xe9f7;</div>
<div class="newsli" v-for="(item, index) in Datalist" :key="index" @click="toinfo()"> </div>
<div class="dot">&bull;</div> <div class="rights">
<div class="tit">{{item.title}}</div> <div class="note">正常：<span class="bluezi">26</span></div>
<div class="time">{{item.createTime}}</div> <div class="note">离线：<span class="huizi">12</span></div>
<div class="note">报警：<span class="redzi">11</span></div>
</div>
<div class="bar">
<pie-chartrenyuan :chart-data="dianziweilan_Chart"></pie-chartrenyuan>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 第1 -->
<!-- <div class="news">
<div class="title">
<div class="newstits">工作流</div>
<div class="more" @click="toMore()">更多></div>
</div>
<div class="content">
<div class="newsli" v-for="(item, index) in Datalist" :key="index" @click="toinfo()">
<div class="dot">&bull;</div>
<div class="tit">{{item.title}}</div>
<div class="time">{{item.createTime}}</div>
</div>
</div>
</div> -->
<!-- 11 -->
</div> </div>
</div> </div>
</template> </template>
@ -178,6 +168,7 @@
import { login1 } from '@/api/system/user/login.js' import { login1 } from '@/api/system/user/login.js'
import * as echarts from "echarts"; import * as echarts from "echarts";
import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan' import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan'
import HomeMap from '@/views/dashboard/components/HomeMap'
// 1.1入侵报警饼图 // 1.1入侵报警饼图
const ruqinbaojing_Chart = { const ruqinbaojing_Chart = {
// seriesName: '入侵报警', // seriesName: '入侵报警',
@ -292,7 +283,7 @@
export default { export default {
name: 'index', name: 'index',
components: { components: {
PieChartrenyuan PieChartrenyuan,HomeMap,
}, },
created() { created() {
var _self = this var _self = this
@ -362,36 +353,50 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.zongcons{margin: 0;padding: 0;flex: 1;width: 100%;height: calc(100% - 160px);}
.rightbars{
}
.zongcons .maps{width: 100%;height: 620px;}
.webindex { .webindex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: flex-start;
width: 100%; padding: 20px; width: 100%; padding: 20px;
height: 100%;overflow-y: auto; height: 100%;overflow-y: auto;
background: radial-gradient(#fff,#f5f7f4, #fff); background: radial-gradient(#fff,#f5f7f4, #fff);
} }
.tops { .tops {width: 470px;
display: flex; // display: flex;
flex-direction: row; // flex-direction: row;
flex-wrap: nowrap; // flex-wrap: nowrap;
justify-content: flex-start;align-items: flex-start; // justify-content: flex-start;align-items: flex-start;
padding: 0px; padding: 0 0 0 20px;
margin: 0px; margin: 0px;
} }
.tops .topbox { .tops .topboxs {width: 100%;
width: 25%;
margin: 0 20px 0 0; padding: 15px 0px 0 0 !important;
}
.topbox {
// width: 25%;
//margin: 20px 20 0 0 !important;
background-color: #fff; background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
padding: 10px; padding: 10px;
} }
.tops .topbox:last-of-type { // .tops .topbox:last-of-type {
margin: 0; // margin: 0;
} // }
.tops .topbox .toptitle { .topbox .toptitle {
font-size: 20px; font-size: 20px;
padding: 10px 20px; padding: 10px 20px;
font-weight: bold; color: #333;font-size: 16px; font-weight: bold; color: #333;font-size: 16px;
border-bottom: 1px solid #ececee; border-bottom: 1px solid #ececee;
} }
.tops .topbox .mids { .topbox .mids {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -399,8 +404,8 @@
margin: 0; margin: 0;
padding: 20px ; padding: 20px ;
} }
.tops .topbox .mids .lefts{width: 100px;} .topbox .mids .lefts{width: 100px;}
.tops .topbox .mids .lefts .iconbox { .topbox .mids .lefts .iconbox {
border-radius: 10px; border-radius: 10px;
line-height: 80px; line-height: 80px;
width: 80px; width: 80px;
@ -430,15 +435,15 @@
.iconbox_fen { .iconbox_fen {
background-color: #9b2efb; background-color: #9b2efb;
} }
.tops .topbox .mids .rights {flex: 1; .topbox .mids .rights {flex: 1;
padding: 2px 0 2px 10px; padding: 2px 0 2px 10px;
} }
.tops .topbox .mids .rights .note { .topbox .mids .rights .note {
color: #333; color: #333;
font-size: 14px; font-size: 14px;
padding: 0 0 3px 0; padding: 0 0 3px 0;
} }
.tops .topbox .mids .rights .note span { .topbox .mids .rights .note span {
font-size: 20px; font-size: 20px;
padding: 0 5px; padding: 0 5px;
} }
@ -492,7 +497,7 @@
justify-content: space-around; justify-content: space-around;
} }
.news { .news {
width: calc(100% / 3); width: calc(100% / 2);
margin: 0 20px 0 0; margin: 0 20px 0 0;
background-color: #fff; background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
@ -521,7 +526,7 @@
.news .content { .news .content {
padding: 10px 0; padding: 10px 0;
height: 210px; height:160px;
overflow: hidden; overflow: hidden;
} }
@ -559,4 +564,81 @@
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
} }
/////
.wenboxs {
padding: 20px;
margin: 0;
position: absolute;
z-index: 600;
top: 30px;
// background-color: rgba($color: #ffffff, $alpha: 0.7);
// box-shadow: 0px 0px 6px #0d27c2;
background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
}
.wenboxs .wenbox {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
margin: 0;
font-size: 18px;
color: #8d8e90;
padding: 10px;
border-bottom: 1px solid #E9E9E9;
}
.wenboxs .wenbox:last-of-type {
border-bottom: 0px solid #E9E9E9;
}
.wenbox .tubiao {
margin: 0 5px;
font-size: 18px;
// color: #b7d8fa;
padding: 0 5px 0 0;
}
.wenbox .tubiao .tolzi {
color: #3f9bfa;
font-size: 40px;
}
.bluezi {
// color: #042d6a;
font-size: 18px !important;
}
.wenbox .tos {
margin: 0;
font-size: 14px;
color: #474848;
padding: 0;
text-align: left;
}
.wenbox .tos .tit {
margin: 0;
font-size: 14px;
// color: #6f7172;
padding: 0 0 10px 0;
}
.wenbox .tos .nums {
margin: 0;
padding: 0;
}
.wenbox .tos .nums .num {
font-size: 20px;
padding: 0 5px;
font-weight: bold;
display: inline-block;
color: #fc6f04;
}
</style> </style>

124
src/views/renlianshibie/renlianshibieList.vue
View File

@ -3,8 +3,8 @@
<div v-show="viewState == 1"> <div v-show="viewState == 1">
<button-bar view-title="质物监测" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/> <button-bar view-title="质物监测" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
<div class="main-content"> <div class="main-content">
<div class="tops"> <!-- <div class="tops">
<!-- 第1个 -->
<div class="topbox"> <div class="topbox">
<div class="toptitle"> <div class="toptitle">
<span class="icon myiconfont iconbox greenzi">&#xe608;</span> <span class="icon myiconfont iconbox greenzi">&#xe608;</span>
@ -16,21 +16,21 @@
<div class="note"><span class="redzi">360</span>路人</div> <div class="note"><span class="redzi">360</span>路人</div>
</div> </div>
</div> </div>
<!-- 第2个 -->
<div class="topbox"> <div class="topbox">
<div class="toptitle iconbox_red"> <div class="toptitle iconbox_red">
<span class="icon myiconfont iconbox redzi">&#xe627;</span> <span class="icon myiconfont iconbox redzi">&#xe627;</span>
<p>重点关注人员</p> <p>重点关注人员</p>
</div> </div>
<div class="mids rensnote"> <div class="mids rensnote">
<!-- <div class="rensnote"> -->
<span class="tit">图库照</span> <span class="tit">图库照</span>
<img class="rentu" src="../../../public/image/ren1.jpg" alt=""> <img class="rentu" src="../../../public/image/tu1.jpg" alt="">
<div class="yuans"> <div class="yuans">
<p>98%</p><span>相似度</span> <p>98%</p><span>相似度</span>
</div> </div>
<span class="tit">图库照</span> <span class="tit">图库照</span>
<img class="rentu" src="../../../public/image/ren2.jpg" alt=""> <img class="rentu" src="../../../public/image/tu2.jpg" alt="">
<div class="rightzi"> <div class="rightzi">
<p>位置：东门出口</p> <p>位置：东门出口</p>
<p>日期：2022-05-16</p> <p>日期：2022-05-16</p>
@ -38,17 +38,16 @@
<p class="redzi">事件：重点关注人员</p> <p class="redzi">事件：重点关注人员</p>
<p>姓名：刘小明</p> <p>姓名：刘小明</p>
</div> </div>
<!-- </div> -->
</div> </div>
</div> </div>
<!-- 11 --> </div> -->
</div>
<div class="searchcon"> <div class="searchcon">
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button> <el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>
<div v-show="isSearchShow" class="search"> <div v-show="isSearchShow" class="search">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="110px" class="tab-header"> <el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="110px" class="tab-header">
<el-form-item label="人员姓名"> <el-form-item label="物品名称">
<el-input v-model="listQuery.params.manufacturerName" clearable placeholder="" class="addinputw"></el-input> <el-input v-model="listQuery.params.manufacturerName" clearable placeholder="" class="addinputw"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="选择楼层"> <el-form-item label="选择楼层">
@ -56,6 +55,11 @@
<el-option v-for="item in supplierType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/> <el-option v-for="item in supplierType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="选择仓库">
<el-select v-model="listQuery.params.supplierType2" filterable clearable placeholder="请选择仓库">
<el-option v-for="item in cangku_list" :key="item.id" :label="item.title" :value="item.id" />
</el-select>
</el-form-item>
<!-- <el-form-item label="厂商办公电话"> <!-- <el-form-item label="厂商办公电话">
<el-input v-model="listQuery.params.manufacturerTelePhone" maxlength="130" placeholder="" class="addinputw" clearable/> <el-input v-model="listQuery.params.manufacturerTelePhone" maxlength="130" placeholder="" class="addinputw" clearable/>
</el-form-item> </el-form-item>
@ -82,18 +86,37 @@
<div class="news" v-for="(item, index) in Datalista" :key="index"> <div class="news" v-for="(item, index) in Datalista" :key="index">
<div class="title"> <div class="title">
<div class="more myiconfont" @click="toMore()">&#xe682;</div> <div class="more myiconfont" @click="toMore()">&#xe682;</div>
<div class="newstits">{{item.xiaoqu}}</div> <div class="newstits">{{item.cangku}}</div>
</div> </div>
<div class="contents"> <div class="contents">
<div class="newsli"> <div class="newslis">
<div class="tu"><img :src="item.tuUrl" alt="" /></div> <span class="tits">图库照</span>
<div class="rightwen"> <div class="newsli">
<div class="tit">位置：{{item.weizhi}}</div> <div class="tu"><img :src="item.tuUrl" alt="" /></div>
<div class="time">日期：{{item.createTime}}</div> <div class="rightwen">
<div class="time">时间：{{item.createTime2}}</div> <div class="tit">质物名称：{{item.name}}</div>
<div class="time">事件：{{item.shijian}}</div> <div class="time">入库日期：{{item.createTime}}</div>
<div class="time">姓名：{{item.name}}</div> <div class="time">时间：{{item.createTime2}}</div>
</div> <div class="time">生产厂家：{{item.changjia}}</div>
<div class="time">数量：{{item.shuliang}}瓶</div>
<!-- <div class="time">重量：{{item.zhongliang}}千克</div> -->
</div>
</div>
<div class="yuans">
<p>98%</p><span>相似度</span>
</div>
<span class="tits">图库照</span>
<div class="newsli">
<div class="tu"><img :src="item.tuUrlb" alt="" /></div>
<div class="rightwen">
<div class="tit">质物名称：{{item.nameb}}</div>
<div class="time">入库日期：{{item.createTimeb}}</div>
<div class="time">时间：{{item.createTime2}}</div>
<div class="time">生产厂家：{{item.changjiab}}</div>
<div class="time">数量：{{item.shuliangb}}瓶</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -211,15 +234,19 @@ export default {
total: 0 total: 0
}, },
supplierType_list: [], supplierType_list: [],
cangku_list: [
{ title: '仓库1', id: '1' },
{ title: '仓库2', id: '2' },
],
Datalista: [ Datalista: [
{xiaoqu:'和平家园小区南门出口',tuUrl:'./image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, {cangku:'华盛中心仓库1',name: '康师傅矿泉水',tuUrl:'./image/tu1.jpg', createTime: '2023-05-03',createTime2: '18:26:38', changjia: '康师傅',shuliang:'1000',zhongliang:'500',
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, nameb: '康师傅矿泉水2',tuUrlb:'./image/tu2.jpg', createTimeb: '2023-05-03',createTime2: '18:26:38',changjiab: '康师傅',shuliangb:'1000',zhongliangb:'500'},
{xiaoqu:'和平家园小区西门出口',tuUrl:'./image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' }, {cangku:'华盛中心仓库1',name: '康师傅矿泉水',tuUrl:'./image/tu1.jpg', createTime: '2023-05-03',createTime2: '18:26:38', changjia: '康师傅',shuliang:'1000',zhongliang:'500',
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, nameb: '康师傅矿泉水2',tuUrlb:'./image/tu2.jpg', createTimeb: '2023-05-03',createTime2: '18:26:38',changjiab: '康师傅',shuliangb:'1000',zhongliangb:'500'},
{xiaoqu:'和平家园小区南门出口',tuUrl:'./image/ren1.jpg', weizhi: '南门出口', createTime: '2023-05-03', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, {cangku:'华盛中心仓库1',name: '康师傅矿泉水',tuUrl:'./image/tu1.jpg', createTime: '2023-05-03',createTime2: '18:26:38', changjia: '康师傅',shuliang:'1000',zhongliang:'500',
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-08', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, nameb: '康师傅矿泉水2',tuUrlb:'./image/tu2.jpg', createTimeb: '2023-05-03',createTime2: '18:26:38',changjiab: '康师傅',shuliangb:'1000',zhongliangb:'500'},
{xiaoqu:'和平家园小区西门出口',tuUrl:'./image/ren1.jpg', weizhi: '西门出口', createTime: '2023-05-12', createTime2: '19:32:38', shijian: '社区户主', name: '李明华' }, {cangku:'华盛中心仓库1',name: '康师傅矿泉水',tuUrl:'./image/tu1.jpg', createTime: '2023-05-03',createTime2: '18:26:38', changjia: '康师傅',shuliang:'1000',zhongliang:'500',
{xiaoqu:'和平家园小区东门出口',tuUrl:'./image/ren2.jpg', weizhi: '东门出口', createTime: '2023-05-23', createTime2: '18:26:38', shijian: '社区户主', name: '李明华' }, nameb: '康师傅矿泉水2',tuUrlb:'./image/tu2.jpg', createTimeb: '2023-05-03',createTime2: '18:26:38',changjiab: '康师傅',shuliangb:'1000',zhongliangb:'500'},
], ],
dialogImage: false, dialogImage: false,
// 视频开始 // 视频开始
@ -457,7 +484,6 @@ export default {
</script> </script>
<style scoped> <style scoped>
.rensnote{padding: 10px 30px; display: flex; .rensnote{padding: 10px 30px; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -469,6 +495,7 @@ export default {
.rensnote .yuans span{padding: 0;margin: 0;color: #8e8e8e;font-size: 14px;} .rensnote .yuans span{padding: 0;margin: 0;color: #8e8e8e;font-size: 14px;}
.rensnote .rightzi{padding: 0 10px;color: #8e8e8e;text-align: left;} .rensnote .rightzi{padding: 0 10px;color: #8e8e8e;text-align: left;}
.rensnote .rightzi p{padding: 1px 0;color: #8e8e8e;font-size: 12px;margin: 0;} .rensnote .rightzi p{padding: 1px 0;color: #8e8e8e;font-size: 12px;margin: 0;}
.tops { .tops {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -539,7 +566,7 @@ export default {
padding: 20px 0;background-color: #fff; padding: 20px 0;background-color: #fff;
} }
.news {display: inline-block; .news {display: inline-block;
width: calc(25% - 20px); width: calc(50% - 20px);
margin: 10px 10px; margin: 10px 10px;
background-color: #fff; background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
@ -548,12 +575,12 @@ export default {
/* .news:nth-of-type(4n) { /* .news:nth-of-type(4n) {
margin: 0 !important; margin: 0 !important;
} */ } */
.news:nth-of-type(4n) { width: calc(25% - 10px); .news:nth-of-type(2n) { width: calc(50% - 10px);
margin: 10px 0 10px 10px; margin: 10px 0 10px 10px;
} }
.news:nth-of-type(4n - 3) {width: calc(25% - 10px); /* .news:nth-of-type(4n - 3) {width: calc(25% - 10px);
margin: 10px 10px 10px 0px; margin: 10px 10px 10px 0px;
} } */
.news .title { .news .title {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -578,8 +605,19 @@ export default {
/* height: 210px; /* height: 210px;
overflow: hidden; */ overflow: hidden; */
} }
.news .contents .newslis{padding: 10px 10px; display: flex;
.news .contents .newsli {display: inline-block; flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: center;}
.news .contents .newslis .tits{padding: 0;width: 20px;color: #8e8e8e;}
/*
.news .contents .newslis .rentu{padding: 0;width: 80px;height: 80px;border-radius: 5px;border: 1px solid #ff2424;margin: 0 20px;} */
.news .contents .newslis .yuans{padding: 0;margin: 0 20px;width: 80px;height: 80px !important;border-radius: 80px;border: 1px solid #ff2424;text-align: center;}
.news .contents .newslis .yuans p{padding: 15px 0 1px 0;color: #ff2424;font-size: 26px;margin: 0;}
.news .contents .newslis .yuans span{padding: 0;margin: 0;color: #8e8e8e;font-size: 14px;display: block;}
/* .news .contents .newslis .rightzi{padding: 0 10px;color: #8e8e8e;text-align: left;}
.news .contents .newslis .rightzi p{padding: 1px 0;color: #8e8e8e;font-size: 12px;margin: 0;} */
.news .contents .newslis .newsli {display: inline-block;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -588,27 +626,25 @@ export default {
padding: 5px 10px; padding: 5px 10px;
/* border-bottom: 1px solid #ececee; */ /* border-bottom: 1px solid #ececee; */
} }
.news .contents .newsli .tu { .news .contents .newslis .newsli .tu {
padding: 0px 0 0 0; padding: 0px 0 0 0;
width: 120px;height: 120px;border-radius: 5px;border: 1px solid #f5f5f5; width: 120px;height: 120px;border-radius: 5px;border: 1px solid #ff2424;
} }
.news .contents .newsli .tu img { .news .contents .newslis .newsli .tu img {
width: 100%;height: 100%;border-radius: 5px;border: 1px solid #f5f5f5; width: 100%;height: 100%;border-radius: 5px;border: 1px solid #ff2424;
} }
.news .contents .newsli .rightwen { .news .contents .newslis .newsli .rightwen {
padding: 0px 0 0 20px; padding: 0px 0 0 20px;
flex: 3; flex: 3;
} }
.news .contents .newsli .rightwen .tit { .news .contents .newslis .newsli .rightwen .tit {
padding: 3px 0; padding: 3px 0;
font-size: 14px;font-weight: bold; font-size: 14px;font-weight: bold;
/* height: 25px; /* height: 25px;
overflow: hidden; overflow: hidden;
line-height: 25px; */ line-height: 25px; */
} }
.news .contents .newslis .newsli .rightwen .time {
/* .news .contents .newsli .tel{padding: 10px 0;color: #84d1f5;flex: 1;text-align: center;} */
.news .contents .newsli .rightwen .time {
padding: 3px 0; padding: 3px 0;
color: #848383; color: #848383;
font-size: 14px; font-size: 14px;

Write Preview
Loading…
Cancel
Save