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

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

@ -1307,6 +1307,34 @@
}
</script>
<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 {
display: inline-block;
vertical-align: middle;
@ -1317,6 +1345,7 @@
.backToHome:hover {color: #087dba;
// background: #087dba;
}
.dapingmu {
overflow: hidden;
background-color: #0a173c;

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

@ -15,7 +15,8 @@
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
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 {
mixins: [resize],
data() {
@ -100,38 +101,42 @@ export default {
var option = {}
console.log(JSON.stringify(this.countyData))
this.countyData = [
{ 'name': '襄都区', 'value': '48', 'county': { 'title': '襄都区', 'jwd': '114.492019,37.061614', 'personCount': '22831', 'departmentCount': '48', 'areaCode': '130502' }},
{ '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': '30', 'county': { 'title': '临城县', 'jwd': '114.506873,37.444009', 'personCount': '4023', 'departmentCount': '18', 'areaCode': '130522' }},
{ 'name': '内丘县', 'value': '29', 'county': { 'title': '内丘县', 'jwd': '114.511523,37.287663', 'personCount': '6724', 'departmentCount': '19', 'areaCode': '130523' }},
{ 'name': '柏乡县', 'value': '70', 'county': { 'title': '柏乡县', 'jwd': '114.693382,37.483596', 'personCount': '1625', 'departmentCount': '7', 'areaCode': '130524' }},
{ 'name': '隆尧县', 'value': '10', 'county': { 'title': '隆尧县', 'jwd': '114.776348,37.350925', 'personCount': '44038', 'departmentCount': '10', 'areaCode': '130525' }},
{ 'name': '宁晋县', 'value': '71', 'county': { 'title': '宁晋县', 'jwd': '114.921027,37.618956', 'personCount': '13381', 'departmentCount': '71', 'areaCode': '130528' }},
{ 'name': '巨鹿县', 'value': '55', 'county': { 'title': '巨鹿县', 'jwd': '115.038782,37.21768', 'personCount': '8627', 'departmentCount': '55', 'areaCode': '130529' }},
{ 'name': '新河县', 'value': '8', 'county': { 'title': '新河县', 'jwd': '115.247537,37.526216', 'personCount': '212', 'departmentCount': '8', 'areaCode': '130530' }},
{ 'name': '广宗县', 'value': '27', 'county': { 'title': '广宗县', 'jwd': '115.142797,37.075548', 'personCount': '4903', 'departmentCount': '27', 'areaCode': '130531' }},
{ 'name': '平乡县', 'value': '39', 'county': { 'title': '平乡县', 'jwd': '115.029218,37.069404', 'personCount': '1884', 'departmentCount': '39', 'areaCode': '130532' }},
{ 'name': '威县', 'value': '14', 'county': { 'title': '威县', 'jwd': '115.272749,36.983272', 'personCount': '4831', 'departmentCount': '14', 'areaCode': '130533' }},
{ 'name': '清河县', 'value': '25', 'county': { 'title': '清河县', 'jwd': '115.668999,37.059991', 'personCount': '6240', 'departmentCount': '25', 'areaCode': '130534' }},
{ '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' }}]
{ 'name': '北京', 'value': '48', 'county': { 'title': '北京', 'jwd': '114.52153 , 38.04831', 'personCount': '22831', 'departmentCount': '48', 'ad': '110000' }},
{ 'name': '邢东新区', 'value': '4', 'county': { 'title': '邢东新区', 'jwd': '114.597268,37.096124', 'personCount': '806', 'departmentCount': '4', 'areaCode': '130591' }}]
// { 'name': '襄都区', 'value': '48', 'county': { 'title': '襄都区', 'jwd': '114.492019,37.061614', 'personCount': '22831', 'departmentCount': '48', 'areaCode': '130502' }},
// { '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': '30', 'county': { 'title': '临城县', 'jwd': '114.506873,37.444009', 'personCount': '4023', 'departmentCount': '18', 'areaCode': '130522' }},
// { 'name': '内丘县', 'value': '29', 'county': { 'title': '内丘县', 'jwd': '114.511523,37.287663', 'personCount': '6724', 'departmentCount': '19', 'areaCode': '130523' }},
// { 'name': '柏乡县', 'value': '70', 'county': { 'title': '柏乡县', 'jwd': '114.693382,37.483596', 'personCount': '1625', 'departmentCount': '7', 'areaCode': '130524' }},
// { 'name': '隆尧县', 'value': '10', 'county': { 'title': '隆尧县', 'jwd': '114.776348,37.350925', 'personCount': '44038', 'departmentCount': '10', 'areaCode': '130525' }},
// { 'name': '宁晋县', 'value': '71', 'county': { 'title': '宁晋县', 'jwd': '114.921027,37.618956', 'personCount': '13381', 'departmentCount': '71', 'areaCode': '130528' }},
// { 'name': '巨鹿县', 'value': '55', 'county': { 'title': '巨鹿县', 'jwd': '115.038782,37.21768', 'personCount': '8627', 'departmentCount': '55', 'areaCode': '130529' }},
// { 'name': '新河县', 'value': '8', 'county': { 'title': '新河县', 'jwd': '115.247537,37.526216', 'personCount': '212', 'departmentCount': '8', 'areaCode': '130530' }},
// { 'name': '广宗县', 'value': '27', 'county': { 'title': '广宗县', 'jwd': '115.142797,37.075548', 'personCount': '4903', 'departmentCount': '27', 'areaCode': '130531' }},
// { 'name': '平乡县', 'value': '39', 'county': { 'title': '平乡县', 'jwd': '115.029218,37.069404', 'personCount': '1884', 'departmentCount': '39', 'areaCode': '130532' }},
// { 'name': '威县', 'value': '14', 'county': { 'title': '威县', 'jwd': '115.272749,36.983272', 'personCount': '4831', 'departmentCount': '14', 'areaCode': '130533' }},
// { 'name': '清河县', 'value': '25', 'county': { 'title': '清河县', 'jwd': '115.668999,37.059991', 'personCount': '6240', 'departmentCount': '25', 'areaCode': '130534' }},
// { '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, {})
option = {
title: {
text: '邢台市',
text: '全国仓库分布图',
// subtext: 'Data from www.census.gov',
left: 'center',
textStyle: {
fontSize: 24,
color: '#fff'
color: '#026193'
// fontWeight: 'bolder' // 字体加粗
},
show: false
show: true
},
tooltip: {
alwaysShowContent: true,

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

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

428
src/views/index.vue
View File

@ -1,176 +1,166 @@
<template>
<div class="webindex">
<div class="tops">
<!-- 第1个 -->
<div class="topbox">
<div class="toptitle">入侵报警</div>
<div class="mids">
<div class="lefts">
<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 class="zongcons">
<div class="maps">
<div class="wenboxs">
<div class="wenbox">
<div class="tubiao"><span class="myiconfont icon-shishijiance1 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-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>
<home-map></home-map>
</div>
</div>
<!-- 第2个 -->
<div class="topbox">
<div class="toptitle">视频监控</div>
<div class="mids">
<div class="lefts">
<div class="icon myiconfont iconbox iconbox_blue">&#xe64a;</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>
<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>
<!-- 第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>
<!-- 第3个 -->
<div class="topbox">
<div class="toptitle">门禁管理</div>
<div class="mids">
<div class="lefts">
<div class="icon myiconfont iconbox iconbox_zi">&#xe60b;</div>
</div>
<div class="rights">
<div class="note">正常：<span class="bluezi">38</span></div>
<div class="note">离线：<span class="huizi">15</span></div>
<div class="note">报警：<span class="redzi">12</span></div>
</div>
<div class="rightbars tops">
<!-- 第1个 -->
<div class="topboxs">
<div class="topbox">
<div class="toptitle">入侵报警</div>
<div class="mids">
<div class="lefts">
<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>
<!-- 第4个 -->
<div class="topbox">
<div class="toptitle">电子围栏</div>
<div class="mids">
<div class="lefts">
<div class="icon myiconfont iconbox iconbox_red">&#xe9f7;</div>
<!-- 第2个 -->
<div class="topboxs">
<div class="topbox">
<div class="toptitle">视频监控</div>
<div class="mids">
<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 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>
<!-- 第5个 -->
<!-- <div class="topbox">
<div class="toptitle">电子巡更</div>
<div class="mids">
<div class="lefts">
<div class="icon myiconfont iconbox iconbox_green">&#xe64c;</div>
</div>
<div class="rights">
<div class="note">正常：<span class="bluezi">39</span></div>
<div class="note">离线：<span class="huizi">15</span></div>
<div class="note">报警：<span class="redzi">12</span></div>
</div>
</div>
</div> -->
<!-- 11 -->
</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>
<!-- 第3个 -->
<div class="topboxs">
<div class="topbox">
<div class="toptitle">门禁管理</div>
<div class="mids">
<div class="lefts">
<div class="icon myiconfont iconbox iconbox_zi">&#xe60b;</div>
</div>
<div class="rights">
<div class="note">正常：<span class="bluezi">38</span></div>
<div class="note">离线：<span class="huizi">15</span></div>
<div class="note">报警：<span class="redzi">12</span></div>
</div>
<div class="bar">
<pie-chartrenyuan :chart-data="menjinguanli_Chart"></pie-chartrenyuan>
</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>
<!-- 第4个 -->
<div class="topboxs">
<div class="topbox">
<div class="toptitle">电子围栏</div>
<div class="mids">
<div class="lefts">
<div class="icon myiconfont iconbox iconbox_red">&#xe9f7;</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="dianziweilan_Chart"></pie-chartrenyuan>
</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>
</template>
@ -178,6 +168,7 @@
import { login1 } from '@/api/system/user/login.js'
import * as echarts from "echarts";
import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan'
import HomeMap from '@/views/dashboard/components/HomeMap'
// 1.1入侵报警饼图
const ruqinbaojing_Chart = {
// seriesName: '入侵报警',
@ -292,7 +283,7 @@
export default {
name: 'index',
components: {
PieChartrenyuan
PieChartrenyuan,HomeMap,
},
created() {
var _self = this
@ -362,36 +353,50 @@
</script>
<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 {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: flex-start;
width: 100%; padding: 20px;
height: 100%;overflow-y: auto;
background: radial-gradient(#fff,#f5f7f4, #fff);
}
.tops {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;align-items: flex-start;
padding: 0px;
.tops {width: 470px;
// display: flex;
// flex-direction: row;
// flex-wrap: nowrap;
// justify-content: flex-start;align-items: flex-start;
padding: 0 0 0 20px;
margin: 0px;
}
.tops .topbox {
width: 25%;
margin: 0 20px 0 0;
.tops .topboxs {width: 100%;
padding: 15px 0px 0 0 !important;
}
.topbox {
// width: 25%;
//margin: 20px 20 0 0 !important;
background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
padding: 10px;
}
.tops .topbox:last-of-type {
margin: 0;
}
.tops .topbox .toptitle {
// .tops .topbox:last-of-type {
// margin: 0;
// }
.topbox .toptitle {
font-size: 20px;
padding: 10px 20px;
font-weight: bold; color: #333;font-size: 16px;
border-bottom: 1px solid #ececee;
}
.tops .topbox .mids {
.topbox .mids {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@ -399,8 +404,8 @@
margin: 0;
padding: 20px ;
}
.tops .topbox .mids .lefts{width: 100px;}
.tops .topbox .mids .lefts .iconbox {
.topbox .mids .lefts{width: 100px;}
.topbox .mids .lefts .iconbox {
border-radius: 10px;
line-height: 80px;
width: 80px;
@ -430,15 +435,15 @@
.iconbox_fen {
background-color: #9b2efb;
}
.tops .topbox .mids .rights {flex: 1;
.topbox .mids .rights {flex: 1;
padding: 2px 0 2px 10px;
}
.tops .topbox .mids .rights .note {
.topbox .mids .rights .note {
color: #333;
font-size: 14px;
padding: 0 0 3px 0;
}
.tops .topbox .mids .rights .note span {
.topbox .mids .rights .note span {
font-size: 20px;
padding: 0 5px;
}
@ -492,7 +497,7 @@
justify-content: space-around;
}
.news {
width: calc(100% / 3);
width: calc(100% / 2);
margin: 0 20px 0 0;
background-color: #fff;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px;
@ -521,7 +526,7 @@
.news .content {
padding: 10px 0;
height: 210px;
height:160px;
overflow: hidden;
}
@ -559,4 +564,81 @@
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>

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

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

Write Preview
Loading…
Cancel
Save