Skip to content

R
rongtong-pc
Commit dca2b982 authored by kaitly205422@163.com's avatar kaitly205422@163.com
Browse files
Options

巡察+大屏

parent b01edaf0
Hide whitespace changes
Inline Side-by-side
Showing with 583 additions and 1065 deletions
dist.zip 0 → 100644
View file @ dca2b982
File added
src/api/risk/existing.js
View file @ dca2b982
...@@ -18,3 +18,12 @@ export function inherentListList(query) { ...@@ -18,3 +18,12 @@ export function inherentListList(query) {
params: query params: query
}) })
} }
// 查询固有风险台账列表
export function existingList(query) {
return request({
url: '/system/risk/plan/existingList',
method: 'get',
params: query
})
}
src/router/index.js
View file @ dca2b982
...@@ -182,16 +182,18 @@ export const dynamicRoutes = [ ...@@ -182,16 +182,18 @@ export const dynamicRoutes = [
], ],
}, },
{ {
path: "/riskLedger/detail", path: "/riskLedger",
component: Layout, component: Layout,
hidden: true, hidden: true,
permissions: ["system:dict:list"], permissions: ["*:*:*"],
children: [ children: [
{ {
path: "riskDetail", path: "detail/:projectId(\\d+)",
component: () => import("@/views/riskLedger/detail"), component: () => import("@/views/riskLedger/detail"),
name: "riskDetail", name: "riskDetail",
meta: { title: "风险台账", activeMenu: "/riskLedger/detail" }, meta: {
title: '风险台账',
}
}, },
], ],
}, },
......
src/views/map/components/index.js
View file @ dca2b982
export { default as mapItemContainer } from './map-item-container.vue'; export { default as mapItemContainer } from './map-item-container.vue';
export { default as mapTable } from './map-table.vue'; export { default as mapTable } from './map-table.vue';
export { default as echartMap } from './map-item-pie.vue';
export { default as mapDetailTab } from './map-detail-tab.vue'; export { default as mapDetailTab } from './map-detail-tab.vue';
\ No newline at end of file
src/views/map/components/map-item-pie.vue deleted 100644 → 0
View file @ b01edaf0
<template>
<div ref="myEchart" style="width: 100%; height: 180px"></div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl";
import { rightlevelStatic } from '@/api/map'
export default {
data() {
return {
colors: ["rgba(32,159,237,1)", "rgba(255,159,32,1)", "rgba(159,255,237,1)", "rgba(159,255,32,1)"],
chartData: [
{
name: "重大风险",
value: 40,
number: 120,
itemStyle: {
// 透明度
opacity: 0.7,
// 扇形颜色
color: "rgba(32,159,237,1)",
},
},
{
name: "较大风险",
value: 30,
number: 80,
itemStyle: {
// 透明度
opacity: 0.7,
// 扇形颜色
color: "rgba(255,159,32,1)",
},
},
{
name: "一般风险",
value: 20,
number: 60,
itemStyle: {
// 透明度
opacity: 0.7,
// 扇形颜色
color: "rgba(159,255,237,1)",
},
},
{
name: "低风险",
value: 10,
number: 10,
itemStyle: {
// 透明度
opacity: 0.7,
// 扇形颜色
color: "rgba(159,255,32,1)",
},
},
],
};
},
mounted() {
this.getData()
},
methods: {
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
// 计算
let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== "undefined" ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32,
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
x: function (u, v) {
if (u < startRadian) {
return (
offsetX +
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function (u, v) {
if (u < startRadian) {
return (
offsetY +
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function (u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u) * h * 0.1;
}
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
},
getPie3D(pieData, internalDiameterRatio) {
let series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let k =
typeof internalDiameterRatio !== "undefined"
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
: 1 / 3;
// 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem = {
name:
typeof pieData[i].name === "undefined"
? `series${i}`
: pieData[i].name,
value:
typeof pieData[i].value === "undefined"
? `series${i}`
: pieData[i].value,
type: "surface",
parametric: true,
wireframe: {
show: false,
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: k,
},
};
if (typeof pieData[i].itemStyle != "undefined") {
let itemStyle = {};
typeof pieData[i].itemStyle.color != "undefined"
? (itemStyle.color = pieData[i].itemStyle.color)
: null;
typeof pieData[i].itemStyle.opacity != "undefined"
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
: null;
seriesItem.itemStyle = itemStyle;
}
seriesItem.label = {
formatter: "{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ",
backgroundColor: "#eee",
borderColor: "#aaa",
borderWidth: 1,
borderRadius: 4,
// shadowBlur:3,
// shadowOffsetX: 2,
// shadowOffsetY: 2,
// shadowColor: '#999',
// padding: [0, 7],
rich: {
a: {
color: "#999",
lineHeight: 22,
align: "center",
},
// abg: {
// backgroundColor: '#333',
// width: '100%',
// align: 'right',
// height: 22,
// borderRadius: [4, 4, 0, 0]
// },
hr: {
borderColor: "#aaa",
width: "100%",
borderWidth: 0.5,
height: 0,
},
b: {
fontSize: 16,
lineHeight: 33,
},
per: {
color: "#eee",
backgroundColor: "#334455",
padding: [2, 4],
borderRadius: 2,
},
},
};
series.push(seriesItem);
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
const that = this;
for (let i = 0; i < series.length; i++) {
endValue = startValue + series[i].pieData.value;
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = that.getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
false,
false,
k,
series[i].pieData.value
);
startValue = endValue;
legendData.push(series[i].name);
}
// 补充一个透明的圆环，用于支撑高亮功能的近似实现。
series.push({
name: "mouseoutSeries",
type: "surface",
parametric: true,
wireframe: {
show: false,
},
itemStyle: {
opacity: 0,
},
parametricEquation: {
u: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
v: {
min: 0,
max: Math.PI,
step: Math.PI / 20,
},
x: function (u, v) {
return Math.sin(v) * Math.sin(u) + Math.sin(u);
},
y: function (u, v) {
return Math.sin(v) * Math.cos(u) + Math.cos(u);
},
z: function (u, v) {
return Math.cos(v) > 0 ? 0.1 : -0.1;
},
},
});
const data = this.chartData;
// 准备待返回的配置项，把准备好的 legendData、series 传入。
let option = {
//animation: false,
legend: {
icon: "circle",
data: legendData,
top: 50,
width: 50,
itemGap: 20,
right: 40,
formatter: function (value) {
var res = "";
for (var i = 0; i < data.length; i++) {
if (data[i].name == value) {
res = pieData[i].name + data[i].number;
}
}
if (!res) {
res = value;
}
return res;
},
textStyle: {
color: "#fff",
fontSize: 10,
},
rich: {
align: "right",
text: {
fontSize: 14,
color: "#fff",
fontWeight: "500",
padding: [15, 0, 5, 0],
},
},
color: "#fff",
},
tooltip: {
formatter: (params) => {
if (params.seriesName !== "mouseoutSeries") {
return `${params.seriesName
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
};"></span>${option.series[params.seriesIndex].pieData.number}`;
}
},
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
left: "-10%",
top: 20,
show: false,
boxHeight: 5,
viewControl: {
//3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 40,
// beta: 40,
rotateSensitivity: 0,
zoomSensitivity: 0,
panSensitivity: 0,
autoRotate: false,
},
//后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
postEffect: {
//配置这项会出现锯齿，请自己去查看官方配置有办法解决
enable: true,
bloom: {
enable: true,
bloomIntensity: 0,
},
SSAO: {
enable: false,
quality: "medium",
radius: 2,
},
},
},
series: series,
};
return option;
},
getData() {
rightlevelStatic({ name: '' }).then(res => {
const list = res.data.map((val, index) => {
return {
name: val.levelName,
value: val.levelNum,
number: index * 10,
itemStyle: {
// 透明度
opacity: 0.7,
// 扇形颜色
color: this.colors[index % 4],
},
}
})
this.myMap = echarts.init(this.$refs.myEchart);
this.myMap.setOption(this.getPie3D(list, 0.71));
})
}
},
};
</script>
<style lang="scss" scoped>
.a {
background: transparent;
}
</style>
\ No newline at end of file
src/views/map/map-detail.vue
View file @ dca2b982
...@@ -143,37 +143,37 @@ export default { ...@@ -143,37 +143,37 @@ export default {
tabs: [ tabs: [
{ {
title: "评估时间（最新）", title: "评估时间（最新）",
icon: "el-icon-basketball", icon: "el-icon-alarm-clock",
name: "tab1", name: "tab1",
value: {} value: {}
}, },
{ {
title: "评估数据", title: "评估数据",
icon: "el-icon-basketball", icon: "el-icon-office-building",
name: "tab2", name: "tab2",
value: {} value: {}
}, },
{ {
title: "风险总数量", title: "风险总数量",
icon: "el-icon-basketball", icon: "el-icon-monitor",
name: "tab3", name: "tab3",
value: {} value: {}
}, },
{ {
title: "", title: "",
icon: "el-icon-basketball", icon: "el-icon-coin",
name: "tab4", name: "tab4",
value: {} value: {}
}, },
{ {
title: "风险等级（固有）", title: "风险等级（固有）",
icon: "el-icon-basketball", icon: "el-icon-pie-chart",
name: "tab5", name: "tab5",
value: {} value: {}
}, },
{ {
title: "风险等级（现状）", title: "风险等级（现状）",
icon: "el-icon-basketball", icon: "el-icon-s-data",
name: "tab6", name: "tab6",
value: {} value: {}
}, },
......
src/views/map/map-index.vue
View file @ dca2b982
...@@ -4,12 +4,12 @@ ...@@ -4,12 +4,12 @@
<div class="map-index-left-wrap"> <div class="map-index-left-wrap">
<map-item-container title="评估数据统计"> <map-item-container title="评估数据统计">
<div class="content-assess-tab"> <div class="content-assess-tab">
<div :class="{ 'active': accessType == 0 }" @click="accessType = 0">评估</div> <!-- <div :class="{ 'active': accessType == 0 }" @click="accessType = 0">评估</div>
<div :class="{ 'active': accessType == 1 }" @click="accessType = 1">巡查</div> <div :class="{ 'active': accessType == 1 }" @click="accessType = 1">巡查</div> -->
</div> </div>
<div class="content-assess-group"> <div class="content-assess-group">
<div v-for="(item, index) in accessData" :key="item" class="content-assess-item"> <div v-for="(item, index) in accessData" :key="'assess' + index" class="content-assess-item">
<span class="snow" v-for="item in 20" :key="item" :style="random()"></span> <span class="snow" v-for="item in 30" :key="item.name" :style="random()"></span>
<div class="content-assess-num"> <div class="content-assess-num">
<div class="content-assess-num-txt">{{ item.count }}<span>{{ item.unit }}</span></div> <div class="content-assess-num-txt">{{ item.count }}<span>{{ item.unit }}</span></div>
</div> </div>
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
<div :class="['map-index-right', !isScreen ? 'map-index-right-none' : '']"> <div :class="['map-index-right', !isScreen ? 'map-index-right-none' : '']">
<div class="map-index-right-wrap"> <div class="map-index-right-wrap">
<map-item-container title="风险级别统计"> <map-item-container title="风险级别统计">
<highcharts :options="levelStaticOptions" :updateArgs="[false, true]" class="level-static"> <highcharts :options="levelStaticOptions" class="level-static">
</highcharts> </highcharts>
</map-item-container> </map-item-container>
<map-item-container title="事故类型统计" id="accident"> <map-item-container title="事故类型统计" id="accident">
...@@ -70,13 +70,14 @@ ...@@ -70,13 +70,14 @@
<div :class="{ 'active': assessLevelType == 3 }" @click="assessLevelType = 3">低</div> <div :class="{ 'active': assessLevelType == 3 }" @click="assessLevelType = 3">低</div>
</div> </div>
<div class="terminal-group"> <div class="terminal-group">
<div v-for="(item, index) in terminalList" class="terminal-item-bar" :key="item.id" <el-table stripe :data="terminalList" height="100%" row-class-name="tr" cell-class-name="td" class="terminal">
:style="[{ '--bg-color': getColors(index % 5), '--bg-color1': getColors1(index % 5) }]"> <el-table-column :show-overflow-tooltip="true" prop="projectName" min-width="140" label="项目名称">
<span>{{ item.projectName }}</span> </el-table-column>
<span>{{ item.province }}</span> <el-table-column :show-overflow-tooltip="true" prop="deptName" label="所属区域">
<span>{{ item.deptName }}</span> </el-table-column>
<span>{{ item.riskScore }}</span> <el-table-column prop="riskScore" label="风险分值" align="center">
</div> </el-table-column>
</el-table>
</div> </div>
</map-item-container> </map-item-container>
</div> </div>
...@@ -92,6 +93,7 @@ import { mapTable, mapItemContainer, echartMap } from "./components/index"; ...@@ -92,6 +93,7 @@ import { mapTable, mapItemContainer, echartMap } from "./components/index";
import Highcharts from 'highcharts' import Highcharts from 'highcharts'
import { leftEvaluation, centerStatistic, leftRiskSort, leftAnnualSort, rightlevelStatic, rightAccessLevel, rightAccidentType, centerMap } from '@/api/map' import { leftEvaluation, centerStatistic, leftRiskSort, leftAnnualSort, rightlevelStatic, rightAccessLevel, rightAccidentType, centerMap } from '@/api/map'
import * as d3 from 'd3'; import * as d3 from 'd3';
import { deepClone } from '@/utils'
export default { export default {
name: "echarts", name: "echarts",
components: { components: {
...@@ -112,6 +114,7 @@ export default { ...@@ -112,6 +114,7 @@ export default {
* */ * */
data() { data() {
return { return {
Highcharts,
accessType: 0, accessType: 0,
assessLevelType: 0, assessLevelType: 0,
assessLevelColors: [[215, 162, 92], [108, 203, 137]], assessLevelColors: [[215, 162, 92], [108, 203, 137]],
...@@ -234,7 +237,50 @@ export default { ...@@ -234,7 +237,50 @@ export default {
// 事故类型统计 // 事故类型统计
accidentEchartsList: [], accidentEchartsList: [],
// 风险级别统计 // 风险级别统计
levelStaticOptions: {}, levelStaticOptions: {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 25
},
marginLeft: 0,
spacingLeft: 0,
backgroundColor: "transparent"
},
legend: {
layout: "vertical",
floating: true,
align: 'right',
verticalAlign: 'middle',
itemMarginBottom: 10,
itemMarginLeft: 20,
itemStyle: {
color: "#fff"
}
},
title: {
text: ''
},
credits: {
enabled: false
},
plotOptions: {
pie: {
size: '90%',
innerSize: '50%',
depth: 15,
showInLegend: true,
dataLabels: {
enabled: false
},
center: ['40%', '45%']
}
},
series: [{
data: []
}]
},
myMap: null, myMap: null,
mapData: [], mapData: [],
myTopLeft: [], myTopLeft: [],
...@@ -247,19 +293,25 @@ export default { ...@@ -247,19 +293,25 @@ export default {
autoRotate: false autoRotate: false
}, },
grid: { grid: {
top: "5%", top: "0",
bottom: "10%", bottom: "0",
}, },
xAxis3D: { xAxis3D: {
name: '', name: '',
type: "category", type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], data: [],
axisLabel: {
interval: 0
},
splitLine: { splitLine: {
show: false show: false
}, },
splitArea: {
show: false,
},
axisPointer: { axisPointer: {
show: false show: false
} },
}, },
yAxis3D: { yAxis3D: {
name: ' ', name: ' ',
...@@ -281,7 +333,10 @@ export default { ...@@ -281,7 +333,10 @@ export default {
}, },
axisPointer: { axisPointer: {
show: false show: false
} },
splitArea: {
interval: 0
},
}, },
zAxis3D: { zAxis3D: {
name: ' ', name: ' ',
...@@ -294,8 +349,9 @@ export default { ...@@ -294,8 +349,9 @@ export default {
} }
}, },
grid3D: { grid3D: {
boxWidth: 200, boxWidth: 240,
boxDepth: 80, boxDepth: 80,
boxHeight: 120,
axisLine: { axisLine: {
lineStyle: { color: '#444' } lineStyle: { color: '#444' }
}, },
...@@ -310,6 +366,9 @@ export default { ...@@ -310,6 +366,9 @@ export default {
color: '#fff' color: '#fff'
} }
}, },
splitArea: {
interval: 0
},
viewControl: { viewControl: {
maxBeta: 0, maxBeta: 0,
minBeta: 0, minBeta: 0,
...@@ -363,13 +422,12 @@ export default { ...@@ -363,13 +422,12 @@ export default {
width: "10%", width: "10%",
} }
], ],
mapDataNums: [] mapDataNums: [],
allStatus: 0
}; };
}, },
mounted() { mounted() {
this.myMap = echarts.init(this.$refs.myEchart); this.myMap = echarts.init(this.$refs.myEchart);
// this.getMapData()
// this.initData(['周一', '周二', '周三', '周四', '周五', '周六'], [100, 50, 70, 80, 60, 40])
}, },
watch: { watch: {
'$route': { '$route': {
...@@ -385,7 +443,7 @@ export default { ...@@ -385,7 +443,7 @@ export default {
methods: { methods: {
random() { random() {
const x = Math.random() * 100 + 10; const x = Math.random() * 100 + 10;
const y = Math.random() * 30 + 20; const y = Math.random() * 30 + 10;
const size = Math.random() * 3 + 1; const size = Math.random() * 3 + 1;
const opacity = Math.random(); const opacity = Math.random();
const duration = Math.random() * 5 + 5; const duration = Math.random() * 5 + 5;
...@@ -399,7 +457,7 @@ export default { ...@@ -399,7 +457,7 @@ export default {
}, },
getMapData(id, name) { getMapData(id, name) {
centerMap({ centerMap({
level: this.level, level: this.level - 1,
areaName: name, areaName: name,
type: 0 type: 0
}).then(res => { }).then(res => {
...@@ -414,75 +472,49 @@ export default { ...@@ -414,75 +472,49 @@ export default {
return this.assessLevelColors[index % 2].map((x, index) => index == 1 ? x : x + 50).join(',') || '227, 101, 88' return this.assessLevelColors[index % 2].map((x, index) => index == 1 ? x : x + 50).join(',') || '227, 101, 88'
}, },
initAll() { initAll() {
this.getAssess() this.getAssess();
this.initListeners(); this.initListeners();
this.getTableList(); this.getTableList();
this.getTotal() this.getTotal();
this.annualEcharts() this.annualEcharts();
this.getlevelStatic() this.getlevelStatic();
this.assessLevel() this.assessLevel();
this.accidentType() this.accidentType();
if (this.allStatus == 0) return;
this.isScreen = false
setTimeout(() => {
this.isScreen = true
}, 800);
}, },
getlevelStatic() { getlevelStatic() {
const levelColor = ['#00a0ea', 'yellow', 'orange', 'red'] const levelColor = [{
rightlevelStatic({ areaName: this.areaName }).then(res => { color: '#00a0ea',
const list = res.data.map((x, index) => { name: '低风险'
}, {
color: 'yellow',
name: '一般风险'
}, {
color: 'orange',
name: '较大风险'
}, {
color: 'red',
name: '重大风险'
}];
rightlevelStatic({ areaName: this.areaName, level: this.level - 1 }).then(res => {
const list = levelColor.map((x) => {
const num = res.data.find(val => val.levelName == x.name)
return { return {
name: x.levelName, ...x,
y: x.levelNum - '', y: num?.levelNum - '',
color: levelColor[index]
} }
}) })
this.levelStaticOptions = { setTimeout(() => {
chart: { this.levelStaticOptions.series[0].data = list;
type: 'pie', }, 600)
options3d: {
enabled: true,
alpha: 25
},
marginLeft: 0,
spacingLeft: 0,
backgroundColor: "transparent"
},
legend: {
layout: "vertical",
floating: true,
align: 'right',
verticalAlign: 'middle',
itemMarginBottom: 10,
itemMarginLeft: 20,
itemStyle: {
color: "#fff"
}
},
title: {
text: ''
},
credits: {
enabled: false
},
plotOptions: {
pie: {
size: '90%',
innerSize: '50%',
depth: 15,
showInLegend: true,
dataLabels: {
enabled: false
},
center: ['35%', '50%']
}
},
series: [{
data: list
}]
}
}) })
}, },
getAssess() { getAssess() {
leftEvaluation({ areaName: this.areaName }).then(res => { return leftEvaluation({ areaName: this.areaName, level: this.level - 1 }).then(res => {
this.accessData.forEach(val => { this.accessData.forEach(val => {
val.count = res.data[val.key + 'Num'] val.count = res.data[val.key + 'Num']
}) })
...@@ -506,28 +538,69 @@ export default { ...@@ -506,28 +538,69 @@ export default {
}, },
accidentType() { accidentType() {
rightAccidentType({ areaName: this.areaName, type: '' }).then(res => { rightAccidentType({ areaName: this.areaName, type: '', level: this.level - 1 }).then(res => {
d3.select("#circleEchart svg").remove()
if (!res.data.length) return;
const maxNum = res.data[0].typeNum; const maxNum = res.data[0].typeNum;
const max = 60, min = 20; const max = 30, min = 12;
// 使用D3.js库中的circlePack布局 // 使用D3.js库中的circlePack布局
const ele = document.querySelector('#accident') const ele = document.querySelector('#accident')
console.log(ele.offsetWidth); const containerWidth = ele.offsetWidth, containerHeight = ele.offsetHeight;
const containerWidth = ele.offsetWidth, containerHeight = ele.offsetHeight + 40; const circles = res.data.map((x, index) => {
const circles = res.data.map(x => {
return { return {
radius: Math.max(max * x.typeNum / maxNum, min), radius: Math.max(max * x.typeNum / maxNum, min),
name: x.typeName, name: x.typeName,
num: x.typeNum num: x.typeNum,
id: index
} }
}); });
const pack = d3.pack() const pack = d3.pack()
.size([containerWidth, containerHeight]) .size([containerWidth, containerHeight])
.padding(10); // 可选项，设置圆之间的间距 .padding(10); // 可选项，设置圆之间的间距
let i = 0
const root = d3.hierarchy({ children: circles }) const root = d3.hierarchy({ children: circles })
.sum(d => d.radius * 2); // 根据圆的直径来计算面积 .sum(d => d.radius * 2)
.sort((a, b) => { //圆从中间开始排序，所有要把中间的球放在最开始
i++
if (i < (res.data.length / 2)) {
return a.data.radius - b.data.radius
}
return b.data.radius - a.data.radius
});
/**
* 重排圆
* 1.获取大圆&&小圆中有y比它小的
*/
pack(root);
// root.children.forEach((val, index) => {
// if (index > 1 && index < (res.data.length / 2) && index % 2 == 0) {
// [root.children[index], root.children[res.data.length - 1 - index]] = [root.children[res.data.length - 1 - index], root.children[index]]
// }
// })
// 将root.children按照从小到大排序
// const rootChildren = root.children;
// for (let i = 0; i < rootChildren.length; i++) {
// let index = i, val = rootChildren[i];
// let sortRootChildren = [...root.children.slice(2)];
// sortRootChildren = JSON.stringify(sortRootChildren)
// // .sort((a, b) => a.y - b.y)
// let has = index > 1 && sortRootChildren.find((x, i) => (x.value < val.value && x.y < val.y)); //获取需要替换的圆
// if (has) {
// const replaceIndex = rootChildren.findIndex(x => x.data.id === has.data.id);
// const y = rootChildren[index].y;
// rootChildren[index].y = rootChildren[replaceIndex].y;
// rootChildren[replaceIndex].y = y;
// [rootChildren[replaceIndex], rootChildren[index]] = [rootChildren[index], rootChildren[replaceIndex]]
// if (replaceIndex < i) {
// i = replaceIndex;
// }
// }
// }
console.log(root.children.map(x => x.data.name))
pack(root); pack(root);
// 渲染结果 // 渲染结果
const svg = d3.select("#circleEchart") const svg = d3.select("#circleEchart")
...@@ -550,7 +623,7 @@ export default { ...@@ -550,7 +623,7 @@ export default {
.attr("fill-opacity", 0.8) .attr("fill-opacity", 0.8)
.attr("fill", (d, index) => d3Color[index % d3Color.length]) .attr("fill", (d, index) => d3Color[index % d3Color.length])
// // // 添加文本元素 // 添加文本元素
const text = groupElements.append("text") const text = groupElements.append("text")
.style("text-anchor", "middle") .style("text-anchor", "middle")
.style("dominant-baseline", "middle") .style("dominant-baseline", "middle")
...@@ -566,19 +639,6 @@ export default { ...@@ -566,19 +639,6 @@ export default {
.attr("x", 0) .attr("x", 0)
.attr("y", '1em') .attr("y", '1em')
.text(d => d.data.num); .text(d => d.data.num);
// var textLabels = groupElements.append("text")
// .attr("x", function (d) { return d.x; })
// .attr("y", function (d) { return d.y; })
// .style("text-anchor", "middle")
// .style("dominant-baseline", "middle")
// .style("font-size", "12px")
// .style("fill", "white")
// .text(function (d) {
// return [d.data.name, d.data.num].map(function (line, index) {
// return "<tspan x='0' dy='" + (index ? "1.2em" : "0") + "'>" + 111222 + "</tspan>";
// }).join("");
// });
let run = () => { let run = () => {
groupElements.transition() groupElements.transition()
...@@ -606,7 +666,8 @@ export default { ...@@ -606,7 +666,8 @@ export default {
const bar = echarts.init(this.$refs.bar, this.annualOptions); const bar = echarts.init(this.$refs.bar, this.annualOptions);
leftAnnualSort({ leftAnnualSort({
areaName: this.areaName, areaName: this.areaName,
type: '' type: '',
level: this.level - 1
}).then(result => { }).then(result => {
const x = Object.keys(result.data); const x = Object.keys(result.data);
const z = Object.values(result.data); const z = Object.values(result.data);
...@@ -620,14 +681,12 @@ export default { ...@@ -620,14 +681,12 @@ export default {
}) })
}, },
assessLevel() { assessLevel() {
rightAccessLevel({ areaName: this.areaName, level: this.assessLevelType, type: '' }).then(res => { rightAccessLevel({ areaName: this.areaName, level: this.level - 1, type: '' }).then(res => {
this.terminalList = res.data this.terminalList = res.data
}) })
}, },
getTotal() { getTotal() {
centerStatistic({ areaName: this.areaName, type: '' }).then(result => { centerStatistic({ areaName: this.areaName, type: '', level: this.level - 1 }).then(result => {
this.totalData.forEach(val => { this.totalData.forEach(val => {
val.count = result.data[val.key + 'Num'] || 0 val.count = result.data[val.key + 'Num'] || 0
}) })
...@@ -647,7 +706,8 @@ export default { ...@@ -647,7 +706,8 @@ export default {
getTableList() { getTableList() {
leftRiskSort({ leftRiskSort({
areaName: this.areaName, areaName: this.areaName,
type: '' type: '',
level: this.level - 1
}).then(res => { }).then(res => {
this.tableList = res.data this.tableList = res.data
}) })
...@@ -674,6 +734,7 @@ export default { ...@@ -674,6 +734,7 @@ export default {
if (code != this.name) { if (code != this.name) {
this.myMap.clear(); this.myMap.clear();
} }
this.name = code == 100000 ? "china" : code + ""; this.name = code == 100000 ? "china" : code + "";
this.areaName = code == 100000 ? "" : name; this.areaName = code == 100000 ? "" : name;
this.initAll() this.initAll()
...@@ -724,8 +785,9 @@ export default { ...@@ -724,8 +785,9 @@ export default {
return { return {
value: [x.lng - '', x.lat - '', 0], value: [x.lng - '', x.lat - '', 0],
itemStyle: { itemStyle: {
color: x.riskColor color: x.riskColor,
}, },
borderWidth: 5,
info: x, info: x,
tooltip: { tooltip: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
...@@ -807,8 +869,9 @@ export default { ...@@ -807,8 +869,9 @@ export default {
}, },
{ {
type: "scatter3D", type: "scatter3D",
symbol: 'circle',
symbolSize: 6,
coordinateSystem: "geo3D", coordinateSystem: "geo3D",
symbolSize: 10,
data: scatters, data: scatters,
zlevel: 1, zlevel: 1,
} }
...@@ -820,11 +883,12 @@ export default { ...@@ -820,11 +883,12 @@ export default {
initListeners() { initListeners() {
const _this = this; const _this = this;
this.myMap.on("click", "series.map3D", function (params) { this.myMap.on("click", "series.map3D", function (params) {
if (_this.level == 4) { if (_this.level == 4) {
// _this.$router.push("/map/detail"); // _this.$router.push("/map/detail");
return false return false
} }
_this.allStatus = 1;
const selectData = _this.mapData.find( const selectData = _this.mapData.find(
(x) => x.properties.name == params.name (x) => x.properties.name == params.name
); );
...@@ -952,8 +1016,10 @@ export default { ...@@ -952,8 +1016,10 @@ export default {
height: 100%; height: 100%;
} }
.echart-top-center { .echart-top-center {
width: 80%; width: 800px;
margin: 0 auto; margin: 0 auto;
height: 90px; height: 90px;
background: url('../../assets//map/centerTop.png') no-repeat center bottom; background: url('../../assets//map/centerTop.png') no-repeat center bottom;
...@@ -962,6 +1028,7 @@ export default { ...@@ -962,6 +1028,7 @@ export default {
position: absolute; position: absolute;
justify-content: center; justify-content: center;
left: 50%; left: 50%;
top: 0;
transform: translateX(-49%); transform: translateX(-49%);
.echart-total-count { .echart-total-count {
...@@ -997,6 +1064,10 @@ export default { ...@@ -997,6 +1064,10 @@ export default {
} }
} }
.echart-top-center-none {
opacity: 0;
}
@keyframes TotalAnimal { @keyframes TotalAnimal {
0% { 0% {
transform: translateY(4px); transform: translateY(4px);
...@@ -1012,8 +1083,9 @@ export default { ...@@ -1012,8 +1083,9 @@ export default {
} }
.terminal-group { .terminal-group {
height: 90%; height: 80%;
overflow: auto; margin-top: 5px;
overflow: hidden;
} }
.terminal-item-bar { .terminal-item-bar {
...@@ -1095,30 +1167,30 @@ export default { ...@@ -1095,30 +1167,30 @@ export default {
width: 25%; width: 25%;
height: 100%; height: 100%;
float: left; float: left;
position: relative; position: absolute;
transform: translateX(0);
transition: all 0.5s ease; transition: all 0.5s ease;
transform: translateX(0);
} }
&-center { &-center {
width: 50%; width: 50%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
float: left;
display: flex; display: flex;
position: relative; position: relative;
transition: width 0.5s ease; transition: all 0.6s ease;
.echart-protect-left, .echart-protect-left,
.echart-protect-right { .echart-protect-right {
// width: 15%; z-index: 10;
} }
.echart-protect-center { .echart-protect-center {
width: 100%; width: 88%;
padding: 0 6%;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
margin: 0 auto;
z-index: 10;
} }
.echart-protect-left, .echart-protect-left,
...@@ -1127,9 +1199,10 @@ export default { ...@@ -1127,9 +1199,10 @@ export default {
height: 100%; height: 100%;
position: absolute; position: absolute;
left: 10px; left: 10px;
z-index: 0;
img { img {
width: 90%; width: 80%;
height: 100%; height: 100%;
} }
} }
...@@ -1150,37 +1223,24 @@ export default { ...@@ -1150,37 +1223,24 @@ export default {
.map-index-screen { .map-index-screen {
float: none; float: none;
width: 95%; width: 95%;
// transform: translateX(-25%);
} }
.map-index-none { .map-index-none {
transform: translateX(-1000px); transform: translateX(-1000px);
width: 0; position: absolute;
}
.map-index-right {
position: absolute;
top: 0;
right: 20px;
} }
.map-index-right-none { .map-index-right-none {
transform: translateX(100%); transform: translateX(120%);
width: 0;
} }
// &-left::after,
// &-right::after {
// content: "";
// width: 44px;
// height: 84%;
// background: url("../../assets/map/hud-left.png") no-repeat;
// background-size: 100% 100%;
// position: absolute;
// left: 0;
// top: 50%;
// z-index: 10;
// transform: translateY(-52%);
// }
// &-right::after {
// background-image: url("../../assets/map/hud-right.png");
// position: absolute;
// right: 0;
// left: auto;
// }
&-left-wrap { &-left-wrap {
margin-left: 20px; margin-left: 20px;
height: 100%; height: 100%;
...@@ -1206,7 +1266,7 @@ export default { ...@@ -1206,7 +1266,7 @@ export default {
.map-content-item:first-child, .map-content-item:first-child,
.map-content-item:last-child { .map-content-item:last-child {
width: 110%; width: 110%;
transform: translateX(-10%); transform: translateX(-6%);
} }
} }
} }
...@@ -1237,10 +1297,12 @@ export default { ...@@ -1237,10 +1297,12 @@ export default {
&::before { &::before {
content: ' '; content: ' ';
width: 14px; width: 20px;
height: 14px; height: 20px;
border-radius: 50%; border-radius: 50%;
background: #00a0ea; // background: #00a0ea;
// background: radial-gradient(circle, #00a0ea, #00a0ea96, #00a0ea55);
background: radial-gradient(circle, #00a0ea 20%, #00a0ea96 20%, #00a0ea96 50%, #00a0ea55 50%);
overflow: hidden; overflow: hidden;
margin-right: 6px; margin-right: 6px;
} }
...@@ -1248,19 +1310,23 @@ export default { ...@@ -1248,19 +1310,23 @@ export default {
>span:nth-of-type(2) { >span:nth-of-type(2) {
&::before { &::before {
background: yellow; // background: yellow;
background: radial-gradient(circle, yellow, yellow 20%, rgba(255, 255, 0, 0.572) 20%, rgba(255, 255, 0, 0.572) 50%, rgba(255, 255, 0, 0.382) 50%, rgba(255, 255, 0, 0.382));
} }
} }
>span:nth-of-type(3) { >span:nth-of-type(3) {
&::before { &::before {
background: orange; // background: orange;
background: radial-gradient(circle, orange 20%, rgba(255, 166, 0, 0.572) 20%, rgba(255, 166, 0, 0.572) 50%, rgba(255, 166, 0, 0.382) 50%);
} }
} }
>span:nth-of-type(4) { >span:nth-of-type(4) {
&::before { &::before {
background: red; // background: red;
// background: radial-gradient(circle, red, rgba(255, 0, 0, 0.572), rgba(255, 0, 0, 0.382));
background: radial-gradient(circle, red 20%, rgba(255, 0, 0, 0.572) 20%, rgba(255, 0, 0, 0.572) 50%, rgba(255, 0, 0, 0.382) 50%);
} }
} }
} }
...@@ -1391,6 +1457,7 @@ export default { ...@@ -1391,6 +1457,7 @@ export default {
font-size: 10px; font-size: 10px;
color: #fff; color: #fff;
text-align: left; text-align: left;
min-height: 5px;
&>div { &>div {
display: inline-block; display: inline-block;
...@@ -1459,4 +1526,52 @@ export default { ...@@ -1459,4 +1526,52 @@ export default {
// animation: pathAnimation 0.3s ease-in-out infinite; // animation: pathAnimation 0.3s ease-in-out infinite;
// } // }
} }
</style>
.terminal {
background: transparent;
&::before {
background-color: transparent;
}
::v-deep tr {
background: transparent;
color: #fff;
font-size: 14px;
text-align: center;
&:hover {
background: transparent;
td.el-table__cell {
background: transparent;
}
}
}
::v-deep .el-table__header-wrapper th,
::v-deep .el-table__fixed-header-wrapper th {
background: rgba($color: #11284d, $alpha: .6) !important;
color: #00e4ff;
font-size: 14px;
padding: 5px 0;
height: 0;
}
::v-deep .el-table__row--striped {
td.el-table__cell {
background: rgba($color: #11284d, $alpha: .6) !important;
}
}
::v-deep th.el-table__cell.is-leaf,
::v-deep td.el-table__cell {
border-bottom: none;
padding: 5px 0;
}
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
display: none;
}
</style>
\ No newline at end of file
src/views/map/map-layout.vue
View file @ dca2b982
...@@ -22,8 +22,8 @@ ...@@ -22,8 +22,8 @@
</div> --> </div> -->
</div> </div>
<div class="map-header-right"> <div class="map-header-right">
<span @click="toBack"><i class="el-icon-back"></i>返回</span> <div @click="toBack"><i class="el-icon-back"></i><span>返回</span> </div>
<span><i class="el-icon-s-home"></i>管理端</span> <div><i class="el-icon-s-home"></i><span>管理端</span> </div>
<!-- <span><i class="el-icon-switch-button"></i> 退出</span> --> <!-- <span><i class="el-icon-switch-button"></i> 退出</span> -->
</div> </div>
</div> </div>
...@@ -161,6 +161,7 @@ export default { ...@@ -161,6 +161,7 @@ export default {
background: #000; background: #000;
background: url("../../assets/map/bg.png") no-repeat; background: url("../../assets/map/bg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
overflow: hidden;
.map-header { .map-header {
height: 83px; height: 83px;
...@@ -175,14 +176,16 @@ export default { ...@@ -175,14 +176,16 @@ export default {
.map-header-search { .map-header-search {
width: 20%; width: 20%;
position: relative; position: relative;
margin-top: 3px; height: 35px;
display: flex;
align-items: center;
.el-input { .el-input {
::v-deep input { ::v-deep input {
height: 30px; height: 26px;
background: transparent; background: transparent;
border-color: #005495; border-color: #005495;
border-radius: 30px; border-radius: 26px;
color: #fff; color: #fff;
&::placeholder { &::placeholder {
...@@ -215,14 +218,19 @@ export default { ...@@ -215,14 +218,19 @@ export default {
.map-header-right { .map-header-right {
width: 20%; width: 20%;
font-size: 12px; font-size: 12px;
vertical-align: middle;
margin-top: 8px;
color: #2391FF; color: #2391FF;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center;
height: 36px;
cursor: pointer;
span { >div {
margin-left: 20px; margin-left: 20px;
span {
margin-top: -5px;
}
} }
i { i {
......
src/views/riskLedger/component/table.vue 0 → 100644
View file @ dca2b982
<template>
<div>
<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
<el-table-column label="项目信息" align="center" fixed width="500">
<el-table-column label="区域公司" align="center" prop="deptName" width="100" />
<el-table-column label="项目名称" align="center" prop="projectName" width="100">
<template slot-scope="scope">
<el-popover placement="top-start" title="项目名称" width="200" trigger="hover"
:content="scope.row.projectName">
<span slot="reference">{{
scope.row.projectName.length > 10
? scope.row.projectName.substring(0, 10) + "..."
: scope.row.projectName
}}</span>
</el-popover>
</template>
</el-table-column>
<el-table-column label="所属城市" align="center" prop="city" width="100" />
<el-table-column label="项目业态" align="center" prop="businessFormat" width="100" />
<el-table-column label="项目类型" align="center" prop="type" width="100" />
</el-table-column>
<el-table-column label="项目风险清单" align="center">
<el-table-column label="固有风险" align="center">
<el-table-column label="危险源名称" align="center" prop="inherentName" width="100" />
<el-table-column label="风险等级" align="center" prop="inherentLevel" width="100" />
</el-table-column>
<el-table-column label="现有风险" align="center">
<el-table-column label="危险源名称" align="center" prop="existingName" width="100" />
<el-table-column label="风险等级" align="center" prop="existingLevel" width="100" />
</el-table-column>
<el-table-column label="风险点位置" align="center" prop="presenceLocation" width="100" />
<el-table-column label="可能导致的事故后果" align="center" prop="listType" width="100">
<template slot-scope="scope">
<el-popover placement="top-start" title="项目名称" width="200" trigger="hover"
:content="scope.row.listType">
<span slot="reference">{{
scope.row.listType.length > 10
? scope.row.listType.substring(0, 10) + "..."
: scope.row.listType
}}</span>
</el-popover>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="项目整体风险等级" align="center">
<el-table-column label="固有风险" align="center" prop="inherentProjectLevel" width="100" />
<el-table-column label="现状风险" align="center" prop="existingProjectLevel" width="100" />
</el-table-column>
<el-table-column label="风险管控" align="center">
<el-table-column label="应采取的管控措施" align="center" prop="inherentMeasuresAdministration" width="100">
<template slot-scope="scope">
<el-popover placement="top-start" title="应采取的管控措施" width="200" trigger="hover"
:content="scope.row.inherentMeasuresAdministration">
<span slot="reference">{{
scope.row.inherentMeasuresAdministration &&
scope.row.inherentMeasuresAdministration.length > 10
? scope.row.inherentMeasuresAdministration.substring(0, 10) +
"..."
: scope.row.inherentMeasuresAdministration
}}</span>
</el-popover>
</template>
</el-table-column>
<el-table-column label="已采取的管控措施" align="center" prop="existingMeasuresAdministration" width="100">
<template slot-scope="scope">
<el-popover placement="top-start" title="已采取的管控措施" width="200" trigger="hover"
:content="scope.row.existingMeasuresAdministration">
<span slot="reference">{{
scope.row.existingMeasuresAdministration &&
scope.row.existingMeasuresAdministration.length > 10
? scope.row.existingMeasuresAdministration.substring(0, 10) +
"..."
: scope.row.existingMeasuresAdministration
}}</span>
</el-popover>
</template>
</el-table-column>
<el-table-column label="分级管控" align="center">
<el-table-column label="管控责任单位" align="center" prop="measuresDeptName" width="100" />
<el-table-column label="管控责任人" align="center" prop="measuresUserName" width="100" />
<el-table-column label="人员联系方式" align="center" prop="measuresUserPhone" width="100" />
</el-table-column>
</el-table-column>
<el-table-column label="重大危险源管理" align="center">
<el-table-column label="是否存在重大危险源" align="center" prop="majorHazardSource" width="100" />
<el-table-column label="重大危险源名称" align="center" prop="hazardSourceName" width="100" />
<el-table-column label="重大危险源描述" align="center" prop="majorHazardDescription" width="100" />
</el-table-column>
<el-table-column label="判定依据" align="center" prop="referenceBasis" width="100" />
<el-table-column label="操作" align="center" prop="describe">
<template slot-scope="scope">
<div>
<router-link :to="'/risk/plan/inherentdata/index/' + scope.row.id" class="link-type">
<el-button size="mini" type="text" icon="el-icon-view">详情</el-button>
</router-link>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination v-show="page.total > 0" :total="page.total" :current-page="page.pageNum" :page-size="page.pageSize"
@current-change="changePage" />
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => []
},
loading: {
type: Boolean,
default: false
},
page: {
type: Object,
default: () => {
return {
total: 0,
pageNum: 1,
pageSize: 10
}
}
},
},
data() {
return {
// 选中数组
ids: [],
}
},
methods: {
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
changePage(page) {
this.$emit('changePage', page)
}
}
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
src/views/riskLedger/detail.vue
View file @ dca2b982
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="90px"
>
<el-form-item label="区域公司" prop="deptName"> <el-form-item label="区域公司" prop="deptName">
<el-input <el-input v-model="queryParams.deptName" placeholder="请输入区域公司" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.deptName"
placeholder="请输入区域公司"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="项目名称" prop="projectName"> <el-form-item label="项目名称" prop="projectName">
<el-input <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.projectName"
placeholder="请输入项目名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="所属城市" prop="city"> <el-form-item label="所属城市" prop="city">
<el-input <el-input v-model="queryParams.city" placeholder="请输入所属城市" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.city"
placeholder="请输入所属城市"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="项目业态" prop="businessFormat"> <el-form-item label="项目业态" prop="businessFormat">
<el-input <el-input v-model="queryParams.businessFormat" placeholder="请输入项目业态" clearable
v-model="queryParams.businessFormat" @keyup.enter.native="handleQuery" />
placeholder="请输入项目业态"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="固有风险危险源名称" prop="inherentName"> <el-form-item label="固有风险危险源名称" prop="inherentName">
<el-input <el-input v-model="queryParams.inherentName" placeholder="请输入固有风险危险源名称" clearable
v-model="queryParams.inherentName" @keyup.enter.native="handleQuery" />
placeholder="请输入固有风险危险源名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="固有风险风险等级" prop="inherentLevel"> <el-form-item label="固有风险风险等级" prop="inherentLevel">
<el-select <el-select v-model="queryParams.inherentLevel" placeholder="请选择固有风险风险等级" clearable>
v-model="queryParams.inherentLevel" <el-option v-for="dict in dict.type.risk_plan_level" :key="dict.value" :label="dict.label"
placeholder="请选择固有风险风险等级" :value="dict.value" />
clearable
>
<el-option
v-for="dict in dict.type.risk_plan_level"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="现有风险危险源名称" prop="existingName"> <el-form-item label="现有风险危险源名称" prop="existingName">
<el-input <el-input v-model="queryParams.existingName" placeholder="请输入现有风险危险源名称" clearable
v-model="queryParams.existingName" @keyup.enter.native="handleQuery" />
placeholder="请输入现有风险危险源名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="现有风险风险等级" prop="existingLevel"> <el-form-item label="现有风险风险等级" prop="existingLevel">
<el-select <el-select v-model="queryParams.existingLevel" placeholder="请选择现有风险风险等级" clearable>
v-model="queryParams.existingLevel" <el-option v-for="dict in dict.type.risk_plan_level" :key="dict.value" :label="dict.label"
placeholder="请选择现有风险风险等级" :value="dict.value" />
clearable
>
<el-option
v-for="dict in dict.type.risk_plan_level"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="风险点位置" prop="presenceLocation"> <el-form-item label="风险点位置" prop="presenceLocation">
<el-input <el-input v-model="queryParams.presenceLocation" placeholder="请输入风险点位置" clearable
v-model="queryParams.presenceLocation" @keyup.enter.native="handleQuery" />
placeholder="请输入风险点位置"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="可能导致的事故后果" prop="listType"> <el-form-item label="可能导致的事故后果" prop="listType">
<el-input <el-input v-model="queryParams.listType" placeholder="请输入可能导致的事故后果" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.listType"
placeholder="请输入可能导致的事故后果"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
type="primary" <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-row class="mb8"> <el-row class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button
>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">
</right-toolbar> </right-toolbar>
</el-row> </el-row>
<el-table <el-tabs v-model="activeName" type="border-card" style="margin-top: 10px">
v-loading="loading" <el-tab-pane label="固有风险" name="1">
:data="inherentList" <riskTable v-bind="inherent.data" @changePage="inherent.changePage" />
@selection-change="handleSelectionChange" </el-tab-pane>
> <el-tab-pane label="现状风险" name="2">
<el-table-column label="项目信息" align="center" fixed width="500"> <riskTable v-bind="existing.data" @changePage="existing.changePage" />
<el-table-column </el-tab-pane>
label="区域公司" </el-tabs>
align="center"
prop="deptName"
width="100"
/>
<el-table-column
label="项目名称"
align="center"
prop="projectName"
width="100"
>
<template slot-scope="scope">
<el-popover
placement="top-start"
title="项目名称"
width="200"
trigger="hover"
:content="scope.row.projectName"
>
<span slot="reference">{{
scope.row.projectName.length > 10
? scope.row.projectName.substring(0, 10) + "..."
: scope.row.projectName
}}</span>
</el-popover>
</template>
</el-table-column>
<el-table-column
label="所属城市"
align="center"
prop="city"
width="100"
/>
<el-table-column
label="项目业态"
align="center"
prop="businessFormat"
width="100"
/>
<el-table-column
label="项目类型"
align="center"
prop="type"
width="100"
/>
</el-table-column>
<el-table-column label="项目风险清单" align="center">
<el-table-column label="固有风险" align="center">
<el-table-column
label="危险源名称"
align="center"
prop="inherentName"
width="100"
/>
<el-table-column
label="风险等级"
align="center"
prop="inherentLevel"
width="100"
/>
</el-table-column>
<el-table-column label="现有风险" align="center">
<el-table-column
label="危险源名称"
align="center"
prop="existingName"
width="100"
/>
<el-table-column
label="风险等级"
align="center"
prop="existingLevel"
width="100"
/>
</el-table-column>
<el-table-column
label="风险点位置"
align="center"
prop="presenceLocation"
width="100"
/>
<el-table-column
label="可能导致的事故后果"
align="center"
prop="listType"
width="100"
>
<template slot-scope="scope">
<el-popover
placement="top-start"
title="项目名称"
width="200"
trigger="hover"
:content="scope.row.listType"
>
<span slot="reference">{{
scope.row.listType.length > 10
? scope.row.listType.substring(0, 10) + "..."
: scope.row.listType
}}</span>
</el-popover>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="项目整体风险等级" align="center">
<el-table-column
label="固有风险"
align="center"
prop="inherentProjectLevel"
width="100"
/>
<el-table-column
label="现状风险"
align="center"
prop="existingProjectLevel"
width="100"
/>
</el-table-column>
<el-table-column label="风险管控" align="center">
<el-table-column
label="应采取的管控措施"
align="center"
prop="inherentMeasuresAdministration"
width="100"
>
<template slot-scope="scope">
<el-popover
placement="top-start"
title="应采取的管控措施"
width="200"
trigger="hover"
:content="scope.row.inherentMeasuresAdministration"
>
<span slot="reference">{{
scope.row.inherentMeasuresAdministration &&
scope.row.inherentMeasuresAdministration.length > 10
? scope.row.inherentMeasuresAdministration.substring(0, 10) +
"..."
: scope.row.inherentMeasuresAdministration
}}</span>
</el-popover>
</template>
</el-table-column>
<el-table-column
label="已采取的管控措施"
align="center"
prop="existingMeasuresAdministration"
width="100"
>
<template slot-scope="scope">
<el-popover
placement="top-start"
title="已采取的管控措施"
width="200"
trigger="hover"
:content="scope.row.existingMeasuresAdministration"
>
<span slot="reference">{{
scope.row.existingMeasuresAdministration &&
scope.row.existingMeasuresAdministration.length > 10
? scope.row.existingMeasuresAdministration.substring(0, 10) +
"..."
: scope.row.existingMeasuresAdministration
}}</span>
</el-popover>
</template>
</el-table-column>
<el-table-column label="分级管控" align="center">
<el-table-column
label="管控责任单位"
align="center"
prop="measuresDeptName"
width="100"
/>
<el-table-column
label="管控责任人"
align="center"
prop="measuresUserName"
width="100"
/>
<el-table-column
label="人员联系方式"
align="center"
prop="measuresUserPhone"
width="100"
/>
</el-table-column>
</el-table-column>
<el-table-column label="重大危险源管理" align="center">
<el-table-column
label="是否存在重大危险源"
align="center"
prop="majorHazardSource"
width="100"
/>
<el-table-column
label="重大危险源名称"
align="center"
prop="hazardSourceName"
width="100"
/>
<el-table-column
label="重大危险源描述"
align="center"
prop="majorHazardDescription"
width="100"
/>
</el-table-column>
<el-table-column
label="判定依据"
align="center"
prop="referenceBasis"
width="100"
/>
<el-table-column label="操作" align="center" prop="describe">
<template slot-scope="scope">
<div>
<router-link
:to="'/risk/plan/inherentdata/index/' + scope.row.id"
class="link-type"
>
<el-button size="mini" type="text" icon="el-icon-view"
>详情</el-button
>
</router-link>
</div>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div> </div>
</template> </template>
<script> <script>
import { inherentListList } from "@/api/risk/existing"; import { inherentListList, existingList } from "@/api/risk/existing";
import riskTable from './component/table.vue'
export default { export default {
name: "inherent", name: "inherent",
dicts: ["risk_plan_level"], dicts: ["risk_plan_level"],
components: {
riskTable
},
data() { data() {
return { return {
// 遮罩层 activeName: '1',
loading: true,
// 选中数组
ids: [],
// 非单个禁用 // 非单个禁用
single: true, single: true,
// 非多个禁用 // 非多个禁用
...@@ -403,15 +84,12 @@ export default { ...@@ -403,15 +84,12 @@ export default {
// 总条数 // 总条数
total: 0, total: 0,
// 固有风险清单库表格数据 // 固有风险清单库表格数据
inherentList: [],
// 弹出层标题 // 弹出层标题
title: "", title: "",
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1,
pageSize: 10,
name: null, name: null,
buildingName: null, buildingName: null,
floorName: null, floorName: null,
...@@ -425,19 +103,73 @@ export default { ...@@ -425,19 +103,73 @@ export default {
form: {}, form: {},
// 表单校验 // 表单校验
rules: {}, rules: {},
inherent: {
data: {
loading: false,
list: [],
page: {
pageNum: 1,
pageSize: 10
}
},
changePage: this.inherentChangePage
},
existing: {
data: {
loading: false,
list: [],
page: {
pageNum: 1,
pageSize: 10
}
},
changePage: this.existingChangePage
}
}; };
}, },
created() { created() {
this.getList(); this.getList();
this.getExitList()
}, },
methods: { methods: {
existingChangePage(page) {
this.existing.data.page.pageNum = page;
this.getExitList()
},
inherentChangePage(page) {
this.existing.data.page.pageNum = page;
this.getList()
},
/** 查询固有风险清单库列表 */ /** 查询固有风险清单库列表 */
getList() { getList() {
this.loading = true; this.inherent.loading = true;
inherentListList(this.queryParams).then((response) => { inherentListList({ ...this.queryParams, ...this.existing.data.page }).then((response) => {
this.inherentList = response.rows; // this.inherentList = response.rows;
this.total = response.total; // this.total = response.total;
this.loading = false; // this.loading = false;
this.inherent.data = {
...this.inherent.data,
list: response.rows,
loading: false,
page: {
...this.inherent.page,
total: response.total
}
}
});
},
getExitList() {
this.existing.loading = true
existingList({ ...this.queryParams, ...this.existing.data.page }).then((response) => {
this.existing.data = {
...this.existing,
list: response.rows,
loading: false,
page: {
...this.existing.page,
total: response.total
}
}
}); });
}, },
// 取消按钮 // 取消按钮
...@@ -492,12 +224,7 @@ export default { ...@@ -492,12 +224,7 @@ export default {
this.resetForm("queryForm"); this.resetForm("queryForm");
this.handleQuery(); this.handleQuery();
}, },
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
exportList(id) { exportList(id) {
this.download("system/risk/plan/exportWord/riskNotification/" + id, {}); this.download("system/risk/plan/exportWord/riskNotification/" + id, {});
}, },
......
src/views/riskLedger/list.vue
View file @ dca2b982
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="项目名称" prop="name"> <el-form-item label="项目名称" prop="name">
<el-input <el-input v-model="queryParams.name" placeholder="请输入项目名称" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.name"
placeholder="请输入项目名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="经营状态" prop="businessStatus"> <el-form-item label="经营状态" prop="businessStatus">
<el-input <el-input v-model="queryParams.businessStatus" placeholder="请输入经营状态" clearable
v-model="queryParams.businessStatus" @keyup.enter.native="handleQuery" />
placeholder="请输入经营状态"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="项目业态" prop="business"> <el-form-item label="项目业态" prop="business">
<el-select <el-select v-model="queryParams.business" placeholder="请选择项目业态" clearable>
v-model="queryParams.business" <el-option v-for="dict in dict.type.risk_project_business" :key="dict.value" :label="dict.label"
placeholder="请选择项目业态" :value="dict.value" />
clearable
>
<el-option
v-for="dict in dict.type.risk_project_business"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="所属区域" prop="deptId"> <el-form-item label="所属区域" prop="deptId">
<treeselect <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="请选择所属区域"
v-model="queryParams.deptId" style="width: 250px" />
:options="deptOptions"
:show-count="true"
placeholder="请选择所属区域"
style="width: 250px"
/>
</el-form-item> </el-form-item>
<el-form-item label="所在城市" prop="city"> <el-form-item label="所在城市" prop="city">
<el-input <el-input v-model="queryParams.city" placeholder="请输入所在城市" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.city"
placeholder="请输入所在城市"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="详细地址" prop="address"> <el-form-item label="详细地址" prop="address">
<el-input <el-input v-model="queryParams.address" placeholder="请输入详细地址" clearable @keyup.enter.native="handleQuery" />
v-model="queryParams.address"
placeholder="请输入详细地址"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> </el-form-item>
<el-form-item label="物业" prop="propertyManagement"> <el-form-item label="物业" prop="propertyManagement">
<el-select <el-select v-model="queryParams.propertyManagement" placeholder="请选择是否为物业" clearable>
v-model="queryParams.propertyManagement"
placeholder="请选择是否为物业"
clearable
>
<el-option key="1" label="是" value="true" /> <el-option key="1" label="是" value="true" />
<el-option key="0" label="否" value="false" /> <el-option key="0" label="否" value="false" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-select <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
v-model="queryParams.status" <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
placeholder="请选择状态" :value="dict.value" />
clearable
>
<el-option
v-for="dict in dict.type.sys_normal_disable"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
type="primary" <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-row> <el-row>
<right-toolbar <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row> </el-row>
<el-table <el-table v-loading="loading" :data="projectList" @selection-change="handleSelectionChange">
v-loading="loading"
:data="projectList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center"> <el-table-column label="序号" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -129,36 +63,18 @@ ...@@ -129,36 +63,18 @@
<el-table-column label="详细地址" align="center" prop="address" /> <el-table-column label="详细地址" align="center" prop="address" />
<el-table-column label="状态" align="center" prop="status"> <el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope"> <template slot-scope="scope">
<dict-tag <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
:options="dict.type.sys_normal_disable"
:value="scope.row.status"
/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button size="mini" type="text" icon="el-icon-edit" @click="showDetail(scope.row)">查看风险台账</el-button>
size="mini"
type="text"
icon="el-icon-edit"
@click="showDetail(scope.row)"
>查看风险台账</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
v-show="total > 0" @pagination="getList" />
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div> </div>
</template> </template>
...@@ -280,7 +196,7 @@ export default { ...@@ -280,7 +196,7 @@ export default {
}, },
showDetail(obj) { showDetail(obj) {
this.$router.push({ this.$router.push({
name: "/riskLe", name: "riskDetail",
params: { params: {
projectId: obj.id, projectId: obj.id,
}, },
......
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