elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

措施清单

shibei_master
13176889840 4 years ago
parent
fdd849a450
commit
4b207f1200
5 changed files with 24661 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23767
      package-lock.json
  2. 1
      package.json
  3. 68
      src/views/modules/visual/components/screen-loading/index.vue
  4. 326
      src/views/modules/visual/components/screen-table/index.vue
  5. 578
      src/views/modules/visual/measure/service.vue

23767
package-lock.json
View File

File diff suppressed because it is too large

1
package.json
View File

@ -19,6 +19,7 @@
"axios": "^0.19.0",
"babel-eslint": "^8.0.1",
"babel-plugin-component": "^1.1.1",
"echarts": "^5.2.2",
"element-theme": "^2.0.1",
"element-ui": "^2.13.0",
"file-saver": "^2.0.5",

68
src/views/modules/visual/components/screen-loading/index.vue
View File

@ -0,0 +1,68 @@
<template>
<div class="screen-loading">
<svg width="50px"
height="50px">
<circle cx="25"
cy="25"
r="20"
fill="transparent"
stroke-width="3"
stroke-dasharray="31.415, 31.415"
stroke="#29cdff"
stroke-linecap="round">
<animateTransform attributeName="transform"
type="rotate"
values="0, 25 25;360, 25 25"
dur="1.5s"
repeatCount="indefinite" />
<animate attributeName="stroke"
values="#02bcfe;#3be6cb;#02bcfe"
dur="3s"
repeatCount="indefinite" />
</circle>
<circle cx="25"
cy="25"
r="10"
fill="transparent"
stroke-width="3"
stroke-dasharray="15.7, 15.7"
stroke="#29cdff"
stroke-linecap="round">
<animateTransform attributeName="transform"
type="rotate"
values="360, 25 25;0, 25 25"
dur="1.5s"
repeatCount="indefinite" />
<animate attributeName="stroke"
values="#3be6cb;#02bcfe;#3be6cb"
dur="3s"
repeatCount="indefinite" />
</circle>
</svg>
<div class="loading-tip">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'DvLoading'
}
</script>
<style lang="scss" scoped>
.screen-loading {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.loading-tip {
font-size: 14px;
color: #fff;
}
}
</style>

326
src/views/modules/visual/components/screen-table/index.vue
View File

@ -0,0 +1,326 @@
<template>
<div class="warning-table">
<div class="table">
<div class="table-header">
<div
class="table-header-th"
v-for="(item, index) in headerList"
:key="item.title"
:style="headerStyle[index]"
>
{{ item.title }}
</div>
<div
v-if="operate"
class="table-header-th"
>
操作
</div>
</div>
<div class="table-body">
<div
class="table-body-tr"
v-for="(value, index) in tableData"
:key="index"
>
<div
class="td"
v-for="(item, indexs) in headerList"
:key="indexs"
:style="tableContentStyle[indexs]"
>
{{ value[item.coulmn] }}
<!-- <span
v-if="indexs + 1 == value.length && item.length > 8"
class="more"
@click.stop="onClickMorePop(index)"
ref="morePop"
>
更多>
<span class="more-pop" v-if="visiblePopList[index]">
{{ value[item.coulmn] }}
</span>
</span> -->
</div>
<div v-if="operate" class="td" @click="look(value)">查看</div>
</div>
<screen-loading v-if="visibleLoading">加载中</screen-loading>
<div class="no-data" v-if="tableData.length == 0 && !visibleLoading">
<img
src="../../../../../assets/img/modules/visual/noData.png"
alt=""
srcset=""
class="no-data-img"
/>
</div>
</div>
</div>
</div>
</template>
<script>
import ScreenLoading from "../screen-loading/index";
import Vue from "vue";
export default {
name: "warning-table",
components: {
ScreenLoading,
},
props: {
headerList: {
type: Array,
required: false,
default: () => {
return [
{ title: "序号" },
{ title: "所属网格" },
{ title: "所属小区" },
{ title: "楼号" },
{ title: "姓名" },
];
},
},
tableData: {
type: Array,
required: false,
default: () => {
return [
// [
// 1,
// "商丘路社区第一网格",
// "商丘路小区",
// "2号楼",
// "杨颖、王平、刘佳敏、丁辉、杨萍",
// ],
// [
// 2,
// "商丘路社区第一网格",
// "商丘路小区",
// "2号楼",
// "杨颖、王平、刘佳敏、丁辉、杨萍",
// ],
];
},
},
// 单独给头部设置样式
headerStyle: {
type: Array,
default: () => {
return [
// {
// width:'200px',
// border:'1px solid red'
// },
// {
// width:'200px'
// }
];
},
},
// 单独给内容设置样式
tableContentStyle: {
type: Array,
default: () => {
return [
// {
// width:'200px',
// border:'1px solid red'
// },
// {
// width:'200px'
// }
];
},
},
visibleLoading: {
type: Boolean,
default: true,
},
operate: {
type: Boolean,
default: true
}
// // 表格平均分的份数
// ava: {
// type: Number,
// default: 8
// },
// // 表头高度--默认占比10%
// headerHeightAva: {
// type: String,
// default: '10%'
// },
// // 表格主体平均分成的份数
// tableContentAva: {
// type: Number,
// default: 5
// },
},
data() {
return {
visiblePopList: [
false,
false,
false,
false,
false,
false,
false,
false,
false,
false,
],
};
},
watch: {
tableData(arr) {
if (Array.isArray(arr)) {
console.log('tabldate-dddsss', this.tableData)
this.visiblePopList = new Array(arr.length).fill(false);
}
},
},
mounted() {
console.log('tabldate-ddd', this.tableData)
window.addEventListener("click", (e) => {
this.visiblePopList = new Array(this.visiblePopList.length).fill(false);
});
},
created() {},
methods: {
onClickMorePop(index) {
this.visiblePopList.forEach((item, indexs) => {
if (index == indexs) {
Vue.set(this.visiblePopList, index, true);
} else {
Vue.set(this.visiblePopList, indexs, false);
}
});
},
look(val) {
console.log('look-----l', val)
this.$emit('look', val)
}
},
};
</script>
<style lang="scss" scoped>
.warning-table {
box-sizing: border-box;
width: 100%;
height: 100%;
.table {
width: 100%;
height: 100%;
&-header {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
background: rgba(8, 37, 134, 0.85);
font-size: 16px;
font-weight: 400;
color: #ffffff;
&-th {
text-align: center;
width: calc(100% / 5);
}
}
&-body {
box-sizing: border-box;
width: 100%;
height: calc(100% - 50px);
font-size: 18px;
font-weight: 400;
color: #ffffff;
&-tr {
width: 100%;
height: 50px;
// height: calc(100% / 10);
display: flex;
justify-content: space-around;
align-items: center;
.td {
text-align: center;
width: calc(100% / 5);
cursor: pointer;
.more {
font-size: 18px;
font-weight: 400;
color: #e4dc00;
position: relative;
cursor: pointer;
&-pop {
box-sizing: border-box;
display: block;
box-sizing: border-box;
width: 215px;
height: auto;
line-height: 20px;
border: 1px solid red;
position: absolute;
right: -100%;
top: 150%;
background: #06186d;
border: 1px solid #1a64cc;
border-radius: 5px;
font-size: 9px;
font-weight: 400;
color: #ffffff;
padding: 16px 8px 10px 9px;
z-index: 1;
cursor: default;
// &::after{
// position: absolute;
// left: 30%;
// top: -30%;
// display: flex;
// content:'';
// width: 0;
// height: 0;
// border-width: 13px;
// border-style: solid;
// border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
// // border-color: transparent transparent red transparent;
// transform: translate(-50%,0);
// }
}
}
}
}
&-tr:nth-child(2n) {
background: rgba(16, 75, 164, 0.24);
}
&-tr:hover {
background: url("../../../../../assets/img/modules/visual/hover-bac.png")
no-repeat center;
background-size: 100% 100%;
}
// 暂无数据
.no-data {
width: 100%;
height: calc(100% - 50px);
display: flex;
align-items: center;
justify-content: center;
&-img {
width: 249px;
height: 172px;
}
}
}
}
}
</style>

578
src/views/modules/visual/measure/service.vue
View File

@ -1,13 +1,583 @@
<template>
<div>ll</div>
<div class="warning-box">
<cpt-card>
<div class="card-title">
<img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
<div class="title-label">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
全部网格<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="title-time">
<div class="title-time-label">选择时间</div>
<div class="">
<el-date-picker
v-model="value2"
type="month"
placeholder="选择月">
</el-date-picker>
</div>
</div>
</div>
<div class="card-echart">
<div class="card-left">
<div class="echart-wr">
<div class="echart-cicle"></div>
<div id="echartOrg" class="echart-org"></div>
</div>
<div class="echarts-tips">
<div class="tips-list">
<div class="tips-item">
<div class="tips-item-icon"></div>
<div class="tips-item-text">为民服务</div>
</div>
<div class="tips-item">
<div class="tips-item-icon"></div>
<div class="tips-item-text">社会治安综合</div>
</div>
<div class="tips-item">
<div class="tips-item-icon"></div>
<div class="tips-item-text">社会治安综合</div>
</div>
<div class="tips-item">
<div class="tips-item-icon"></div>
<div class="tips-item-text">卫生计生监管执法</div>
</div>
<div class="tips-item">
<div class="tips-item-icon"></div>
<div class="tips-item-text">卫生计生监管执法</div>
</div>
<div class="tips-item">
<div class="tips-item-icon"></div>
<div class="tips-item-text">建设管理</div>
</div>
<div class="tips-item">
<div class="tips-item-icon"></div>
<div class="tips-item-text">为民服务</div>
</div>
</div>
</div>
</div>
<div class="card-left">
<div class="echart-wr">
<div class="echart-cicle"></div>
<div id="echartType" class="echart-org"></div>
</div>
<div class="echarts-tips echarts-tips-wd50">
<div class="tips-lists">
<div class="tips-items">
<div class="tips-items-title">
<div>志愿者</div>
</div>
<div class="tips-items-num">
<div class="tips-item-count">17513</div>
<div class="tips-item-has">（服务次数：2430）</div>
</div>
</div>
<div class="tips-items">
<div class="tips-items-title">
<div>志愿者</div>
</div>
<div class="tips-items-num">
<div class="tips-item-count">17</div>
<div class="tips-item-has">（服务次数：2430）</div>
</div>
</div>
<div class="tips-items">
<div class="tips-items-title">
<div>志愿者</div>
</div>
<div class="tips-items-num">
<div class="tips-item-count">175</div>
<div class="tips-item-has">（服务次数：2430）</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="warning-box-bottom">
<screen-table
:headerList="headerList"
:tableData="tableData"
:visibleLoading="visibleLoading"
></screen-table>
<div class="pagination">
<el-pagination
:current-page="pageNo"
:page-size="pageSize"
background
layout="prev, pager, next"
@size-change="pageSizeChangeHandleNew"
@current-change="pageCurrentChangeHandleNew"
:total="total"
>
</el-pagination>
</div>
</div>
</cpt-card>
</div>
</template>
<script>
import { requestPost } from "@/js/dai/request";
import screenTable from "../components/screen-table/index";
import cptCard from "@/views/modules/visual/cpts/card";
import nextTick from "dai-js/tools/nextTick";
import * as echarts from 'echarts';
export default {
name: "warning-box",
components: {
cptCard,
screenTable,
},
data() {
return {
warningList: [],
headerList: [
{ title: "序号", coulmn: 'index' },
{ title: "需求类型", coulmn: 'gridName' },
{ title: "具体内容", coulmn: 'buildingName' },
{ title: "上报情况", coulmn: 'neighborhoodName' },
{ title: "上报人", coulmn: 'residentNames' },
{ title: "上报时间", coulmn: 'residentNames' },
{ title: "是否认领", coulmn: 'residentNames' },
{ title: "认领方", coulmn: 'residentNames' },
{ title: "认领时间", coulmn: 'residentNames' }
],
tableData: [
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
],
value2: '',
visibleLoading: true,
pageNo: 1,
pageSize: 10,
total: 0,
activeIndex: 0,
activeLevel: "1",
};
},
async mounted() {
await nextTick(100);
this.initCharts()
this.initChartType()
this.getBuildingwarnlist();
},
methods: {
initCharts() {
const eId = document.getElementById('echartOrg')
let _charts = echarts.init(eId)
let option = {
tooltip: {
trigger: 'item'
},
legend: {
show: false,
orient: 'vertical',
top: '40%',
left: 'right',
textStyle: {
color: '#fff'
}
},
title: {
text: '12000', //图形标题，配置在中间对应效果图的80%
subtext: '总数',
left: "center",
top: "center",
textStyle: {
color: "#fff",
fontSize: 28,
align: "center"
},
subtextStyle: {
fontSize: 16,
color: '#fff'
}
},
series: [
{
// name: 'Access From',
type: 'pie',
// center: ['10%', '50%'],
radius: ['40%', '60%'],
avoidLabelOverlap: false,
// top: top + '%',
// height: '80%',
left: 'center',
width: 400,
label: {
position: 'outer',
alignTo: 'edge',
formatter: '{a|{c}}\n{name|{b}}',
minMargin: 5,
edgeDistance: 20,
lineHeight: 15,
color: '#fff',
fontSize: 12,
distanceToLabelLine: 10,
rich: {
a: {
fontSize: 15,
color: '#fff'
}
}
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
labelLine: {
show: true,
length: 20,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < _charts.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
}
option && _charts.setOption(option);
}
},
initChartType() {
const eId = document.getElementById('echartType')
let _charts = echarts.init(eId)
let option = {
tooltip: {
trigger: 'item'
},
legend: {
show: false,
orient: 'vertical',
top: '40%',
left: 'right',
textStyle: {
color: '#fff'
}
},
title: {
text: '12000', //图形标题，配置在中间对应效果图的80%
subtext: '总数',
left: "center",
top: "center",
textStyle: {
color: "#fff",
fontSize: 28,
align: "center"
},
subtextStyle: {
fontSize: 16,
color: '#fff'
}
},
series: [
{
// name: 'Access From',
type: 'pie',
// center: ['10%', '50%'],
radius: ['40%', '60%'],
avoidLabelOverlap: false,
// top: top + '%',
// height: '80%',
left: 'center',
width: 400,
label: {
position: 'outer',
alignTo: 'labelLine',
formatter: '{name|{b}}\n{time|{c} 小时}',
minMargin: 5,
edgeDistance: 20,
lineHeight: 15,
color: '#fff',
fontSize: 15,
rich: {
time: {
fontSize: 10,
color: '#fff'
}
}
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
labelLine: {
show: true,
length: 20,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < _charts.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
}
option && _charts.setOption(option);
},
onClickList(index, level) {
this.activeIndex = index;
this.activeLevel = level;
this.pageNo = 1;
this.getUserwarnlist();
},
//具体人员列表
async getUserwarnlist() {
const { activeIndex, activeLevel, warningList } = this;
const reqItem = warningList[activeIndex];
let tableData = [];
const url = "/epmetuser/statsresiwarn/userwarnlist";
let params = {
configId: reqItem.configId,
buildingIdList: reqItem["buildingIdList" + activeLevel],
pageNo: this.pageNo,
pageSize: this.pageSize,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
tableData = data.list.map((item, index) => {
return {
...item,
index: index + 1,
residentNames: item.residentNames || "暂无"
}
});
this.tableData = tableData;
this.total = data.total;
} else {
}
},
// 【人员预警】 楼宇预警数量列表
async getBuildingwarnlist() {
const url = "/epmetuser/statsresiwarn/buildingwarnlist";
let params = {
agencyId: this.$store.state.user.agencyId,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.warningList = data;
this.visibleLoading = false;
this.getUserwarnlist();
} else {
}
},
pageSizeChangeHandleNew(val) {
this.pageNo = 1;
this.pageSize = val;
},
pageCurrentChangeHandleNew(val) {
this.pageNo = val;
this.getUserwarnlist();
},
},
};
</script>
<style>
<style
lang="scss"
src="@/assets/scss/modules/visual/warning.scss"
scoped
></style>
<style lang="scss" scoped>
.card-title {
display: flex;
align-items: center;
cursor: pointer;
.title-icon {
display: block;
width: 46px;
height: 34px;
box-sizing: border-box;
margin-right: 6px;
}
::v-deep .el-dropdown {
font-size: 16px;
color: #fff;
font-weight: 800;
}
.title-time {
display: flex;
align-items: center;
box-sizing: border-box;
margin-left: 30px;
font-size: 14px;
color: #fff;
.title-time-label {
margin-right: 10px;
}
::v-deep .el-date-editor--month {
width: 100px;
.el-input__inner {
width: 100px;
height: 24px;
box-sizing: border-box;
padding: 0;
font-size: 14px;
color: #fff;
line-height: 24px;
text-align: center;
background: #06186D;
border: 1px solid #1A64CC;
border-radius: 2px;
}
.el-input__prefix {
display: none;
}
.el-input__suffix {
right: 0;
.el-input__icon {
line-height: 24px;
}
}
}
}
}
.card-echart {
display: flex;
margin-top: 40px;
.card-left {
position: relative;
flex: 1;
display: flex;
}
}
.echart-wr {
position: relative;
flex-shrink: 0;
width: 50%;
height: 320px;
box-sizing: border-box;
.echart-org {
width: 100%;
height: 100%;
}
.echart-cicle {
position: absolute;
top: 50%;
left: 50%;
width: 240px;
height: 240px;
box-sizing: border-box;
margin-top: -120px;
margin-left: -120px;
border: 1px dashed rgba(0, 96, 240, 1);
border-radius: 50%;
}
}
</style>
.echarts-tips {
width: 40%;
// flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.echarts-tips-wd50 {
width: 50%;
}
.tips-list, .tips-item, .tips-lists, .tips-items-num {
display: flex;
align-items: center;
}
.tips-list {
// width: 100%;
// height: 100%;
flex-wrap: wrap;
// justify-content: center;
.tips-item {
// flex: 1;
width: 50%;
margin-top: 20px;
// margin-right: 40px;
cursor: pointer;
.tips-item-icon {
width: 20px;
height: 10px;
box-sizing: border-box;
margin-right: 8px;
background: #1B51FF;
border-radius: 2px;
}
.tips-item-text {
font-size: 16px;
color: #D2E7FF;
}
}
}
.tips-lists {
width: 100%;
flex-wrap: wrap;
.tips-items {
margin-bottom: 30px;
width: 50%;
.tips-items-title {
font-size: 16px;
}
.tips-items-num {
justify-content: space-between;
box-sizing: border-box;
margin-top: 20px;
padding-right: 30px;
font-size: 20px;
.tips-item-has {
font-size: 14px;
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save