From 8c6cf205affbbc8ada74f00a7ca25ebca867e9ed Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 27 Sep 2021 11:44:44 +0800
Subject: [PATCH] 图表颜色
---
src/views/securityGuard/securityGuardDetail.vue | 507 ++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 451 insertions(+), 56 deletions(-)
diff --git a/src/views/securityGuard/securityGuardDetail.vue b/src/views/securityGuard/securityGuardDetail.vue
index 1478c21..82c3bd5 100644
--- a/src/views/securityGuard/securityGuardDetail.vue
+++ b/src/views/securityGuard/securityGuardDetail.vue
@@ -2,8 +2,7 @@
<div class="dispatch">
<avue-tabs :option="optionTABS" @change="handleChangeTABS"></avue-tabs>
<span v-if="typeTABS.prop === 'tab1'">
- <avue-form ref="form" v-model="obj0" :option="option0">
- </avue-form>
+ <avue-form ref="form" v-model="obj0" :option="option0"> </avue-form>
</span>
<span v-else-if="typeTABS.prop === 'tab2'">
<avue-crud
@@ -11,7 +10,12 @@
:data="data1"
:page.sync="page1"
:table-loading="loading1"
- @refresh-change="refreshChange1"
+ @row-save="rowSave1"
+ @row-update="rowUpdate1"
+ @row-del="rowDel1"
+ @current-change="CurrentChange1"
+ @refresh-change="refreshchange1"
+ @size-change="SizeChange1"
>
</avue-crud>
</span>
@@ -20,26 +24,118 @@
:option="option2"
:data="data2"
:page.sync="page2"
+ @row-save="rowSave2"
+ @row-update="rowUpdate2"
+ @row-del="rowDel2"
:table-loading="loading2"
- @refresh-change="refreshChange2"
+ @current-change="CurrentChange2"
+ @size-change="SizeChange2"
+ @refresh-change="refreshchange2"
>
</avue-crud>
+ </span>
+ <span v-else-if="typeTABS.prop === 'tab4'">
+ <!-- 保安员证 -->
+ <div class="baoanzheng" id="baoanzheng" v-if="hold == 1">
+ <div class="baz-main">
+ <div class="baz-m-body" ref="baoanzheng">
+ <div class="bmb-heard">保安员证</div>
+ <div class="img">
+ <div v-if="!obj0.avatar">暂无照片</div>
+ <img :src="obj0.avatar" alt="" v-else />
+ </div>
+ <div class="imgs">
+ <div v-if="erweima == ''">暂无二维码</div>
+ <img :src="erweima" alt="" v-else />
+ <!-- <img src="/img/register/ewm.png" alt="" /> -->
+ <!-- logoSrc="/img/register/ewm.png" -->
+ <!-- <vue-qr :text="goToUrl" :size="200"></vue-qr> -->
+ </div>
+
+ <!-- <img src="/img/mock/card/card-1.jpg" alt="" /> -->
+ <div class="bmb-b">
+ 姓名：<span class="bmb-b-s">{{ obj0.realName }}</span>
+ </div>
+ <div class="bmb-b">
+ 性别：<span class="bmb-b-s">{{ obj0.$sex }}</span>
+ </div>
+ <div class="bmb-b">
+ 编号：<span class="bmb-b-s">{{ obj0.securitynumber }}</span>
+ </div>
+ <div class="bmb-b">
+ 发证机关：<span class="bmb-b-s">南昌市公安局</span>
+ </div>
+ <div class="bmb-b">
+ 发证日期：<span class="bmb-b-s">{{
+ obj0.paperTime.slice(0, 10)
+ }}</span>
+ </div>
+ <!-- <div class="bmb-b">
+ 发证机关：<span class="bmb-b-s" style="margin-right: 15px"
+ >南昌市公安局</span
+ >发证日期：<span class="bmb-b-s">{{
+ obj0.createTime.slice(0, 10)
+ }}</span>
+ </div> -->
+ </div>
+ <span slot="footer" class="dialog-footer no-print PrintBut">
+ <el-button type="primary" @click="Print">打 印</el-button>
+ <!-- <el-button type="primary" @click="closePrint"> 取 消 </el-button> -->
+ </span>
+ </div>
+ </div>
+ <div v-else style="width: 100%; text-align: center; padding-top: 20px">
+ 无保安证
+ </div>
+ </span>
+ <span v-else-if="typeTABS.prop === 'tab5'">
+ <securityCertificate :data="obj0" v-if="hold == 1"></securityCertificate>
+ <div v-else style="width: 100%; text-align: center; padding-top: 20px">
+ 无保安证书
+ </div>
</span>
</div>
</template>
<script>
-import { securityBaseInfoColumn, practitionersColumn,trackRecordColumn } from "./data";
-import {getUserPractitionersInfo} from "@/api/system/user";
+import {
+ securityBaseInfoColumn,
+ practitionersColumn,
+ trackRecordColumn,
+} from "./data";
+import {
+ addExperience,
+ updateExperience,
+ getExperienceDetail,
+ experienceRemove,
+ getExperienceList,
+} from "@/api/experience/experience";
+
+import {
+ getPerformanceInfo,
+ add,
+ update,
+ getpage,
+ remove,
+ getER,
+} from "@/api/performance/performance";
+
+// import vueQr from "vue-qr";
+import securityCertificate from "./securityCertificate.vue";
+
export default {
+ components: {
+ securityCertificate: securityCertificate,
+ },
data() {
return {
typeTABS: {}, //标签页
+ row: {}, //数据
optionTABS: {
column: [
{
// icon: "el-icon-info",
- label: "保安员入职登记基本信息",
+ label: "保安员基本信息",
prop: "tab1",
},
{
@@ -52,9 +148,21 @@
label: "现实表现记录",
prop: "tab3",
},
+ {
+ // icon: "el-icon-info",
+ label: "保安员证",
+ prop: "tab4",
+ },
+ {
+ // icon: "el-icon-info",
+ label: "上岗证",
+ prop: "tab5",
+ },
],
},
- cardid: "",
+ current: 1,
+ size: 10,
+ cardid: "",
name: "",
dispatcherCompany: "",
id: "",
@@ -64,7 +172,7 @@
option0: {
emptyBtn: false,
submitBtn: false,
- labelWidth:"110",
+ labelWidth: "110",
gutter: 30,
column: securityBaseInfoColumn,
},
@@ -82,42 +190,46 @@
total: 0,
},
query1: {},
+ query2: {},
data1: [],
data2: [],
option1: {
- card: false,
- menu:false,
- addBtn:false,
- height:'auto',
- widtd:"auto",
+ card: true,
+ menu: true,
+ height: "auto",
+ widtd: "auto",
calcHeight: 54,
- border: false,
- stripe:true,
+ border: true, //liu
+ stripe: true,
tip: false,
index: true,
dialogClickModal: false,
- headerAlign: 'center',
- align: 'center',
+ headerAlign: "center",
+ align: "center",
column: practitionersColumn,
},
option2: {
- card: false,
- menu:false,
- addBtn:false,
- height:'auto',
- widtd:"auto",
+ card: true,
+ menu: true,
+ height: "auto",
+ widtd: "auto",
calcHeight: 54,
- border: false,
- stripe:true,
+ border: true, //liu
+ stripe: true,
tip: false,
index: true,
dialogClickModal: false,
- headerAlign: 'center',
- align: 'center',
+ headerAlign: "center",
+ align: "center",
column: trackRecordColumn,
},
+ erweima: "",
+ hold: "",
};
},
+ // components: {
+ // vueQr,
+ // },
computed: {
ids1() {
let ids1 = [];
@@ -126,53 +238,238 @@
});
return ids1.join(",");
},
+ // goToUrl() {
+ // var url =
+ // "http://s16s652780.51mypc.cn/securityInfo/securityInfo.html?securityNumber=" +
+ // this.obj0.securitynumber;
+ // return url;
+ // },
},
methods: {
+ Print() {
+ var printDom = document.getElementById("baoanzheng");
+ printDom.style.position = "fixed";
+ printDom.style.left = "-10%";
+ printDom.style.width = "120%";
+ printDom.style.height = "100%";
+ this.$Print(this.$refs.baoanzheng);
+ printDom.style.position = "relative";
+ printDom.style.left = "0";
+ printDom.style.width = "100%";
+ printDom.style.height = "calc(100% - 100px)";
+ },
handleChangeTABS(column) {
this.typeTABS = column;
if (column.prop == "tab1") {
this.loading1 = false;
} else if (column.prop == "tab2") {
- //查询当前保安员的从业记录信息
- this.getPractitionersPageInfo();
- this.loading1 = false;
+ //查询当前保安员的从业记录信息
+ this.getPractitionersPageInfo(this.page1);
+ this.loading1 = false;
} else if (column.prop == "tab3") {
- //查询当前保安员的现实表现记录
- this.getPractitionersPageInfo();
- this.loading2 = false;
+ //查询当前保安员的现实表现记录
+ this.getPerformancePageInfo(this.page2);
+ this.loading2 = false;
+ } else if (column.prop == "tab4") {
+ getER(this.obj0.securitynumber).then((res) => {
+ this.erweima = res.data;
+ // console.log(res.data);
+ });
}
},
+ refreshchange1() {
+ this.getPractitionersPageInfo(this.page1, this.query1);
+ },
//查询当前保安员的从业记录信息
- getPractitionersPageInfo(){
- var that = this;
- //获取用户从业信息
- getUserPractitionersInfo(this.cardid).then(res1 =>{
- that.data1 = res1.data.data;
+ getPractitionersPageInfo(page, param = {}) {
+ param["securityid"] = this.id;
+ //获取用户从业信息
+ // console.log(this.id, "cid");
+
+ getExperienceList(page.currentPage, page.pageSize, param).then((res1) => {
+ const data = res1.data.data;
+ this.page1.total = data.total;
+ this.data1 = data.records;
+ this.loading1 = false;
+ });
+ },
+ refreshchange2() {
+ this.getPerformancePageInfo(this.page2, this.query2);
+ },
+ //查询当前保安员的现实表现记录信息
+ getPerformancePageInfo(page, param = {}) {
+ //获取现实表现信息
+ param["securityid"] = this.id;
+ getpage(page.currentPage, page.pageSize, param).then((res2) => {
+ const data = res2.data.data;
+ this.page2.total = data.total;
+ this.data2 = data.records;
+ console.log(this.data2, 1);
+ this.loading2 = false;
+ });
+ },
+ CurrentChange1(currentPage) {
+ this.page1.currentPage = currentPage;
+ this.refreshchange1();
+ },
+ SizeChange1(pageSize) {
+ this.page1.pageSize = pageSize;
+ this.refreshchange1();
+ },
+ CurrentChange2(currentPage) {
+ this.page2.currentPage = currentPage;
+ this.refreshchange2();
+ },
+ SizeChange2(pageSize) {
+ this.page2.pageSize = pageSize;
+ this.refreshchange2();
+ },
+ // refreshChange1() {
+ // this.getPractitionersPageInfo();
+ // },
+ // refreshChange2() {
+ // this.getPerformancePageInfo();
+ // },
+
+ rowSave2(form, done, loading) {
+ form.securityid = this.id;
+ add(form).then(
+ (res) => {
+ this.getPerformancePageInfo(this.page2);
+ this.$message({
+ type: "success",
+ message: "操作成功!",
+ });
+ done();
+ },
+ (error) => {
+ window.console.log(error);
+ loading();
+ }
+ );
+ // }
+ },
+ //从业记录新增
+ rowSave1(form, done, loading) {
+ form.securityid = this.id;
+ addExperience(form).then(
+ (res) => {
+ this.getPractitionersPageInfo(this.page1);
+ this.$message({
+ type: "success",
+ message: "操作成功!",
+ });
+ done();
+ },
+ (error) => {
+ window.console.log(error);
+ loading();
+ }
+ );
+ // }
+ },
+ rowUpdate2(row, index, done, loading) {
+ row.securityid = this.id;
+ update(row).then(
+ () => {
+ this.getPerformancePageInfo(this.page2);
+ this.$message({
+ type: "success",
+ message: "操作成功!",
+ });
+ done();
+ },
+ (error) => {
+ window.console.log(error);
+ loading();
+ }
+ );
+ },
+ rowUpdate1(row, index, done, loading) {
+ row.securityid = this.id;
+ updateExperience(row).then(
+ () => {
+ this.getPractitionersPageInfo(this.page1);
+ this.$message({
+ type: "success",
+ message: "操作成功!",
+ });
+ done();
+ },
+ (error) => {
+ window.console.log(error);
+ loading();
+ }
+ );
+ },
+ rowDel2(row) {
+ this.$confirm("确定将选择数据删除?", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning",
+ })
+ .then(() => {
+ return remove(row.id);
})
+ .then(() => {
+ this.getPerformancePageInfo(this.page2);
+ this.$message({
+ type: "success",
+ message: "操作成功!",
+ });
+ });
},
- currentChange1(val) {
- this.page1.currentPage = val;
- this.onLoad1(this.page1, this.query1);
+ rowDel1(row) {
+ this.$confirm("确定将选择数据删除?", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning",
+ })
+ .then(() => {
+ return experienceRemove(row.id);
+ })
+ .then(() => {
+ this.getPractitionersPageInfo(this.page1);
+ this.$message({
+ type: "success",
+ message: "操作成功!",
+ });
+ });
},
- //
- onLoad1(page, params = {}) {
- this.loading1 = true;
- params["dispatcherUnitId"] = this.id;
- console.log(params, "get");
- }
},
mounted() {
this.typeTABS = this.optionTABS.column[0];
- if (this.$route.query.row) {
- var row = this.$route.query.row;
+ var data = JSON.parse(this.$route.query.row);
+ // console.log(data);
+ if (data) {
+ var row = data;
+ // var row = this.$route.query.row;
for (var k in row) {
this.obj0[k] = row[k];
}
this.obj0.title = "";
- this.cardid = row.cardid;
+ this.cardid = row.id;
this.name = row.name;
this.dispatcherCompany = row.dispatcherCompany;
this.id = row.id;
+ this.hold = row.hold;
+ console.log(this.obj0);
+ }
+
+ var flag = false,
+ i = 0,
+ ind = null;
+ this.$store.state.tags.tagList.forEach((item, index) => {
+ if (item.label == "保安员详情") {
+ if (flag == false) {
+ ind = index;
+ flag = true;
+ }
+ i++;
+ }
+ });
+ if (i > 1) {
+ this.$store.state.tags.tagList.splice(ind, 1);
}
},
};
@@ -185,12 +482,110 @@
// border: 1px solid #000;
box-sizing: border-box;
}
-.el-card__body {
- padding-bottom: 5px !important;
+// .el-card__body {
+// padding-bottom: 5px !important;
+// }
+// .avue-crud__tip,
+// .el-tag,
+// .el-tag--light {
+// padding: 0 !important;
+// }
+
+.baoanzheng {
+ // position: fixed;
+ position: relative;
+ // top: 0;
+ top: 0;
+ // left: -10%;
+ left: 0;
+ // height: 0;
+ width: 100%;
+ height: calc(100% - 100px);
+ // background-color: rgba(0, 0, 0, 0.5);
+ background-color: #fff;
+ z-index: 9000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
-.avue-crud__tip,
-.el-tag,
-.el-tag--light {
- padding: 0 !important;
+.baz-main {
+ position: relative;
+ top: 15px;
+ // width: 441px;
+ // height: 358px;
+ width: 750px;
+ height: 550px;
+ // background-color: #004ca7;
+ background-color: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+.baz-m-body {
+ width: 750px;
+ height: 550px;
+ background-image: url("/img/register/bazbj.png");
+ background-size: 100% 100%;
+ .bmb-heard {
+ font-size: 4rem;
+ width: 100%;
+ text-align: center;
+ letter-spacing: 1.4rem;
+ margin-bottom: 40px;
+ padding-left: 10px;
+ position: relative;
+ top: 20px;
+ }
+ .img {
+ width: 152px;
+ height: 205px;
+ border-radius: 10px;
+ position: absolute;
+ // border: 1px solid rgba($color: #888888, $alpha: 0.5);
+ top: 110px;
+ right: 80px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .imgs {
+ width: 110px;
+ height: 110px;
+ border-radius: 10px;
+ position: absolute;
+ // border: 1px solid rgba($color: #888888, $alpha: 0.5);
+ top: 330px;
+ right: 103px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .bmb-b {
+ padding-left: 20px;
+ box-sizing: border-box;
+ height: 3.9rem;
+ margin-left: 3rem;
+ width: 100%;
+ font-size: 2rem;
+ font-weight: 300;
+ .bmb-b-s {
+ display: inline-block;
+ width: 20rem;
+ font-size: 2rem;
+ font-weight: 300;
+ }
+ }
+}
+.PrintBut {
+ margin-top: 15px;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3