Skip to content

X
xxx_phase2_web
Commit 9837e6fb authored by 高飞's avatar 高飞
Browse files
Options

人物机构添加经济社会类别

parent 067fcec6
Hide whitespace changes
Inline Side-by-side
Showing with 2945 additions and 2941 deletions
src/view/dfzy/dfzyjgk.vue
View file @ 9837e6fb
<template>
<div id="dfzyjgk">
<div class="rwk-right">
<div class="top-div">
<el-row
:gutter="24"
style="
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
"
>
<el-col :span="6">
<div class="div-type">
<div class="top-type-span">
<span>对象地区：</span>
</div>
<div class="top-type-div">
<div
v-for="item in this.type_arr_country"
@click="dq_fun(item)"
:class="{
'active-CountryRegion': typeCountryRegion.value == item.value,
}"
>
{{ item.name }}
</div>
</div>
</div>
<div class="div-type">
<div class="top-type-span">
<span>类型：</span>
</div>
<div class="top-type-div">
<div
v-for="item in this.type_arr"
@click="MilitaryPolitics_fun(item)"
:class="{
'active-MilitaryPolitics':
typeMilitaryPolitics.value == item.value,
}"
>
{{ item.name }}
</div>
</div>
</div>
</el-col>
<div class="line-s"></div>
<el-col :span="5" class="tm-div">
<SelectTree :value="value_select" filterable :data="tree_data" @NodeClick="NodeClick"/>
</el-col>
<!-- <div class="line-s"></div> -->
<!-- <el-col :span="5" class="jzxs">
<div
:class="['rk-jg-div', type_rw_jg == 0 ? 'active-tb' : '']"
@click="qh_type_rwjg(0)"
>
<div class="tb-div"></div>
<div class="tb-span">
<span>人物库</span>
</div>
</div>
<div
:class="['rk-jg-div', type_rw_jg == 1 ? 'active-tb' : '']"
@click="qh_type_rwjg(1)"
>
<div class="tb-div"></div>
<div class="tb-span">
<span>机构库</span>
</div>
</div>
</el-col> -->
<div class="line-s"></div>
<el-col
:span="5"
style="position: relative; padding: 0px"
class="serch-div"
>
<el-input placeholder="请输入番号或简称" v-model="input3"></el-input>
<el-button
type="primary"
@click="query_qb(1)"
style="
position: absolute;
right: 8px;
top: 4px;
line-height: 4px;
border-radius: 20px;
height: 30px;
background: linear-gradient(to right, #89f7fe, #66a6ff);
"
>搜索</el-button
>
</el-col>
<!-- <div class="line-s"></div> -->
<el-col :span="2" style="max-width: calc(9% - 31px)" class="pub-col">
<el-button
type="primary"
@click="query_zhcx()"
style="
line-height: 4px;
border-radius: 20px;
height: 30px;
background: linear-gradient(to right, #89f7fe, #66a6ff);
"
>高级搜索</el-button
>
</el-col>
</el-row>
</div>
<div class="bottom-div">
<template v-for="(item, index) in rwkxx">
<div
class="rwxx-div animate__animated bk-bmdx-animation"
:class="[
index % 4 == 0
? 'animate__lightSpeedInLeft'
: index % 4 == 1
? 'animate__zoomIn'
: index % 4 == 2
? 'animate__zoomIn'
: 'animate__lightSpeedInRight',
]"
@click="rwxq(item, index)"
>
<div :class="['tilts', tab_actives == index ? 'table-active' : '']">
<!-- <div class="zyx">
<div>
<span
:style="{
background:
item.extraProperty['重要性'] == '重要'
? '#ff4444'
: '#ff9e44',
}"
>{{ item.extraProperty["重要性"] }}</span
>
</div>
</div>
<div class="zyx1">
<div>
<span>{{ item.class_qf == 1 ? "本机构" : "" }}</span>
</div>
</div> -->
<div class="img-div">
<img class="tx-bg" :src="item.info.avatarUrl==null?'':item.info.avatarUrl" :onerror="errimg" />
</div>
<div class="text-div">
<div class="name-div">
<div class="top-span">
{{ item.info.jgfh.value }}
</div>
<div class="bottom-span">
{{ item.info.jgjc.value }}
</div>
</div>
<!-- <div class="xq-div">
<div class="tag-group">
<el-tag
v-for="(items, index) in item.labels"
v-if="item.labels != ''"
:key="index"
:type="tags[index % tags.length].type"
effect="dark"
>
{{ items }}
</el-tag>
</div>
</div> -->
</div>
</div>
</div>
</template>
</div>
<div class="page-div">
<el-pagination
class="myPagination"
background
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
:page-size="pageInfo.pageSize"
:current-page="pageInfo.current_page"
:total="pageInfo.total"
@current-change="handleCurrentChange_lb"
:page-sizes="[10, 20, 50, 100]"
>
</el-pagination>
</div>
<el-collapse-transition>
<div class="gjcx-div" v-show="show">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<label>机构番号</label>
<el-input
v-model="formInline.name"
placeholder="机构番号"
></el-input>
</el-form-item>
<el-form-item>
<label>机构简称</label>
<el-input
v-model="formInline.jc"
placeholder="机构简称"
></el-input>
</el-form-item>
<el-form-item>
<label>国家地区</label>
<el-input
v-model="formInline.gj"
placeholder="国家地区"
></el-input>
</el-form-item>
<el-form-item>
<label>机构简介</label>
<el-input
v-model="formInline.jgjj"
placeholder="机构简介"
></el-input>
</el-form-item>
<el-form-item>
<label>标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;签</label>
<el-input v-model="formInline.bq" placeholder="标签"></el-input>
</el-form-item>
<el-form-item>
<label>重&nbsp;&nbsp;要&nbsp;&nbsp;性</label>
<el-input
v-model="formInline.zyx"
placeholder="重要性"
></el-input>
</el-form-item>
<el-form-item>
<div class="button-discusss" @click="zhcx(1)">查询</div>
<div class="button-discusss" @click="gb_zhcx()">关闭</div>
</el-form-item>
</el-form>
</div>
</el-collapse-transition>
</div>
</div>
</template>
<script>
import {
get,
post,
fileUpload,
delete_util,
getCookie,
delCookie,
} from "../../util/http_util";
import jh_bg from "../../assets/img/dfzy/zwtp.png";
import XLSX from "xlsx";
import { uuid } from "../../util/data_util";
import VanillaTilt from "vanilla-tilt";
import SelectTree from "./seleteTree.vue"
import "animate.css";
// import navs from "./jg_xq.vue";
import { imgUrl } from "../../api/publicUrl";
export default {
// components: { navs },
components: { SelectTree },
data() {
return {
errimg: "this.src='" + jh_bg + "'",
// currentRole_jg_data: "navs",
clientDetails_jg_data: {},
xzzd: [],
wzmk_data: [],
option_rwmb: [],
option_value_rwmb: "",
is_true: true,
obj_name: "",
fileList: [],
file_types: ".XLSX",
option_rwmb_pl: [],
// folder: "dfzy-rwk", //头像上传文件夹
fl_type: 2, //查询机构库下面的模板,机构库为2,4,6
fileList_head: [],
file_head: {},
file_types_head: ".PNG,.JPG,.JPEG",
mb_table_s: [],
arr_mouldTables: [],
arr_mouldTables_comment: [],
filterText: "",
tree_data: [],
data_tree_node: "",
name_edit: "",
dialogVisible_edit: false,
obj_jgxx: {},
input3: "",
pageInfo: {
total: 0,
pageSize: 10,
current_page: 1,
},
rwkxx: [],
jgName: "",
jgName_public: 2,//判断当前是内网机构还是外网机构
tags: [
{ type: "" },
{ type: "success" },
{ type: "info" },
{ type: "warning" },
{ type: "danger" },
],
type_qf: 1,
formInline: {
name: "",
jc: "",
gj: "",
jgjj: "",
bq: "",
zyx: "",
},
show: false,
type_arr_country: [
{ name: "美国", value: "1" },
{ name: "英国", value: "2" },
{ name: "日本", value: "3" },
{ name: "台湾", value: "4" },
],
type_arr: [
{ name: "军事", value: "1" },
{ name: "政治", value: "2" },
],
type_rw_jg: 0,
typeCountryRegion: {value:'',name:''},
typeMilitaryPolitics: {value:'',name:''},
tab_actives: "-1", //表格切换
categoryId: null,
valueTitle: "",
value_select:4,
};
},
methods: {
query_zhcx() {
this.show = !this.show;
},
zhcx(pageNum) {
this.input3 = "";
this.type_qf = 3;
this.typeCountryRegion = {value:'',name:''};
this.typeMilitaryPolitics = {value:'',name:''};
this.pageInfo.current_page = pageNum;
let pageSize = this.pageInfo.pageSize;
if(this.jgName_public==1){
this.value_select = 1
}else{
this.value_select = 4
}
post(
`api/rest/mongo/organization/queryOrganization?pageNum=${pageNum}&pageSize=${pageSize}`,
{
module: this.jgName_public == 1 ? "DF" : "DFWW",
combinationSearch:{
jgfh: this.formInline.name,
jgjc: this.formInline.jc,
gjdq: this.formInline.gj,
jgjj: this.formInline.jgjj,
bq: this.formInline.bq,
zyx: this.formInline.zyx,
}
}
).then((res) => {
this.rwkxx = [];
setTimeout(() => {
this.pageInfo.total = 0;
if (res.records.length > 0) {
res.records.forEach((item) => {
this.rwkxx.push(item);
});
this.pageInfo.total = res.total;
}
}, 500);
});
},
gb_zhcx() {
this.show = false;
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//查询tree数据
query_tree_jg() {
this.tree_data = [];
get("api/rest/mongo/organization/queryTree?module=" + 'DF')
.then((res) => {
let arr = [
{
id: 1,
label: "机构列表",
level: 0,
children: res,
},
];
this.tree_data = this.initData(arr, 1);
get(
"api/rest/mongo/organization/queryTree?module=" +
"DFWW"
)
.then((res1) => {
let arr1 = {
id: 4,
label: "外网机构列表",
level: 0,
type: 2,
children: this.initData(res1, 2),
};
this.tree_data.push(arr1);
this.value_select = 4;
})
.catch((err) => {
this.$message.warning(err.message);
});
})
.then((res) => {
this.handleCurrentChange_lb(1);
})
.catch((err) => {
this.$message.warning(err.message);
});
},
query_tree() {
get("api/rest/resource/queryCharacterMould?type=" + this.fl_type)
.then((datas) => {
this.option_rwmb = [];
this.option_rwmb_pl = [];
if (datas.length > 0) {
datas.forEach((item) => {
this.option_rwmb.push({ value: item.id, label: item.name });
this.option_rwmb_pl.push({ value: item.id, label: item.name });
});
}
})
.catch((err) => {
this.$message.warning(err.message);
});
},
rwxq(item, index) {
// this.tab_actives = index;
this.$router.push({
name: "敌方资源机构详情" + this.$route.meta.type_name,
params: { key: item, types: true },
});
},
handleSizeChange(val) {
this.pageInfo.pageSize = val;
this.pageInfo.current_page = 1;
this.handleCurrentChange_lb(1);
},
handleCurrentChange_lb(pageNum) {
if (this.type_qf == 1) {
this.query(pageNum);
} else if (this.type_qf == 2) {
this.query_qb(pageNum);
} else {
this.zhcx(pageNum);
}
},
query_qb(pageNum) {
this.formInline = {
name: "",
jc: "",
gj: "",
jgjj: "",
bq: "",
};
this.type_qf = 2;
this.pageInfo.current_page = pageNum;
let pageSize = this.pageInfo.pageSize;
let name = this.input3;
if(this.jgName_public==1){
this.value_select = 1
}else{
this.value_select = 4
}
post(
`api/rest/mongo/organization/queryOrganization?pageNum=${pageNum}&pageSize=${pageSize}`,
{
module: this.jgName_public == 1 ? "DF" : "DFWW",
name:name,
type:this.typeMilitaryPolitics.name==''?null:this.typeMilitaryPolitics.name,
nation:this.typeCountryRegion.name==''?null:this.typeCountryRegion.name,
}
).then((res) => {
this.rwkxx = [];
setTimeout(() => {
this.pageInfo.total = 0;
if (res.records.length > 0) {
res.records.forEach((item) => {
this.rwkxx.push(item);
});
this.pageInfo.total = res.total;
}
});
}, 500);
},
query(pageNum) {//查询当前机构下的子机构
this.formInline = {
name: "",
jc: "",
gj: "",
jgjj: "",
bq: "",
};
this.input3 = '';
this.pageInfo.current_page = pageNum;
let pageSize = this.pageInfo.pageSize;
let ids = "";
if (this.jgName != "1" && this.jgName != "" && this.jgName != "4") {
ids = "&id=" + this.jgName;
}
let param_url = "";
if (this.jgName_public == 1) {
param_url = "api/rest/mongo/organization/queryChildren?pageNum=";
} else if (this.jgName_public == 2) {
param_url = "api/rest/mongo/organization/queryOnlineChildren?pageNum=";
}
get(
param_url +
pageNum +
"&pageSize=" +
pageSize +
"&module=" +
(this.jgName_public == "1" ? 'DF' : "DFWW") +
ids
)
.then((res) => {
this.rwkxx = [];
setTimeout(() => {
this.pageInfo.total = 0;
if (res.records.length > 0) {
res.records.forEach((item, index) => {
// if (
// pageNum == 1 &&
// this.jgName != "1" &&
// this.jgName != "" &&
// this.jgName != "4" &&
// index == 0
// ) {
// item.organization["class_qf"] = 1;
// } else {
// item.organization["class_qf"] = 2;
// }
this.rwkxx.push(item);
});
this.pageInfo.total = res.total;
}
}, 500);
})
.catch((err) => {
this.$message.warning(err.message);
});
},
initData(orgList, type) {
// 第一种
if (orgList.length) {
for (var i = 0; i < orgList.length; i++) {
orgList[i].type = type;
if (orgList[i].children.length) {
// 如果有 children 则继续递归遍历
this.initData(orgList[i].children, type);
}
}
}
return orgList;
},
jsonToArray(nodes) {
var r = [];
if (Array.isArray(nodes)) {
for (var i = 0, l = nodes.length; i < l; i++) {
r.push(nodes[i]); // 取每项数据放入一个新数组
if (
Array.isArray(nodes[i]["children"]) &&
nodes[i]["children"].length > 0
)
// 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
r = r.concat(this.jsonToArray(nodes[i]["children"]));
delete nodes[i]["children"];
}
}
return r;
},
//查询当前节点的最顶层节点ID
getparentNode(data) {
if (data.data.parentCode == null) {
return data.data.id;
} else {
return this.getparentNode(data.parent);
}
},
/**国家地区切换 */
dq_fun(e) {
if(this.typeCountryRegion.value==e.value){
this.typeCountryRegion = {value:'',name:''};
}else{
this.typeCountryRegion = e;
}
this.query_qb(1);
},
/**军事政治类型切换 */
MilitaryPolitics_fun(e) {
if(this.typeMilitaryPolitics.value==e.value){
this.typeMilitaryPolitics = {value:'',name:''};
}else{
this.typeMilitaryPolitics = e;
}
this.query_qb(1);
},
/**人物机构切换 */
qh_type_rwjg(e) {
this.type_rw_jg = e;
},
NodeClick(val){
if( JSON.stringify(val) == "{}"){
this.value_select = undefined
this.jgName = "1";
this.jgName_public = 2;
}else{
this.value_select = val.id;
this.jgName = val.id;
this.jgName_public = val.type;
}
this.type_qf = 1;
this.input3 = "";
this.handleCurrentChange_lb(1);
},
},
mounted() {
},
activated() {
if (getCookie("dfzy_jgk") != 1) {
this.filterText = "";
this.jgName = '1';
this.jgName_public = 2;
this.rwkxx = [];
this.query_tree_jg();
} else {
delCookie("dfzy_jgk");
}
},
watch: {
obj_name: function (val) {
if (val != "") {
this.is_true = false;
} else {
this.is_true = true;
}
},
filterText(val) {
this.$refs.tree.filter(val);
},
rwkxx(val) {
// this.$nextTick(() => {
// VanillaTilt.init(document.querySelectorAll(".tilts"), {
// max: 30,
// speed: 400,
// });
// });
},
},
};
</script>
<style lang="scss">
#dfzyjgk {
width: 97%;
height: 92%;
margin: 1%;
.rwk-right {
width: calc(100% - 20px);
height: 100%;
float: left;
margin-left: 20px;
overflow: hidden;
// border: 1px solid #125473;
border-radius: 5px;
box-sizing: border-box;
position: relative;
.top-div {
width: calc(100% - 2px);
height: 80px;
border: 1px solid #3a5f94c9;
font-weight: 600;
margin-top: 10px;
border-radius: 0px 15px;
.serch-div {
.el-input__inner {
background: none;
border: 1px solid #3a5f94c9;
color: #ffff;
}
.el-select .el-input {
width: 130px;
background-color: #1c678a;
}
.el-input-group__append {
border: unset;
}
}
.tm-div {
}
.div-type {
line-height: 25px;
font-size: 13px;
font-weight: 600;
.top-type-span {
width: 100px;
float: left;
margin: 2px 0px;
text-align: right;
}
.top-type-div {
width: calc(100% - 100px);
float: left;
div {
float: left;
margin: 2px 5px;
padding: 0px 5px;
cursor: pointer;
}
.active-CountryRegion {
background: #9d893a;
}
.active-MilitaryPolitics {
background: #9d893a;
}
}
}
.line-s {
border: 1px solid white;
width: 0px;
height: calc(100% - 20px);
box-shadow: 0px 0px 9px #18d3ef;
margin: 10px 20px;
}
.jzxs {
display: flex;
justify-content: center;
.rk-jg-div {
width: 110px;
float: left;
cursor: pointer;
margin: 0px 10px;
.tb-div {
width: 40px;
height: 40px;
background-image: url("../../assets/img/dfzy/new/2.png");
background-size: 100% 100%;
float: left;
margin-right: 10px;
}
.tb-span {
line-height: 40px;
letter-spacing: 2px;
font-size: 15px;
font-weight: 600;
}
}
.active-tb {
.tb-div {
background-image: url("../../assets/img/dfzy/new/1.png");
}
.tb-span {
color: #d7b637;
}
}
}
}
.bottom-div {
width: 100%;
height: calc(100% - 140px);
overflow-y: auto;
overflow-x: hidden;
.rwxx-div {
width: 23%;
height: 160px;
margin: 1%;
float: left;
.zyx {
position: absolute;
width: calc(100% - 37px);
height: calc(100% - 79px);
padding: 21px 23px;
pointer-events: none;
div {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
span {
position: absolute;
top: 9px;
right: -13px;
display: block;
font-size: 12px;
color: #ffffff;
background: #36a8ff;
width: 60px;
line-height: 20px;
text-align: center;
transform: rotate(45deg);
letter-spacing: 3px;
}
}
}
.zyx1 {
position: absolute;
width: calc(100% - 37px);
height: calc(100% - 79px);
padding: 21px 23px;
pointer-events: none;
div {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
span {
position: absolute;
top: 8px;
left: -12px;
display: block;
font-size: 12px;
color: #ffffff;
background: #36a8ff;
width: 60px;
line-height: 20px;
text-align: center;
transform: rotate(-45deg);
letter-spacing: 3px;
}
}
}
.tilts {
width: 100%;
height: 100%;
background-image: url("../../assets/img/dfzy/new/4.png");
background-size: 100% 100%;
cursor: pointer;
// transform: perspective(1000px);
.img-div{
animation:scaleDraw ease-in-out infinite 1.5s alternate;
}
}
@keyframes scaleDraw {
0%{
transform: scale(1);
}
100%{
transform: scale(1.1);
}
}
.tilts:hover {
// transform-style: preserve-3d;
background-image: url("../../assets/img/dfzy/new/3.png");
.name-div{
background-image: url("../../assets/img/dfzy/new/5.png");
}
.top-span {
background: linear-gradient(to bottom, #fffe7f, #54ff88);
-webkit-background-clip: text;
color: transparent;
}
}
.table-active {
background-image: url("../../assets/img/dfzy/new/3.png");
.name-div{
background-image: url("../../assets/img/dfzy/new/5.png");
}
// .top-span {
// background: linear-gradient(to bottom, #fffe7f, #54ff88);
// -webkit-background-clip: text;
// color: transparent;
// }
}
.img-div {
width: 70px;
height: 70px;
float: left;
margin: 40px 3px 28px 40px;
border: 2px solid white;
border-radius: 50%;
// transform: translateZ(20px);
.tx-bg {
width: 100%;
height: 100%;
background-size: 100% 100%;
border-radius: 50%;
}
}
.text-div {
width: calc(100% - 130px);
height: 75px;
float: left;
margin-top: 40px;
// transform: translateZ(20px);
.name-div {
width: 100%;
height: 100%;
background-image: url("../../assets/img/dfzy/new/6.png");
background-size: 100% 100%;
text-align: center;
color: white;
.top-span {
font-size: 20px;
font-weight: 900;
letter-spacing: 5px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bottom-span {
width: 60%;
margin-left: 20%;
font-size: 12px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
}
.synopsis-div {
color: #ffffff87;
font-size: 15px;
padding-right: 20px;
padding-left: 20px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-indent: 2em;
word-break: break-all;
white-space: pre-line;
}
.xq-div {
width: calc(100% - 40px);
padding-left: 28px;
height: 20px;
overflow: hidden;
margin-top: 5px;
float: left;
}
.el-tag {
float: left;
margin-right: 10px;
height: 20px;
padding: 0px 8px;
line-height: 19px;
}
}
}
}
}
#_people .el-dialog {
width: 1100px;
}
#_plscs {
.el-select {
margin-top: 20px;
margin-left: 20px;
float: left;
}
.upload-demo {
margin-top: 20px;
margin-left: 20px;
float: left;
}
.ac {
margin-top: 20px;
margin-left: 20px;
}
.table-div {
width: 100%;
height: 500px;
margin-top: 20px;
margin-left: 0px;
background: #e6e6e6;
.el-table__body-wrapper {
height: 452px;
overflow-y: auto;
}
.cell {
text-align: center;
}
.el-table tr {
background-color: #1d2d46 !important;
color: #ffffffc7;
}
.el-table td {
border-bottom: 1px solid #127a89;
border-right: unset;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #82848a78;
}
.el-table th {
border: unset;
background-color: #263b5d !important;
}
.el-table--fit {
background: none !important;
border: unset;
}
.el-icon-delete-solid {
color: red;
cursor: pointer;
font-size: 18px;
}
.el-icon-edit {
color: #1172d8;
cursor: pointer;
font-size: 20px;
}
.el-icon-delete {
color: red;
font-size: 20px;
cursor: pointer;
}
.el-table--group::after,
.el-table--border::after,
.el-table::before {
background-color: unset;
}
}
}
.el-dialog {
background: #1d2d46 !important;
.el-step__title.is-process {
color: #e0a142;
}
.el-dialog__title {
color: #ffffff;
}
.el-dialog__body {
padding: 6px 20px;
.el-form-item__label {
color: #e8e8e8;
}
.el-cascader {
width: 100%;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 100%;
line-height: 230px;
text-align: center;
}
.avatar {
width: 100%;
height: 100%;
display: block;
}
.right-left {
width: calc(100% - 40px);
float: left;
background: rgba(41, 60, 90, 0.49);
padding: 20px 20px 0px 20px;
.title-div {
float: left;
width: 100%;
height: 25px;
background-size: 100% 100%;
position: relative;
margin-top: 10px;
> span {
position: absolute;
font-weight: 700;
font-size: 18px;
color: #50d7ec;
margin-left: 10px;
}
.el-button {
float: right;
margin-right: 10px;
}
}
.mk-div {
width: 100%;
float: left;
background: #fdfdfd0f;
margin-bottom: 20px;
.data-div {
width: calc(100% - 40px);
float: left;
padding: 20px;
.pub-div-data {
margin: 10px calc(50% - 28px);
color: #909399;
font-size: 14px;
}
.el-table tr {
background-color: #1d2d46 !important;
color: #ffffffc7;
}
.el-table td {
background-color: #253650 !important;
color: #ffffffc7;
}
.el-table td {
border-bottom: 1px solid #127a89;
border-right: unset;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #82848a78;
}
.el-table th {
border: unset;
background-color: #263b5d !important;
}
.el-table--fit {
background: none !important;
border: unset;
}
.el-table--group::after,
.el-table--border::after,
.el-table::before {
background-color: unset;
}
.el-table__header-wrapper table {
width: 100% !important;
}
.el-table__body-wrapper {
.el-table__empty-block {
height: 20px !important;
}
}
}
}
.table_jbxx {
border-collapse: collapse;
width: 100%;
position: relative;
margin-top: 10px;
td {
border: 1px solid #00648c;
padding: 5px 12px;
font-size: 14px;
width: 200px;
}
.img-div {
border: 3px solid #ffffff;
width: 200px;
height: 230px;
img {
background-size: 100% 100%;
}
}
.pub-td1 {
color: #007eff;
font-weight: 900;
width: 100px;
}
.pub-td2 {
color: #8cd4ff;
}
.el-icon-remove {
color: #ff4a4a;
font-size: 20px;
position: absolute;
right: -31px;
margin-top: 11px;
cursor: pointer;
}
.el-icon-circle-plus {
color: #ff4a4a;
font-size: 20px;
position: absolute;
right: -31px;
bottom: 12px;
cursor: pointer;
}
.el-icon-edit {
color: #5cde7c;
font-size: 20px;
position: absolute;
right: 10px;
margin-top: 11px;
cursor: pointer;
}
.button-div {
position: absolute;
right: 40px;
margin-top: 8px;
position: absolute;
}
}
.title-divs {
float: left;
height: 25px;
width: calc(100% - 0px);
// background-image: url("../../assets/img/dfzy/02.png");
// background-size: 100% 100%;
}
}
}
#add_a,
#edit_a {
.el-dialog {
width: 400px;
background-color: #1d2d47;
.el-dialog__header {
text-align: center;
.el-dialog__title {
color: white;
}
}
.el-dialog__body {
padding: 30px 20px;
.dialogContent {
span {
float: left;
margin-top: 5.5px;
color: white;
}
.el-input {
width: 80%;
input {
height: 30px;
}
}
}
}
.el-dialog__title {
color: #ffffff;
}
.el-form-item__label {
color: #dadada;
}
.button-preview {
width: 100px;
height: 30px;
line-height: 30px;
font-size: 14px;
margin-left: calc(50% - 110px);
margin-top: 10px;
text-align: center;
cursor: pointer;
background-image: url(../../assets/img/yqjc/40.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.button-cancel {
width: 100px;
height: 30px;
line-height: 30px;
margin-left: 20px;
margin-top: 10px;
text-align: center;
cursor: pointer;
background-image: url(../../assets/img/yqjc/41.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.el-upload-list__item-name [class^="el-icon"] {
color: #2870ff;
height: unset !important;
}
.el-upload__tip {
color: #c7c7c7;
}
.el-upload-list__item-name {
color: #4382ff;
}
.audio-class {
margin-left: 75px;
}
}
}
.el-dialog {
.el-input__inner {
color: white !important;
background: none !important;
border: 1px solid #146a80 !important;
box-shadow: 0 0 10px #1b6097;
}
.el-textarea__inner {
color: white !important;
background: none !important;
border: 1px solid #146a80 !important;
box-shadow: 0 0 10px #1b6097;
}
}
.gjcx-div {
width: 100%;
position: absolute;
top: 80px;
// box-shadow: rgb(24, 110, 138) 0px 4px 6px;
// background-image: linear-gradient(#21334f, rgb(23, 73, 109));
// background-image: url("../../assets/img/dfzy/new/6.png");
background-image: linear-gradient(to right, #111112, #2a607f, #221c2c);
background-size: 100% 100%;
.demo-form-inline {
width: 60%;
margin-left: 23%;
padding-top: 15px;
margin-bottom: 20px;
}
.el-input__inner {
color: #ffffff;
background: none !important;
border: 1px solid #146a80 !important;
box-shadow: 0 0 10px #1b6097;
}
.el-form-item {
margin-bottom: 0px;
}
.button-discusss {
width: 100px;
height: 30px;
line-height: 30px;
float: left;
font-size: 14px;
margin-top: 20px;
margin-left: 20px;
text-align: center;
cursor: pointer;
background-image: url(../../assets/img/yqjc/40.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
</style>
<template>
<div id="dfzyjgk">
<div class="rwk-right">
<div class="top-div">
<el-row
:gutter="24"
style="
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
"
>
<el-col :span="6">
<div class="div-type">
<div class="top-type-span">
<span>对象地区：</span>
</div>
<div class="top-type-div">
<div
v-for="item in this.type_arr_country"
@click="dq_fun(item)"
:class="{
'active-CountryRegion': typeCountryRegion.value == item.value,
}"
>
{{ item.name }}
</div>
</div>
</div>
<div class="div-type">
<div class="top-type-span">
<span>类型：</span>
</div>
<div class="top-type-div">
<div
v-for="item in this.type_arr"
@click="MilitaryPolitics_fun(item)"
:class="{
'active-MilitaryPolitics':
typeMilitaryPolitics.value == item.value,
}"
>
{{ item.name }}
</div>
</div>
</div>
</el-col>
<div class="line-s"></div>
<el-col :span="5" class="tm-div">
<SelectTree :value="value_select" filterable :data="tree_data" @NodeClick="NodeClick"/>
</el-col>
<!-- <div class="line-s"></div> -->
<!-- <el-col :span="5" class="jzxs">
<div
:class="['rk-jg-div', type_rw_jg == 0 ? 'active-tb' : '']"
@click="qh_type_rwjg(0)"
>
<div class="tb-div"></div>
<div class="tb-span">
<span>人物库</span>
</div>
</div>
<div
:class="['rk-jg-div', type_rw_jg == 1 ? 'active-tb' : '']"
@click="qh_type_rwjg(1)"
>
<div class="tb-div"></div>
<div class="tb-span">
<span>机构库</span>
</div>
</div>
</el-col> -->
<div class="line-s"></div>
<el-col
:span="5"
style="position: relative; padding: 0px"
class="serch-div"
>
<el-input placeholder="请输入番号或简称" v-model="input3"></el-input>
<el-button
type="primary"
@click="query_qb(1)"
style="
position: absolute;
right: 8px;
top: 4px;
line-height: 4px;
border-radius: 20px;
height: 30px;
background: linear-gradient(to right, #89f7fe, #66a6ff);
"
>搜索</el-button
>
</el-col>
<!-- <div class="line-s"></div> -->
<el-col :span="2" style="max-width: calc(9% - 31px)" class="pub-col">
<el-button
type="primary"
@click="query_zhcx()"
style="
line-height: 4px;
border-radius: 20px;
height: 30px;
background: linear-gradient(to right, #89f7fe, #66a6ff);
"
>高级搜索</el-button
>
</el-col>
</el-row>
</div>
<div class="bottom-div">
<template v-for="(item, index) in rwkxx">
<div
class="rwxx-div animate__animated bk-bmdx-animation"
:class="[
index % 4 == 0
? 'animate__lightSpeedInLeft'
: index % 4 == 1
? 'animate__zoomIn'
: index % 4 == 2
? 'animate__zoomIn'
: 'animate__lightSpeedInRight',
]"
@click="rwxq(item, index)"
>
<div :class="['tilts', tab_actives == index ? 'table-active' : '']">
<!-- <div class="zyx">
<div>
<span
:style="{
background:
item.extraProperty['重要性'] == '重要'
? '#ff4444'
: '#ff9e44',
}"
>{{ item.extraProperty["重要性"] }}</span
>
</div>
</div>
<div class="zyx1">
<div>
<span>{{ item.class_qf == 1 ? "本机构" : "" }}</span>
</div>
</div> -->
<div class="img-div">
<img class="tx-bg" :src="item.info.avatarUrl==null?'':item.info.avatarUrl" :onerror="errimg" />
</div>
<div class="text-div">
<div class="name-div">
<div class="top-span">
{{ item.info.jgfh.value }}
</div>
<div class="bottom-span">
{{ item.info.jgjc.value }}
</div>
</div>
<!-- <div class="xq-div">
<div class="tag-group">
<el-tag
v-for="(items, index) in item.labels"
v-if="item.labels != ''"
:key="index"
:type="tags[index % tags.length].type"
effect="dark"
>
{{ items }}
</el-tag>
</div>
</div> -->
</div>
</div>
</div>
</template>
</div>
<div class="page-div">
<el-pagination
class="myPagination"
background
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
:page-size="pageInfo.pageSize"
:current-page="pageInfo.current_page"
:total="pageInfo.total"
@current-change="handleCurrentChange_lb"
:page-sizes="[10, 20, 50, 100]"
>
</el-pagination>
</div>
<el-collapse-transition>
<div class="gjcx-div" v-show="show">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<label>机构番号</label>
<el-input
v-model="formInline.name"
placeholder="机构番号"
></el-input>
</el-form-item>
<el-form-item>
<label>机构简称</label>
<el-input
v-model="formInline.jc"
placeholder="机构简称"
></el-input>
</el-form-item>
<el-form-item>
<label>国家地区</label>
<el-input
v-model="formInline.gj"
placeholder="国家地区"
></el-input>
</el-form-item>
<el-form-item>
<label>机构简介</label>
<el-input
v-model="formInline.jgjj"
placeholder="机构简介"
></el-input>
</el-form-item>
<el-form-item>
<label>标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;签</label>
<el-input v-model="formInline.bq" placeholder="标签"></el-input>
</el-form-item>
<el-form-item>
<label>重&nbsp;&nbsp;要&nbsp;&nbsp;性</label>
<el-input
v-model="formInline.zyx"
placeholder="重要性"
></el-input>
</el-form-item>
<el-form-item>
<div class="button-discusss" @click="zhcx(1)">查询</div>
<div class="button-discusss" @click="gb_zhcx()">关闭</div>
</el-form-item>
</el-form>
</div>
</el-collapse-transition>
</div>
</div>
</template>
<script>
import {
get,
post,
fileUpload,
delete_util,
getCookie,
delCookie,
} from "../../util/http_util";
import jh_bg from "../../assets/img/dfzy/zwtp.png";
import XLSX from "xlsx";
import { uuid } from "../../util/data_util";
import VanillaTilt from "vanilla-tilt";
import SelectTree from "./seleteTree.vue"
import "animate.css";
// import navs from "./jg_xq.vue";
import { imgUrl } from "../../api/publicUrl";
export default {
// components: { navs },
components: { SelectTree },
data() {
return {
errimg: "this.src='" + jh_bg + "'",
// currentRole_jg_data: "navs",
clientDetails_jg_data: {},
xzzd: [],
wzmk_data: [],
option_rwmb: [],
option_value_rwmb: "",
is_true: true,
obj_name: "",
fileList: [],
file_types: ".XLSX",
option_rwmb_pl: [],
// folder: "dfzy-rwk", //头像上传文件夹
fl_type: 2, //查询机构库下面的模板,机构库为2,4,6
fileList_head: [],
file_head: {},
file_types_head: ".PNG,.JPG,.JPEG",
mb_table_s: [],
arr_mouldTables: [],
arr_mouldTables_comment: [],
filterText: "",
tree_data: [],
data_tree_node: "",
name_edit: "",
dialogVisible_edit: false,
obj_jgxx: {},
input3: "",
pageInfo: {
total: 0,
pageSize: 10,
current_page: 1,
},
rwkxx: [],
jgName: "",
jgName_public: 2,//判断当前是内网机构还是外网机构
tags: [
{ type: "" },
{ type: "success" },
{ type: "info" },
{ type: "warning" },
{ type: "danger" },
],
type_qf: 1,
formInline: {
name: "",
jc: "",
gj: "",
jgjj: "",
bq: "",
zyx: "",
},
show: false,
type_arr_country: [
{ name: "美国", value: "1" },
{ name: "英国", value: "2" },
{ name: "日本", value: "3" },
{ name: "台湾", value: "4" },
],
type_arr: [
{ name: "军事", value: "1" },
{ name: "政治", value: "2" },
{ name: "经济", value: "3" },
{ name: "社会", value: "4" },
],
type_rw_jg: 0,
typeCountryRegion: {value:'',name:''},
typeMilitaryPolitics: {value:'',name:''},
tab_actives: "-1", //表格切换
categoryId: null,
valueTitle: "",
value_select:4,
};
},
methods: {
query_zhcx() {
this.show = !this.show;
},
zhcx(pageNum) {
this.input3 = "";
this.type_qf = 3;
this.typeCountryRegion = {value:'',name:''};
this.typeMilitaryPolitics = {value:'',name:''};
this.pageInfo.current_page = pageNum;
let pageSize = this.pageInfo.pageSize;
if(this.jgName_public==1){
this.value_select = 1
}else{
this.value_select = 4
}
post(
`api/rest/mongo/organization/queryOrganization?pageNum=${pageNum}&pageSize=${pageSize}`,
{
module: this.jgName_public == 1 ? "DF" : "DFWW",
combinationSearch:{
jgfh: this.formInline.name,
jgjc: this.formInline.jc,
gjdq: this.formInline.gj,
jgjj: this.formInline.jgjj,
bq: this.formInline.bq,
zyx: this.formInline.zyx,
}
}
).then((res) => {
this.rwkxx = [];
setTimeout(() => {
this.pageInfo.total = 0;
if (res.records.length > 0) {
res.records.forEach((item) => {
this.rwkxx.push(item);
});
this.pageInfo.total = res.total;
}
}, 500);
});
},
gb_zhcx() {
this.show = false;
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//查询tree数据
query_tree_jg() {
this.tree_data = [];
get("api/rest/mongo/organization/queryTree?module=" + 'DF')
.then((res) => {
let arr = [
{
id: 1,
label: "机构列表",
level: 0,
children: res,
},
];
this.tree_data = this.initData(arr, 1);
get(
"api/rest/mongo/organization/queryTree?module=" +
"DFWW"
)
.then((res1) => {
let arr1 = {
id: 4,
label: "外网机构列表",
level: 0,
type: 2,
children: this.initData(res1, 2),
};
this.tree_data.push(arr1);
this.value_select = 4;
})
.catch((err) => {
this.$message.warning(err.message);
});
})
.then((res) => {
this.handleCurrentChange_lb(1);
})
.catch((err) => {
this.$message.warning(err.message);
});
},
query_tree() {
get("api/rest/resource/queryCharacterMould?type=" + this.fl_type)
.then((datas) => {
this.option_rwmb = [];
this.option_rwmb_pl = [];
if (datas.length > 0) {
datas.forEach((item) => {
this.option_rwmb.push({ value: item.id, label: item.name });
this.option_rwmb_pl.push({ value: item.id, label: item.name });
});
}
})
.catch((err) => {
this.$message.warning(err.message);
});
},
rwxq(item, index) {
// this.tab_actives = index;
this.$router.push({
name: "敌方资源机构详情" + this.$route.meta.type_name,
params: { key: item, types: true },
});
},
handleSizeChange(val) {
this.pageInfo.pageSize = val;
this.pageInfo.current_page = 1;
this.handleCurrentChange_lb(1);
},
handleCurrentChange_lb(pageNum) {
if (this.type_qf == 1) {
this.query(pageNum);
} else if (this.type_qf == 2) {
this.query_qb(pageNum);
} else {
this.zhcx(pageNum);
}
},
query_qb(pageNum) {
this.formInline = {
name: "",
jc: "",
gj: "",
jgjj: "",
bq: "",
};
this.type_qf = 2;
this.pageInfo.current_page = pageNum;
let pageSize = this.pageInfo.pageSize;
let name = this.input3;
if(this.jgName_public==1){
this.value_select = 1
}else{
this.value_select = 4
}
post(
`api/rest/mongo/organization/queryOrganization?pageNum=${pageNum}&pageSize=${pageSize}`,
{
module: this.jgName_public == 1 ? "DF" : "DFWW",
name:name,
type:this.typeMilitaryPolitics.name==''?null:this.typeMilitaryPolitics.name,
nation:this.typeCountryRegion.name==''?null:this.typeCountryRegion.name,
}
).then((res) => {
this.rwkxx = [];
setTimeout(() => {
this.pageInfo.total = 0;
if (res.records.length > 0) {
res.records.forEach((item) => {
this.rwkxx.push(item);
});
this.pageInfo.total = res.total;
}
});
}, 500);
},
query(pageNum) {//查询当前机构下的子机构
this.formInline = {
name: "",
jc: "",
gj: "",
jgjj: "",
bq: "",
};
this.input3 = '';
this.pageInfo.current_page = pageNum;
let pageSize = this.pageInfo.pageSize;
let ids = "";
if (this.jgName != "1" && this.jgName != "" && this.jgName != "4") {
ids = "&id=" + this.jgName;
}
let param_url = "";
if (this.jgName_public == 1) {
param_url = "api/rest/mongo/organization/queryChildren?pageNum=";
} else if (this.jgName_public == 2) {
param_url = "api/rest/mongo/organization/queryOnlineChildren?pageNum=";
}
get(
param_url +
pageNum +
"&pageSize=" +
pageSize +
"&module=" +
(this.jgName_public == "1" ? 'DF' : "DFWW") +
ids
)
.then((res) => {
this.rwkxx = [];
setTimeout(() => {
this.pageInfo.total = 0;
if (res.records.length > 0) {
res.records.forEach((item, index) => {
// if (
// pageNum == 1 &&
// this.jgName != "1" &&
// this.jgName != "" &&
// this.jgName != "4" &&
// index == 0
// ) {
// item.organization["class_qf"] = 1;
// } else {
// item.organization["class_qf"] = 2;
// }
this.rwkxx.push(item);
});
this.pageInfo.total = res.total;
}
}, 500);
})
.catch((err) => {
this.$message.warning(err.message);
});
},
initData(orgList, type) {
// 第一种
if (orgList.length) {
for (var i = 0; i < orgList.length; i++) {
orgList[i].type = type;
if (orgList[i].children.length) {
// 如果有 children 则继续递归遍历
this.initData(orgList[i].children, type);
}
}
}
return orgList;
},
jsonToArray(nodes) {
var r = [];
if (Array.isArray(nodes)) {
for (var i = 0, l = nodes.length; i < l; i++) {
r.push(nodes[i]); // 取每项数据放入一个新数组
if (
Array.isArray(nodes[i]["children"]) &&
nodes[i]["children"].length > 0
)
// 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
r = r.concat(this.jsonToArray(nodes[i]["children"]));
delete nodes[i]["children"];
}
}
return r;
},
//查询当前节点的最顶层节点ID
getparentNode(data) {
if (data.data.parentCode == null) {
return data.data.id;
} else {
return this.getparentNode(data.parent);
}
},
/**国家地区切换 */
dq_fun(e) {
if(this.typeCountryRegion.value==e.value){
this.typeCountryRegion = {value:'',name:''};
}else{
this.typeCountryRegion = e;
}
this.query_qb(1);
},
/**军事政治类型切换 */
MilitaryPolitics_fun(e) {
if(this.typeMilitaryPolitics.value==e.value){
this.typeMilitaryPolitics = {value:'',name:''};
}else{
this.typeMilitaryPolitics = e;
}
this.query_qb(1);
},
/**人物机构切换 */
qh_type_rwjg(e) {
this.type_rw_jg = e;
},
NodeClick(val){
if( JSON.stringify(val) == "{}"){
this.value_select = undefined
this.jgName = "1";
this.jgName_public = 2;
}else{
this.value_select = val.id;
this.jgName = val.id;
this.jgName_public = val.type;
}
this.type_qf = 1;
this.input3 = "";
this.handleCurrentChange_lb(1);
},
},
mounted() {
},
activated() {
if (getCookie("dfzy_jgk") != 1) {
this.filterText = "";
this.jgName = '1';
this.jgName_public = 2;
this.rwkxx = [];
this.query_tree_jg();
} else {
delCookie("dfzy_jgk");
}
},
watch: {
obj_name: function (val) {
if (val != "") {
this.is_true = false;
} else {
this.is_true = true;
}
},
filterText(val) {
this.$refs.tree.filter(val);
},
rwkxx(val) {
// this.$nextTick(() => {
// VanillaTilt.init(document.querySelectorAll(".tilts"), {
// max: 30,
// speed: 400,
// });
// });
},
},
};
</script>
<style lang="scss">
#dfzyjgk {
width: 97%;
height: 92%;
margin: 1%;
.rwk-right {
width: calc(100% - 20px);
height: 100%;
float: left;
margin-left: 20px;
overflow: hidden;
// border: 1px solid #125473;
border-radius: 5px;
box-sizing: border-box;
position: relative;
.top-div {
width: calc(100% - 2px);
height: 80px;
border: 1px solid #3a5f94c9;
font-weight: 600;
margin-top: 10px;
border-radius: 0px 15px;
.serch-div {
.el-input__inner {
background: none;
border: 1px solid #3a5f94c9;
color: #ffff;
}
.el-select .el-input {
width: 130px;
background-color: #1c678a;
}
.el-input-group__append {
border: unset;
}
}
.tm-div {
}
.div-type {
line-height: 25px;
font-size: 13px;
font-weight: 600;
.top-type-span {
width: 100px;
float: left;
margin: 2px 0px;
text-align: right;
}
.top-type-div {
width: calc(100% - 100px);
float: left;
div {
float: left;
margin: 2px 5px;
padding: 0px 5px;
cursor: pointer;
}
.active-CountryRegion {
background: #9d893a;
}
.active-MilitaryPolitics {
background: #9d893a;
}
}
}
.line-s {
border: 1px solid white;
width: 0px;
height: calc(100% - 20px);
box-shadow: 0px 0px 9px #18d3ef;
margin: 10px 20px;
}
.jzxs {
display: flex;
justify-content: center;
.rk-jg-div {
width: 110px;
float: left;
cursor: pointer;
margin: 0px 10px;
.tb-div {
width: 40px;
height: 40px;
background-image: url("../../assets/img/dfzy/new/2.png");
background-size: 100% 100%;
float: left;
margin-right: 10px;
}
.tb-span {
line-height: 40px;
letter-spacing: 2px;
font-size: 15px;
font-weight: 600;
}
}
.active-tb {
.tb-div {
background-image: url("../../assets/img/dfzy/new/1.png");
}
.tb-span {
color: #d7b637;
}
}
}
}
.bottom-div {
width: 100%;
height: calc(100% - 140px);
overflow-y: auto;
overflow-x: hidden;
.rwxx-div {
width: 23%;
height: 160px;
margin: 1%;
float: left;
.zyx {
position: absolute;
width: calc(100% - 37px);
height: calc(100% - 79px);
padding: 21px 23px;
pointer-events: none;
div {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
span {
position: absolute;
top: 9px;
right: -13px;
display: block;
font-size: 12px;
color: #ffffff;
background: #36a8ff;
width: 60px;
line-height: 20px;
text-align: center;
transform: rotate(45deg);
letter-spacing: 3px;
}
}
}
.zyx1 {
position: absolute;
width: calc(100% - 37px);
height: calc(100% - 79px);
padding: 21px 23px;
pointer-events: none;
div {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
span {
position: absolute;
top: 8px;
left: -12px;
display: block;
font-size: 12px;
color: #ffffff;
background: #36a8ff;
width: 60px;
line-height: 20px;
text-align: center;
transform: rotate(-45deg);
letter-spacing: 3px;
}
}
}
.tilts {
width: 100%;
height: 100%;
background-image: url("../../assets/img/dfzy/new/4.png");
background-size: 100% 100%;
cursor: pointer;
// transform: perspective(1000px);
.img-div{
animation:scaleDraw ease-in-out infinite 1.5s alternate;
}
}
@keyframes scaleDraw {
0%{
transform: scale(1);
}
100%{
transform: scale(1.1);
}
}
.tilts:hover {
// transform-style: preserve-3d;
background-image: url("../../assets/img/dfzy/new/3.png");
.name-div{
background-image: url("../../assets/img/dfzy/new/5.png");
}
.top-span {
background: linear-gradient(to bottom, #fffe7f, #54ff88);
-webkit-background-clip: text;
color: transparent;
}
}
.table-active {
background-image: url("../../assets/img/dfzy/new/3.png");
.name-div{
background-image: url("../../assets/img/dfzy/new/5.png");
}
// .top-span {
// background: linear-gradient(to bottom, #fffe7f, #54ff88);
// -webkit-background-clip: text;
// color: transparent;
// }
}
.img-div {
width: 70px;
height: 70px;
float: left;
margin: 40px 3px 28px 40px;
border: 2px solid white;
border-radius: 50%;
// transform: translateZ(20px);
.tx-bg {
width: 100%;
height: 100%;
background-size: 100% 100%;
border-radius: 50%;
}
}
.text-div {
width: calc(100% - 130px);
height: 75px;
float: left;
margin-top: 40px;
// transform: translateZ(20px);
.name-div {
width: 100%;
height: 100%;
background-image: url("../../assets/img/dfzy/new/6.png");
background-size: 100% 100%;
text-align: center;
color: white;
.top-span {
font-size: 20px;
font-weight: 900;
letter-spacing: 5px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bottom-span {
width: 60%;
margin-left: 20%;
font-size: 12px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
}
.synopsis-div {
color: #ffffff87;
font-size: 15px;
padding-right: 20px;
padding-left: 20px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-indent: 2em;
word-break: break-all;
white-space: pre-line;
}
.xq-div {
width: calc(100% - 40px);
padding-left: 28px;
height: 20px;
overflow: hidden;
margin-top: 5px;
float: left;
}
.el-tag {
float: left;
margin-right: 10px;
height: 20px;
padding: 0px 8px;
line-height: 19px;
}
}
}
}
}
#_people .el-dialog {
width: 1100px;
}
#_plscs {
.el-select {
margin-top: 20px;
margin-left: 20px;
float: left;
}
.upload-demo {
margin-top: 20px;
margin-left: 20px;
float: left;
}
.ac {
margin-top: 20px;
margin-left: 20px;
}
.table-div {
width: 100%;
height: 500px;
margin-top: 20px;
margin-left: 0px;
background: #e6e6e6;
.el-table__body-wrapper {
height: 452px;
overflow-y: auto;
}
.cell {
text-align: center;
}
.el-table tr {
background-color: #1d2d46 !important;
color: #ffffffc7;
}
.el-table td {
border-bottom: 1px solid #127a89;
border-right: unset;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #82848a78;
}
.el-table th {
border: unset;
background-color: #263b5d !important;
}
.el-table--fit {
background: none !important;
border: unset;
}
.el-icon-delete-solid {
color: red;
cursor: pointer;
font-size: 18px;
}
.el-icon-edit {
color: #1172d8;
cursor: pointer;
font-size: 20px;
}
.el-icon-delete {
color: red;
font-size: 20px;
cursor: pointer;
}
.el-table--group::after,
.el-table--border::after,
.el-table::before {
background-color: unset;
}
}
}
.el-dialog {
background: #1d2d46 !important;
.el-step__title.is-process {
color: #e0a142;
}
.el-dialog__title {
color: #ffffff;
}
.el-dialog__body {
padding: 6px 20px;
.el-form-item__label {
color: #e8e8e8;
}
.el-cascader {
width: 100%;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 100%;
line-height: 230px;
text-align: center;
}
.avatar {
width: 100%;
height: 100%;
display: block;
}
.right-left {
width: calc(100% - 40px);
float: left;
background: rgba(41, 60, 90, 0.49);
padding: 20px 20px 0px 20px;
.title-div {
float: left;
width: 100%;
height: 25px;
background-size: 100% 100%;
position: relative;
margin-top: 10px;
> span {
position: absolute;
font-weight: 700;
font-size: 18px;
color: #50d7ec;
margin-left: 10px;
}
.el-button {
float: right;
margin-right: 10px;
}
}
.mk-div {
width: 100%;
float: left;
background: #fdfdfd0f;
margin-bottom: 20px;
.data-div {
width: calc(100% - 40px);
float: left;
padding: 20px;
.pub-div-data {
margin: 10px calc(50% - 28px);
color: #909399;
font-size: 14px;
}
.el-table tr {
background-color: #1d2d46 !important;
color: #ffffffc7;
}
.el-table td {
background-color: #253650 !important;
color: #ffffffc7;
}
.el-table td {
border-bottom: 1px solid #127a89;
border-right: unset;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #82848a78;
}
.el-table th {
border: unset;
background-color: #263b5d !important;
}
.el-table--fit {
background: none !important;
border: unset;
}
.el-table--group::after,
.el-table--border::after,
.el-table::before {
background-color: unset;
}
.el-table__header-wrapper table {
width: 100% !important;
}
.el-table__body-wrapper {
.el-table__empty-block {
height: 20px !important;
}
}
}
}
.table_jbxx {
border-collapse: collapse;
width: 100%;
position: relative;
margin-top: 10px;
td {
border: 1px solid #00648c;
padding: 5px 12px;
font-size: 14px;
width: 200px;
}
.img-div {
border: 3px solid #ffffff;
width: 200px;
height: 230px;
img {
background-size: 100% 100%;
}
}
.pub-td1 {
color: #007eff;
font-weight: 900;
width: 100px;
}
.pub-td2 {
color: #8cd4ff;
}
.el-icon-remove {
color: #ff4a4a;
font-size: 20px;
position: absolute;
right: -31px;
margin-top: 11px;
cursor: pointer;
}
.el-icon-circle-plus {
color: #ff4a4a;
font-size: 20px;
position: absolute;
right: -31px;
bottom: 12px;
cursor: pointer;
}
.el-icon-edit {
color: #5cde7c;
font-size: 20px;
position: absolute;
right: 10px;
margin-top: 11px;
cursor: pointer;
}
.button-div {
position: absolute;
right: 40px;
margin-top: 8px;
position: absolute;
}
}
.title-divs {
float: left;
height: 25px;
width: calc(100% - 0px);
// background-image: url("../../assets/img/dfzy/02.png");
// background-size: 100% 100%;
}
}
}
#add_a,
#edit_a {
.el-dialog {
width: 400px;
background-color: #1d2d47;
.el-dialog__header {
text-align: center;
.el-dialog__title {
color: white;
}
}
.el-dialog__body {
padding: 30px 20px;
.dialogContent {
span {
float: left;
margin-top: 5.5px;
color: white;
}
.el-input {
width: 80%;
input {
height: 30px;
}
}
}
}
.el-dialog__title {
color: #ffffff;
}
.el-form-item__label {
color: #dadada;
}
.button-preview {
width: 100px;
height: 30px;
line-height: 30px;
font-size: 14px;
margin-left: calc(50% - 110px);
margin-top: 10px;
text-align: center;
cursor: pointer;
background-image: url(../../assets/img/yqjc/40.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.button-cancel {
width: 100px;
height: 30px;
line-height: 30px;
margin-left: 20px;
margin-top: 10px;
text-align: center;
cursor: pointer;
background-image: url(../../assets/img/yqjc/41.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.el-upload-list__item-name [class^="el-icon"] {
color: #2870ff;
height: unset !important;
}
.el-upload__tip {
color: #c7c7c7;
}
.el-upload-list__item-name {
color: #4382ff;
}
.audio-class {
margin-left: 75px;
}
}
}
.el-dialog {
.el-input__inner {
color: white !important;
background: none !important;
border: 1px solid #146a80 !important;
box-shadow: 0 0 10px #1b6097;
}
.el-textarea__inner {
color: white !important;
background: none !important;
border: 1px solid #146a80 !important;
box-shadow: 0 0 10px #1b6097;
}
}
.gjcx-div {
width: 100%;
position: absolute;
top: 80px;
// box-shadow: rgb(24, 110, 138) 0px 4px 6px;
// background-image: linear-gradient(#21334f, rgb(23, 73, 109));
// background-image: url("../../assets/img/dfzy/new/6.png");
background-image: linear-gradient(to right, #111112, #2a607f, #221c2c);
background-size: 100% 100%;
.demo-form-inline {
width: 60%;
margin-left: 23%;
padding-top: 15px;
margin-bottom: 20px;
}
.el-input__inner {
color: #ffffff;
background: none !important;
border: 1px solid #146a80 !important;
box-shadow: 0 0 10px #1b6097;
}
.el-form-item {
margin-bottom: 0px;
}
.button-discusss {
width: 100px;
height: 30px;
line-height: 30px;
float: left;
font-size: 14px;
margin-top: 20px;
margin-left: 20px;
text-align: center;
cursor: pointer;
background-image: url(../../assets/img/yqjc/40.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
</style>
src/view/dfzy/dfzyrwk.vue
View file @ 9837e6fb
<template>
<div id="dfzyrwk">
<div class="rwk-right">
<div class="top-div">
<el-row
:gutter="24"
style="
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color:white;
"
>
<el-col :span="6">
<div class="div-type">
<div class="top-type-span">
<span>对象地区：</span>
</div>
<div class="top-type-div">
<div
v-for="item in this.type_arr_country"
@click="dq_fun(item)"
:class="{
'active-CountryRegion': typeCountryRegion.value == item.value,
}"
>
{{ item.name }}
</div>
</div>
</div>
<div class="div-type">
<div class="top-type-span">
<span>类型：</span>
</div>
<div class="top-type-div">
<div
v-for="item in this.type_arr"
@click="MilitaryPolitics_fun(item)"
:class="{
'active-MilitaryPolitics':
typeMilitaryPolitics.value == item.value,
}"
>
{{ item.name }}
</div>
</div>
</div>
</el-col>
<div class="line-s"></div>
<el-col :span="5" class="tm-div">
<SelectTree :value="value_select" filterable :data="tree_data" @NodeClick="NodeClick"/>
</el-col>
<div class="line-s"></div>
<el-col
:span="5"
style="position: relative; padding: 0px"
class="serch-div"
>
<el-input placeholder="请输入姓名或外文名" v-model="input3"></el-input>
<el-button
type="primary"
@click="query(1)"
style="
position: absolute;
right: 8px;
top: 4px;
line-height: 4px;
border-radius: 20px;
height: 30px;
background: linear-gradient(to right, #89f7fe, #66a6ff);
"
>搜索</el-button
>
</el-col>
<!-- <div class="line-s"></div> -->
<el-col :span="2" style="max-width: calc(9% - 31px)" class="pub-col">
<el-button
type="primary"
@click="query_zhcx()"
style="
line-height: 4px;
border-radius: 20px;
height: 30px;
background: linear-gradient(to right, #89f7fe, #66a6ff);
"
>高级搜索</el-button
>
</el-col>
</el-row>
</div>
<div class="bottom-div">
<template v-for="(item, index) in rwkxx">
<div
class="rwxx-div animate__animated bk-bmdx-animation"
:class="[
index % 4 == 0
? 'animate__lightSpeedInLeft'
: index % 4 == 1
? 'animate__zoomIn'
: index % 4 == 2
? 'animate__zoomIn'
: 'animate__lightSpeedInRight',
]"
@click="rwxq(item, index)"
>
<div :class="['tilts', tab_actives == index ? 'table-active' : '']">
<!-- <div class="zyx">
<div>
<span
:style="{
background:
item.extraProperty['重要性'] == '重要'
? '#ff4444'
: '#ff9e44',
}"
>{{ item.extraProperty["重要性"] }}</span
>
</div>
</div> -->
<div class="img-div">
<img class="tx-bg" :src="item.avatarUrl==null?'':item.avatarUrl" :onerror="errimg" />
</div>
<div class="text-div">
<div class="name-div">
<div class="top-span">
{{ item.xm.value }}
</div>
<div class="bottom-span">
{{ item.wwm.value }}
</div>
</div>
<!-- <div class="name-div">
{{ item.baseProperty["姓名"] }}&emsp;&emsp;<span
v-text="item.military_rank"
></span
>&emsp;&emsp;
<span v-text="item.extraProperty['军衔等级']"></span>
<div class="class1">{{ item.baseProperty["姓名"] }}</div>
<div class="class1" style="margin-left: 20px">
{{ item.baseProperty["外文名"] }}
</div>
</div> -->
<!-- <div class="synopsis-div">
<span
v-text="
item.textarea['人物简介'] == '' ||
item.textarea['人物简介'] == undefined
? '暂无简介'
: item.textarea['人物简介']
"
></span>
</div> -->
<!-- <div class="xq-div">
<div class="tag-group">
<el-tag
v-for="(items, index) in item.label"
v-if="item.label != ''"
:key="index"
:type="tags[index % tags.length].type"
effect="dark"
>
{{ items }}
</el-tag>
</div>
</div> -->
</div>
</div>
</div>
</template>
</div>
<div class="page-div">
<el-pagination
class="myPagination"
background
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
:page-size="pageInfo.pageSize"
:current-page="pageInfo.current_page"
:total="pageInfo.total"
@current-change="handleCurrentChange_lb"
:page-sizes="[10, 20, 50, 100]"
>
</el-pagination>
</div>
<el-collapse-transition>
<div class="gjcx-div" v-show="show">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
<el-input v-model="formInline.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item>
<label>外文名</label>
<el-input
v-model="formInline.wwm"
placeholder="外文名"
></el-input>
</el-form-item>
<el-form-item>
<label>行政职务</label>
<el-input
v-model="formInline.xzzw"
placeholder="行政职务"
></el-input>
</el-form-item>
<el-form-item>
<label>人物简介</label>
<el-input
v-model="formInline.rwjj"
placeholder="人物简介"
></el-input>
</el-form-item>
<el-form-item>
<label>标&nbsp;&nbsp;&nbsp;签</label>
<el-input v-model="formInline.bq" placeholder="标签"></el-input>
</el-form-item>
<el-form-item>
<label>重&nbsp;&nbsp;要&nbsp;&nbsp;性</label>
<el-input
v-model="formInline.zyx"
placeholder="重要性"
></el-input>
</el-form-item>
<el-form-item>
<div class="button-discusss" @click="zhcx(1)">查询</div>
<div class="button-discusss" @click="gb_zhcx()">关闭</div>
</el-form-item>
</el-form>
</div>
</el-collapse-transition>
</div>
</div>
</template>
<script>
import {
get,
post,
fileUpload,
delete_util,
getCookie,
delCookie,
} from "../../util/http_util";
import jh_bg from "../../assets/img/dfzy/zwtp.png";
import { uuid } from "../../util/data_util";
import VanillaTilt from "vanilla-tilt";
import SelectTree from "./seleteTree.vue"
import "animate.css";
import { imgUrl } from "../../api/publicUrl";
export default {
components: { SelectTree },
data() {
return {
errimg: "this.src='" + jh_bg + "'",
pageInfo: {
total: 0,
pageSize: 10,
current_page: 1,
},
rwkxx: [],
input3: "",
sj_time: "",
dq: "",
tags: [
{ type: "" },
{ type: "success" },
{ type: "info" },
{ type: "warning" },
{ type: "danger" },
],
jh_bg: jh_bg,
form_add: [
{ comment: "目标属性", value: "" },
{ comment: "目标等级", value: "" },
{ comment: "岗位编号", value: "" },
{ comment: "人物编号", value: "" },
{ comment: "中文名", value: "" },
{ comment: "外文名", value: "" },
{ comment: "所在机构", value: "" },
{ comment: "职务", value: "" },
{ comment: "国家/地区", value: "" },
{ comment: "性别", value: "" },
{ comment: "出生日期", value: "" },
{ comment: "出生地", value: "" },
{ comment: "现职时间", value: "" },
{ comment: "人员类别", value: "" },
{ comment: "学历学位", value: "" },
{ comment: "家庭住址", value: "" },
{ comment: "联系电话", value: "" },
{ comment: "专长领域", value: "" },
{ comment: "社交媒体账号", value: "" },
{ comment: "photos", value: "" },
],
dialogVisible_people: false,
imageUrl: jh_bg,
xzzd: [],
wzmk_data: [],
option_rwmb: [],
option_value_rwmb: "",
is_true: true,
obj_name: "",
// folder: "dfzy-rwk", //头像上传文件夹
fl_type: 1, //查询人物库下面的模板,人物库为11
fileList_head: [],
file_head: {},
file_types_head: ".PNG,.JPG,.JPEG",
this_data: "",
this_node: "",
tree_data: [],
filterText: "",
defaultProps: {
children: "children",
label: "label",
},
dialogVisible_edit: false,
name_edit: "",
options: [],
value_szjg: "",
types: 1,
idFirstEnter: "",
formInline: {
name: "",
wwm: "",
xzzw: "",
rwjj: "",
bq: "",
zyx: "",
},
show: false,
type_zhOrcx: 3,
nodes_pub: {},
i_pub: 0,
type_arr_country: [
{ name: "美国", value: "1" },
{ name: "英国", value: "2" },
{ name: "日本", value: "3" },
{ name: "台湾", value: "4" },
],
type_arr: [
{ name: "军事", value: "1" },
{ name: "政治", value: "2" },
],
type_rw_jg: 0,
typeCountryRegion: {value:'',name:''},
typeMilitaryPolitics: {value:'',name:''},
tab_actives: "-1", //表格切换
categoryId: null,
valueTitle: "",
value_select:4,
value_selects:'',
};
},
methods: {
query_zhcx() {
this.show = !this.show;
},
zhcx(pageNum) {
if(this.types==1){
this.value_select = 1
}else{
this.value_select = 4
}
this.input3 = '';
this.typeCountryRegion = {value:'',name:''};
this.typeMilitaryPolitics = {value:'',name:''};
this.type_zhOrcx = 1;
this.pageInfo.current_page = pageNum;
let pageSize = this.pageInfo.pageSize;
post(
`api/rest/mongo/character/query?pageNum=${pageNum}&pageSize=${pageSize}`,
{
module: this.types == 1 ? "DF" : "DFWW",
combinationSearch:{
chineseName: this.formInline.name,
foreignName: this.formInline.wwm,
xzzw: this.formInline.xzzw,
rwjj: this.formInline.rwjj,
bq: this.formInline.bq,
zyx: this.formInline.zyx,
}
}
)
.then((res) => {
this.rwkxx = [];
setTimeout(() => {
this.rwkxx = res.records;
this.pageInfo.total = res.total;
}, 500);
})
.catch((err) => {
this.$message.warning(err.message);
});
},
gb_zhcx() {
this.show = false;
},
//查询tree数据
query_tree_jg() {
this.tree_data = [];
get("api/rest/mongo/organization/queryTree?module=" + 'DF')
.then((res) => {
let arr = [
{
id: 1,
label: "机构列表",
level: 0,
children: res,
},
];
this.tree_data = this.initData(arr, 1);
get(
"api/rest/mongo/organization/queryTree?module=" +
"DFWW"
)
.then((res1) => {
let arr1 = {
id: 4,
label: "外网机构列表",
level: 0,
type: 2,
children: this.initData(res1, 2),
};
this.tree_data.push(arr1);
this.value_select = 4;
})
.catch((err) => {
this.$message.warning(err.message);
});
})
.then((res) => {
this.handleCurrentChange_lb(1);
})
.catch((err) => {
this.$message.warning(err.message);
});
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
handleSizeChange(val) {
this.pageInfo.pageSize = val;
this.pageInfo.current_page = 1;
this.handleCurrentChange_lb(1);
},
//列表分页
handleCurrentChange_lb(pageNum) {
if (this.type_zhOrcx == 1) {
this.zhcx(pageNum);
} else if(this.type_zhOrcx ==2) {
this.query_jg(pageNum);
}else{
this.query(pageNum);
}
},
query_jg(pageNum) {
this.formInline = {
name: "",
wwm: "",
xzzw: "",
rwjj: "",
bq: "",
zyx: "",
};
this.input3 = '';
this.typeCountryRegion = {value:'',name:''};
this.typeMilitaryPolitics = {value:'',name:''};
this.type_zhOrcx = 2;
this.pageInfo.current_page = pageNum;
let pageSize = this.pageInfo.pageSize;
post(
`api/rest/mongo/character/query?pageNum=${pageNum}&pageSize=${pageSize}`,
{
module: this.types == 1 ? "DF" : "DFWW",
orgId:this.value_select==1||this.value_select==4?null:this.value_selects,
}
)
.then((res) => {
this.rwkxx = [];
setTimeout(() => {
this.rwkxx = res.records;
this.pageInfo.total = res.total;
}, 500);
})
.catch((err) => {
this.$message.warning(err.message);
});
},
query(pageNum) {
this.formInline = {
name: "",
wwm: "",
xzzw: "",
rwjj: "",
bq: "",
zyx: "",
};
if(this.types==1){
this.value_select = 1
}else{
this.value_select = 4
}
this.type_zhOrcx = 3;
this.pageInfo.current_page = pageNum;
let pageSize = this.pageInfo.pageSize;
post(
`api/rest/mongo/character/query?pageNum=${pageNum}&pageSize=${pageSize}`,
{
module: this.types == 1 ? "DF" : "DFWW",
name:this.input3,
type:this.typeMilitaryPolitics.name,
nation:this.typeCountryRegion.name,
}
)
.then((res) => {
this.rwkxx = [];
setTimeout(() => {
this.rwkxx = res.records;
this.pageInfo.total = res.total;
}, 500);
})
.catch((err) => {
this.$message.warning(err.message);
});
},
rwxq(item, index) {
// this.tab_actives = index;
this.$router.push({
name: "人物详情" + this.$route.meta.type_name,
params: { key: item, types: true },
});
},
//查询当前节点的最顶层节点ID
getparentNode(data) {
if (data.data.parentCode == null) {
return data.data.id;
} else {
return this.getparentNode(data.parent);
}
},
query_tree() {
get("api/rest/mongo/template/query")
.then((datas) => {
this.option_rwmb = [];
if (datas.length > 0) {
datas.forEach((item) => {
this.option_rwmb.push({ value: item.id, label: item.name });
});
}
})
.catch((err) => {
this.$message.warning(err.message);
});
},
initData(orgList, type) {
// 第一种
if (orgList.length) {
for (var i = 0; i < orgList.length; i++) {
orgList[i].type = type;
if (orgList[i].children.length) {
// 如果有 children 则继续递归遍历
this.initData(orgList[i].children, type);
}
}
}
return orgList;
},
jsonToArray(nodes) {
var r = [];
if (Array.isArray(nodes)) {
for (var i = 0, l = nodes.length; i < l; i++) {
r.push(nodes[i]); // 取每项数据放入一个新数组
if (
Array.isArray(nodes[i]["children"]) &&
nodes[i]["children"].length > 0
)
// 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
r = r.concat(this.jsonToArray(nodes[i]["children"]));
delete nodes[i]["children"];
}
}
return r;
},
tree_json(nodes) {
let r = [];
for (let i = 0; i < nodes.length; i++) {
r.push(nodes[i]); // 取每项数据放入一个新数组
if (nodes[i].children && nodes[i].children.length > 0)
// 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
r = r.concat(this.tree_json(nodes[i].children));
}
return r;
},
Change_select(value) {
this.form_add[6].value = value + "";
},
/**国家地区切换 */
dq_fun(e) {
if(this.typeCountryRegion.value==e.value){
this.typeCountryRegion = {value:'',name:''};
}else{
this.typeCountryRegion = e;
}
this.query(1);
},
/**军事政治类型切换 */
MilitaryPolitics_fun(e) {
if(this.typeMilitaryPolitics.value==e.value){
this.typeMilitaryPolitics = {value:'',name:''};
}else{
this.typeMilitaryPolitics = e;
}
this.query(1);
},
/**人物机构切换 */
qh_type_rwjg(e) {
this.type_rw_jg = e;
},
NodeClick(val){
if( JSON.stringify(val) == "{}"){
this.value_select = undefined;
this.value_selects = undefined;
this.types = 2;
this.jgName = "1";
}else{
this.value_select = val.id;
this.value_selects = val.code;
this.types = val.type;
this.jgName = val.code == undefined ? val.id : val.code;
}
this.type_zhOrcx = 2;
this.input3 = "";
this.nodes_pub = val;
this.handleCurrentChange_lb(1);
},
},
mounted() {},
watch: {
obj_name: function (val) {
if (val != "") {
this.is_true = false;
} else {
this.is_true = true;
}
},
dialogVisible_people: function (val) {
if (!val) {
this.is_true = false;
}
},
filterText(val) {
this.$refs.tree.filter(val);
},
rwkxx(val) {
// this.$nextTick(() => {
// VanillaTilt.init(document.querySelectorAll(".tilts"), {
// max: 30,
// speed: 400,
// });
// });
},
},
activated() {
if (getCookie("dfzy_rwk") != 1) {
this.filterText = "";
this.input3 = "";
this.types = 2;
this.rwkxx = [];
this.query_tree_jg();
} else {
delCookie("dfzy_rwk");
}
},
created() {
let self = this;
let code = 0;
let code2 = 0;
document.onkeydown = function (e) {
let evn = e || event;
let key = evn.keyCode || evn.which || evn.charCode;
if (key === 13) {
code = 1;
}
if (key === 9) {
code2 = 1;
}
if (code === 1 && code2 === 1) {
alert("Ctrl+tab");
// this obj to do something
code = 0;
code2 = 0;
}
};
document.onkeyup = function (e) {
if (e.keyCode === 13) {
code = 0;
}
if (e.keyCode === 9) {
code2 = 0;
}
};
},
};
</script>
<style lang="scss">
#dfzyrwk {
width: 97%;
height: 92%;
margin: 1%;
box-sizing: border-box;
overflow: hidden;
// .el-input__count {
// color: #229dbd;
// background: #1d2d4600;
// }
// .el-input__count-inner {
// color: #229dbd;
// background: #1d2d46;
// }
// .el-textarea__inner {
// color: white !important;
// background: none !important;
// border: 1px solid #146a80 !important;
// box-shadow: 0 0 10px #1b6097;
// white-space: pre-line;
// }
// .rwk-left {
// width: calc(15% - 10px);
// height: calc(100% - 40px);
// margin-top: 40px;
// margin-left: 10px;
// box-sizing: border-box;
// float: left;
// .el-input {
// position: relative;
// font-size: 14px;
// display: inline-block;
// width: 100%;
// }
// .el-button + .el-button {
// margin-left: 0px !important;
// }
// .el-tree {
// color: white;
// background: transparent;
// height: calc(100% - 50px);
// margin-top: 10px;
// overflow-y: auto;
// .el-tree-node__content {
// height: 40px;
// // .el-icon-circle-plus {
// // display: none;
// // }
// // .el-icon-error {
// // display: none;
// // }
// // .el-icon-upload {
// // display: none;
// // }
// // .el-icon-edit-outline {
// // display: none;
// // }
// // .list-span{
// // display: none;
// // }
// }
// .el-tree-node {
// position: relative;
// padding-left: 0px; // 缩进量
// }
// .el-tree-node__children {
// padding-left: 15px; // 缩进量
// }
// // 竖线
// .el-tree-node::before {
// content: "";
// height: 100%;
// width: 1px;
// position: absolute;
// left: -3px;
// top: -17px;
// border-width: 1px;
// border-left: 1px solid #1895a2;
// }
// // 当前层最后一个节点的竖线高度固定
// .el-tree-node:last-child::before {
// height: 38px; // 可以自己调节到合适数值
// }
// // 横线
// .el-tree-node::after {
// content: "";
// width: 13px;
// height: 20px;
// position: absolute;
// left: -3px;
// top: 20px;
// border-width: 1px;
// border-top: 1px solid #1895a2;
// }
// // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
// & > .el-tree-node::after {
// border-top: none;
// }
// & > .el-tree-node::before {
// border-left: none;
// }
// // 展开关闭的icon
// .el-tree-node__expand-icon {
// font-size: 16px;
// // 叶子节点（无子节点）
// &.is-leaf {
// color: transparent;
// // display: none; // 也可以去掉
// }
// }
// }
// .el-tree > .el-tree-node > .el-tree-node__content {
// height: 40px;
// background-image: url(../../assets/img/yqjc/24.png);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// .el-icon-error {
// display: none !important;
// }
// .el-icon-edit-outline {
// display: none !important;
// }
// }
// .el-tree
// > .el-tree-node
// > .el-tree-node__children
// > .el-tree-node
// > .el-tree-node__content {
// height: 40px;
// // background-image: url(../../assets/img/yqjc/24.png);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// }
// .el-tree > .el-tree-node > .el-tree-node__content > .el-tree-node__label {
// font-size: 16px !important;
// }
// .custom-tree-node {
// flex: 1;
// display: flex;
// align-items: center;
// justify-content: space-between;
// font-size: 14px;
// padding-right: 8px;
// width: 82%;
// .first-span {
// width: 100%;
// float: left;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// }
// // .list-span{
// // position: absolute;
// // right: 20px;
// // }
// }
// .el-tree > .el-tree-node > .el-tree-node__children {
// background-color: #1d2d46ad !important;
// width: calc(100% - 15px);
// // height: calc(100% - 44px);
// // overflow: auto;
// // position: relative;
// // .el-tree-node{
// // width: 300px;
// // }
// }
// .el-tree-node:focus > .el-tree-node__content {
// background-color: #00648a96 !important;
// // border-radius: 5px;
// }
// .el-tree-node__content:hover,
// .el-tree-node__content:focus {
// background-color: #00638a50 !important;
// // border-radius: 5px;
// }
// .el-tree--highlight-current
// .el-tree-node.is-current
// > .el-tree-node__content {
// background-color: #00648a96 !important;
// // border-radius: 5px;
// }
// .el-icon-circle-plus {
// font-size: 16px;
// color: #00a6f5;
// }
// .el-icon-edit-outline {
// font-size: 16px;
// color: #2ae209;
// }
// .el-icon-error {
// font-size: 16px;
// color: #ff5454;
// }
// .el-icon-upload {
// font-size: 16px;
// color: #2bce0e;
// }
// }
.rwk-right {
width: calc(100% - 20px);
height: 100%;
float: left;
margin-left: 20px;
overflow: hidden;
box-sizing: border-box;
position: relative;
.top-div {
width: calc(100% - 2px);
height: 80px;
border: 1px solid #3a5f94c9;
font-weight: 600;
margin-top: 10px;
border-radius: 0px 15px;
.serch-div {
.el-input__inner {
background: none;
border: 1px solid #3a5f94c9;
color: #ffff;
}
.el-select .el-input {
width: 130px;
background-color: #1c678a;
}
.el-input-group__append {
border: unset;
}
}
// .button-discuss {
// width: 100px;
// height: 30px;
// line-height: 30px;
// float: left;
// margin-top: 44px;
// font-size: 14px;
// margin-left: 20px;
// text-align: center;
// cursor: pointer;
// background-image: url(../../assets/img/yqjc/40.png);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// }
// .button-discuss1 {
// width: 120px;
// height: 30px;
// line-height: 30px;
// float: right;
// font-size: 14px;
// margin-top: 44px;
// margin-left: 20px;
// margin-right: 30px;
// text-align: center;
// cursor: pointer;
// background-image: url(../../assets/img/yqjc/40.png);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// }
// .button-discuss2 {
// width: 100px;
// height: 30px;
// line-height: 30px;
// float: left;
// margin-top: 44px;
// margin-left: 20px;
// text-align: center;
// font-size: 14px;
// cursor: pointer;
// background-image: url(../../assets/img/yqjc/40.png);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// }
// .sjxz {
// width: 400px;
// margin-top: 40px;
// margin-left: 20px;
// float: left;
// box-shadow: 0 0 10px #1b6097;
// .el-date-editor {
// background: none;
// span {
// color: white;
// }
// .el-range-input {
// color: white;
// background: none;
// }
// }
// .el-input__inner {
// border: 1px solid #146a80 !important;
// }
// }
// .select-dq {
// margin-top: 40px;
// margin-left: 20px;
// float: left;
// .el-input__inner {
// background: none;
// color: #ffff;
// border: 1px solid #0dada7b0;
// box-shadow: 0 0 10px #1b6097;
// }
// }
.tm-div {
}
.div-type {
line-height: 25px;
font-size: 13px;
font-weight: 600;
.top-type-span {
width: 100px;
float: left;
margin: 2px 0px;
text-align: right;
}
.top-type-div {
width: calc(100% - 100px);
float: left;
div {
float: left;
margin: 2px 5px;
padding: 0px 5px;
cursor: pointer;
}
.active-CountryRegion {
background: #9d893a;
}
.active-MilitaryPolitics {
background: #9d893a;
}
}
}
.line-s {
border: 1px solid white;
width: 0px;
height: calc(100% - 20px);
box-shadow: 0px 0px 9px #18d3ef;
margin: 10px 20px;
}
.jzxs {
display: flex;
justify-content: center;
.rk-jg-div {
width: 110px;
float: left;
cursor: pointer;
margin: 0px 10px;
.tb-div {
width: 40px;
height: 40px;
background-image: url("../../assets/img/dfzy/new/2.png");
background-size: 100% 100%;
float: left;
margin-right: 10px;
}
.tb-span {
line-height: 40px;
letter-spacing: 2px;
font-size: 15px;
font-weight: 600;
}
}
.active-tb {
.tb-div {
background-image: url("../../assets/img/dfzy/new/1.png");
}
.tb-span {
color: #d7b637;
}
}
}
}
.bottom-div {
width: 100%;
height: calc(100% - 140px);
overflow-y: auto;
overflow-x: hidden;
.rwxx-div {
width: 23%;
height: 160px;
margin: 1%;
float: left;
.zyx {
position: absolute;
width: calc(100% - 37px);
height: calc(100% - 79px);
padding: 21px 23px;
pointer-events: none;
div {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
span {
position: absolute;
top: 9px;
right: -13px;
display: block;
font-size: 12px;
color: #ffffff;
background: #36a8ff;
width: 60px;
line-height: 20px;
text-align: center;
transform: rotate(45deg);
letter-spacing: 3px;
}
}
}
.zyx1 {
position: absolute;
width: calc(100% - 37px);
height: calc(100% - 79px);
padding: 21px 23px;
pointer-events: none;
div {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
span {
position: absolute;
top: 8px;
left: -12px;
display: block;
font-size: 12px;
color: #ffffff;
background: #36a8ff;
width: 60px;
line-height: 20px;
text-align: center;
transform: rotate(-45deg);
letter-spacing: 3px;
}
}
}
.tilts {
width: 100%;
height: 100%;
background-image: url("../../assets/img/dfzy/new/4.png");
background-size: 100% 100%;
cursor: pointer;
// transform: perspective(1000px);
.img-div{
animation:scaleDraw ease-in-out infinite 2s alternate;
}
}
@keyframes scaleDraw {
0%{
transform: scale(1);
}
100%{
transform: scale(1.1);
}
}
.tilts:hover {
transform-style: preserve-3d;
background-image: url("../../assets/img/dfzy/new/3.png");
.name-div{
background-image: url("../../assets/img/dfzy/new/5.png");
}
.top-span {
background: linear-gradient(to bottom, #fffe7f, #54ff88);
-webkit-background-clip: text;
color: transparent;
}
}
.table-active {
background-image: url("../../assets/img/dfzy/new/3.png");
.name-div{
background-image: url("../../assets/img/dfzy/new/5.png");
}
}
.img-div {
width: 70px;
height: 70px;
float: left;
margin: 40px 3px 28px 40px;
border: 2px solid white;
border-radius: 50%;
// transform: translateZ(20px);
.tx-bg {
width: 100%;
height: 100%;
background-size: 100% 100%;
border-radius: 50%;
}
}
.text-div {
width: calc(100% - 130px);
height: 75px;
float: left;
margin-top: 40px;
// transform: translateZ(20px);
.name-div {
width: 100%;
height: 100%;
background-image: url("../../assets/img/dfzy/new/6.png");
background-size: 100% 100%;
text-align: center;
color: white;
.top-span {
font-size: 20px;
font-weight: 900;
letter-spacing: 5px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bottom-span {
width: 60%;
margin-left: 20%;
font-size: 12px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
}
.synopsis-div {
color: #ffffff87;
font-size: 15px;
padding-right: 20px;
padding-left: 20px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-indent: 2em;
word-break: break-all;
white-space: pre-line;
}
.xq-div {
width: calc(100% - 40px);
padding-left: 28px;
height: 20px;
overflow: hidden;
margin-top: 5px;
float: left;
}
.el-tag {
float: left;
margin-right: 10px;
height: 20px;
padding: 0px 8px;
line-height: 19px;
}
}
}
}
}
#_people .el-dialog {
width: 1100px;
}
.el-dialog {
background: #1d2d46 !important;
.el-step__title.is-process {
color: #e0a142;
}
.el-dialog__title {
color: #ffffff;
}
.el-dialog__body {
padding: 6px 20px;
.el-form-item__label {
color: #e8e8e8;
}
.el-cascader {
width: 100%;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 100%;
line-height: 230px;
text-align: center;
}
.avatar {
width: 100%;
height: 100%;
display: block;
}
.right-left {
width: calc(100% - 40px);
float: left;
background: rgba(41, 60, 90, 0.49);
padding: 20px 20px 0px 20px;
.title-div {
float: left;
width: 100%;
height: 25px;
background-size: 100% 100%;
position: relative;
margin-top: 10px;
> span {
position: absolute;
font-weight: 700;
font-size: 18px;
color: #50d7ec;
margin-left: 10px;
}
.el-button {
float: right;
margin-right: 10px;
}
}
.mk-div {
width: 100%;
float: left;
background: #fdfdfd0f;
margin-bottom: 20px;
.data-div {
width: calc(100% - 40px);
float: left;
padding: 20px;
.pub-div-data {
margin: 10px calc(50% - 28px);
color: #909399;
font-size: 14px;
}
.el-table tr {
background-color: #1d2d46 !important;
color: #ffffffc7;
}
.el-table td {
background-color: #253650 !important;
color: #ffffffc7;
}
.el-table td {
border-bottom: 1px solid #127a89;
border-right: unset;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #82848a78;
}
.el-table th {
border: unset;
background-color: #263b5d !important;
}
.el-table--fit {
background: none !important;
border: unset;
}
.el-table--group::after,
.el-table--border::after,
.el-table::before {
background-color: unset;
}
.el-table__header-wrapper table {
width: 100% !important;
}
.el-table__body-wrapper {
.el-table__empty-block {
height: 20px !important;
}
}
}
}
.table_jbxx {
border-collapse: collapse;
width: 100%;
position: relative;
margin-top: 10px;
td {
border: 1px solid #00648c;
padding: 5px 12px;
font-size: 14px;
width: 200px;
}
.img-div {
border: 3px solid #ffffff;
width: 200px;
height: 230px;
img {
background-size: 100% 100%;
}
}
.pub-td1 {
color: #007eff;
font-weight: 900;
width: 100px;
}
.pub-td2 {
color: #8cd4ff;
}
.el-icon-remove {
color: #ff4a4a;
font-size: 20px;
position: absolute;
right: -31px;
margin-top: 11px;
cursor: pointer;
}
.el-icon-circle-plus {
color: #ff4a4a;
font-size: 20px;
position: absolute;
right: -31px;
bottom: 12px;
cursor: pointer;
}
.el-icon-edit-outline {
color: #5cde7c;
font-size: 20px;
position: absolute;
right: 10px;
margin-top: 11px;
cursor: pointer;
}
.button-div {
position: absolute;
right: 40px;
margin-top: 8px;
position: absolute;
}
}
.title-divs {
float: left;
height: 25px;
width: calc(100% - 0px);
// background-image: url("../../assets/img/dfzy/02.png");
// background-size: 100% 100%;
}
}
}
#add_a,
#edit_a {
.el-dialog {
width: 400px;
background-color: #1d2d47;
.el-dialog__header {
text-align: center;
.el-dialog__title {
color: white;
}
}
.el-dialog__body {
padding: 30px 20px;
.dialogContent {
span {
float: left;
margin-top: 5.5px;
color: white;
}
.el-input {
width: 80%;
input {
height: 30px;
}
}
}
}
.el-dialog__title {
color: #ffffff;
}
.el-form-item__label {
color: #dadada;
}
.button-preview {
width: 100px;
height: 30px;
line-height: 30px;
margin-left: calc(50% - 110px);
margin-top: 10px;
font-size: 14px;
text-align: center;
cursor: pointer;
background-image: url(../../assets/img/yqjc/40.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.button-cancel {
width: 100px;
height: 30px;
line-height: 30px;
margin-left: 20px;
margin-top: 10px;
text-align: center;
cursor: pointer;
background-image: url(../../assets/img/yqjc/41.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.el-upload-list__item-name [class^="el-icon"] {
color: #2870ff;
height: unset !important;
}
.el-upload__tip {
color: #c7c7c7;
}
.el-upload-list__item-name {
color: #4382ff;
}
.audio-class {
margin-left: 75px;
}
}
}
.el-dialog {
.el-input__inner {
color: white !important;
background: none !important;
border: 1px solid #146a80 !important;
box-shadow: 0 0 10px #1b6097;
}
.el-textarea__inner {
color: white !important;
background: none !important;
border: 1px solid #146a80 !important;
box-shadow: 0 0 10px #1b6097;
}
}
.gjcx-div {
width: 100%;
position: absolute;
top: 80px;
// box-shadow: rgb(24, 110, 138) 0px 4px 6px;
// background-image: linear-gradient(#21334f, rgb(23, 73, 109));
background-image: linear-gradient(to right, #111112, #2a607f, #221c2c);
.demo-form-inline {
width: 60%;
margin-left: 23%;
padding-top: 15px;
margin-bottom: 20px;
}
.el-input__inner {
color: #ffffff;
background: none !important;
border: 1px solid #146a80 !important;
box-shadow: 0 0 10px #1b6097;
}
.el-form-item {
margin-bottom: 0px;
}
.button-discusss {
width: 100px;
height: 30px;
line-height: 30px;
float: left;
font-size: 14px;
margin-top: 20px;
margin-left: 20px;
text-align: center;
cursor: pointer;
background-image: url(../../assets/img/yqjc/40.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
<template>
<div id="dfzyrwk">
<div class="rwk-right">
<div class="top-div">
<el-row
:gutter="24"
style="
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color:white;
"
>
<el-col :span="6">
<div class="div-type">
<div class="top-type-span">
<span>对象地区：</span>
</div>
<div class="top-type-div">
<div
v-for="item in this.type_arr_country"
@click="dq_fun(item)"
:class="{
'active-CountryRegion': typeCountryRegion.value == item.value,
}"
>
{{ item.name }}
</div>
</div>
</div>
<div class="div-type">
<div class="top-type-span">
<span>类型：</span>
</div>
<div class="top-type-div">
<div
v-for="item in this.type_arr"
@click="MilitaryPolitics_fun(item)"
:class="{
'active-MilitaryPolitics':
typeMilitaryPolitics.value == item.value,
}"
>
{{ item.name }}
</div>
</div>
</div>
</el-col>
<div class="line-s"></div>
<el-col :span="5" class="tm-div">
<SelectTree :value="value_select" filterable :data="tree_data" @NodeClick="NodeClick"/>
</el-col>
<div class="line-s"></div>
<el-col
:span="5"
style="position: relative; padding: 0px"
class="serch-div"
>
<el-input placeholder="请输入姓名或外文名" v-model="input3"></el-input>
<el-button
type="primary"
@click="query(1)"
style="
position: absolute;
right: 8px;
top: 4px;
line-height: 4px;
border-radius: 20px;
height: 30px;
background: linear-gradient(to right, #89f7fe, #66a6ff);
"
>搜索</el-button
>
</el-col>
<!-- <div class="line-s"></div> -->
<el-col :span="2" style="max-width: calc(9% - 31px)" class="pub-col">
<el-button
type="primary"
@click="query_zhcx()"
style="
line-height: 4px;
border-radius: 20px;
height: 30px;
background: linear-gradient(to right, #89f7fe, #66a6ff);
"
>高级搜索</el-button
>
</el-col>
</el-row>
</div>
<div class="bottom-div">
<template v-for="(item, index) in rwkxx">
<div
class="rwxx-div animate__animated bk-bmdx-animation"
:class="[
index % 4 == 0
? 'animate__lightSpeedInLeft'
: index % 4 == 1
? 'animate__zoomIn'
: index % 4 == 2
? 'animate__zoomIn'
: 'animate__lightSpeedInRight',
]"
@click="rwxq(item, index)"
>
<div :class="['tilts', tab_actives == index ? 'table-active' : '']">
<!-- <div class="zyx">
<div>
<span
:style="{
background:
item.extraProperty['重要性'] == '重要'
? '#ff4444'
: '#ff9e44',
}"
>{{ item.extraProperty["重要性"] }}</span
>
</div>
</div> -->
<div class="img-div">
<img class="tx-bg" :src="item.avatarUrl==null?'':item.avatarUrl" :onerror="errimg" />
</div>
<div class="text-div">
<div class="name-div">
<div class="top-span">
{{ item.xm.value }}
</div>
<div class="bottom-span">
{{ item.wwm.value }}
</div>
</div>
<!-- <div class="name-div">
{{ item.baseProperty["姓名"] }}&emsp;&emsp;<span
v-text="item.military_rank"
></span
>&emsp;&emsp;
<span v-text="item.extraProperty['军衔等级']"></span>
<div class="class1">{{ item.baseProperty["姓名"] }}</div>
<div class="class1" style="margin-left: 20px">
{{ item.baseProperty["外文名"] }}
</div>
</div> -->
<!-- <div class="synopsis-div">
<span
v-text="
item.textarea['人物简介'] == '' ||
item.textarea['人物简介'] == undefined
? '暂无简介'
: item.textarea['人物简介']
"
></span>
</div> -->
<!-- <div class="xq-div">
<div class="tag-group">
<el-tag
v-for="(items, index) in item.label"
v-if="item.label != ''"
:key="index"
:type="tags[index % tags.length].type"
effect="dark"
>
{{ items }}
</el-tag>
</div>
</div> -->
</div>
</div>
</div>
</template>
</div>
<div class="page-div">
<el-pagination
class="myPagination"
background
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
:page-size="pageInfo.pageSize"
:current-page="pageInfo.current_page"
:total="pageInfo.total"
@current-change="handleCurrentChange_lb"
:page-sizes="[10, 20, 50, 100]"
>
</el-pagination>
</div>
<el-collapse-transition>
<div class="gjcx-div" v-show="show">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
<el-input v-model="formInline.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item>
<label>外文名</label>
<el-input
v-model="formInline.wwm"
placeholder="外文名"
></el-input>
</el-form-item>
<el-form-item>
<label>行政职务</label>
<el-input
v-model="formInline.xzzw"
placeholder="行政职务"
></el-input>
</el-form-item>
<el-form-item>
<label>人物简介</label>
<el-input
v-model="formInline.rwjj"
placeholder="人物简介"
></el-input>
</el-form-item>
<el-form-item>
<label>标&nbsp;&nbsp;&nbsp;签</label>
<el-input v-model="formInline.bq" placeholder="标签"></el-input>
</el-form-item>
<el-form-item>
<label>重&nbsp;&nbsp;要&nbsp;&nbsp;性</label>
<el-input
v-model="formInline.zyx"
placeholder="重要性"
></el-input>
</el-form-item>
<el-form-item>
<div class="button-discusss" @click="zhcx(1)">查询</div>
<div class="button-discusss" @click="gb_zhcx()">关闭</div>
</el-form-item>
</el-form>
</div>
</el-collapse-transition>
</div>
</div>
</template>
<script>
import {
get,
post,
fileUpload,
delete_util,
getCookie,
delCookie,
} from "../../util/http_util";
import jh_bg from "../../assets/img/dfzy/zwtp.png";
import { uuid } from "../../util/data_util";
import VanillaTilt from "vanilla-tilt";
import SelectTree from "./seleteTree.vue"
import "animate.css";
import { imgUrl } from "../../api/publicUrl";
export default {
components: { SelectTree },
data() {
return {
errimg: "this.src='" + jh_bg + "'",
pageInfo: {
total: 0,
pageSize: 10,
current_page: 1,
},
rwkxx: [],
input3: "",
sj_time: "",
dq: "",
tags: [
{ type: "" },
{ type: "success" },
{ type: "info" },
{ type: "warning" },
{ type: "danger" },
],
jh_bg: jh_bg,
form_add: [
{ comment: "目标属性", value: "" },
{ comment: "目标等级", value: "" },
{ comment: "岗位编号", value: "" },
{ comment: "人物编号", value: "" },
{ comment: "中文名", value: "" },
{ comment: "外文名", value: "" },
{ comment: "所在机构", value: "" },
{ comment: "职务", value: "" },
{ comment: "国家/地区", value: "" },
{ comment: "性别", value: "" },
{ comment: "出生日期", value: "" },
{ comment: "出生地", value: "" },
{ comment: "现职时间", value: "" },
{ comment: "人员类别", value: "" },
{ comment: "学历学位", value: "" },
{ comment: "家庭住址", value: "" },
{ comment: "联系电话", value: "" },
{ comment: "专长领域", value: "" },
{ comment: "社交媒体账号", value: "" },
{ comment: "photos", value: "" },
],
dialogVisible_people: false,
imageUrl: jh_bg,
xzzd: [],
wzmk_data: [],
option_rwmb: [],
option_value_rwmb: "",
is_true: true,
obj_name: "",
// folder: "dfzy-rwk", //头像上传文件夹
fl_type: 1, //查询人物库下面的模板,人物库为11
fileList_head: [],
file_head: {},
file_types_head: ".PNG,.JPG,.JPEG",
this_data: "",
this_node: "",
tree_data: [],
filterText: "",
defaultProps: {
children: "children",
label: "label",
},
dialogVisible_edit: false,
name_edit: "",
options: [],
value_szjg: "",
types: 1,
idFirstEnter: "",
formInline: {
name: "",
wwm: "",
xzzw: "",
rwjj: "",
bq: "",
zyx: "",
},
show: false,
type_zhOrcx: 3,
nodes_pub: {},
i_pub: 0,
type_arr_country: [
{ name: "美国", value: "1" },
{ name: "英国", value: "2" },
{ name: "日本", value: "3" },
{ name: "台湾", value: "4" },
],
type_arr: [
{ name: "军事", value: "1" },
{ name: "政治", value: "2" },
{ name: "经济", value: "3" },
{ name: "社会", value: "4" },
],
type_rw_jg: 0,
typeCountryRegion: {value:'',name:''},
typeMilitaryPolitics: {value:'',name:''},
tab_actives: "-1", //表格切换
categoryId: null,
valueTitle: "",
value_select:4,
value_selects:'',
};
},
methods: {
query_zhcx() {
this.show = !this.show;
},
zhcx(pageNum) {
if(this.types==1){
this.value_select = 1
}else{
this.value_select = 4
}
this.input3 = '';
this.typeCountryRegion = {value:'',name:''};
this.typeMilitaryPolitics = {value:'',name:''};
this.type_zhOrcx = 1;
this.pageInfo.current_page = pageNum;
let pageSize = this.pageInfo.pageSize;
post(
`api/rest/mongo/character/query?pageNum=${pageNum}&pageSize=${pageSize}`,
{
module: this.types == 1 ? "DF" : "DFWW",
combinationSearch:{
chineseName: this.formInline.name,
foreignName: this.formInline.wwm,
xzzw: this.formInline.xzzw,
rwjj: this.formInline.rwjj,
bq: this.formInline.bq,
zyx: this.formInline.zyx,
}
}
)
.then((res) => {
this.rwkxx = [];
setTimeout(() => {
this.rwkxx = res.records;
this.pageInfo.total = res.total;
}, 500);
})
.catch((err) => {
this.$message.warning(err.message);
});
},
gb_zhcx() {
this.show = false;
},
//查询tree数据
query_tree_jg() {
this.tree_data = [];
get("api/rest/mongo/organization/queryTree?module=" + 'DF')
.then((res) => {
let arr = [
{
id: 1,
label: "机构列表",
level: 0,
children: res,
},
];
this.tree_data = this.initData(arr, 1);
get(
"api/rest/mongo/organization/queryTree?module=" +
"DFWW"
)
.then((res1) => {
let arr1 = {
id: 4,
label: "外网机构列表",
level: 0,
type: 2,
children: this.initData(res1, 2),
};
this.tree_data.push(arr1);
this.value_select = 4;
})
.catch((err) => {
this.$message.warning(err.message);
});
})
.then((res) => {
this.handleCurrentChange_lb(1);
})
.catch((err) => {
this.$message.warning(err.message);
});
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
handleSizeChange(val) {
this.pageInfo.pageSize = val;
this.pageInfo.current_page = 1;
this.handleCurrentChange_lb(1);
},
//列表分页
handleCurrentChange_lb(pageNum) {
if (this.type_zhOrcx == 1) {
this.zhcx(pageNum);
} else if(this.type_zhOrcx ==2) {
this.query_jg(pageNum);
}else{
this.query(pageNum);
}
},
query_jg(pageNum) {
this.formInline = {
name: "",
wwm: "",
xzzw: "",
rwjj: "",
bq: "",
zyx: "",
};
this.input3 = '';
this.typeCountryRegion = {value:'',name:''};
this.typeMilitaryPolitics = {value:'',name:''};
this.type_zhOrcx = 2;
this.pageInfo.current_page = pageNum;
let pageSize = this.pageInfo.pageSize;
post(
`api/rest/mongo/character/query?pageNum=${pageNum}&pageSize=${pageSize}`,
{
module: this.types == 1 ? "DF" : "DFWW",
orgId:this.value_select==1||this.value_select==4?null:this.value_selects,
}
)
.then((res) => {
this.rwkxx = [];
setTimeout(() => {
this.rwkxx = res.records;
this.pageInfo.total = res.total;
}, 500);
})
.catch((err) => {
this.$message.warning(err.message);
});
},
query(pageNum) {
this.formInline = {
name: "",
wwm: "",
xzzw: "",
rwjj: "",
bq: "",
zyx: "",
};
if(this.types==1){
this.value_select = 1
}else{
this.value_select = 4
}
this.type_zhOrcx = 3;
this.pageInfo.current_page = pageNum;
let pageSize = this.pageInfo.pageSize;
post(
`api/rest/mongo/character/query?pageNum=${pageNum}&pageSize=${pageSize}`,
{
module: this.types == 1 ? "DF" : "DFWW",
name:this.input3,
type:this.typeMilitaryPolitics.name,
nation:this.typeCountryRegion.name,
}
)
.then((res) => {
this.rwkxx = [];
setTimeout(() => {
this.rwkxx = res.records;
this.pageInfo.total = res.total;
}, 500);
})
.catch((err) => {
this.$message.warning(err.message);
});
},
rwxq(item, index) {
// this.tab_actives = index;
this.$router.push({
name: "人物详情" + this.$route.meta.type_name,
params: { key: item, types: true },
});
},
//查询当前节点的最顶层节点ID
getparentNode(data) {
if (data.data.parentCode == null) {
return data.data.id;
} else {
return this.getparentNode(data.parent);
}
},
query_tree() {
get("api/rest/mongo/template/query")
.then((datas) => {
this.option_rwmb = [];
if (datas.length > 0) {
datas.forEach((item) => {
this.option_rwmb.push({ value: item.id, label: item.name });
});
}
})
.catch((err) => {
this.$message.warning(err.message);
});
},
initData(orgList, type) {
// 第一种
if (orgList.length) {
for (var i = 0; i < orgList.length; i++) {
orgList[i].type = type;
if (orgList[i].children.length) {
// 如果有 children 则继续递归遍历
this.initData(orgList[i].children, type);
}
}
}
return orgList;
},
jsonToArray(nodes) {
var r = [];
if (Array.isArray(nodes)) {
for (var i = 0, l = nodes.length; i < l; i++) {
r.push(nodes[i]); // 取每项数据放入一个新数组
if (
Array.isArray(nodes[i]["children"]) &&
nodes[i]["children"].length > 0
)
// 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
r = r.concat(this.jsonToArray(nodes[i]["children"]));
delete nodes[i]["children"];
}
}
return r;
},
tree_json(nodes) {
let r = [];
for (let i = 0; i < nodes.length; i++) {
r.push(nodes[i]); // 取每项数据放入一个新数组
if (nodes[i].children && nodes[i].children.length > 0)
// 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
r = r.concat(this.tree_json(nodes[i].children));
}
return r;
},
Change_select(value) {
this.form_add[6].value = value + "";
},
/**国家地区切换 */
dq_fun(e) {
if(this.typeCountryRegion.value==e.value){
this.typeCountryRegion = {value:'',name:''};
}else{
this.typeCountryRegion = e;
}
this.query(1);
},
/**军事政治类型切换 */
MilitaryPolitics_fun(e) {
if(this.typeMilitaryPolitics.value==e.value){
this.typeMilitaryPolitics = {value:'',name:''};
}else{
this.typeMilitaryPolitics = e;
}
this.query(1);
},
/**人物机构切换 */
qh_type_rwjg(e) {
this.type_rw_jg = e;
},
NodeClick(val){
if( JSON.stringify(val) == "{}"){
this.value_select = undefined;
this.value_selects = undefined;
this.types = 2;
this.jgName = "1";
}else{
this.value_select = val.id;
this.value_selects = val.code;
this.types = val.type;
this.jgName = val.code == undefined ? val.id : val.code;
}
this.type_zhOrcx = 2;
this.input3 = "";
this.nodes_pub = val;
this.handleCurrentChange_lb(1);
},
},
mounted() {},
watch: {
obj_name: function (val) {
if (val != "") {
this.is_true = false;
} else {
this.is_true = true;
}
},
dialogVisible_people: function (val) {
if (!val) {
this.is_true = false;
}
},
filterText(val) {
this.$refs.tree.filter(val);
},
rwkxx(val) {
// this.$nextTick(() => {
// VanillaTilt.init(document.querySelectorAll(".tilts"), {
// max: 30,
// speed: 400,
// });
// });
},
},
activated() {
if (getCookie("dfzy_rwk") != 1) {
this.filterText = "";
this.input3 = "";
this.types = 2;
this.rwkxx = [];
this.query_tree_jg();
} else {
delCookie("dfzy_rwk");
}
},
created() {
let self = this;
let code = 0;
let code2 = 0;
document.onkeydown = function (e) {
let evn = e || event;
let key = evn.keyCode || evn.which || evn.charCode;
if (key === 13) {
code = 1;
}
if (key === 9) {
code2 = 1;
}
if (code === 1 && code2 === 1) {
alert("Ctrl+tab");
// this obj to do something
code = 0;
code2 = 0;
}
};
document.onkeyup = function (e) {
if (e.keyCode === 13) {
code = 0;
}
if (e.keyCode === 9) {
code2 = 0;
}
};
},
};
</script>
<style lang="scss">
#dfzyrwk {
width: 97%;
height: 92%;
margin: 1%;
box-sizing: border-box;
overflow: hidden;
// .el-input__count {
// color: #229dbd;
// background: #1d2d4600;
// }
// .el-input__count-inner {
// color: #229dbd;
// background: #1d2d46;
// }
// .el-textarea__inner {
// color: white !important;
// background: none !important;
// border: 1px solid #146a80 !important;
// box-shadow: 0 0 10px #1b6097;
// white-space: pre-line;
// }
// .rwk-left {
// width: calc(15% - 10px);
// height: calc(100% - 40px);
// margin-top: 40px;
// margin-left: 10px;
// box-sizing: border-box;
// float: left;
// .el-input {
// position: relative;
// font-size: 14px;
// display: inline-block;
// width: 100%;
// }
// .el-button + .el-button {
// margin-left: 0px !important;
// }
// .el-tree {
// color: white;
// background: transparent;
// height: calc(100% - 50px);
// margin-top: 10px;
// overflow-y: auto;
// .el-tree-node__content {
// height: 40px;
// // .el-icon-circle-plus {
// // display: none;
// // }
// // .el-icon-error {
// // display: none;
// // }
// // .el-icon-upload {
// // display: none;
// // }
// // .el-icon-edit-outline {
// // display: none;
// // }
// // .list-span{
// // display: none;
// // }
// }
// .el-tree-node {
// position: relative;
// padding-left: 0px; // 缩进量
// }
// .el-tree-node__children {
// padding-left: 15px; // 缩进量
// }
// // 竖线
// .el-tree-node::before {
// content: "";
// height: 100%;
// width: 1px;
// position: absolute;
// left: -3px;
// top: -17px;
// border-width: 1px;
// border-left: 1px solid #1895a2;
// }
// // 当前层最后一个节点的竖线高度固定
// .el-tree-node:last-child::before {
// height: 38px; // 可以自己调节到合适数值
// }
// // 横线
// .el-tree-node::after {
// content: "";
// width: 13px;
// height: 20px;
// position: absolute;
// left: -3px;
// top: 20px;
// border-width: 1px;
// border-top: 1px solid #1895a2;
// }
// // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
// & > .el-tree-node::after {
// border-top: none;
// }
// & > .el-tree-node::before {
// border-left: none;
// }
// // 展开关闭的icon
// .el-tree-node__expand-icon {
// font-size: 16px;
// // 叶子节点（无子节点）
// &.is-leaf {
// color: transparent;
// // display: none; // 也可以去掉
// }
// }
// }
// .el-tree > .el-tree-node > .el-tree-node__content {
// height: 40px;
// background-image: url(../../assets/img/yqjc/24.png);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// .el-icon-error {
// display: none !important;
// }
// .el-icon-edit-outline {
// display: none !important;
// }
// }
// .el-tree
// > .el-tree-node
// > .el-tree-node__children
// > .el-tree-node
// > .el-tree-node__content {
// height: 40px;
// // background-image: url(../../assets/img/yqjc/24.png);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// }
// .el-tree > .el-tree-node > .el-tree-node__content > .el-tree-node__label {
// font-size: 16px !important;
// }
// .custom-tree-node {
// flex: 1;
// display: flex;
// align-items: center;
// justify-content: space-between;
// font-size: 14px;
// padding-right: 8px;
// width: 82%;
// .first-span {
// width: 100%;
// float: left;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// }
// // .list-span{
// // position: absolute;
// // right: 20px;
// // }
// }
// .el-tree > .el-tree-node > .el-tree-node__children {
// background-color: #1d2d46ad !important;
// width: calc(100% - 15px);
// // height: calc(100% - 44px);
// // overflow: auto;
// // position: relative;
// // .el-tree-node{
// // width: 300px;
// // }
// }
// .el-tree-node:focus > .el-tree-node__content {
// background-color: #00648a96 !important;
// // border-radius: 5px;
// }
// .el-tree-node__content:hover,
// .el-tree-node__content:focus {
// background-color: #00638a50 !important;
// // border-radius: 5px;
// }
// .el-tree--highlight-current
// .el-tree-node.is-current
// > .el-tree-node__content {
// background-color: #00648a96 !important;
// // border-radius: 5px;
// }
// .el-icon-circle-plus {
// font-size: 16px;
// color: #00a6f5;
// }
// .el-icon-edit-outline {
// font-size: 16px;
// color: #2ae209;
// }
// .el-icon-error {
// font-size: 16px;
// color: #ff5454;
// }
// .el-icon-upload {
// font-size: 16px;
// color: #2bce0e;
// }
// }
.rwk-right {
width: calc(100% - 20px);
height: 100%;
float: left;
margin-left: 20px;
overflow: hidden;
box-sizing: border-box;
position: relative;
.top-div {
width: calc(100% - 2px);
height: 80px;
border: 1px solid #3a5f94c9;
font-weight: 600;
margin-top: 10px;
border-radius: 0px 15px;
.serch-div {
.el-input__inner {
background: none;
border: 1px solid #3a5f94c9;
color: #ffff;
}
.el-select .el-input {
width: 130px;
background-color: #1c678a;
}
.el-input-group__append {
border: unset;
}
}
// .button-discuss {
// width: 100px;
// height: 30px;
// line-height: 30px;
// float: left;
// margin-top: 44px;
// font-size: 14px;
// margin-left: 20px;
// text-align: center;
// cursor: pointer;
// background-image: url(../../assets/img/yqjc/40.png);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// }
// .button-discuss1 {
// width: 120px;
// height: 30px;
// line-height: 30px;
// float: right;
// font-size: 14px;
// margin-top: 44px;
// margin-left: 20px;
// margin-right: 30px;
// text-align: center;
// cursor: pointer;
// background-image: url(../../assets/img/yqjc/40.png);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// }
// .button-discuss2 {
// width: 100px;
// height: 30px;
// line-height: 30px;
// float: left;
// margin-top: 44px;
// margin-left: 20px;
// text-align: center;
// font-size: 14px;
// cursor: pointer;
// background-image: url(../../assets/img/yqjc/40.png);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// }
// .sjxz {
// width: 400px;
// margin-top: 40px;
// margin-left: 20px;
// float: left;
// box-shadow: 0 0 10px #1b6097;
// .el-date-editor {
// background: none;
// span {
// color: white;
// }
// .el-range-input {
// color: white;
// background: none;
// }
// }
// .el-input__inner {
// border: 1px solid #146a80 !important;
// }
// }
// .select-dq {
// margin-top: 40px;
// margin-left: 20px;
// float: left;
// .el-input__inner {
// background: none;
// color: #ffff;
// border: 1px solid #0dada7b0;
// box-shadow: 0 0 10px #1b6097;
// }
// }
.tm-div {
}
.div-type {
line-height: 25px;
font-size: 13px;
font-weight: 600;
.top-type-span {
width: 100px;
float: left;
margin: 2px 0px;
text-align: right;
}
.top-type-div {
width: calc(100% - 100px);
float: left;
div {
float: left;
margin: 2px 5px;
padding: 0px 5px;
cursor: pointer;
}
.active-CountryRegion {
background: #9d893a;
}
.active-MilitaryPolitics {
background: #9d893a;
}
}
}
.line-s {
border: 1px solid white;
width: 0px;
height: calc(100% - 20px);
box-shadow: 0px 0px 9px #18d3ef;
margin: 10px 20px;
}
.jzxs {
display: flex;
justify-content: center;
.rk-jg-div {
width: 110px;
float: left;
cursor: pointer;
margin: 0px 10px;
.tb-div {
width: 40px;
height: 40px;
background-image: url("../../assets/img/dfzy/new/2.png");
background-size: 100% 100%;
float: left;
margin-right: 10px;
}
.tb-span {
line-height: 40px;
letter-spacing: 2px;
font-size: 15px;
font-weight: 600;
}
}
.active-tb {
.tb-div {
background-image: url("../../assets/img/dfzy/new/1.png");
}
.tb-span {
color: #d7b637;
}
}
}
}
.bottom-div {
width: 100%;
height: calc(100% - 140px);
overflow-y: auto;
overflow-x: hidden;
.rwxx-div {
width: 23%;
height: 160px;
margin: 1%;
float: left;
.zyx {
position: absolute;
width: calc(100% - 37px);
height: calc(100% - 79px);
padding: 21px 23px;
pointer-events: none;
div {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
span {
position: absolute;
top: 9px;
right: -13px;
display: block;
font-size: 12px;
color: #ffffff;
background: #36a8ff;
width: 60px;
line-height: 20px;
text-align: center;
transform: rotate(45deg);
letter-spacing: 3px;
}
}
}
.zyx1 {
position: absolute;
width: calc(100% - 37px);
height: calc(100% - 79px);
padding: 21px 23px;
pointer-events: none;
div {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
span {
position: absolute;
top: 8px;
left: -12px;
display: block;
font-size: 12px;
color: #ffffff;
background: #36a8ff;
width: 60px;
line-height: 20px;
text-align: center;
transform: rotate(-45deg);
letter-spacing: 3px;
}
}
}
.tilts {
width: 100%;
height: 100%;
background-image: url("../../assets/img/dfzy/new/4.png");
background-size: 100% 100%;
cursor: pointer;
// transform: perspective(1000px);
.img-div{
animation:scaleDraw ease-in-out infinite 2s alternate;
}
}
@keyframes scaleDraw {
0%{
transform: scale(1);
}
100%{
transform: scale(1.1);
}
}
.tilts:hover {
transform-style: preserve-3d;
background-image: url("../../assets/img/dfzy/new/3.png");
.name-div{
background-image: url("../../assets/img/dfzy/new/5.png");
}
.top-span {
background: linear-gradient(to bottom, #fffe7f, #54ff88);
-webkit-background-clip: text;
color: transparent;
}
}
.table-active {
background-image: url("../../assets/img/dfzy/new/3.png");
.name-div{
background-image: url("../../assets/img/dfzy/new/5.png");
}
}
.img-div {
width: 70px;
height: 70px;
float: left;
margin: 40px 3px 28px 40px;
border: 2px solid white;
border-radius: 50%;
// transform: translateZ(20px);
.tx-bg {
width: 100%;
height: 100%;
background-size: 100% 100%;
border-radius: 50%;
}
}
.text-div {
width: calc(100% - 130px);
height: 75px;
float: left;
margin-top: 40px;
// transform: translateZ(20px);
.name-div {
width: 100%;
height: 100%;
background-image: url("../../assets/img/dfzy/new/6.png");
background-size: 100% 100%;
text-align: center;
color: white;
.top-span {
font-size: 20px;
font-weight: 900;
letter-spacing: 5px;
line-height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bottom-span {
width: 60%;
margin-left: 20%;
font-size: 12px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
}
.synopsis-div {
color: #ffffff87;
font-size: 15px;
padding-right: 20px;
padding-left: 20px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-indent: 2em;
word-break: break-all;
white-space: pre-line;
}
.xq-div {
width: calc(100% - 40px);
padding-left: 28px;
height: 20px;
overflow: hidden;
margin-top: 5px;
float: left;
}
.el-tag {
float: left;
margin-right: 10px;
height: 20px;
padding: 0px 8px;
line-height: 19px;
}
}
}
}
}
#_people .el-dialog {
width: 1100px;
}
.el-dialog {
background: #1d2d46 !important;
.el-step__title.is-process {
color: #e0a142;
}
.el-dialog__title {
color: #ffffff;
}
.el-dialog__body {
padding: 6px 20px;
.el-form-item__label {
color: #e8e8e8;
}
.el-cascader {
width: 100%;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100%;
height: 100%;
line-height: 230px;
text-align: center;
}
.avatar {
width: 100%;
height: 100%;
display: block;
}
.right-left {
width: calc(100% - 40px);
float: left;
background: rgba(41, 60, 90, 0.49);
padding: 20px 20px 0px 20px;
.title-div {
float: left;
width: 100%;
height: 25px;
background-size: 100% 100%;
position: relative;
margin-top: 10px;
> span {
position: absolute;
font-weight: 700;
font-size: 18px;
color: #50d7ec;
margin-left: 10px;
}
.el-button {
float: right;
margin-right: 10px;
}
}
.mk-div {
width: 100%;
float: left;
background: #fdfdfd0f;
margin-bottom: 20px;
.data-div {
width: calc(100% - 40px);
float: left;
padding: 20px;
.pub-div-data {
margin: 10px calc(50% - 28px);
color: #909399;
font-size: 14px;
}
.el-table tr {
background-color: #1d2d46 !important;
color: #ffffffc7;
}
.el-table td {
background-color: #253650 !important;
color: #ffffffc7;
}
.el-table td {
border-bottom: 1px solid #127a89;
border-right: unset;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #82848a78;
}
.el-table th {
border: unset;
background-color: #263b5d !important;
}
.el-table--fit {
background: none !important;
border: unset;
}
.el-table--group::after,
.el-table--border::after,
.el-table::before {
background-color: unset;
}
.el-table__header-wrapper table {
width: 100% !important;
}
.el-table__body-wrapper {
.el-table__empty-block {
height: 20px !important;
}
}
}
}
.table_jbxx {
border-collapse: collapse;
width: 100%;
position: relative;
margin-top: 10px;
td {
border: 1px solid #00648c;
padding: 5px 12px;
font-size: 14px;
width: 200px;
}
.img-div {
border: 3px solid #ffffff;
width: 200px;
height: 230px;
img {
background-size: 100% 100%;
}
}
.pub-td1 {
color: #007eff;
font-weight: 900;
width: 100px;
}
.pub-td2 {
color: #8cd4ff;
}
.el-icon-remove {
color: #ff4a4a;
font-size: 20px;
position: absolute;
right: -31px;
margin-top: 11px;
cursor: pointer;
}
.el-icon-circle-plus {
color: #ff4a4a;
font-size: 20px;
position: absolute;
right: -31px;
bottom: 12px;
cursor: pointer;
}
.el-icon-edit-outline {
color: #5cde7c;
font-size: 20px;
position: absolute;
right: 10px;
margin-top: 11px;
cursor: pointer;
}
.button-div {
position: absolute;
right: 40px;
margin-top: 8px;
position: absolute;
}
}
.title-divs {
float: left;
height: 25px;
width: calc(100% - 0px);
// background-image: url("../../assets/img/dfzy/02.png");
// background-size: 100% 100%;
}
}
}
#add_a,
#edit_a {
.el-dialog {
width: 400px;
background-color: #1d2d47;
.el-dialog__header {
text-align: center;
.el-dialog__title {
color: white;
}
}
.el-dialog__body {
padding: 30px 20px;
.dialogContent {
span {
float: left;
margin-top: 5.5px;
color: white;
}
.el-input {
width: 80%;
input {
height: 30px;
}
}
}
}
.el-dialog__title {
color: #ffffff;
}
.el-form-item__label {
color: #dadada;
}
.button-preview {
width: 100px;
height: 30px;
line-height: 30px;
margin-left: calc(50% - 110px);
margin-top: 10px;
font-size: 14px;
text-align: center;
cursor: pointer;
background-image: url(../../assets/img/yqjc/40.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.button-cancel {
width: 100px;
height: 30px;
line-height: 30px;
margin-left: 20px;
margin-top: 10px;
text-align: center;
cursor: pointer;
background-image: url(../../assets/img/yqjc/41.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.el-upload-list__item-name [class^="el-icon"] {
color: #2870ff;
height: unset !important;
}
.el-upload__tip {
color: #c7c7c7;
}
.el-upload-list__item-name {
color: #4382ff;
}
.audio-class {
margin-left: 75px;
}
}
}
.el-dialog {
.el-input__inner {
color: white !important;
background: none !important;
border: 1px solid #146a80 !important;
box-shadow: 0 0 10px #1b6097;
}
.el-textarea__inner {
color: white !important;
background: none !important;
border: 1px solid #146a80 !important;
box-shadow: 0 0 10px #1b6097;
}
}
.gjcx-div {
width: 100%;
position: absolute;
top: 80px;
// box-shadow: rgb(24, 110, 138) 0px 4px 6px;
// background-image: linear-gradient(#21334f, rgb(23, 73, 109));
background-image: linear-gradient(to right, #111112, #2a607f, #221c2c);
.demo-form-inline {
width: 60%;
margin-left: 23%;
padding-top: 15px;
margin-bottom: 20px;
}
.el-input__inner {
color: #ffffff;
background: none !important;
border: 1px solid #146a80 !important;
box-shadow: 0 0 10px #1b6097;
}
.el-form-item {
margin-bottom: 0px;
}
.button-discusss {
width: 100px;
height: 30px;
line-height: 30px;
float: left;
font-size: 14px;
margin-top: 20px;
margin-left: 20px;
text-align: center;
cursor: pointer;
background-image: url(../../assets/img/yqjc/40.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment