Merge pull request '首页大屏惠企服务' (#124) from lukeyan into master

Reviewed-on: #124
pull/125/head
lukeyan 1 year ago
commit ecea67378c

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 802 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

@ -7,8 +7,8 @@ const request = axios.create({
//baseURL: 'http://172.18.113.50:8080/zhapi',
//baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
//baseURL: 'http://192.168.0.188:8888/zhapi',
baseURL: 'http://121.41.91.94:12002/zhapi',
//baseURL: `http://${window.location.host}/zhapi`,
//baseURL: 'http://121.41.91.94:12002/zhapi',
baseURL: `http://${window.location.host}/zhapi`,
timeout: 50000,
headers: { 'content-type': 'application/json' },
})

@ -0,0 +1,243 @@
<!-- 园区车辆 -->
<template>
<div class="company_car_box">
<!-- 模块标题 -->
<div class="title">
<div class="img_box">
<!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
</div>
<div class="title_text">园区车辆</div>
</div>
<div class="car_num_box">
<!-- 进园区车辆 -->
<div class="in_car">
<div class="in_car_icon">
<div class="in_car_icon_item"></div>
</div>
<div class="in_car_item">
<div class="in_car_item_text">今日进园区</div>
<div class="in_car_item_value">
<div class="in_car_num">
{{ this.in_car_num }}
</div>
<div class="num_text"></div>
</div>
</div>
</div>
<!-- 出园区车辆 -->
<div class="out_car">
<div class="out_car_icon">
<div class="out_car_icon_item"></div>
</div>
<div class="out_car_item">
<div class="out_car_item_text">今日出园区</div>
<div class="out_car_item_value">
<div class="out_car_num">
{{ this.out_car_num }}
</div>
<div class="num_text"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { vehicleIn } from "@/api/safetyIndex";
export default {
name: "CompanyCar",
data() {
return {
in_car_num: "", //
out_car_num: "", //
};
},
created() {
this.get_in_car_num();
this.get_out_car_num();
},
methods: {
//
get_in_car_num() {
let params = {
direction: 1,
pageSize: 1,
pageNum: 1,
};
vehicleIn(params).then((res) => {
this.in_car_num = res.total;
});
},
//
get_out_car_num() {
let params = {
direction: 2,
pageSize: 1,
pageNum: 1,
};
vehicleIn(params).then((res) => {
this.out_car_num = res.total;
});
},
},
};
</script>
<style lang="less" scoped>
.company_car_box {
margin-top: 10px;
width: 24vw;
height: 28vh;
background: url("~@/assets/safetyIndex/back001.png") no-repeat;
background-size: 100% 100%;
/* 盒子标题 */
.title {
width: 24vw;
height: 2.7vh;
display: flex;
font-size: 16px;
color: #d9e7ff;
font-weight: 500;
/* 图片盒子 */
.img_box {
width: 1.5vw;
height: 2.7vh;
display: flex;
justify-content: center;
align-items: center;
img {
width: 16px;
height: 16px;
}
}
.title_text {
width: 4vw;
height: 3.2vh;
line-height: 3.2vh;
text-align: right;
}
}
.car_num_box {
margin-left: 1vw;
margin-top: 1vh;
width: 22vw;
height: 5vh;
display: flex;
justify-content: space-around;
.in_car {
width: 10vw;
height: 5vh;
// border: 0.1px solid #495e70;
display: flex;
.in_car_icon {
width: 2.5vw;
height: 5vh;
background: url("~@/assets/safetyIndex/back003.png") no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
.in_car_icon_item {
width: 20px;
height: 20px;
background: url("~@/assets/safetyIndex/incaricon.png") no-repeat;
background-size: 100% 100%;
}
}
.in_car_item {
width: 7vw;
height: 5vh;
// border: 0.1px solid #495e70;
.in_car_item_text {
width: 7vw;
height: 2.5vh;
line-height: 2.5vh;
color: #d9e7ff;
font-size: 14px;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
.in_car_item_value {
background: url("~@/assets/safetyIndex/back004.png") no-repeat;
background-size: 100% 100%;
width: 7vw;
height: 2.5vh;
display: flex;
.in_car_num {
width: 4vw;
height: 2.5vh;
color: #d9e7ff;
line-height: 2.5vh;
text-align: center;
font-size: 20px;
font-weight: 600;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
.num_text {
color: #d9e7ff;
font-size: 12px;
width: 2vw;
height: 2.5vh;
line-height: 2.5vh;
}
}
}
}
.out_car {
width: 10vw;
height: 5vh;
display: flex;
.out_car_icon {
width: 2.5vw;
height: 5vh;
background: url("~@/assets/safetyIndex/back003.png") no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
.out_car_icon_item {
width: 20px;
height: 20px;
background: url("~@/assets/safetyIndex/incaricon.png") no-repeat;
background-size: 100% 100%;
}
}
.out_car_item {
width: 7vw;
height: 5vh;
// border: 0.1px solid #495e70;
.out_car_item_text {
width: 7vw;
height: 2.5vh;
line-height: 2.5vh;
color: #d9e7ff;
font-size: 14px;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
.out_car_item_value {
background: url("~@/assets/safetyIndex/back004.png") no-repeat;
background-size: 100% 100%;
width: 7vw;
height: 2.5vh;
display: flex;
.out_car_num {
width: 4vw;
height: 2.5vh;
color: #d9e7ff;
line-height: 2.5vh;
text-align: center;
font-size: 20px;
font-weight: 600;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
.num_text {
color: #d9e7ff;
font-size: 12px;
width: 2vw;
height: 2.5vh;
line-height: 2.5vh;
}
}
}
}
}
}
</style>

@ -184,7 +184,6 @@ export default {
<style lang="less" scoped>
.company_num_box {
margin-top: 10px;
margin-left: 20px;
width: 24vw;
height: 28vh;
// border: 0.1px solid #495e70;

@ -0,0 +1,242 @@
<!-- 惠企服务 -->
<template>
<div class="company_service_box">
<!-- 模块标题 -->
<div class="title">
<div class="img_box">
<!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
</div>
<div class="title_text">惠企服务</div>
</div>
<!-- 服务类别 -->
<div class="service_type">
<div class="month_service">
<div class="month_service_text">当月服务</div>
<div class="month_service_value">123</div>
</div>
<div class="season_service">
<div class="season_service_text">季度服务</div>
<div class="season_service_value">123</div>
</div>
<div class="year_service">
<div class="year_service_text">年度服务</div>
<div class="year_service_value">123</div>
</div>
</div>
<!-- 服务echarts表 -->
<div class="service_echarts">
<div class="left_chart"></div>
<div class="right_chart"></div>
</div>
<div class="chart_num">
<div class="left_chart_num">
<div class="chart_num_text">惠企服务总量</div>
<div class="chart_num_value">1222</div>
</div>
<div class="right_chart_num">
<div class="chart_num_text">请求受理总量</div>
<div class="chart_num_value">1222</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CompanyService",
data() {
return {};
},
};
</script>
<style lang="less" scoped>
.company_service_box {
margin-top: 10px;
width: 24vw;
height: 28vh;
// border: 0.1px solid #495e70;
background: url("~@/assets/safetyIndex/back001.png") no-repeat;
background-size: 100% 100%;
/* 盒子标题 */
.title {
width: 24vw;
height: 2.7vh;
display: flex;
font-size: 16px;
color: #d9e7ff;
font-weight: 500;
/* 图片盒子 */
.img_box {
width: 1.5vw;
height: 2.7vh;
display: flex;
justify-content: center;
align-items: center;
img {
width: 16px;
height: 16px;
}
}
.title_text {
width: 4vw;
height: 3.2vh;
line-height: 3.2vh;
text-align: right;
}
}
.service_type {
width: 22vw;
height: 6vh;
margin-top: 1vh;
margin-left: 1vw;
display: flex;
justify-content: space-around;
.month_service {
width: 6vw;
height: 6.5vh;
background: url("~@/assets/safetyIndex/service001.png") no-repeat;
background-size: 100% 100%;
.month_service_text {
width: 6vw;
height: 3vh;
color: #37fdc7;
font-size: 14px;
font-weight: 600;
letter-spacing: 2px;
text-align: center;
line-height: 3vh;
}
.month_service_value {
text-align: center;
color: #37fdc7;
width: 6vw;
height: 3.5vh;
line-height: 3.5vh;
font-size: 28px;
font-weight: 600;
}
}
.season_service {
width: 6vw;
height: 6.5vh;
background: url("~@/assets/safetyIndex/service002.png") no-repeat;
background-size: 100% 100%;
.season_service_text {
width: 6vw;
height: 3vh;
color: #ecde3d;
font-size: 14px;
font-weight: 600;
letter-spacing: 2px;
text-align: center;
line-height: 3vh;
}
.season_service_value {
text-align: center;
color: #ecde3d;
width: 6vw;
height: 3.5vh;
line-height: 3.5vh;
font-size: 28px;
font-weight: 600;
}
}
.year_service {
width: 6vw;
height: 6.5vh;
background: url("~@/assets/safetyIndex/service001.png") no-repeat;
background-size: 100% 100%;
.year_service_text {
width: 6vw;
height: 3vh;
color: #37fdc7;
font-size: 14px;
font-weight: 600;
letter-spacing: 2px;
text-align: center;
line-height: 3vh;
}
.year_service_value {
text-align: center;
color: #37fdc7;
width: 6vw;
height: 3.5vh;
line-height: 3.5vh;
font-size: 28px;
font-weight: 600;
}
}
}
.service_echarts {
width: 24vw;
height: 13vh;
display: flex;
.left_chart {
width: 12vw;
height: 13vh;
border: 0.1px solid #495e70;
}
.right_chart {
width: 12vw;
height: 13vh;
border: 0.1px solid #495e70;
}
}
.chart_num {
margin-top: 0.5vh;
width: 24vw;
height: 3vh;
display: flex;
justify-content: space-around;
.left_chart_num {
width: 10vw;
height: 3vh;
background: url("~@/assets/safetyIndex/service003.png") no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
.chart_num_text {
width: 5vw;
height: 3vh;
text-align: center;
line-height: 3vh;
color: #d9e7ff;
font-size: 14px;
}
.chart_num_value {
width: 3vw;
height: 3vh;
text-align: center;
line-height: 3vh;
color: #d9e7ff;
font-size: 18px;
font-weight: 600;
}
}
.right_chart_num {
width: 10vw;
height: 3vh;
background: url("~@/assets/safetyIndex/service003.png") no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
.chart_num_text {
width: 5vw;
height: 3vh;
text-align: center;
line-height: 3vh;
color: #d9e7ff;
font-size: 14px;
}
.chart_num_value {
width: 3vw;
height: 3vh;
text-align: center;
line-height: 3vh;
color: #d9e7ff;
font-size: 18px;
font-weight: 600;
}
}
}
}
</style>

@ -44,32 +44,70 @@
<!-- 员工类型数量 -->
<div class="person_type_num">
<div class="person_type_num_item">
{{ this.person_list[0].number }}
{{ this.person_one }}
</div>
<div class="person_type_num_item">
{{ this.person_list[1].number }}
{{ this.person_two }}
</div>
<div class="person_type_num_item">
{{ this.person_list[2].number }}
{{ this.person_three }}
</div>
<div class="person_type_num_item">
{{ this.person_list[3].number }}
{{ this.person_four }}
</div>
</div>
<!-- 员工占比 -->
<div class="person_proportion">
<div class="person_proportion_item">
{{ this.proportion_list[0] }}
</div>
<div class="person_proportion_item">
{{ this.proportion_list[1] }}
</div>
<div class="person_proportion_item">
{{ this.proportion_list[2] }}
</div>
<div class="person_proportion_item">
{{ this.proportion_list[3] }}
</div>
</div>
</div>
</div>
<!-- 访客和流动人员 -->
<div class="visitor_person_body">
<div class="visitor_body">
<div class="visitor_text">访客</div>
<div class="visitor_value">{{ this.visitor_num }}</div>
</div>
<div class="person_body">
<div class="person_text">流动人员</div>
<div class="person_value">{{ this.flow_person_num }}</div>
</div>
</div>
</div>
</template>
<script>
import HighCharts from "highcharts";
import { staffStatistics } from "@/api/safetyIndex";
import {
staffStatistics,
visitStatistics,
flowStatistics,
} from "@/api/safetyIndex";
export default {
name: "Employee",
data() {
return {
person_sum: "", //
person_list: [], //
next_person_list: [], // 3d
person_one: "", //
person_two: "", //
person_three: "", //
person_four: "", //
option_data: [],
proportion_list: [],
visitor_num: 0,
flow_person_num: 0,
statusChart: null,
id: "DispatchProportion",
option: {
@ -144,6 +182,9 @@ export default {
},
created() {
this.get_data();
this.get_person_data();
this.get_visitor_data();
this.get_flow_person_data()
},
// mounted() {
@ -170,6 +211,17 @@ export default {
this.person_sum = res.data.filter((item) => {
return item.type == "全部";
})[0].number;
//
for (let i = 0; i < this.person_list.length; i++) {
this.proportion_list.push(
Math.round(
(Number(this.person_list[i].number) / Number(this.person_sum)) *
10000
) /
100 +
"%"
);
}
console.log("this.optionData123", this.option_data);
let data = [
["普通岗位", Number(this.option_data[0].value)],
@ -181,13 +233,36 @@ export default {
HighCharts.chart(this.id, this.option);
});
},
// --> 3d
get_person_data() {
staffStatistics().then((res) => {
let list = res.data.filter((item) => {
return item.type != "全部";
});
this.person_one = list[0].number;
this.person_two = list[1].number;
this.person_three = list[2].number;
this.person_four = list[3].number;
});
},
// 访
get_visitor_data() {
visitStatistics().then((res) => {
this.visitor_num = res.data;
});
},
//
get_flow_person_data() {
flowStatistics().then((res)=>{
this.flow_person_num = res.data
})
},
},
};
</script>
<style lang="less" scoped>
.employee_box {
margin-top: 10px;
margin-left: 20px;
width: 24vw;
height: 32vh;
// border: 0.1px solid #495e70;
@ -269,7 +344,7 @@ export default {
.chart_data_body {
width: 12vw;
height: 16vh;
border: 0.1px solid #495e70;
// border: 0.1px solid #495e70;
display: flex;
.data_icon {
width: 1vw;
@ -320,7 +395,6 @@ export default {
.person_type_num {
width: 3vw;
height: 16vh;
border: 0.1px solid #495e70;
.person_type_num_item {
width: 3vw;
height: 4vh;
@ -329,6 +403,82 @@ export default {
line-height: 4vh;
}
}
.person_proportion {
width: 3vw;
height: 16vh;
// border: 0.1px solid #495e70;
.person_proportion_item {
width: 3vw;
height: 4vh;
color: #d9e7ff;
text-align: center;
line-height: 4vh;
}
}
}
}
.visitor_person_body {
width: 22vw;
height: 5vh;
// border: 0.1px solid #495e70;
margin-left: 1vw;
display: flex;
justify-content: space-around;
.visitor_body {
width: 10vw;
height: 5vh;
background: url("~@/assets/safetyIndex/employee01.png") no-repeat;
background-size: 100% 100%;
display: flex;
justify-content: center;
.visitor_text {
width: 4vw;
height: 5vh;
text-align: right;
color: #d9e7ff;
line-height: 5vh;
font-size: 14px;
letter-spacing: 2px;
font-weight: 500;
}
.visitor_value {
width: 3vw;
height: 5vh;
color: #d9e7ff;
line-height: 5vh;
text-align: center;
font-weight: 800;
font-size: 18px;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
}
.person_body {
width: 10vw;
height: 5vh;
background: url("~@/assets/safetyIndex/employee02.png") no-repeat;
background-size: 100% 100%;
// border: 0.1px solid #495e70;
display: flex;
justify-content: center;
.person_text {
width: 5.5vw;
height: 5vh;
text-align: right;
color: #d9e7ff;
line-height: 5vh;
font-size: 14px;
font-weight: 500;
}
.person_value {
width: 3vw;
height: 5vh;
color: #d9e7ff;
line-height: 5vh;
text-align: center;
font-weight: 800;
font-size: 18px;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
}
}
}

@ -0,0 +1,57 @@
<!-- 警情通报 -->
<template>
<div class="notification_box">
<!-- 模块标题 -->
<div class="title">
<div class="img_box">
<!-- <img src="@/assets/safetyIndex/装饰009991.png" alt="" /> -->
</div>
<div class="title_text">警情通报</div>
</div>
</div>
</template>
<script>
export default {
name: "Notification",
data() {
return {};
},
};
</script>
<style lang="less" scoped>
.notification_box {
margin-top: 10px;
width: 24vw;
height: 32vh;
// border: 0.1px solid #495e70;
background: url("~@/assets/safetyIndex/back001.png") no-repeat;
background-size: 100% 100%;
/* 盒子标题 */
.title {
width: 24vw;
height: 2.7vh;
display: flex;
font-size: 16px;
color: #d9e7ff;
font-weight: 500;
/* 图片盒子 */
.img_box {
width: 1.5vw;
height: 2.7vh;
display: flex;
justify-content: center;
align-items: center;
img {
width: 16px;
height: 16px;
}
}
.title_text {
width: 4vw;
height: 3.2vh;
line-height: 3.2vh;
text-align: right;
}
}
}
</style>

@ -3,21 +3,37 @@
<div>
<!-- 最底层地图框 -->
<div class="map_box">
<!-- 园区企业 -->
<CompanyNum ref="companyNum"></CompanyNum>
<!-- 企业员工 -->
<Employee ref="employee"></Employee>
<div class="left_box">
<!-- 园区企业 -->
<CompanyNum ref="companyNum"></CompanyNum>
<!-- 企业员工 -->
<Employee ref="employee"></Employee>
<!-- 园区车辆 -->
<CompanyCar ref="companyCar"></CompanyCar>
</div>
<div class="right_box">
<!-- 惠企服务 -->
<CompanyService ref="companyService"></CompanyService>
<!-- 警情通报 -->
<Notification ref="notification"></Notification>
</div>
</div>
</div>
</template>
<script>
import CompanyNum from "./components/companyNum";
import Employee from "./components/employee";
import CompanyCar from "./components/companyCar";
import CompanyService from "./components/companyService";
import Notification from "./components/notification"
export default {
name: "CompositeIndex",
components: {
CompanyNum,
Employee,
CompanyCar,
CompanyService,
Notification
},
data() {
return {};
@ -30,6 +46,17 @@ export default {
width: 100%;
height: calc(100% - 80px);
box-sizing: border-box;
position: relative;
// border: 0.1px solid #495e70;
.left_box {
position: absolute;
width: 24vw;
left: 20px;
}
.right_box {
position: absolute;
width: 24vw;
right: 20px;
}
}
</style>

@ -21,7 +21,7 @@
<div class="totalTitle">
<div class="titleText">预警列表</div>
<span
>&nbsp; <span class="redText">{{ total }}</span> </span
>( <span class="redText">{{ total }}</span> )</span
>
<div class="searchBox">
<el-form :model="formInline" class="search">
@ -293,7 +293,7 @@ export default {
font-size: 16px;
color: #ebfff4;
letter-spacing: 2px;
width: 120px;
width: 80px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
font-weight: 400;
}

@ -1,22 +1,38 @@
<template>
<div class="asj">
<div class="title"><img src="../../assets/safetyIndex/装饰009991.png" alt="">案事件</div>
<div class="qyclBody">
<swiper :options="swiperOption1" class="swiper" ref="mySwiper1" v-if="caseTotalList.length">
<swiper-slide v-for="(item, index) of caseTotalList" :key="index" class="today">
<div class="todayChild" @click="showfangkeVisible(item)">
<div class="caseDetail">{{ item.caseName }}</div>
<div class="caseMsg">
<div>企业名称{{ item.caseAddress }}</div>
<div>时间{{ item.registerTime }}</div>
</div>
</div>
</swiper-slide>
</swiper>
</div>
<el-dialog title="案件详情" :visible.sync="fangkeVisible" class="picForm" v-if="anjianDetail">
<div class="jibenx">
<!-- <div class="jibenhang">
<div class="asj">
<div class="title">
<img src="../../assets/safetyIndex/装饰009991.png" alt="" />案事件
</div>
<div class="qyclBody">
<swiper
:options="swiperOption1"
class="swiper"
ref="mySwiper1"
v-if="caseTotalList.length"
>
<swiper-slide
v-for="(item, index) of caseTotalList"
:key="index"
class="today"
>
<div class="todayChild" @click="showfangkeVisible(item)">
<div class="caseDetail">{{ item.caseName }}</div>
<div class="caseMsg">
<div>企业名称{{ item.caseAddress }}</div>
<div>时间{{ item.registerTime }}</div>
</div>
</div>
</swiper-slide>
</swiper>
</div>
<el-dialog
title="案件详情"
:visible.sync="fangkeVisible"
class="picForm"
v-if="anjianDetail"
>
<div class="jibenx">
<!-- <div class="jibenhang">
<div class="jibenhangTitle">企业名称</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.caseName"></span>
@ -26,411 +42,396 @@
<div>{{ anjianDetail.caseName }}</div>
</div>
</div> -->
<div class="jibenhang">
<div class="jibenhangTitle">案件编号</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.caseNo"></span>
</div>
<div class="jibenhangTitle">案件名称</div>
<div class="jibenhangrightText">
<div>{{ anjianDetail.caseName }}</div>
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">案件分类</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.caseType"></span>
</div>
<div class="jibenhangTitle">案件类别</div>
<div class="jibenhangrightText">
<div>{{ anjianDetail.caseCategory }}</div>
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">发案区划</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.policeDistrictCode"></span>
</div>
<div class="jibenhangTitle">派出所</div>
<div class="jibenhangrightText">
<div>{{ anjianDetail.policeDistrictCn }}</div>
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">破案情况</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.caseState"></span>
</div>
<div class="jibenhangTitle">发案地点</div>
<div class="jibenhangrightText">
<div>{{ anjianDetail.caseAddress }}</div>
</div>
</div>
<div class="jibenhang1 jibenhang">
<div class="jibenhangTitle">简要案情</div>
<div class="jibenhangText">
<span>{{ anjianDetail.caseDetail }}</span>
</div>
</div>
</div>
</el-dialog>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">案件编号</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.caseNo"></span>
</div>
<div class="jibenhangTitle">案件名称</div>
<div class="jibenhangrightText">
<div>{{ anjianDetail.caseName }}</div>
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">案件分类</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.caseType"></span>
</div>
<div class="jibenhangTitle">案件类别</div>
<div class="jibenhangrightText">
<div>{{ anjianDetail.caseCategory }}</div>
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">发案区划</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.policeDistrictCode"></span>
</div>
<div class="jibenhangTitle">派出所</div>
<div class="jibenhangrightText">
<div>{{ anjianDetail.policeDistrictCn }}</div>
</div>
</div>
<div class="jibenhang">
<div class="jibenhangTitle">破案情况</div>
<div class="jibenhangleftText">
<span v-html="anjianDetail.caseState"></span>
</div>
<div class="jibenhangTitle">发案地点</div>
<div class="jibenhangrightText">
<div>{{ anjianDetail.caseAddress }}</div>
</div>
</div>
<div class="jibenhang1 jibenhang">
<div class="jibenhangTitle">简要案情</div>
<div class="jibenhangText">
<span>{{ anjianDetail.caseDetail }}</span>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import "swiper/dist/css/swiper.min.css";
import { swiper, swiperSlide } from "vue-awesome-swiper/dist/vue-awesome-swiper.js";
import { caseList } from '@/api/safetyIndex'
import {
swiper,
swiperSlide,
} from "vue-awesome-swiper/dist/vue-awesome-swiper.js";
import { caseList } from "@/api/safetyIndex";
export default {
components: {
swiper,
swiperSlide
components: {
swiper,
swiperSlide,
},
data() {
return {
staffStatisticsList: [],
staffDetailList: [],
listTotal: {},
fangkeVisible: false,
fangkepageSize: 10,
fangkepageNum: 1,
fangketotal: 0,
fangkeList: [],
intotal: 0,
outtotal: 0,
ziyouTotal: 0,
zulintotal: 0,
useType: 0,
caseTotalList: [],
anjianDetail: {},
swiperOption1: {
direction: "vertical",
// cubeEffect:true,
grabCursor: true,
// centeredSlides: true,
slidesPerView: "auto",
loop: true, // true looploopslideslide()Swiper
loopedSlides: 2, //loop使slidesPerview:'auto'使loop(slide2)
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
//
speed: 1000,
},
};
},
created() {
this.getList();
},
methods: {
getList() {
caseList().then((res) => {
this.caseTotalList = res.data;
});
},
data() {
tableRowStyle({ rowIndex }) {
if ((rowIndex + 1) % 2 == 1) {
return { background: "rgba(0,0,0,0)", color: "#fff", border: "0" };
} else {
return {
staffStatisticsList: [],
staffDetailList: [],
listTotal: {},
fangkeVisible: false,
fangkepageSize: 10,
fangkepageNum: 1,
fangketotal: 0,
fangkeList: [],
intotal: 0,
outtotal: 0,
ziyouTotal: 0,
zulintotal: 0,
useType: 0,
caseTotalList: [],
anjianDetail: {},
swiperOption1: {
direction: "vertical",
// cubeEffect:true,
grabCursor: true,
// centeredSlides: true,
slidesPerView: 'auto',
loop: true, // true looploopslideslide()Swiper
loopedSlides: 2, //loop使slidesPerview:'auto'使loop(slide2)
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
//
speed: 1000,
}
}
background: "rgba(61, 85, 102, 0.16)",
border: "0",
color: "#fff",
};
}
},
created() {
this.getList()
tableHeaderColor() {
return {
background:
"linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)",
};
// return { 'background': 'url("~@/assets/archives/9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
},
tableHeaderCellColor() {
return { background: "rgba(0,0,0,0)", border: "0", color: "#fff" };
},
methods: {
getList() {
caseList().then(res => {
this.caseTotalList = res.data
})
},
tableRowStyle({ rowIndex }) {
if ((rowIndex + 1) % 2 == 1) {
return { 'background': 'rgba(0,0,0,0)', 'color': '#fff', 'border': '0' }
} else {
return { 'background': 'rgba(61, 85, 102, 0.16)', 'border': '0', 'color': '#fff' }
}
},
tableHeaderColor() {
return { 'background': 'linear-gradient( rgba(38, 88, 76, 0.6) 100%, rgba(55, 131, 128, 0.6) 100%, rgba(34, 74, 53, 0.46) 46%)' }
// return { 'background': 'url("~@/assets/archives/9910.png") no-repeat;', 'background-size': '100% 100%;', 'color': '#fff' }
},
tableHeaderCellColor() {
return { 'background': 'rgba(0,0,0,0)', 'border': '0', 'color': '#fff' }
},
fangkeSizeChange(val) {
this.fangkepageNum = 1;
this.fangkepageSize = val;
this.showfangkeVisible(this.useType)
},
fangkeCurrentChange(val) {
this.fangkepageNum = val;
this.showfangkeVisible(this.useType)
},
fangkeSizeChange(val) {
this.fangkepageNum = 1;
this.fangkepageSize = val;
this.showfangkeVisible(this.useType);
},
fangkeCurrentChange(val) {
this.fangkepageNum = val;
this.showfangkeVisible(this.useType);
},
showfangkeVisible(val) {
this.anjianDetail = val
this.fangkeVisible = true
}
showfangkeVisible(val) {
this.anjianDetail = val;
this.fangkeVisible = true;
},
}
},
};
</script>
<style lang="less" scoped>
.asj {
height: 23%;
height: 23%;
width: 100%;
margin-bottom: 20px;
background: url("~@/assets/safetyIndex/主屏板块1.png") no-repeat;
background-size: 100% 100%;
.title {
width: 100%;
margin-bottom: 20px;
background: url('~@/assets/safetyIndex/主屏板块1.png') no-repeat;
height: 33px;
background: url("~@/assets/safetyIndex/标题样式.png") no-repeat;
background-size: 100% 100%;
font-size: 16px;
color: #d9e7ff;
letter-spacing: 1px;
text-align: center;
font-weight: 500;
display: flex;
align-items: center;
img {
width: 16px;
height: 16px;
margin: 0 12px;
}
}
.qyclBody {
width: 100%;
height: calc(100% - 33px);
padding: 0 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-content: space-around;
flex-wrap: wrap;
overflow: hidden;
.swiper {
width: 100%;
height: 100%;
}
.today {
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
box-sizing: border-box;
.title {
.todayChild {
width: 100%;
height: 33px;
background: url('~@/assets/safetyIndex/标题样式.png') no-repeat;
background-size: 100% 100%;
font-size: 16px;
color: #D9E7FF;
letter-spacing: 1px;
text-align: center;
font-weight: 500;
height: 100%;
display: flex;
align-items: center;
img {
width: 16px;
height: 16px;
margin: 0 12px;
}
}
.qyclBody {
width: 100%;
height: calc(100% - 33px);
padding: 0 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-content: space-around;
flex-wrap: wrap;
overflow: hidden;
.swiper {
width: 100%;
height: 100%;
box-sizing: border-box;
position: relative;
padding: 10px 8px;
background: rgba(0, 0, 0, 0);
z-index: 200;
cursor: pointer;
.caseDetail {
width: 100%;
height: 60%;
font-size: 16px;
color: #ffe6d9;
letter-spacing: 0;
line-height: 16px;
text-shadow: 0 0 8px rgba(255, 119, 52, 0.5);
font-weight: 400;
// display: flex;
// align-items: center;
overflow: hidden;
white-space: nowrap; //
text-overflow: ellipsis; //...
}
.today {
width: 100%;
height: 50%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
box-sizing: border-box;
.todayChild {
width: 100%;
height: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
box-sizing: border-box;
position: relative;
padding: 10px 8px;
background: rgba(0, 0, 0, 0);
z-index: 200;
cursor: pointer;
.caseDetail {
width: 100%;
height: 60%;
font-size: 16px;
color: #FFE6D9;
letter-spacing: 0;
line-height: 16px;
text-shadow: 0 0 8px rgba(255, 119, 52, 0.50);
font-weight: 400;
// display: flex;
// align-items: center;
overflow: hidden;
white-space: nowrap; //
text-overflow: ellipsis; //...
}
.caseMsg {
width: 100%;
height: 40%;
font-size: 14px;
color: #D0DEEE;
letter-spacing: 0;
line-height: 16px;
font-weight: 400;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.todayChild::after {
content: "";
background: url('~@/assets/safetyIndex/0091.png') no-repeat;
background-size: 100% 100%;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.caseMsg {
width: 100%;
height: 40%;
font-size: 14px;
color: #d0deee;
letter-spacing: 0;
line-height: 16px;
font-weight: 400;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.todayChild::after {
content: "";
background: url("~@/assets/safetyIndex/0091.png") no-repeat;
background-size: 100% 100%;
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
}
}
}
.picForm {
/deep/ .el-dialog {
background-color: rgba(0, 0, 0, 0);
background: url("~@/assets/companyFile/背景2.png") no-repeat;
background-size: 100% 100%;
width: 811px;
height: 420px;
position: relative;
.el-dialog__title {
font-size: 16px;
color: #ebfff4;
letter-spacing: 2px;
/deep/ .el-dialog {
background-color: rgba(0, 0, 0, 0);
background: url('~@/assets/companyFile/背景2.png') no-repeat;
background-size: 100% 100%;
width: 811px;
height: 420px;
position: relative;
.el-dialog__title {
font-size: 16px;
color: #EBFFF4;
letter-spacing: 2px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
font-weight: 400;
}
.el-dialog__body {
box-sizing: border-box;
height: 360px;
.jibenx {
width: 100%;
height: 100%;
border: 1px solid rgba(91, 116, 140, 0.6);
.jibenhang {
height: 19%;
width: 100%;
display: flex;
border-bottom: 1px solid rgba(91, 116, 140, 0.6);
.jibenhangTitle {
box-sizing: border-box;
padding-left: 10px;
width: 15%;
height: 100%;
background: rgba(108, 128, 151, 0.20);
line-height: 48px;
border-right: 1px solid rgba(91, 116, 140, 0.6);
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0;
font-weight: 400;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
font-weight: 400;
}
}
.el-dialog__body {
box-sizing: border-box;
height: 360px;
.jibenhangleftText {
width: 30%;
box-sizing: border-box;
padding-left: 10px;
height: 100%;
border-right: 1px solid rgba(91, 116, 140, 0.6);
line-height: 48px;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 0;
font-weight: 400;
}
.jibenx {
width: 100%;
height: 100%;
border: 1px solid rgba(91, 116, 140, 0.6);
.jibenhangrightText {
box-sizing: border-box;
padding-left: 10px;
width: 40%;
height: 100%;
line-height: 48px;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 0;
font-weight: 400;
overflow: hidden;
}
.jibenhang {
height: 19%;
width: 100%;
display: flex;
border-bottom: 1px solid rgba(91, 116, 140, 0.6);
.jibenhangText {
padding-left: 10px;
width: 85%;
height: 100%;
display: flex;
align-items: center;
font-size: 12px;
color: #FFFFFF;
}
}
.jibenhangTitle {
box-sizing: border-box;
padding-left: 10px;
width: 15%;
height: 100%;
background: rgba(108, 128, 151, 0.2);
line-height: 48px;
border-right: 1px solid rgba(91, 116, 140, 0.6);
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0;
font-weight: 400;
}
.jibenhang1 {
height: 24%;
width: 100%;
border-bottom: 0;
box-sizing: border-box;
.jibenhangleftText {
width: 30%;
box-sizing: border-box;
padding-left: 10px;
height: 100%;
border-right: 1px solid rgba(91, 116, 140, 0.6);
line-height: 48px;
font-size: 12px;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
}
.jibenhangTitle {
.jibenhangrightText {
box-sizing: border-box;
padding-left: 10px;
width: 40%;
height: 100%;
line-height: 48px;
font-size: 12px;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
overflow: hidden;
}
padding-left: 12px;
width: 15%;
height: 100%;
background: rgba(108, 128, 151, 0.20);
line-height: 57px;
border-right: 1px solid rgba(91, 116, 140, 0.6);
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0;
font-weight: 400;
.jibenhangText {
padding-left: 10px;
width: 85%;
height: 100%;
display: flex;
align-items: center;
font-size: 12px;
color: #ffffff;
}
}
}
.jibenhang1 {
height: 24%;
width: 100%;
border-bottom: 0;
box-sizing: border-box;
.jibenhangText {
padding-left: 10px;
width: 84.8%;
height: 100%;
display: flex;
align-items: center;
font-size: 12px;
color: #FFFFFF;
box-sizing: border-box;
}
}
}
.jibenhangTitle {
padding-left: 12px;
width: 15%;
height: 100%;
background: rgba(108, 128, 151, 0.2);
line-height: 57px;
border-right: 1px solid rgba(91, 116, 140, 0.6);
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0;
font-weight: 400;
}
.jibenhangText {
padding-left: 10px;
width: 84.8%;
height: 100%;
display: flex;
align-items: center;
font-size: 12px;
color: #ffffff;
box-sizing: border-box;
}
}
}
}
}
}
/deep/.el-input__inner {
// background: url('~@/assets/companyFile/2121.png') no-repeat;
background: url('~@/assets/companyFile/矩形备份 18.png') no-repeat;
background-size: 100% 100%;
border: 1px solid rgba(40, 132, 126, 1);
color: rgba(234, 246, 255, 0.7);
;
.el-range-separator {
color: #ccc;
}
.el-range-input {
background: rgba(0, 0, 0, 0);
color: #ccc;
}
// background: url('~@/assets/companyFile/2121.png') no-repeat;
background: url("~@/assets/companyFile/矩形备份 18.png") no-repeat;
background-size: 100% 100%;
border: 1px solid rgba(40, 132, 126, 1);
color: rgba(234, 246, 255, 0.7);
.el-range-separator {
color: #ccc;
}
.el-range-input {
background: rgba(0, 0, 0, 0);
color: #ccc;
}
}
</style>
Loading…
Cancel
Save