master
loveflow 1 year ago
parent 1629421b69
commit 6011a2aea5

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

@ -31,6 +31,9 @@
.mr18 { .mr18 {
margin-right: 18px; margin-right: 18px;
} }
.mb10 {
margin-bottom: 10px;
}
.mb18 { .mb18 {
margin-bottom: 18px; margin-bottom: 18px;
} }

@ -1,3 +1,201 @@
<template> <template>
<div></div> <div style="height: 100%">
<div class="flexSpaceBetween">
<div class="tableOperator">
<div
class="flex-center filterBtnWrap"
v-for="item in filterList"
:key="item.name"
@click="filterClick(item.value)"
>
<div
:class="{ filterActive: filterValue == item.value }"
class="filterBtn"
>
{{ item.name }} ({{ item.total }})
</div>
<el-divider
:class="{ filterActive: filterValue == '2' }"
direction="vertical"
></el-divider>
</div>
</div>
<div class="searchWrap">
<el-form :inline="true" :model="queryParam" class="demo-form-inline">
<el-form-item label="关键字">
<el-input
v-model="queryParam.key"
placeholder="请输入姓名、身份证"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchQuery"></el-button>
<el-button type="primary" plain @click="searchReset"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
</div>
<div class="tableWrap">
<gMainTable
border
stripe
ref="gMainTable"
:tableData="dataSource"
:columns="columns"
rowKey="id"
:pagination="ipagination"
@pageSizeChange="handlePageSizeChange"
@currentPageChange="handleCurrentPageChange"
>
<template v-slot:scSlot="{ scope }">
<span class="noColor"> {{ scope.row.sc }}</span>
</template>
<template v-slot:gwSlot="{ scope }">
<div class="personType gaowei">{{ scope.row.personType }}</div>
</template>
</gMainTable>
</div>
</div>
</template> </template>
<script>
import { tableListMixins } from "@/loveflow/mixins/tableListMixins";
export default {
mixins: [tableListMixins],
data() {
return {
filterValue: "1",
filterList: [
{
name: "全部",
value: "1",
total: 123,
},
{
name: "重要精神病",
value: "2",
total: 12,
},
{
name: "非防人员",
value: "3",
total: 123,
},
{
name: "退役重点人员",
value: "4",
total: 23,
},
{
name: "个人极端人员",
value: "5",
total: 13,
},
{
name: "家暴人员",
value: "6",
total: 13,
},
{
name: "前科人员",
value: "7",
total: 13,
},
{
name: "酗酒人员",
value: "8",
total: 13,
},
],
columns: [
{
prop: "name",
label: "姓名",
},
{
prop: "gender",
label: "性别",
},
{
prop: "gender",
label: "人员类型",
},
{
prop: "gender",
label: "民族",
},
{
prop: "card",
label: "身份证号",
attrs: {
width: 180,
},
},
{
prop: "gender",
label: "户口省县",
},
{
prop: "phone",
label: "户口详址",
},
{
prop: "cmy",
label: "归属企业",
},
{
prop: "address",
label: "婚姻状况",
},
{
slot: "gwSlot",
prop: "address",
label: "文化程度",
},
{
prop: "personType",
label: "暂住地址",
},
{
prop: "date",
label: "暂住场所",
attrs: {
width: 180,
},
},
{
slot: "scSlot",
prop: "address",
label: "所属区县",
},
{
prop: "address",
label: "所属派出所",
},
{
prop: "address",
label: "所属委员会",
},
{
prop: "date",
label: "登记日期",
attrs: {
width: 180,
},
},
{
prop: "address",
label: "重点类别",
},
],
};
},
methods: {
filterClick(val) {
this.filterValue = val;
},
},
};
</script>

@ -0,0 +1,41 @@
<template>
<div class="enterpriseTopic">
<head-wrap title="平安企业专题驾驶舱"></head-wrap>
</div>
</template>
<script>
import headWrap from "@/views/home/head.vue";
export default {
components: { headWrap },
data() {
return {};
},
};
</script>
<style lang="less"></style>
<style lang="scss" scoped>
@import "@/loveflow/assets/index.scss";
.enterpriseTopic {
.riskCol {
padding-left: vw(8);
font-size: vh(16);
.riskName {
height: 30px;
display: flex;
margin-top: vh(6);
color: #d9e7ff;
.riskIcon {
width: vw(24);
height: vh(24);
background: url("~@/assets/images/screen/riskIcon.png") no-repeat center
center;
background-size: 100% 100%;
}
}
}
}
</style>

@ -1,21 +1,124 @@
<template> <template>
<div> <div class="enterpriseTopic">
<!-- 驾驶舱 --> <head-wrap title="平安企业专题驾驶舱"></head-wrap>
专题驾驶舱大屏 <div class="enterpriseTopicBody">
<el-button @click="gotoPage('/topic/personSafety')"></el-button> <div class="riskRow topRow">
<div class="riskCol mr18">
<div class="inRow">
<div class="sideLtCol mb10"></div>
<div class="sideLmCol"></div>
</div>
</div>
<div class="riskCol midCol mr18"></div>
<div class="riskCol midCol mr18"></div>
<div class="riskCol">
<div class="inRow">
<div class="riskCol sideCol mb10"></div>
<div class="riskCol sideCol"></div>
</div>
</div>
</div>
<div class="riskRow btmRow">
<div class="riskCol mr18"></div>
<div class="riskCol"></div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import headWrap from "@/views/home/head.vue";
export default { export default {
components: { headWrap },
data() { data() {
return {}; return {};
}, },
methods: {
gotoPage(val) {
this.$router.push({
path: val,
});
},
},
}; };
</script> </script>
<style lang="less">
.enterpriseTopic {
height: 100%;
background: url("~@/assets/images/topic/allback.png") no-repeat center center;
background-size: 100% 100%;
.enterpriseTopicBody {
position: absolute;
top: 100px;
left: 16px;
width: calc(100% - 32px);
height: calc(100% - 110px);
display: flex;
flex-direction: column;
justify-content: space-between;
.riskRow {
display: flex;
}
.inRow {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.riskCol {
flex: 1;
}
}
}
</style>
<style lang="scss" scoped>
@import "@/loveflow/assets/index.scss";
.enterpriseTopic {
.enterpriseTopicBody {
.topRow {
height: vh(632);
.midCol {
background: url("~@/assets/images/topic/midCol.png") no-repeat center
center;
background-size: 100% 100%;
}
.sideCol {
background: url("~@/assets/images/topic/sideCol.png") no-repeat center
center;
background-size: 100% 100%;
}
.sideLtCol {
height: vh(248);
background: url("~@/assets/images/topic/sideLtCol.png") no-repeat center
center;
background-size: 100% 100%;
}
.sideLmCol {
flex: 1;
background: url("~@/assets/images/topic/sideLmCol.png") no-repeat center
center;
background-size: 100% 100%;
}
}
.btmRow {
height: vh(308);
.riskCol {
background: url("~@/assets/images/topic/bCol.png") no-repeat center
center;
background-size: 100% 100%;
}
}
}
.riskCol {
//padding-left: vw(8);
font-size: vh(16);
.riskName {
height: 30px;
display: flex;
margin-top: vh(6);
color: #d9e7ff;
.riskIcon {
width: vw(24);
height: vh(24);
}
}
}
}
</style>

@ -0,0 +1,36 @@
<template>
<div class="homeHeadPanel">
<div class="homeHeadWrap">{{ title }}</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: () => {
return "";
},
},
},
data() {
return {};
},
};
</script>
<style lang="less">
.homeHeadWrap {
position: absolute;
padding-top: 36px;
top: 0;
width: 100%;
height: 130px;
font-weight: bold;
font-size: 34px;
letter-spacing: 4px;
color: #ffffff;
background: url("~@/assets/images/home/head.png") no-repeat center center;
background-size: 100% 100%;
text-align: center;
}
</style>

@ -1,49 +1,45 @@
<template> <template>
<div class="homePage"> <div class="homePage">
<div class="header flex-center">首页</div> <head-wrap title="首页"></head-wrap>
<div class="funMenu"> <div class="funMenu">
<!-- <div class="line" v-for="(line, index) in menuList" :key="index">
<div
class="item"
v-for="item in line"
:key="item.name"
@click="gotoPage(item.url)"
>
<div class="iconWrap">
<img :src="item.icon" />
</div>
<div class="nameWrap">
{{ item.name }}
</div>
<div class="optWrap">点击进入</div>
</div>
</div>
-->
<!-- 旋转动画 --> <!-- 旋转动画 -->
<div class="diPan"></div>
<div class="animate"> <div class="animate">
<div class="ball ball1"> <div class="ball ball1">
<img src="@/assets/images/home/jc.png" /> <img
<p>1</p> src="@/assets/images/home/jc.png"
@click="gotoPage('/integration/compositeIndex')"
/>
</div> </div>
<div class="ball ball2"> <div class="ball ball2">
<img src="@/assets/images/home/fw.png" /> <img
<p>2</p> src="@/assets/images/home/fw.png"
@click="gotoPage('/integration/applySupermarket')"
/>
</div> </div>
<div class="ball ball3"> <div class="ball ball3">
<img src="@/assets/images/home/da.png" /> <img
<p>3</p> src="@/assets/images/home/da.png"
@click="gotoPage('/integration/enterpriseArchives')"
/>
</div> </div>
<div class="ball ball4"> <div class="ball ball4">
<img src="@/assets/images/home/fx.png" /> <img
<p>4</p> src="@/assets/images/home/fx.png"
@click="gotoPage('/riskIndex/analysis')"
/>
</div> </div>
<div class="ball ball5"> <div class="ball ball5">
<img src="@/assets/images/home/xt.png" /> <img
<p>5</p> src="@/assets/images/home/xt.png"
@click="gotoPage('/teamWork/screen')"
/>
</div> </div>
<div class="ball ball6"> <div class="ball ball6">
<img src="@/assets/images/home/zt.png" /> <img
<p>6</p> src="@/assets/images/home/zt.png"
@click="gotoPage('/topic/screen')"
/>
</div> </div>
</div> </div>
</div> </div>
@ -51,52 +47,11 @@
</template> </template>
<script> <script>
import { getCheckCode } from "@/utils/login"; import { getCheckCode } from "@/utils/login";
import headWrap from "./head.vue";
export default { export default {
components: { headWrap },
data() { data() {
return { return {};
menuList: [
[
{
name: "集成驾驶舱",
value: "compositeIndex",
icon: require("@/assets/images/base/xj.png"),
url: "/integration/compositeIndex",
},
{
name: "专题驾驶舱",
value: "2",
icon: require("@/assets/images/base/xj.png"),
url: "/topic/screen",
},
{
name: "平安企业协同共治",
value: "3",
icon: require("@/assets/images/base/xj.png"),
url: "/teamWork/screen",
},
],
[
{
name: "平安企业服务",
value: "applySupermarket",
icon: require("@/assets/images/base/xj.png"),
url: "/integration/applySupermarket",
},
{
name: "企业档案管理",
value: "enterpriseArchives",
icon: require("@/assets/images/base/xj.png"),
url: "/integration/enterpriseArchives",
},
{
name: "企业风险指数",
value: "6",
icon: require("@/assets/images/base/xj.png"),
url: "/riskIndex/analysis",
},
],
],
};
}, },
created() { created() {
let random = Math.random(); let random = Math.random();
@ -104,19 +59,19 @@ export default {
var items = document.getElementsByClassName("ball"); var items = document.getElementsByClassName("ball");
//console.log(items) //console.log(items)
for (var i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
items[i].addEventListener("click", function () { items[i].addEventListener("click", function () {
console.log(this); console.log(this);
}); });
} }
for (var i = 0; i < items.length; i++) { for (let i = 0; i < items.length; i++) {
items[i].addEventListener("mouseover", function () { items[i].addEventListener("mouseover", function () {
for (j = 0; j < items.length; j++) { for (let j = 0; j < items.length; j++) {
items[j].style.animationPlayState = "paused"; items[j].style.animationPlayState = "paused";
} }
}); });
items[i].addEventListener("mouseout", function () { items[i].addEventListener("mouseout", function () {
for (j = 0; j < items.length; j++) { for (let j = 0; j < items.length; j++) {
items[j].style.animationPlayState = "running"; items[j].style.animationPlayState = "running";
} }
}); });
@ -140,66 +95,37 @@ export default {
<style lang="less"> <style lang="less">
.homePage { .homePage {
height: 100%; height: 100%;
background-color: #0c294c; background: url("~@/assets/images/home/bg.png") no-repeat center center;
background-size: 100% 100%;
.header { box-sizing: border-box;
height: 60px;
background-color: #094b71;
font-size: 18px;
font-weight: bold;
color: #ffffff;
}
.funMenu { .funMenu {
/* height: calc(100% - 60px); position: absolute;
top: 80px;
left: 10px;
width: calc(100% - 20px);
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
.line {
display: flex;
justify-content: space-evenly;
margin-bottom: 50px;
.item {
width: 180px;
height: 240px;
display: flex;
flex-direction: column;
align-items: center; align-items: center;
background-color: #103e71; height: calc(100% - 90px);
color: #ffffff; background: url("~@/assets/images/home/bg2.png") no-repeat center center;
.iconWrap { background-size: 100% 100%;
margin-top: 20px; box-sizing: border-box;
margin-bottom: 30px;
img {
width: 80px;
height: 80px;
}
}
.nameWrap {
margin-bottom: 16px;
}
.optWrap {
padding: 4px 12px;
border-radius: 4px;
background-color: #1b70c7;
}
&:hover {
opacity: 0.8;
cursor: pointer;
}
}
} */
/* 旋转动画 */ /* 旋转动画 */
.animate { .diPan {
width: 420px;
height: 300px;
border-radius: 50%;
position: absolute; position: absolute;
left: 10px; width: 1400px;
top: 20px; height: 600px;
background: url("~@/assets/images/home/btm.png") no-repeat center center;
background-size: 100% 100%;
}
.animate {
width: 1200px;
height: 700px;
position: relative;
.ball { .ball {
width: 100px; width: 200px;
height: 100px; height: 240px;
position: absolute; position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -208,62 +134,63 @@ export default {
font-size: 12px; font-size: 12px;
} }
.ball img:hover { .ball img:hover {
transform: scale(1.2); cursor: pointer;
transform: scale(1.1);
} }
.ball img { .ball img {
width: 70px; width: 180px;
height: 70px; height: 216px;
margin-bottom: 10px; margin-bottom: 10px;
} }
/* 6xy18s , 18s/6 3s /* 6xy60s , 60s/6 10s
每个球y轴动画延迟 从0递减3s,x轴与y轴相差动画时长的一半9s/2 */ 每个球y轴动画延迟 从0递减5s,x轴与y轴相差动画时长的一半30s/2 */
.ball1 { .ball1 {
animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate, animation: animX 30s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate,
animY 9s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate, animY 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
scale 18s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate; scale 60s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
} }
.ball2 { .ball2 {
animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate, animation: animX 30s cubic-bezier(0.36, 0, 0.64, 1) -25s infinite alternate,
animY 9s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate, animY 30s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
scale 18s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate; scale 60s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
} }
.ball3 { .ball3 {
animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -10.5s infinite alternate, animation: animX 30s cubic-bezier(0.36, 0, 0.64, 1) -35s infinite alternate,
animY 9s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate, animY 30s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate,
scale 18s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate; scale 60s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate;
} }
.ball4 { .ball4 {
animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate, animation: animX 30s cubic-bezier(0.36, 0, 0.64, 1) -45s infinite alternate,
animY 9s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate, animY 30s cubic-bezier(0.36, 0, 0.64, 1) -30s infinite alternate,
scale 18s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate; scale 60s cubic-bezier(0.36, 0, 0.64, 1) -30s infinite alternate;
} }
.ball5 { .ball5 {
animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -16.5s infinite alternate, animation: animX 30s cubic-bezier(0.36, 0, 0.64, 1) -55s infinite alternate,
animY 9s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate, animY 30s cubic-bezier(0.36, 0, 0.64, 1) -40s infinite alternate,
scale 18s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate; scale 60s cubic-bezier(0.36, 0, 0.64, 1) -40s infinite alternate;
} }
.ball6 { .ball6 {
animation: animX 9s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate, animation: animX 30s cubic-bezier(0.36, 0, 0.64, 1) -65s infinite alternate,
animY 9s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate, animY 30s cubic-bezier(0.36, 0, 0.64, 1) -50s infinite alternate,
scale 18s cubic-bezier(0.36, 0, 0.64, 1) -15s infinite alternate; scale 60s cubic-bezier(0.36, 0, 0.64, 1) -50s infinite alternate;
} }
} }
} }
@keyframes animX { @keyframes animX {
0% { from {
left: -20px; left: 0;
} }
100% { to {
left: 340px; left: 1000px;
} }
} }
@keyframes animY { @keyframes animY {
0% { from {
top: -30px; top: 10px;
} }
100% { to {
top: 200px; top: 500px;
} }
} }
@keyframes scale { @keyframes scale {
@ -271,7 +198,7 @@ export default {
transform: scale(0.7); transform: scale(0.7);
} }
50% { 50% {
transform: scale(1.2); transform: scale(1.1);
} }
100% { 100% {
transform: scale(0.7); transform: scale(0.7);

Loading…
Cancel
Save