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

2023-11-17

master
guoxing 1 year ago
parent
2b390ceb13
commit
38e3f68f39
6 changed files with 633 additions and 72 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
      package.json
  2. 13
      src/api/gd36524/store.js
  3. BIN
      src/assets/mprtgage/yqpb-icon.png
  4. 108
      src/components/scrollList/index.vue
  5. 3
      src/main.js
  6. 580
      src/views/mortgage/yqpb2.vue

1
package.json
View File

@ -34,6 +34,7 @@
"vue-amap": "^0.5.10",
"vue-bmap-gl": "^0.1.2",
"vue-router": "3.4.9",
"vue-seamless-scroll": "^1.1.23",
"vuex": "3.6.0",
"vuex-persistedstate": "^4.0.0",
"xcrud": "^0.4.19"

13
src/api/gd36524/store.js
View File

@ -19,13 +19,24 @@ export default {
});
},
// 获取指定设备列表,
// 36524 获取指定设备列表,
getOtherList: function(data) {
return request({
url: '/datacenter/getOtherList?type=1&ckId=1a10a17b-9c56-4ef9-8986-194a858e3832',
method: 'get'
});
},
// 中鸿基 获取指定设备列表,
getOtherList2: function(data) {
return request({
url: '/datacenter/getOtherList?type=1&ckId=4bb7ddfa-4014-4b60-8f63-612d3096f9d5',
method: 'get'
});
},
// 获取摄像头状态数量 ,
getStatusCount: function(data) {

BIN
src/assets/mprtgage/yqpb-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

108
src/components/scrollList/index.vue
View File

@ -0,0 +1,108 @@
<template>
<!--
created by niujinxi at 20220317
In your page,you set a container,give an id and set height when you use this component.
And if you want to change scrollbar's style,just change .scrollContainer's style in your page.That's all..
-->
<div class="scrollContainer" :id="id" @mouseenter="monseenter" @mouseleave="mouseleave">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'ScrollList',
props: {
id: String
},
data() {
return {
timer: null
};
},
methods: {
init() {
this.setTimer();
// this.$once代表只执行一次。如果组件是在keep-alive中包裹，则需要更换函数
// 被keep-alive包裹住的组件有两个生命周期函数：activated和deactivated
this.$once('hook:beforeDestroy', () => {
this.removeTimer();
});
},
removeTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
setTimer() {
this.removeTimer();
this.timer = setInterval(() => {
// pixel height：include el and padding read only
const scrollHeight = document.getElementById(this.id).scrollHeight;
// visible area height：include el and padding read only
const clientHeight = document.getElementById(this.id).clientHeight;
const heightDifference = scrollHeight - clientHeight;
// scroll height：readable and writable
document.getElementById(this.id).scrollTop++;
// when el scroll to top
if (document.getElementById(this.id).scrollTop >= heightDifference - 1) {
this.removeTimer();
// make it go back to original location after one second
setTimeout(() => {
document.getElementById(this.id).scrollTop = 0;
this.setTimer();
}, 1000);
}
}, 44);
},
monseenter() {
this.removeTimer();
},
mouseleave() {
this.setTimer();
}
},
mounted() {
this.init();
}
};
</script>
<style lang="scss" scoped>
.scrollContainer::-webkit-scrollbar {
width: 4px;
background: aliceblue;
}
.scrollContainer::-webkit-scrollbar-thumb {
background: palevioletred;
border-radius: 5px;
}
.scrollContainer {
height: 100%;
overflow: scroll;
overflow-x: hidden;
}
// 兼容IE
.scrollContainer {
/*三角箭头的颜色*/
scrollbar-arrow-color: #fff;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #0099dd;
/*滚动条整体颜色*/
scrollbar-highlight-color: #0099dd;
/*滚动条阴影*/
scrollbar-shadow-color: #0099dd;
/*滚动条轨道颜色*/
scrollbar-track-color: #0066ff;
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
scrollbar-3dlight-color: #0099dd;
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
scrollbar-darkshadow-color: #0099dd;
/*滚动条基准颜色*/
scrollbar-base-color: #0099dd;
}
</style>

3
src/main.js
View File

@ -10,7 +10,8 @@ import router from './router'
import '@/icons' // 引入icon文件夹下所有的svg
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
// import VueAMap from 'vue-amap'
import VueAMap from '@vuemap/vue-amap';

580
src/views/mortgage/yqpb2.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="yxt-containers">
<div class="yxt-containers" style="overflow-y: auto;">
<span class="title">一起拼搏(汇融惠享项目)</span>
@ -8,6 +8,7 @@
<div class="layout-left">
<div class="layout-left-top">
<span class="layout-left-top-title">累计订货量</span>
<div class="layout-left-top-label">
@ -77,15 +78,15 @@
<div class="layout-contre-top">
<span>现场视频</span>
<div class="layout-contre-top-title">
<span >通道一</span>
<span>摄像头：{{cameraInfo.name}}</span>
<div class="layout-contre-top-title-show">
<span @click="cameraType" style="margin-right: 5px;">{{videos?"监控回放":'实时监控'}}</span>
<svg-icon icon-class="huifang" class="el-input__icon"
style="height: 16px; width: 16px" @click="clivideo" />
<svg-icon icon-class="huifang" class="el-input__icon" style="height: 16px; width: 16px"
@click="clivideo" />
</div>
</div>
@ -99,31 +100,124 @@
<div class="layout-contre-bom">
<span class="layout-contre-bom-title">餐饮企业定货量</span>
<div class="layout-contre-bom-label">
<span>品类</span>
<span>月累计</span>
<span>上月同期</span>
<span>增长量</span>
</div>
<div v-for="(item,index) in ztsj" :index="index" class="layout-contre-bom-list">
<div class="layout-contre-bom-list-item">
<span class="layout-contre-bom-list-name">{{ item.typeName }}</span>
<span class="layout-contre-bom-list-value">{{ item.caterMonth }}</span>
<span class="layout-contre-bom-list-value">{{ item.caterMonthPre }}</span>
<span class="layout-contre-bom-list-value">{{ item.caterMonthIncrement }}</span>
</div>
</div>
</div>
</div>
<div class="layout-right">
<div class="layout-right-top">
<span>仓库平面图</span>
<img src="@/assets/mprtgage/yqpb-icon.png" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn1" @click="cameraClock(0)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn2" @click="cameraClock(1)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn3" @click="cameraClock(2)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn4" @click="cameraClock(3)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn5" @click="cameraClock(4)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn6" @click="cameraClock(5)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn7" @click="cameraClock(6)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn8" @click="cameraClock(7)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn9" @click="cameraClock(8)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn10" @click="cameraClock(9)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn11" @click="cameraClock(10)" />
<img src="@/assets/mprtgage/camera.jpg" class="layout-right-top_btn12" @click="cameraClock(11)" />
</div>
<div class="layout-right-contre">
<span class="layout-right-contre-title">本月目标数</span>
<div class="layout-right-contre-label">
<span>品类</span>
<span>任务数</span>
<span>完成比例</span>
</div>
<div v-for="(item,index) in ztsj" :index="index" class="layout-right-contre-list">
<div class="layout-right-contre-list-item">
<span class="layout-right-contre-list-name">{{ item.typeName }}</span>
<span class="layout-right-contre-list-value">{{ item.targetData }}</span>
<span class="layout-right-contre-list-value">{{ item.targetDataRate }}</span>
</div>
</div>
</div>
<div class="layout-right-bom">
<span class="layout-right-bom-title">支行订单量完成情况</span>
<div class="layout-right-bom-label">
<span>排名</span>
<span>支行名称</span>
<span>本月累计</span>
</div>
<vue-seamless-scroll :data="zhpm" :class-option="optionHover" class="seamless-warp">
<el-table :data="zhpm" border :show-header="status" :row-style="{height: '40px'}">
<el-table-column prop="sortNo">
</el-table-column>
<el-table-column prop="bankName" width="130">
</el-table-column>
<el-table-column prop="allMonth" align="right">
</el-table-column>
</el-table>
<!-- <div v-for="(item,index) in zhpm" :index="index" class="banner-scroll-list">
<div class="banner-scroll-list-item">
<span class="banner-scroll-list-name">{{ item.sortNo }}</span>
<span class="banner-scroll-list-value">{{ item.bankName }}</span>
<span class="banner-scroll-list-all">{{ item.allMonth }}</span>
</div>
</div> -->
</vue-seamless-scroll>
</div>
</div>
</div>
<!-- 查看监控 -->
<el-dialog title="查看视频" :visible.sync="dialogImageJK" width="800px" :before-close="handleCloseJK"
style="z-index:999">
<iframe :src="this.spUrl" width="750" height="400" id="ysOpenDevice" allowfullscreen>
</iframe>
</el-dialog>
</div>
</div>
</template>
<script>
// import Scroll from "@/components/scrollList/index";
import req from '@/api/gd36524/store'
import {
zhj_ztsj
@ -131,16 +225,45 @@
import {
zhj_zhpm
} from '@/demodata/zhj_zhpm.js'
components: {
Scroll: () => import("@/components/scrollList/index.vue")
}
export default {
data() {
return {
videos:false,
status: false,
dialogVisible: false,
videos: true,
lookvideo: false,
dialogImageJK: false,
spUrl: "",
cameraList: [],
cameraInfo: {
name: "默认"
},
ztsj: [],
zhpm: []
}
},
computed: {
optionHover() {
return {
step: 0.1, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
},
created() {
this.loadList()
this.getOtherList()
},
methods: {
loadList() {
@ -148,50 +271,21 @@
this.zhpm = zhj_zhpm.rows
console.log('11', this.ztsj)
},
getReportInventory() {
req.getReportInventory().then(res => {
console.log('getReportInventory:', res)
this.chartData2 = {
date: res.data.date,
changwencang: res.data.changwencang,
gongyinglian: res.data.gongyinglian,
cancipin: res.data.cancipin,
mendian: res.data.mendian,
ycMendian: res.data.ycMendian
}
}).catch(e => {
console.log('GdinventoryLog-loadList-ee:', e)
})
},
getInventory() {
req.getInventory(this.times).then(res => {
console.log('getInventory:', res)
this.inventoryList = res.data
}).catch(e => {
console.log('GdinventoryLog-loadList-ee:', e)
})
},
handleCloseJK() {
this.dialogImageJK = false
},
getStatusCount() {
req.getStatusCount().then(res => {
console.log('getStatusCount:', res)
this.StatusCountInfo = res.data
}).catch(e => {
console.log('GdinventoryLog-loadList-ee:', e)
})
},
getOtherList() {
req.getOtherList().then(res => {
req.getOtherList2().then(res => {
console.log('getOtherList:', res)
this.cameraList = res.data
this.cameraInfo = res.data[0]
this.getVedioPcLiveById(res.data[0].id)
if( res.data){
this.cameraList = res.data
this.cameraInfo = res.data[0]
this.getVedioPcLiveById(res.data[0].id)
}
}).catch(e => {
console.log('GdinventoryLog-loadList-ee:', e)
})
@ -217,19 +311,10 @@
})
},
selectTime(val) {
console.log('val:', val)
this.times = val
this.loadList()
this.getInventory()
// this.getOtherList();
// this.getStatusCount();
},
cameraClock(index) {
var item = this.cameraList[index]
this.cameraInfo = item
this.getVedioPcLiveById(item.id)
// var item = this.cameraList[index]
// this.cameraInfo = item
// this.getVedioPcLiveById(item.id)
},
cameraType() {
@ -430,6 +515,7 @@
.layout-contre {
width: 45%;
margin-left: 30px;
margin-right: 30px;
display: flex;
flex-direction: column;
@ -444,25 +530,24 @@
font-weight: 600;
font-family: sans-serif;
}
.layout-contre-top-title{
.layout-contre-top-title {
display: flex;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
flex-direction: row;
justify-content: space-between;
span {
font-size: 20px;
font-weight: 600;
font-family: sans-serif;
}
.layout-contre-top-title-show{
}
.layout-contre-top-title-show {}
}
.layout-contre-top_video {
margin-top: 20px;
@ -470,19 +555,374 @@
}
.layout-contre-bom {
margin-top: 20px;
margin-top: 15px;
background-color: #031249;
display: flex;
flex-direction: column;
padding: 20px;
.layout-contre-bom-title {
font-size: 25px;
font-weight: 600;
font-family: sans-serif;
}
.layout-contre-bom-label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
span {
margin-top: 20px;
font-size: 20px;
font-weight: 600;
font-family: sans-serif;
}
}
.layout-contre-bom-list {
margin-top: 10px;
display: flex;
flex-direction: column;
.layout-contre-bom-list-item {
display: flex;
margin-top: 5px;
margin-bottom: 5px;
flex-direction: row;
align-items: center;
justify-content: space-between;
.layout-contre-bom-list-name {}
.layout-contre-bom-list-value {}
.layout-contre-bom-list-growth {}
}
}
}
}
.layout-right {
width: 25%;
display: flex;
flex-direction: column;
.layout-right-top {
background-color: #031249;
padding: 20px;
height: 230px;
position: relative;
span {
font-size: 25px;
font-weight: 600;
font-family: sans-serif;
}
.layout-right-top {}
img {
margin-top: 10px;
width: 100%;
height: 80%;
}
.layout-right-top_btn1 {
//二通道
// z-index: 100;
position: absolute;
top: 25%;
left: 16.1%;
width: 7.5%;
height: 6%;
background-color: #f0f;
/*设置透明度，0为完全透明，1为不透明*/
// opacity: 0;
}
.layout-right-top_btn2 {
// 三通道
// z-index: 100;
position: absolute;
top: 25%;
left: 46.5%;
width: 7%;
height: 6%;
background-color: #ff0;
/*设置透明度，0为完全透明，1为不透明*/
// opacity: 0;
}
.layout-right-top_btn3 {
// 四通道
// z-index: 100;
position: absolute;
top: 34.5%;
left: 10.2%;
width: 7%;
height: 6%;
background-color: #00f;
/*设置透明度，0为完全透明，1为不透明*/
// opacity: 0;
}
.layout-right-contre {}
.layout-right-top_btn4 {
// 一通道
// z-index: 100;
position: absolute;
top: 34%;
left: 84.1%;
width: 5%;
height: 7%;
background-color: #0ff;
/*设置透明度，0为完全透明，1为不透明*/
// opacity: 0;
}
.layout-right-top_btn5 {
// 一通道
// z-index: 100;
position: absolute;
top: 48.2%;
left: 37.5%;
width: 7.5%;
height: 5%;
background-color: #0ff;
/*设置透明度，0为完全透明，1为不透明*/
// opacity: 0;
}
.layout-right-top_btn6 {
// 一通道
// z-index: 100;
position: absolute;
top: 42%;
left: 72.6%;
width: 5%;
height: 7%;
background-color: #0ff;
/*设置透明度，0为完全透明，1为不透明*/
// opacity: 0;
}
.layout-right-top_btn7 {
// 一通道
// z-index: 100;
position: absolute;
top: 55%;
left: 10.5%;
width: 6.5%;
height: 5.5%;
background-color: #0ff;
/*设置透明度，0为完全透明，1为不透明*/
// opacity: 0;
}
.layout-right-bom {}
.layout-right-top_btn8 {
// 一通道
// z-index: 100;
position: absolute;
top: 51.4%;
left: 48.8%;
width: 5%;
height: 7%;
background-color: #0ff;
/*设置透明度，0为完全透明，1为不透明*/
// opacity: 0;
}
.layout-right-top_btn9 {
// 一通道
// z-index: 100;
position: absolute;
top: 58%;
left: 70.8%;
width: 7%;
height: 6.5%;
background-color: #0ff;
/*设置透明度，0为完全透明，1为不透明*/
// opacity: 0;
}
.layout-right-top_btn10 {
// 一通道
// z-index: 100;
position: absolute;
top: 55%;
left: 81.5%;
width: 5.5%;
height: 8%;
background-color: #0ff;
/*设置透明度，0为完全透明，1为不透明*/
// opacity: 0;
}
.layout-right-top_btn11 {
// 一通道
// z-index: 100;
position: absolute;
top: 69.5%;
left: 63.5%;
width: 7%;
height: 5.5%;
background-color: #0ff;
/*设置透明度，0为完全透明，1为不透明*/
// opacity: 0;
}
.layout-right-top_btn12 {
// 一通道
// z-index: 100;
position: absolute;
top: 71.5%;
left: 83.8%;
width: 5.8%;
height: 6.8%;
background-color: #0ff;
/*设置透明度，0为完全透明，1为不透明*/
// opacity: 0;
}
}
.layout-right-contre {
margin-top: 15px;
background-color: #031249;
display: flex;
flex-direction: column;
padding: 20px;
.layout-right-contre-title {
font-size: 25px;
font-weight: 600;
font-family: sans-serif;
}
.layout-right-contre-label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
span {
margin-top: 20px;
font-size: 20px;
font-weight: 600;
font-family: sans-serif;
}
}
.layout-right-contre-list {
margin-top: 10px;
display: flex;
flex-direction: column;
.layout-right-contre-list-item {
display: flex;
margin-top: 5px;
margin-bottom: 5px;
flex-direction: row;
align-items: center;
justify-content: space-between;
.layout-right-contre-list-name {}
.layout-right-contre-list-value {}
.layout-right-contre-list-growth {}
}
}
}
.layout-right-bom {
margin-top: 15px;
background-color: #031249;
display: flex;
flex-direction: column;
padding: 20px;
.layout-right-bom-title {
font-size: 25px;
font-weight: 600;
font-family: sans-serif;
}
.layout-right-bom-label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
span {
margin-top: 20px;
font-size: 20px;
font-weight: 600;
font-family: sans-serif;
}
}
.seamless-warp {
margin-top: 10px;
height: 100px;
width: 100%;
overflow: hidden;
}
::v-deep.el-table,
::v-deep .el-table__expanded-cell {
background-color: transparent;
}
::v-deep.el-table::before {
height: 0px;
}
::v-deep.el-table--border::after {
width: 0px;
}
::v-deep.el-table--border {
border: none;
}
::v-deep .el-table td {
/* 去除表格线 */
border-top: none;
border-right: none;
}
/* 表格内背景颜色 */
::v-deep.el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
background-color: transparent;
color: white
}
::v-deep .el-table .cell {
background-color: #031249;
}
::v-deep .toptitle {
width: 100%;
display: flex;
background-color: gainsboro;
margin-bottom: 10px;
// border: 2px solid gainsboro;
background-color: transparent;
color: white
}
}
}
}

Write Preview
Loading…
Cancel
Save