From c0e2f986a90d55ae6d75095344fcf4e6589f89af Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 10 Apr 2021 16:31:19 +0800
Subject: [PATCH] Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue
---
src/views/animalHeat/animalHeat.vue | 59 ++++++--
src/styles/alarmAnalysis/alarmAnalysis.scss | 351 +++++++++++++++++++++++++-------------------------
public/img/bg/bgzs.png | 0
src/views/system/cs.vue | 6
4 files changed, 223 insertions(+), 193 deletions(-)
diff --git a/public/img/bg/bgzs.png b/public/img/bg/bgzs.png
index f2f5ff2..66bc9d4 100644
--- a/public/img/bg/bgzs.png
+++ b/public/img/bg/bgzs.png
Binary files differ
diff --git a/src/styles/alarmAnalysis/alarmAnalysis.scss b/src/styles/alarmAnalysis/alarmAnalysis.scss
index 936b411..1cf2d6a 100644
--- a/src/styles/alarmAnalysis/alarmAnalysis.scss
+++ b/src/styles/alarmAnalysis/alarmAnalysis.scss
@@ -1,330 +1,331 @@
.alarm_title {
- width: 100%;
- height: 3%;
+ width: 100%;
+ height: 3%;
}
.alarm_title span {
- font-size: 12px;
- color: #7B91B4;
- left: 1%;
- top: 30%;
- position: relative;
+ font-size: 12px;
+ color: #7B91B4;
+ left: 1%;
+ top: 30%;
+ position: relative;
}
.timeSearchBtn {
- width: 100%;
- height: 4%;
+ width: 100%;
+ height: 4%;
}
.timeSearchBtn .timeBtn {
- position: relative;
- left: 0.8%;
- top: 40%;
+ position: relative;
+ left: 0.8%;
+ top: 40%;
}
.timeSearchBtn .timeSearch {
- position: relative;
- left: 1.2%;
- top: 42.6%;
+ position: relative;
+ left: 1.2%;
+ top: 42.6%;
}
//预警总数统计
.statisTotal {
- position: relative;
- left: 0.3%;
- top: 3%;
- width: 100%;
- height: 10%;
+ position: relative;
+ left: 0.3%;
+ top: 3%;
+ width: 100%;
+ height: 10%;
}
.statisTotalAvueDataBox .el-row {
- width: 99.7% !important;
+ width: 99.7% !important;
}
.statisTotal .el-col-md-6 {
- width: 20%;
+ width: 20%;
}
//预警数量统计
.alarmStatis {
- background-color: #ffffff;
- width: 98.6%;
- height: 550px;
- position: relative;
- left: 0.8%;
- top: 7%;
+ background-color: #ffffff;
+ width: 98.6%;
+ height: 550px;
+ position: relative;
+ left: 0.8%;
+ top: 7%;
}
#alarmNumberStatis {
- width: 75%;
- height: 550px;
- position: relative;
- left: 1%;
+ width: 75%;
+ height: 550px;
+ position: relative;
+ left: 1%;
}
.alarmClassifyStatis {
- width: 25%;
- height: 550px;
- position: relative;
- left: 75%;
- top: -85%;
+ width: 25%;
+ height: 550px;
+ position: relative;
+ left: 75%;
+ top: -85%;
}
.alarmClassifyStatis .avue-data-cardtext {
- width: 100%;
- height: 90%;
+ width: 100%;
+ height: 90%;
}
.avue-data-cardText .item {
- -webkit-box-shadow: 0px 0px 0px 0px #ccc;
- box-shadow: 0px 0px 0px #ccc;
+ -webkit-box-shadow: 0px 0px 0px 0px #ccc;
+ box-shadow: 0px 0px 0px #ccc;
}
.avue-data-cardtext .el-row {
- width: 250px !important;
- height: 50px !important;
- position: relative !important;
- top: 30px !important;
+ width: 250px !important;
+ height: 50px !important;
+ position: relative !important;
+ top: 30px !important;
}
.alarmClassifyStatis .el-col {
- float: inherit !important;
- width: 100% !important;
- height: 100px !important;
+ float: inherit !important;
+ width: 100% !important;
+ height: 100px !important;
}
.avue-data-cardText .item-header a {
- font-size: 14px;
- margin-left: 2px;
- position: absolute;
- bottom: 1px;
+ font-size: 14px;
+ margin-left: 2px;
+ position: absolute;
+ bottom: 1px;
}
.avue-data-cardText .item-header i {
- font-size: 14px;
+ font-size: 14px;
}
.avue-data-cardText .item-footer span:nth-child(2) {
- color: red;
+ color: red;
}
//预警类型占比
.alarmTypePro {
- background-color: #ffffff;
- width: 98.6%;
- height: 450px;
- position: relative;
- left: 0.8%;
- top: 9.5%;
+ background-color: #ffffff;
+ width: 98.6%;
+ height: 450px;
+ position: relative;
+ left: 0.8%;
+ top: 9.5%;
}
#alarmTypeProEcharts {
- width: 30%;
- height: 450px;
- position: relative;
- left: 1%;
+ width: 30%;
+ height: 450px;
+ position: relative;
+ left: 1%;
}
.alarmTypeTotal {
- //background-color: antiquewhite;
- width: 10%;
- height: 100px;
- position: relative;
- left: 9.37%;
- top: -58%;
+ //background-color: antiquewhite;
+ width: 10%;
+ height: 100px;
+ position: relative;
+ left: 9.37%;
+ top: -58%;
}
.numAlarmType {
- text-align: center;
- position: relative;
- top: 15%;
+ text-align: center;
+ position: relative;
+ top: 15%;
}
.numAlarmType span {
- font-size: 28px;
- color: #4B4B4B;
+ font-size: 28px;
+ color: #4B4B4B;
}
.textAlarmType {
- text-align: center;
- position: relative;
- top: 20%;
+ text-align: center;
+ position: relative;
+ top: 20%;
}
.textAlarmType span {
- font-size: 14px;
- color: #757575;
+ font-size: 14px;
+ color: #757575;
}
.alarmTypeProStatis {
- //background-color: aqua;
- width: 50%;
- height: 100%;
- position: relative;
- top: -100%;
- left: 30%;
+ //background-color: aqua;
+ width: 50%;
+ height: 100%;
+ position: relative;
+ top: -100%;
+ left: 30%;
}
.alarmTypeProStatis .el-row {
- position: relative;
- top: 24px;
+ position: relative;
+ top: 24px;
}
//预警设备类型占比
.alarmEquipmentPro {
- background-color: #ffffff;
- width: 98.6%;
- height: 450px;
- position: relative;
- left: 0.8%;
- top: 11%;
+ background-color: #ffffff;
+ width: 98.6%;
+ height: 450px;
+ position: relative;
+ left: 0.8%;
+ top: 11%;
}
#alarmEquipmentProEcharts {
- width: 30%;
- height: 450px;
- position: relative;
- left: 1%;
+ width: 30%;
+ height: 450px;
+ position: relative;
+ left: 1%;
}
.alarmEquipmentProStatis {
- //background-color: aqua;
- width: 35%;
- height: 100%;
- position: relative;
- left: 30%;
- top: -100%;
+ //background-color: aqua;
+ width: 35%;
+ height: 100%;
+ position: relative;
+ left: 30%;
+ top: -100%;
}
.alarmEquipmentProStatis .avue-crud {
- position: relative;
- top: 20%;
+ position: relative;
+ top: 20%;
}
.alarmEquipmentProStatis .avue-crud__menu {
- display: none;
+ display: none;
}
//确认时间占比
.confirmTimePro {
- background-color: #ffffff;
- width: 61.6%;
- height: 450px;
- position: relative;
- left: 0.8%;
- top: 11.8%;
+ display: none;
+ background-color: #ffffff;
+ width: 61.6%;
+ height: 450px;
+ position: relative;
+ left: 0.8%;
+ top: 11.8%;
}
#confirmTimeProEcharts {
- width: 40%;
- height: 450px;
- position: relative;
- left: 1%;
+ width: 40%;
+ height: 450px;
+ position: relative;
+ left: 1%;
}
.confirmTimeTotal {
- //background-color: antiquewhite;
- width: 12%;
- height: 100px;
- position: relative;
- left: 12.87%;
- top: -58%;
+ //background-color: antiquewhite;
+ width: 12%;
+ height: 100px;
+ position: relative;
+ left: 12.87%;
+ top: -58%;
}
.numConfirmTime {
- text-align: center;
- position: relative;
- top: 15%;
+ text-align: center;
+ position: relative;
+ top: 15%;
}
.numConfirmTime span {
- font-size: 28px;
- color: #4B4B4B;
+ font-size: 28px;
+ color: #4B4B4B;
}
.textConfirmTime {
- text-align: center;
- position: relative;
- top: 20%;
+ text-align: center;
+ position: relative;
+ top: 20%;
}
.textConfirmTime span {
- font-size: 14px;
- color: #757575;
+ font-size: 14px;
+ color: #757575;
}
.confirmTimeProStatis {
- //background-color: aqua;
- width: 60%;
- height: 100%;
- position: relative;
- top: -100%;
- left: 40%;
+ //background-color: aqua;
+ width: 60%;
+ height: 100%;
+ position: relative;
+ top: -100%;
+ left: 40%;
}
.confirmTimeProStatis .el-row {
- position: relative;
- top: 24px;
+ position: relative;
+ top: 24px;
}
//预警平均确认速度排行
.confirmAverageSpeed {
- background-color: #ffffff;
- width: 35%;
- height: 450px;
- position: relative;
- top: -40.5%;
- left: 64.4%;
+ display: none;
+ background-color: #ffffff;
+ width: 35%;
+ height: 450px;
+ position: relative;
+ top: -40.5%;
+ left: 64.4%;
}
.confirmAverageSpeedTitle span {
- position: relative;
- left: 5%;
- top: 20px;
+ position: relative;
+ left: 5%;
+ top: 20px;
}
.confirmAverageSpeed .avue-crud {
- width: 90%;
- position: absolute;
- top: 12%;
- left: 4%;
+ width: 90%;
+ position: relative;
+ top: 10%;
}
.confirmAverageSpeed .avue-crud__menu {
- display: none;
+ display: none;
}
//预警时间分布
.alarmTimeDis {
- background-color: #ffffff;
- width: 98.6%;
- height: 450px;
- position: relative;
- left: 0.8%;
- top: -38%;
+ background-color: #ffffff;
+ width: 98.6%;
+ height: 450px;
+ position: relative;
+ left: 0.8%;
+ top: 12%;
}
#alarmTimeDisEchars {
- width: 100%;
- height: 450px;
- position: relative;
- left: 1%;
+ width: 100%;
+ height: 450px;
+ position: relative;
+ left: 1%;
}
//底部
.low {
- background-color: F0F2F5;
- width: 100%;
- height: 50px;
- position: relative;
- left: 0.8%;
- top: -38%;
+ background-color: F0F2F5;
+ width: 100%;
+ height: 50px;
+ position: relative;
+ left: 0.8%;
+ top: 9%;
}
.el-button .btn-color {
- color: rgb(255, 255, 255);
- background-color: #29C093;
- border-color: #29C093;
+ color: rgb(255, 255, 255);
+ background-color: #29C093 !important;
+ border-color: #29C093 !important;
}
// .el-icon-bell:before {
@@ -334,4 +335,4 @@
// //background-color: #F34A4A;
// display: inline-block;
// content: '';
-// }
+// }
\ No newline at end of file
diff --git a/src/views/animalHeat/animalHeat.vue b/src/views/animalHeat/animalHeat.vue
index 1df821a..f0d9435 100644
--- a/src/views/animalHeat/animalHeat.vue
+++ b/src/views/animalHeat/animalHeat.vue
@@ -12,6 +12,7 @@
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
+ @row-click="rowClick"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@@ -40,18 +41,33 @@
</el-button>
</template>
</avue-crud>
+
+ <template>
+ <div>
+ <el-image-viewer
+ class="img"
+ v-if="showViewer"
+ :on-close="closeViewer"
+ :url-list="[imgUrl]" />
+ </div>
+ </template>
</basic-container>
</template>
<script>
import {getList} from "@/api/animalHeat/animalHeat";
import {mapGetters} from "vuex";
+ import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
+ name:'index',
+ components: { ElImageViewer },
data() {
return {
form: {},
query: {},
+ showViewer:false,
+ imgUrl:'',
loading: true,
page: {
pageSize: 10,
@@ -96,21 +112,15 @@
label: "体温",
prop: "tempRed"
},
- {
- label: '图片',
- prop: 'picture',
- type: 'upload',
- width: 300,
- listType: 'picture-img',
- span: 24,
- propsHttp: {
- res: 'data'
- },
- canvasOption: {
- text: 'avue',
- ratio: 0.1
- }
- },
+ // {
+ // label: '图片',
+ // prop: 'picture',
+ // type: 'img',
+ // alone:false,
+ // width: 300,
+ // //listType: 'picture-img',
+ // span: 24
+ // },
{
label: "检测时间",
prop: "dateTime",
@@ -213,6 +223,17 @@
}
}
},
+ //图片行点击事件
+ rowClick(row){
+ var that = this;
+ that.imgUrl = row.picture;
+ console.log(that.imgUrl,111);
+ this.showViewer = true
+ },
+ // 关闭查看器
+ closeViewer() {
+ this.showViewer = false
+ },
getAnimalData(e) {
this.activeClass=e;
//type 0:本日 1：本月 2：本年 status: 0:正常 1：异常
@@ -295,10 +316,16 @@
}
};
</script>
-<style scoped>
+<style lang="scss">
.el-button.btn-color {
color: rgb(255, 255, 255);
background-color: rgb(64, 158, 255);
border-color: rgb(64, 158, 255);
}
+
+ .img {
+ .el-icon-circle-close {
+ color: white;
+ }
+ }
</style>
diff --git a/src/views/system/cs.vue b/src/views/system/cs.vue
index aef990b..d9db9e3 100644
--- a/src/views/system/cs.vue
+++ b/src/views/system/cs.vue
@@ -531,8 +531,10 @@
watch:{
'form.map':{// form是表单或者表格绑定的数据集，v-model='form'
handler(val){
- this.form.jd = val.latitude
- this.form.wd = val.longitude
+ if (val!=undefined) {
+ this.form.jd = val.latitude
+ this.form.wd = val.longitude
+ }
},
immediate: true
}
--
Gitblit v1.9.3