Skip to content

R
rongtong-pc
Commit 0a982eb5 authored by dlkong's avatar dlkong
Browse files
Options

Merge branch 'develop' of http://git.censoft.com.cn/rongtong/ruoyi-ui into develop

parents afb7ecdf 55c25562
Show whitespace changes
Inline Side-by-side
Showing with 1990 additions and 754 deletions
src/api/map.js 0 → 100644
View file @ 0a982eb5
import request from '@/utils/request'
import qs from 'querystring'
// 项目信息列表
export const projectList = (params) => {
return request({
url: '/system/bigScreen/selectLedgerProjectList',
method: 'get',
params
})
}
// 项目，楼宇，楼层统计
export const leftEvaluation = (params) => {
return request({
url: '/system/bigScreen/evaluationDataStatistics',
method: 'get',
params
})
}
// 全国风险，年度新增
export const centerStatistic = (params) => {
return request({
url: '/system/bigScreen/nationalRiskStatistics',
method: 'get',
params
})
}
// 总体风险指数排名
export const leftRiskSort = (params) => {
return request({
url: '/system/bigScreen/riskIndexRanking',
method: 'get',
params
})
}
// 年度风险数量统计
export const leftAnnualSort = (params) => {
return request({
url: '/system/bigScreen/annualRiskStatistics',
method: 'get',
params
})
}
//
// 年度风险数量统计
export const rightlevelStatic = (params) => {
return request({
url: '/system/bigScreen/riskLevelStatistics',
method: 'get',
params
})
}
// 项目风险级别排名
export const rightAccessLevel = (params) => {
return request({
url: '/system/bigScreen/riskProjectRanking',
method: 'get',
params
})
}
export const rightAccidentType = (params) => {
return request({
url: '/system/bigScreen/accidentTypeStatistics',
method: 'get',
params
})
}
export const topProjectDetail = (params) => {
return request({
url: '/system/bigScreen/projectStatisticsDetail',
method: 'get',
params
})
}
// 获取项目下的楼宇
export const detailBuilding = (id) => {
return request({
url: '/system/bigScreen/building/list/' + id,
method: 'get',
})
}
// 根据楼宇id获取楼层列表
export const detailFloor = (id) => {
return request({
url: '/system/bigScreen/floor/list/' + id,
method: 'get',
})
}
// 项目风险信息
export function detailProjectRisk(params) {
return request({
url: '/system/bigScreen/projectRiskInformation',
method: 'get',
params
})
}
// 项目风险信息
export function detailDictList(params) {
return request({
url: '/system/dict/data/list/all',
method: 'get',
params
})
}
// 获取地图统计数据
export function centerMap(params) {
return request({
url: '/system/bigScreen/getRiskMapStatistics',
method: 'get',
params
})
}
\ No newline at end of file
src/assets/map/accident.png
View replaced file @ afb7ecdf View file @ 0a982eb5
src/assets/map/accident.png

6.06 KB | W: | H:

src/assets/map/accident.png

329 KB | W: | H:

src/assets/map/accident.png
src/assets/map/accident.png
src/assets/map/accident.png
src/assets/map/accident.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/map/tooltip-bg.svg 0 → 100644
View file @ 0a982eb5
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="231px" height="141px" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask fill="white" id="clip99">
<path d="M 8.14464262531554 0.992426716141013 C 8.14464262531554 0.992426716141013 0.168227190768121 11.1871280148423 0.168227190768121 11.1871280148423 C 0.168227190768121 11.1871280148423 0.168227190768121 127.682348794063 0.168227190768121 127.682348794063 C 0.168227190768121 127.682348794063 12.7971157591057 140.788998144712 12.7971157591057 140.788998144712 C 12.7971157591057 140.788998144712 219.49872989542 140.788998144712 219.49872989542 140.788998144712 C 219.49872989542 140.788998144712 230.133514605121 127.682348794063 230.133514605121 127.682348794063 C 230.133514605121 127.682348794063 230.133514605121 17.01246567718 230.133514605121 17.01246567718 C 230.133514605121 17.01246567718 220.827260728453 9.73115398886828 220.827260728453 9.73115398886828 C 220.827260728453 9.73115398886828 98.5435816804904 9.73115398886828 98.5435816804904 9.73115398886828 C 98.5435816804904 9.73115398886828 89.2386354129102 0.992426716141013 89.2386354129102 0.992426716141013 C 89.2386354129102 0.992426716141013 8.14464262531554 0.992426716141013 8.14464262531554 0.992426716141013 Z " fill-rule="evenodd" />
</mask>
</defs>
<g transform="matrix(1 0 0 1 -610 -722 )">
<path d="M 8.14464262531554 0.992426716141013 C 8.14464262531554 0.992426716141013 0.168227190768121 11.1871280148423 0.168227190768121 11.1871280148423 C 0.168227190768121 11.1871280148423 0.168227190768121 127.682348794063 0.168227190768121 127.682348794063 C 0.168227190768121 127.682348794063 12.7971157591057 140.788998144712 12.7971157591057 140.788998144712 C 12.7971157591057 140.788998144712 219.49872989542 140.788998144712 219.49872989542 140.788998144712 C 219.49872989542 140.788998144712 230.133514605121 127.682348794063 230.133514605121 127.682348794063 C 230.133514605121 127.682348794063 230.133514605121 17.01246567718 230.133514605121 17.01246567718 C 230.133514605121 17.01246567718 220.827260728453 9.73115398886828 220.827260728453 9.73115398886828 C 220.827260728453 9.73115398886828 98.5435816804904 9.73115398886828 98.5435816804904 9.73115398886828 C 98.5435816804904 9.73115398886828 89.2386354129102 0.992426716141013 89.2386354129102 0.992426716141013 C 89.2386354129102 0.992426716141013 8.14464262531554 0.992426716141013 8.14464262531554 0.992426716141013 Z " fill-rule="nonzero" fill="#0d1a28" stroke="none" fill-opacity="0.8" transform="matrix(1 0 0 1 610 722 )" />
<path d="M 8.14464262531554 0.992426716141013 C 8.14464262531554 0.992426716141013 0.168227190768121 11.1871280148423 0.168227190768121 11.1871280148423 C 0.168227190768121 11.1871280148423 0.168227190768121 127.682348794063 0.168227190768121 127.682348794063 C 0.168227190768121 127.682348794063 12.7971157591057 140.788998144712 12.7971157591057 140.788998144712 C 12.7971157591057 140.788998144712 219.49872989542 140.788998144712 219.49872989542 140.788998144712 C 219.49872989542 140.788998144712 230.133514605121 127.682348794063 230.133514605121 127.682348794063 C 230.133514605121 127.682348794063 230.133514605121 17.01246567718 230.133514605121 17.01246567718 C 230.133514605121 17.01246567718 220.827260728453 9.73115398886828 220.827260728453 9.73115398886828 C 220.827260728453 9.73115398886828 98.5435816804904 9.73115398886828 98.5435816804904 9.73115398886828 C 98.5435816804904 9.73115398886828 89.2386354129102 0.992426716141013 89.2386354129102 0.992426716141013 C 89.2386354129102 0.992426716141013 8.14464262531554 0.992426716141013 8.14464262531554 0.992426716141013 Z " stroke-width="4" stroke="#02a7f0" fill="none" transform="matrix(1 0 0 1 610 722 )" mask="url(#clip99)" />
</g>
</svg>
\ No newline at end of file
src/layout/components/AppMain.vue
View file @ 0a982eb5
...@@ -35,7 +35,7 @@ export default { ...@@ -35,7 +35,7 @@ export default {
overflow: hidden; overflow: hidden;
} }
.fixed-header + .app-main { .fixed-header+.app-main {
padding-top: 50px; padding-top: 50px;
} }
...@@ -45,7 +45,7 @@ export default { ...@@ -45,7 +45,7 @@ export default {
min-height: calc(100vh - 84px); min-height: calc(100vh - 84px);
} }
.fixed-header + .app-main { .fixed-header+.app-main {
padding-top: 84px; padding-top: 84px;
} }
} }
......
src/main.js
View file @ 0a982eb5
...@@ -39,6 +39,14 @@ import VueMeta from 'vue-meta' ...@@ -39,6 +39,14 @@ import VueMeta from 'vue-meta'
// 字典数据组件 // 字典数据组件
import DictData from '@/components/DictData' import DictData from '@/components/DictData'
import Highchart from "highcharts/highcharts";
import HighchartsVue from "highcharts-vue";
import highchartsMore from 'highcharts/highcharts-more';
import highcharts3d from 'highcharts/highcharts-3d'
highchartsMore(Highchart);
highcharts3d(Highchart)
Vue.use(HighchartsVue);
// 全局方法挂载 // 全局方法挂载
Vue.prototype.getDicts = getDicts Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey Vue.prototype.getConfigKey = getConfigKey
......
src/utils/request.js
View file @ 0a982eb5
...@@ -29,13 +29,13 @@ service.interceptors.request.use(config => { ...@@ -29,13 +29,13 @@ service.interceptors.request.use(config => {
if (getToken() && !isToken) { if (getToken() && !isToken) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
} }
// get请求映射params参数 // // get请求映射params参数
if (config.method === 'get' && config.params) { // if (config.method === 'get' && config.params) {
let url = config.url + '?' + tansParams(config.params); // let url = config.url + '?' + tansParams(config.params);
url = url.slice(0, -1); // url = url.slice(0, -1);
config.params = {}; // config.params = {};
config.url = url; // config.url = url;
} // }
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) { if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
const requestObj = { const requestObj = {
url: config.url, url: config.url,
......
src/views/map/components/map-item-pie.vue
View file @ 0a982eb5
...@@ -5,9 +5,11 @@ ...@@ -5,9 +5,11 @@
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import "echarts-gl"; import "echarts-gl";
import { rightlevelStatic } from '@/api/map'
export default { export default {
data() { data() {
return { return {
colors: ["rgba(32,159,237,1)", "rgba(255,159,32,1)", "rgba(159,255,237,1)", "rgba(159,255,32,1)"],
chartData: [ chartData: [
{ {
name: "重大风险", name: "重大风险",
...@@ -57,8 +59,9 @@ export default { ...@@ -57,8 +59,9 @@ export default {
}; };
}, },
mounted() { mounted() {
this.myMap = echarts.init(this.$refs.myEchart); this.getData()
this.myMap.setOption(this.getPie3D(this.chartData, 0.71));
}, },
methods: { methods: {
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) { getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
...@@ -328,10 +331,8 @@ export default { ...@@ -328,10 +331,8 @@ export default {
tooltip: { tooltip: {
formatter: (params) => { formatter: (params) => {
if (params.seriesName !== "mouseoutSeries") { if (params.seriesName !== "mouseoutSeries") {
return `${ return `${params.seriesName
params.seriesName }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
}<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}`; };"></span>${option.series[params.seriesIndex].pieData.number}`;
} }
}, },
...@@ -381,9 +382,32 @@ export default { ...@@ -381,9 +382,32 @@ export default {
}; };
return option; 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.a {
background: transparent;
}
</style> </style>
\ No newline at end of file
src/views/map/components/map-table.vue
View file @ 0a982eb5
<template>
<div class="map-table-container" ref="mapTableContainer">
<div><slot name="header" /></div>
<div class="map-table-container-box">
<ul class="map-table-list" ref="mapTableList">
<li
class="map-table-list-item"
v-for="(item, index) in tableList"
:key="index"
>
<div class="serial">{{ index + 1 }}</div>
<div
v-for="(key, value) of item"
:key="value + index"
class="map-table-list-item-value"
:style="[{ '--text-color': key.color, '--text-w': key.width }]"
>
{{ key.name }}
</div>
</li>
</ul>
</div>
</div>
</template>
<script> <script>
export default { export default {
props: { props: {
...@@ -30,6 +5,10 @@ export default { ...@@ -30,6 +5,10 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
columns: {
type: Array,
default: () => []
}
}, },
data() { data() {
return { return {
...@@ -49,13 +28,14 @@ export default { ...@@ -49,13 +28,14 @@ export default {
getHeight() { getHeight() {
// 获取map-table-list的高度 // 获取map-table-list的高度
let mapTableContainer = this.$refs.mapTableContainer; let mapTableContainer = this.$refs.mapTableContainer;
if (mapTableContainer) {
this.mapTableContainerHeight = mapTableContainer.offsetHeight - 50; this.mapTableContainerHeight = mapTableContainer.offsetHeight - 50;
}
let mapTableList = this.$refs.mapTableList; let mapTableList = this.$refs.mapTableList;
this.mapTableListHeight = mapTableList.offsetHeight; this.mapTableListHeight = mapTableList.offsetHeight;
}, },
// 比较map-table-list高度 // 比较map-table-list高度
compareH() { compareH() {
console.log(this.mapTableContainerHeight, this.mapTableListHeight);
if (this.mapTableContainerHeight < this.mapTableListHeight) { if (this.mapTableContainerHeight < this.mapTableListHeight) {
// 添加定时器滚动map-table-list-item // 添加定时器滚动map-table-list-item
setInterval(() => { setInterval(() => {
...@@ -66,11 +46,41 @@ export default { ...@@ -66,11 +46,41 @@ export default {
) { ) {
this.h = 0; this.h = 0;
} }
if (this.$refs.mapTableList) {
this.$refs.mapTableList.style.transform = `translateY(${this.h}px) `; this.$refs.mapTableList.style.transform = `translateY(${this.h}px) `;
}
}, 1500); }, 1500);
} }
}, },
}, },
render() {
return <div class="map-table-container" ref="mapTableContainer">
<div>
{this.$slots.header}
</div>
<div class="map-table-container-box">
<ul class="map-table-list" ref="mapTableList">
{
this.tableList.map((item, index) => {
return <li class="map-table-list-item">
{
this.columns.map((key, keyIndex) => {
return <div class="map-table-list-item-value" style={{
'--text-color': key.color, '--text-w': key.width
}}>
{key.props == 'index' && <div class="serial">{index + 1}</div>}
{key.render && key.render()}
{<span>{item[key.props]}</span>}
</div>
})
}
</li>
})
}
</ul>
</div>
</div>
}
}; };
</script> </script>
...@@ -79,15 +89,18 @@ export default { ...@@ -79,15 +89,18 @@ export default {
--text-w: 20%; --text-w: 20%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
&-box { &-box {
height: calc(100% - 20px); height: calc(100% - 20px);
overflow: auto; overflow: auto;
} }
} }
.map-table-list { .map-table-list {
transition: all 1s; transition: all 1s;
margin: 0; margin: 0;
padding: 0; padding: 0;
&-item { &-item {
display: flex; display: flex;
height: 30px; height: 30px;
...@@ -95,14 +108,13 @@ export default { ...@@ -95,14 +108,13 @@ export default {
line-height: 30px; line-height: 30px;
color: #fff; color: #fff;
text-align: center; text-align: center;
background: linear-gradient( background: linear-gradient(180deg,
180deg,
rgba(0, 102, 153, 1) 0%, rgba(0, 102, 153, 1) 0%,
rgba(0, 102, 153, 1) 17%, rgba(0, 102, 153, 1) 17%,
rgba(9, 60, 106, 1) 100%, rgba(9, 60, 106, 1) 100%,
rgba(9, 60, 106, 1) 100% rgba(9, 60, 106, 1) 100%);
);
font-size: 14px; font-size: 14px;
.serial { .serial {
width: 40px; width: 40px;
height: 100%; height: 100%;
...@@ -112,6 +124,7 @@ export default { ...@@ -112,6 +124,7 @@ export default {
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
&::after { &::after {
position: absolute; position: absolute;
right: -14px; right: -14px;
...@@ -123,50 +136,63 @@ export default { ...@@ -123,50 +136,63 @@ export default {
border-left: 16px solid #2a719d; border-left: 16px solid #2a719d;
} }
} }
.name {
.map-table-list-item-value {
width: 30%; width: 30%;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
margin-left: 18px; margin-right: 18px;
font-weight: bold; font-weight: bold;
} }
.province,
.city, .map-table-list-item-value {
.num { width: var(--text-w);
width: 20%; color: var(--text-color);
} }
.province {
.map-table-list-item-value:nth-child(3) {
color: #02a7f0; color: #02a7f0;
} }
// #FFEA00
.city { .map-table-list-item-value:nth-child(4) {
color: #ffea00; color: #ffea00;
} }
.num {
.map-table-list-item-value:nth-child(5) {
color: rgba(217, 0, 27, 0.9); color: rgba(217, 0, 27, 0.9);
font-size: 12px; font-size: 12px;
} }
&-value {
width: var(--text-w); .province {}
color: var(--text-color);
} // #FFEA00
.city {}
.num {}
} }
&-item:hover { &-item:hover {
background: rgba(255, 166, 0, 0.802); background: rgba(255, 166, 0, 0.802);
color: #000; color: #000;
.province, .province,
.city { .city {
color: #000; color: #000;
} }
.serial { .serial {
background: linear-gradient(#ff6048 0%, #ff7346 100%); background: linear-gradient(#ff6048 0%, #ff7346 100%);
&::after { &::after {
border-left-color: #ff7346; border-left-color: #ff7346;
} }
} }
} }
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
......
src/views/map/map-detail.vue
View file @ 0a982eb5
<template> <template>
<div class="map-detail"> <div class="map-detail">
<map-item-container title="香格里拉国际大厦"> <map-item-container :title="projectName">
<map-detail-tab :tabs="tabs"> <map-detail-tab :tabs="tabs">
<template #tab1> <template #tab1>
<div class="tab1"> <div class="tab1">
<div class="tab1-year">2023年</div> <div class="tab1-year">{{ tabs[0].value.year }}年</div>
<div class="tab1-time">05-26 16:25</div> <div class="tab1-time">{{ tabs[0].value.date }}</div>
</div> </div>
</template> </template>
<template #tab2> <template #tab2>
<div class="tab2"> <div class="tab2">
<div class="tab2-item"> <div class="tab2-item">
<span>楼宇</span> <span>楼宇</span>
<span>共25栋</span> <span>共{{ tabs[1].value.buildingNum }}栋</span>
</div> </div>
<div class="tab2-item"> <div class="tab2-item">
<span>楼层</span> <span>楼层</span>
<span>共25栋</span> <span>共{{ tabs[1].value.floorNum }}栋</span>
</div> </div>
</div> </div>
</template> </template>
<template #tab3> <template #tab3>
<div class="tab3"> <div class="tab3">
<div> <div>
<span>1</span> <span v-for="item in tabs[2].value" :key="item">{{ item }}</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div> </div>
</div> </div>
</template> </template>
...@@ -34,51 +31,27 @@ ...@@ -34,51 +31,27 @@
<div class="tab4"> <div class="tab4">
<div class="tab4-item"> <div class="tab4-item">
<span class="title">固有风险</span> <span class="title">固有风险</span>
<span>256</span> <span>{{ tabs[3].value.inherentNum }}</span>
</div> </div>
<div class="tab4-item"> <div class="tab4-item">
<span class="title">现状风险</span> <span class="title">现状风险</span>
<span>960</span> <span>{{ tabs[3].value.existingNum }}</span>
</div> </div>
</div> </div>
</template> </template>
<template #tab5> <template #tab5>
<div class="tab5"> <div class="tab5">
<div class="tab5-item"> <div class="tab5-item" v-for="item of tabs[4].value" :key="item">
<span>重大</span> <span>{{ item.levelName }}</span>
<span>36</span> <span>{{ item.levelNum }}</span>
</div>
<div class="tab5-item">
<span>较大</span>
<span>36</span>
</div>
<div class="tab5-item">
<span>一般</span>
<span>36</span>
</div>
<div class="tab5-item">
<span>低</span>
<span>36</span>
</div> </div>
</div> </div>
</template> </template>
<template #tab6> <template #tab6>
<div class="tab6"> <div class="tab6">
<div class="tab6-item"> <div class="tab6-item" v-for="item of tabs[5].value" :key="item">
<span>较大</span> <span>{{ item.levelName }}</span>
<span>36</span> <span>{{ item.levelNum }}</span>
</div>
<div class="tab6-item">
<span>重大</span>
<span>30</span>
</div>
<div class="tab6-item">
<span>一般</span>
<span>15</span>
</div>
<div class="tab6-item">
<span>低</span>
<span>36</span>
</div> </div>
</div> </div>
</template> </template>
...@@ -87,47 +60,37 @@ ...@@ -87,47 +60,37 @@
<map-item-container title="项目风险信息" class="map-detail-info-container"> <map-item-container title="项目风险信息" class="map-detail-info-container">
<el-form :inline="true" :model="formInline" class="map-detail-filter"> <el-form :inline="true" :model="formInline" class="map-detail-filter">
<el-form-item label="选择位置"> <el-form-item label="选择位置">
<el-select <el-select v-model="formInline.buildingId" style="width: 100px">
v-model="formInline.position" <el-option v-for="itm in buildingList" :key="itm.id" :label="itm.name" :value="itm.id"></el-option>
placeholder="地上" </el-select>
style="width: 100px" <el-select v-model="formInline.position" style="width: 100px">
> <el-option label="地上" value="地上"></el-option>
<el-option label="地上" value="shanghai"></el-option> <el-option label="地下" value="地下"></el-option>
<el-option label="底下" value="beijing"></el-option>
</el-select> </el-select>
<el-select <el-select v-model="formInline.floorId" style="width: 100px">
v-model="formInline.position1" <el-option v-for="itm in floorList" :key="itm.id" :label="itm.name" :value="itm.id"></el-option>
placeholder="1层"
style="width: 100px"
>
<el-option label="1层" value="shanghai"></el-option>
<el-option label="2层" value="beijing"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="风险类型"> <el-form-item label="风险类型">
<el-select v-model="formInline.present" placeholder="固有风险"> <el-select v-model="formInline.type">
<el-option label="固有风险" value="固有风险"></el-option> <el-option label="固有风险" value="0"></el-option>
<el-option label="现状风险" value="现状风险"></el-option> <el-option label="现状风险" value="1"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="风险等级"> <el-form-item label="风险等级">
<el-select v-model="formInline.level" placeholder="重大风险"> <el-select v-model="formInline.level">
<el-option label="重大风险" value="重大风险"></el-option> <el-option v-for="item in planLevelList" :key="item.id" :label="item.dictLabel"
<el-option label="较大风险" value="较大风险"></el-option> :value="item.dictValue"></el-option>
<el-option label="一般风险" value="一般风险"></el-option>
<el-option label="低风险" value="低风险"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" class="search-btn" @click="onSubmit" <el-button type="primary" class="search-btn" @click="onSubmit">查询</el-button>
>查询</el-button <!-- <el-button plain class="cancel-btn">重置</el-button> -->
>
<el-button plain class="cancel-btn" @click="onSubmit">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="map-detail-info"> <div class="map-detail-info">
<div class="map-detail-info-table"> <div class="map-detail-info-table">
<map-table :tableList="tableList" class="info-map-table"> <map-table :tableList="tableList" :columns="colums" class="info-map-table">
<template #header> <template #header>
<ul class="info-table-header"> <ul class="info-table-header">
<li style="text-align: center; width: 15%">序号</li> <li style="text-align: center; width: 15%">序号</li>
...@@ -139,7 +102,17 @@ ...@@ -139,7 +102,17 @@
</template> </template>
</map-table> </map-table>
</div> </div>
<div class="map-detail-info-img"></div> <div class="map-detail-info-img">
<el-row :gutter="5">
<el-col :span="3"> <span class="riskTab type1"></span>重大风险</el-col>
<el-col :span="3"> <span class="riskTab type2"></span>较大风险</el-col>
<el-col :span="3"> <span class="riskTab type3"></span>一般风险</el-col>
<el-col :span="3"> <span class="riskTab type4"></span>低风险</el-col>
</el-row>
<drawCanvas class="map-detail-draw" :componentBtn="false" :componentBuilding="formInline.buildingId"
isViews="true" :componentFloorId="formInline.floorId" />
</div>
</div> </div>
</map-item-container> </map-item-container>
</div> </div>
...@@ -147,50 +120,169 @@ ...@@ -147,50 +120,169 @@
<script> <script>
import { mapItemContainer, mapDetailTab, mapTable } from "./components"; import { mapItemContainer, mapDetailTab, mapTable } from "./components";
import { topProjectDetail, detailBuilding, detailFloor, detailProjectRisk, detailDictList } from '@/api/map'
import drawCanvas from '@/views/risk/drawCanvas/index'
export default { export default {
components: { mapItemContainer, mapDetailTab, mapTable }, components: { mapItemContainer, mapDetailTab, mapTable, drawCanvas },
data() { data() {
return { return {
formInline: {},
formInline: {
position: '地上',
buildingId: '',
level: '',
floorId: '',
type: "0"
},
projectId: '',
projectName: '',
buildingList: [],
floorList: [],
tableList: [], tableList: [],
planLevelList: [],
tabs: [ tabs: [
{ {
title: "评估时间（最新）", title: "评估时间（最新）",
icon: "el-icon-basketball", icon: "el-icon-basketball",
name: "tab1", name: "tab1",
value: {}
}, },
{ {
title: "评估数据", title: "评估数据",
icon: "el-icon-basketball", icon: "el-icon-basketball",
name: "tab2", name: "tab2",
value: {}
}, },
{ {
title: "风险总数量", title: "风险总数量",
icon: "el-icon-basketball", icon: "el-icon-basketball",
name: "tab3", name: "tab3",
value: {}
}, },
{ {
title: "", title: "",
icon: "el-icon-basketball", icon: "el-icon-basketball",
name: "tab4", name: "tab4",
value: {}
}, },
{ {
title: "风险等级（固有）", title: "风险等级（固有）",
icon: "el-icon-basketball", icon: "el-icon-basketball",
name: "tab5", name: "tab5",
value: {}
}, },
{ {
title: "风险等级（现状）", title: "风险等级（现状）",
icon: "el-icon-basketball", icon: "el-icon-basketball",
name: "tab6", name: "tab6",
value: {}
}, },
], ],
colums: [
{
props: 'index',
color: "#fff",
},
{
props: 'riskName',
color: "#fff",
},
{
props: 'typeName',
color: "rgb(0, 255, 186)",
width: "30%",
},
{
props: 'levelName',
color: "rgb(255, 234, 0)",
},
{
props: 'columns',
render: () => {
return <div>操作>></div>
}
}
]
}; };
}, },
mounted() { mounted() {
this.getTableList();
},
watch: {
'formInline.position'() {
this.getFloor()
},
"formInline.buildingId"(val) {
this.getFloor()
},
"$route": {
handler(val) {
if (val.query && val.query.projectId) {
this.projectId = val.query.projectId;
this.projectDetail();
this.getList()
}
},
immediate: true
}
}, },
methods: { methods: {
onSubmit() {
this.getProjectList()
},
async getList() {
await this.getBuilding();
await this.getDictList()
this.getProjectList()
},
async getBuilding() {
const resultBuilding = await detailBuilding(this.projectId);
this.buildingList = resultBuilding.data;
this.formInline.buildingId = this.buildingList[0].id;
await this.getFloor()
},
getFloor() {
return detailFloor(this.formInline.buildingId).then(res => {
const floorFilter = res.data.find(x => x.name == this.formInline.position);
this.floorList = floorFilter?.children || []
this.formInline.floorId = this.floorList[0].id
})
},
getProjectList() {
detailProjectRisk({
projectId: this.projectId,
...this.formInline
}).then(res => {
this.tableList = res.data;
})
},
projectDetail() {
topProjectDetail({
projectId: this.projectId
}).then(({ data }) => {
this.projectName = data.projectName;
this.tabs[0].value = {
year: data.evaluationTime.split(' ')[0].substring(0, 4),
date: data.evaluationTime.split(' ')[0].substring(5) + ' ' + data.evaluationTime.split(' ')[1].slice(0, 5)
}
this.tabs[1].value = data.evaluationData;
this.tabs[2].value = String(data.riskSumNum).split('')
this.tabs[3].value = {
inherentNum: data.inherentNum,
existingNum: data.existingNum
}
this.tabs[4].value = data.existingLevelStatics
this.tabs[5].value = data.inherentLevelStatics
})
},
getDictList() {
return detailDictList({
dictType: "risk_plan_level"
}).then(res => {
this.planLevelList = res.data
this.formInline.level = res.data[0].dictValue
})
},
getTableList() { getTableList() {
for (let i = 0; i < 30; i++) { for (let i = 0; i < 30; i++) {
this.tableList.push({ this.tableList.push({
...@@ -225,64 +317,72 @@ export default { ...@@ -225,64 +317,72 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
.map-detail-info-container { .map-detail-info-container {
flex: 1; flex: 1;
} }
.map-detail-filter { .map-detail-filter {
text-align: left; text-align: left;
::v-deep .el-input__inner { ::v-deep .el-input__inner {
background: transparent; background: transparent;
color: #fff; color: #fff;
border-color: rgb(15, 134, 235); border-color: rgb(15, 134, 235);
} }
::v-deep .el-form-item__label { ::v-deep .el-form-item__label {
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
} }
.search-btn { .search-btn {
background: linear-gradient( background: linear-gradient(-90deg,
-90deg,
rgb(35, 255, 226) 0%, rgb(35, 255, 226) 0%,
rgb(15, 134, 235) 100% rgb(15, 134, 235) 100%);
);
} }
.cancel-btn { .cancel-btn {
background: transparent; background: transparent;
border-image: linear-gradient( border-image: linear-gradient(-90deg,
-90deg,
rgb(35, 255, 226) 0%, rgb(35, 255, 226) 0%,
rgb(15, 134, 235) 100% rgb(15, 134, 235) 100%) 5 5;
)
5 5;
color: #fff; color: #fff;
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;
clip-path: inset(0 round 3px); clip-path: inset(0 round 3px);
} }
} }
.map-detail-info { .map-detail-info {
height: calc(100% - 100px); height: calc(100% - 100px);
display: grid; display: grid;
grid-template-columns: 23% 73%; grid-template-columns: 23% 73%;
gap: 20px; gap: 20px;
box-sizing: border-box; box-sizing: border-box;
&-table { &-table {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
&-img { &-img {
height: 100%; height: 100%;
overflow: auto;
border: 1px solid rgb(15, 134, 235); border: 1px solid rgb(15, 134, 235);
border-radius: 10px; border-radius: 10px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px;
} }
} }
.info-table-header { .info-table-header {
display: flex; display: flex;
background: rgba(0, 150, 255, 0.298); background: rgba(0, 150, 255, 0.298);
padding-left: 0; padding-left: 0;
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 0; margin-top: 0;
li { li {
width: 20%; width: 20%;
color: rgb(201, 229, 255); color: rgb(201, 229, 255);
...@@ -292,45 +392,51 @@ export default { ...@@ -292,45 +392,51 @@ export default {
padding: 5px 0; padding: 5px 0;
} }
} }
::v-deep .map-content-title { ::v-deep .map-content-title {
width: 30%; width: 30%;
} }
} }
ul, ul,
li { li {
list-style: none; list-style: none;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
.tab1 { .tab1 {
&-year { &-year {
opacity: 0.8; opacity: 0.8;
font-size: 14px; font-size: 14px;
margin: 5px 0; margin: 5px 0;
} }
&-time { &-time {
font-size: 27px; font-size: 27px;
font-weight: bold; font-weight: bold;
} }
} }
.tab2 { .tab2 {
.tab2-item { .tab2-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: linear-gradient( background: linear-gradient(90deg,
90deg,
rgba(0, 125, 183, 0.4) 30%, rgba(0, 125, 183, 0.4) 30%,
rgba(0, 0, 0, 0) 70% rgba(0, 0, 0, 0) 70%);
);
padding: 3px 10px; padding: 3px 10px;
margin: 10px 0; margin: 10px 0;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
} }
.tab3 { .tab3 {
margin-top: 10px; margin-top: 10px;
span { span {
display: inline-block; display: inline-block;
background-color: rgba(35, 145, 255, 0.098); background-color: rgba(35, 145, 255, 0.098);
...@@ -352,16 +458,15 @@ li { ...@@ -352,16 +458,15 @@ li {
margin-right: 10px; margin-right: 10px;
} }
} }
.tab4 { .tab4 {
.tab4-item { .tab4-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: linear-gradient( background: linear-gradient(90deg,
90deg,
rgba(0, 125, 183, 0.4) 30%, rgba(0, 125, 183, 0.4) 30%,
rgba(0, 0, 0, 0) 70% rgba(0, 0, 0, 0) 70%);
);
padding: 0 10px; padding: 0 10px;
margin: 10px 0; margin: 10px 0;
font-size: 14px; font-size: 14px;
...@@ -382,32 +487,34 @@ li { ...@@ -382,32 +487,34 @@ li {
} }
} }
} }
.tab4-item:first-child { .tab4-item:first-child {
background: linear-gradient( background: linear-gradient(90deg,
90deg,
rgba(243, 90, 76, 0.6) 30%, rgba(243, 90, 76, 0.6) 30%,
rgba(0, 0, 0, 0) 70% rgba(0, 0, 0, 0) 70%);
);
.title:before { .title:before {
background-color: rgb(243, 90, 76); background-color: rgb(243, 90, 76);
} }
} }
.tab4-item:last-child { .tab4-item:last-child {
background: linear-gradient( background: linear-gradient(90deg,
90deg,
rgba(234, 156, 71, 0.6) 30%, rgba(234, 156, 71, 0.6) 30%,
rgba(0, 0, 0, 0) 70% rgba(0, 0, 0, 0) 70%);
);
.title:before { .title:before {
background-color: rgb(234, 156, 71); background-color: rgb(234, 156, 71);
} }
} }
} }
.tab5, .tab5,
.tab6 { .tab6 {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 14px; font-size: 10px;
.tab5-item, .tab5-item,
.tab6-item { .tab6-item {
width: 70px; width: 70px;
...@@ -419,6 +526,7 @@ li { ...@@ -419,6 +526,7 @@ li {
margin-right: 10px; margin-right: 10px;
margin-top: 8px; margin-top: 8px;
position: relative; position: relative;
&::before { &::before {
content: ""; content: "";
display: block; display: block;
...@@ -429,24 +537,28 @@ li { ...@@ -429,24 +537,28 @@ li {
left: 0; left: 0;
} }
} }
.tab5-item:nth-of-type(1), .tab5-item:nth-of-type(1),
.tab6-item:nth-of-type(1) { .tab6-item:nth-of-type(1) {
&::before { &::before {
background-color: red; background-color: red;
} }
} }
.tab5-item:nth-of-type(2), .tab5-item:nth-of-type(2),
.tab6-item:nth-of-type(2) { .tab6-item:nth-of-type(2) {
&::before { &::before {
background-color: rgb(245, 154, 35); background-color: rgb(245, 154, 35);
} }
} }
.tab5-item:nth-of-type(3), .tab5-item:nth-of-type(3),
.tab6-item:nth-of-type(3) { .tab6-item:nth-of-type(3) {
&::before { &::before {
background-color: rgb(255, 255, 0); background-color: rgb(255, 255, 0);
} }
} }
.tab5-item:nth-of-type(4), .tab5-item:nth-of-type(4),
.tab6-item:nth-of-type(4) { .tab6-item:nth-of-type(4) {
&::before { &::before {
...@@ -454,4 +566,51 @@ li { ...@@ -454,4 +566,51 @@ li {
} }
} }
} }
.map-detail-draw {
transform: scale(0.55);
transform-origin: 0 0;
}
::v-deep .vue-grid-layout {
min-height: auto !important;
padding: 0 !important;
}
.map-detail-info-img {
margin-top: 10px;
.el-row {
font-size: 14px;
color: #fff;
line-height: 20px;
margin-bottom: 20px;
}
.riskTab {
display: inline-block;
width: 50px;
height: 20px;
margin: 0 10px 0px 15px;
border-radius: 5px;
vertical-align: middle;
}
.type1 {
background-color: #ff4433;
}
.type2 {
background-color: #ff9800;
}
.type3 {
background-color: #ffff00;
}
.type4 {
background-color: #0091ea;
}
}
</style> </style>
\ No newline at end of file
src/views/map/map-index.vue
View file @ 0a982eb5
<template> <template>
<div class="map-index"> <div class="map-index">
<div class="map-index-left"> <div :class="['map-index-left', !isScreen ? 'map-index-none' : '']">
<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">评估</div> <div :class="{ 'active': accessType == 0 }" @click="accessType = 0">评估</div>
<div>巡查</div> <div :class="{ 'active': accessType == 1 }" @click="accessType = 1">巡查</div>
</div> </div>
<div <div v-for="(item, index) in accessData" :key="item" style="width: 30%; display: inline-block"
v-for="item in 3" class="content-assess-item">
:key="item" <div class="content-assess-title">{{ item.name }}</div>
style="width: 30%; display: inline-block" <div :id="'leftTop' + index" style="height: 95px;" class="content-assess-echarts"></div>
class="content-assess-item"
>
<div class="content-assess-title">评估项目</div>
<div :id="'leftTop' + item" style="height: 100%"></div>
<div class="content-assess-num"> <div class="content-assess-num">
<div class="content-assess-num-txt">100<span>栋</span></div> <div class="content-assess-num-txt">{{ item.count }}<span>{{ item.unit }}</span></div>
</div> </div>
</div> </div>
</map-item-container> </map-item-container>
<map-item-container title="项目风险排名"> <map-item-container title="总体风险指数排名">
<mapTable :tableList="tableList" /> <mapTable :tableList="tableList" :columns="colums" />
</map-item-container> </map-item-container>
<map-item-container title="项目风险排名"> <map-item-container title="年度风险数量统计">
<div ref="bar" style="width: 100%; height: 100%"></div> <div ref="bar" style="width: 100%; height: 100%"></div>
</map-item-container> </map-item-container>
</div> </div>
</div> </div>
<div :class="['map-index-center', !isScreen ? 'map-index-screen' : '']">
<div class="echart-protect-left" @click="changeScreen">
<img src="@/assets/map/left.png" alt="" />
</div>
<div class="echart-protect-center">
<div class="echart-top-center" v-if="isScreen">
<div class="echart-total-count" v-for="item in totalData" :key="item.name">
<img src="../../assets//map/u21.png" alt="">
<div class="echart-total-group">
<div class="echart-total-title">{{ item.name }}</div>
<div class="echart-total-num">{{ item.count }}</div>
</div>
</div>
</div>
<div ref="myEchart" class="echart-instance"></div> <div ref="myEchart" class="echart-instance"></div>
<div class="map-index-right"> <div class="legend-map">
<span>低风险</span>
<span>一般风险</span>
<span>较大风险</span>
<span>重大风险</span>
</div>
</div>
<div @click="changeScreen" class="echart-protect-right">
<img src="@/assets/map/right.png" alt="" />
</div>
</div>
<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="风险级别统计">
<echartMap /> <highcharts :options="levelStaticOptions" :updateArgs="[false, true]" class="level-static">
</highcharts>
</map-item-container> </map-item-container>
<map-item-container title="事故类型统计"> <map-item-container title="事故类型统计">
<div style="columns: 4" class="echarts-accident"> <div class="echarts-accident" id="circleEchart">
<div <div v-for="(item, index) in accidentEchartsList" :data-group="item.g" :key="item.typeName" :style="[{
v-for="(item, index) in accidentList" '--width': item.w + 'px',
:key="item" '--left': item.l + 'px',
:style="randomCircle(item, index)" '--top': item.t + 'px',
class="map-circle-item" '--bg-color': getColors(index % 5)
> }]">
<div>{{ item.name }}</div> <span>{{ item.typeName }}</span>
<div>{{ item.value }}</div>
</div> </div>
</div> </div>
</map-item-container> </map-item-container>
<map-item-container title="项目风险排名"> <map-item-container title="项目风险级别排名">
<div ref="bar1" style="width: 100%; height: 100%"></div> <div class="content-assess-tab">
<div :class="{ 'active': assessLevelType == 0 }" @click="assessLevelType = 0">重大</div>
<div :class="{ 'active': assessLevelType == 1 }" @click="assessLevelType = 1">较大</div>
<div :class="{ 'active': assessLevelType == 2 }" @click="assessLevelType = 2">一般</div>
<div :class="{ 'active': assessLevelType == 3 }" @click="assessLevelType = 3">低</div>
</div>
<div class="terminal-group">
<div v-for="(item, index) in terminalList" class="terminal-item-bar" :key="item.id"
:style="[{ '--bg-color': getColors(index % 5), '--bg-color1': getColors1(index % 5) }]">
<span>{{ item.projectName }}</span>
<span>{{ item.province }}</span>
<span>{{ item.deptName }}</span>
<span>{{ item.riskScore }}</span>
</div>
</div>
</map-item-container> </map-item-container>
</div> </div>
</div> </div>
...@@ -60,6 +95,8 @@ import * as echarts from "echarts"; ...@@ -60,6 +95,8 @@ import * as echarts from "echarts";
import "echarts-gl"; import "echarts-gl";
import axios from "axios"; import axios from "axios";
import { mapTable, mapItemContainer, echartMap } from "./components/index"; import { mapTable, mapItemContainer, echartMap } from "./components/index";
import Highcharts from 'highcharts'
import { leftEvaluation, centerStatistic, leftRiskSort, leftAnnualSort, rightlevelStatic, rightAccessLevel, rightAccidentType, centerMap } from '@/api/map'
export default { export default {
name: "echarts", name: "echarts",
components: { components: {
...@@ -67,274 +104,28 @@ export default { ...@@ -67,274 +104,28 @@ export default {
mapTable, mapTable,
mapItemContainer, mapItemContainer,
}, },
/**
* class MapItem{
* constrouter(initData){
* this.data = initData
* }
* fetch(){
*
* }
* }
*
* */
data() { data() {
return { return {
accidentList: [ accessType: 0,
{ assessLevelType: 0,
name: "物体打击", assessLevelColors: [[227, 101, 88], [215, 162, 92], [108, 203, 137], [68, 150, 245], [139, 61, 241]],
value: 1455, assessEchartsOptions: {
width: 100,
top: 17,
left: 100,
},
{
name: "物体打击",
value: 1455,
width: 60,
top: 118,
left: 150,
},
{
name: "物体打击",
value: 1455,
width: 60,
top: 40,
left: 22,
},
// {
// name: "物体打击",
// value: 1455,
// width: 60,
// top: 162,
// left: 96,
// },
{
name: "物体打击",
value: 1455,
width: 60,
top: 110,
left: 38,
},
{
name: "物体",
value: 1455,
width: 50,
top: 140,
left: 100,
},
{
name: "物体打击",
value: 1455,
width: 60,
top: 60,
left: 230,
},
{
name: "其他",
value: 1455,
width: 40,
top: 140,
left: 220,
},
],
name: 100000,
myMap: null,
mapData: [],
myTopLeft: [],
tableList: [],
level: "",
circlePos: [],
};
},
mounted() {
this.circlePos = this.generateRandomPointsInCircle(10);
console.log(this.circlePos);
this.myMap = echarts.init(this.$refs.myEchart);
this.initMap();
this.initListeners();
this.initEcharts();
this.getTableList();
},
methods: {
getTableList() {
for (let i = 0; i < 30; i++) {
this.tableList.push({
colunm1: {
name: i % 2 == 0 ? "高德大厦" : "碧桂园大厦",
color: "#fff",
width: "30%",
},
colunm2: {
name: "北京地区",
color: "rgb(0, 255, 186)",
},
colunm3: {
name: "天津市",
color: "rgb(255, 234, 0)",
},
colunm4: {
name: "22",
color: "red",
},
});
}
},
generateRandomPointsInCircle(numPoints) {
var points = [];
const center = [100, 80];
const radius = 65;
// var angleIncrement = (2 * Math.PI) / numPoints;
for (var i = 0; i < numPoints; i++) {
var angle = Math.random() * 2 * Math.PI;
var x = center[0] + radius * Math.cos(angle);
var y = center[1] + radius * Math.sin(angle);
points.push([x, y]);
}
return points;
},
randomCircle(item, index) {
const w = parseInt(Math.random() * 40 + 50);
// let r = Math.floor(Math.random() * 256); //0-255.999999
// let g = Math.floor(Math.random() * 256);
// let b = Math.floor(Math.random() * 256);
var brightness = 100; // 设置亮度
var r = Math.floor(Math.random() * (256 - brightness) + brightness);
var g = Math.floor(Math.random() * (256 - brightness) + brightness);
var b = Math.floor(Math.random() * (256 - brightness) + brightness);
console.log(this.circlePos[index]);
if (this.circlePos.length) {
return {
width: item.width + "px",
height: item.width + "px",
backgroundColor: `rgba(${r},${g},${b},0.4)`,
color: `rgb(${r},${g},${b})`,
position: "absolute",
left: item.left + "px",
top: item.top + "px",
};
}
},
object2Geojson(data) {
var featureCollection = { type: "FeatureCollection" };
var features = new Array();
for (let i = 0; i < data.length; i++) {
var feature = { type: "Feature" };
feature.properties = data[i];
var geometry = { type: "Point" };
geometry.coordinates = [data[i].LON, data[i].LAT];
feature.geometry = geometry;
features.push(feature);
}
featureCollection.features = features;
return featureCollection;
},
initMap(code = 100000) {
if (code != this.name) {
this.myMap.clear();
}
this.name = code == 100000 ? "china" : code + "";
// `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${code}_full`
axios.get(`/mapJson/${this.name}.json`, { dataType: "json" }).then((geoJson) => {
console.log(geoJson);
if (!geoJson.data) {
return;
}
echarts.registerMap(this.name, { geoJSON: geoJson.data });
this.mapData = geoJson.data.features;
console.log(this.mapData);
this.level = this.mapData[0].properties.level;
var regions = [];
this.mapData.forEach(function (feature) {
if (feature.properties.center && feature.properties.center.length) {
regions.push({
name: feature.properties.name,
value: [...feature.properties.center, Math.random() * 10],
});
}
});
this.myMap.setOption(
{
geo3D: {
map: this.name,
show: false,
boxWidth: 85,
regionHeight: 4,
viewControl: {
alpha: 60,
},
},
xAxis3D: {
name: "protein",
},
yAxis3D: {
name: "fiber",
},
zAxis3D: {
name: "sodium",
},
series: [
{
type: "map3D",
boxWidth: 85,
map: this.name,
regionHeight: 4,
itemStyle: {},
viewControl: {
alpha: 60,
},
label: {
show: true,
formatter: (params) => {
return params.name + " ";
},
textStyle: {
color: "#2cb0e2",
fontSize: 10,
},
},
itemStyle: {
borderWidth: 2,
borderColor: "#2cb0e2",
color: "rgba(0, 0, 0, 0.3)",
shadowColor: "rgba(0, 0, 0, 1)",
shadowBlur: 1,
},
data: regions,
},
// {
// type: "scatter3D",
// coordinateSystem: "geo3D",
// symbolSize: 20,
// data: regions,
// zlevel: 1,
// },
],
},
{
notMerge: true,
}
);
});
},
initListeners() {
const _this = this;
this.myMap.on("click", "series.map3D", function (params) {
if (_this.level == 4) {
_this.$router.push("/map/detail");
}
const selectData = _this.mapData.find(
(x) => x.properties.name == params.name
);
if (selectData) {
_this.initMap(selectData.properties.id);
}
});
},
initEcharts() {
// 评估数据统计
for (let i = 1; i <= 3; i++) {
const echart = echarts.init(document.getElementById("leftTop" + i));
echart.setOption({
series: [ series: [
{ {
name: "Pressure", name: "Pressure",
type: "gauge", type: "gauge",
radius: '90%',
detail: { detail: {
show: false, show: false,
}, },
...@@ -382,231 +173,1048 @@ export default { ...@@ -382,231 +173,1048 @@ export default {
y2: 0, y2: 0,
colorStops: [ colorStops: [
{ {
offset: 0, offset: 1,
color: "rgba(164, 190, 203,0.6)", // 0% 处的颜色 color: "rgba(1, 87, 170,1)", // 0% 处的颜色
}, },
{ {
offset: 0.5, offset: 0.5,
color: "rgba(1,179,227,0.6)", // 0% 处的颜色 color: "rgba(0, 70, 136,0.4)", // 0% 处的颜色
}, },
{ {
offset: 1, offset: 0,
color: "rgba(67,243,203,0.6)", // 100% 处的颜色 color: "rgba(2, 20, 31,0.6)", // 100% 处的颜色
}, },
], ],
global: false, // 缺省为 false global: false, // 缺省为 false
}, },
}, },
}, },
data: [
{
value: i * 30,
}, },
], ],
}, },
], // 评估数据统计
}); accessData: [
this.myTopLeft.push(echart); {
name: '评估项目',
key: 'project',
count: 0,
unit: "项"
},
{
name: "评估楼宇",
key: "building",
count: 0,
unit: "栋"
},
{
name: "评估楼层",
key: "floor",
count: 0,
unit: "层"
} }
// 风险类型统计
const bar = echarts.init(this.$refs.bar);
const bar1 = echarts.init(this.$refs.bar1);
var hours = [
"12a",
"1a",
"2a",
"3a",
"4a",
"5a",
"6a",
"7a",
"8a",
"9a",
"10a",
"11a",
"12p",
"1p",
"2p",
"3p",
"4p",
"5p",
"6p",
"7p",
"8p",
"9p",
"10p",
"11p",
];
const data = [
[1, 0, 5],
[0.1, 17, 4],
[0.1, 16, 7],
[0.1, 1, 3],
[0.1, 13, 4],
[0.1, 8, 11],
[0.1, 20, 3],
[0.1, 16, 14],
[0.1, 10, 2],
[0.1, 6, 0],
[0.1, 3, 12],
[0.1, 20, 16],
];
const option = {
visualMap: {
show: false,
max: 20,
inRange: {
color: [
"#313695",
"#4575b4",
"#74add1",
"#abd9e9",
"#e0f3f8",
"#ffffbf",
"#fee090",
"#fdae61",
"#f46d43",
"#d73027",
"#a50026",
], ],
// 全国风险数量
totalData: [
{
name: '全国风险数量',
key: "nationalRisk",
count: 0
},
{
name: '年度新增风险',
key: "newRisk",
count: 0
},
{
name: '升级风险数量',
key: "upRisk",
count: 0
},
{
name: '降级风险数量',
key: "downRisk",
count: 0
},
],
// 事故类型统计
accidentEchartsList: [],
// 风险级别统计
levelStaticOptions: {},
myMap: null,
mapData: [],
myTopLeft: [],
tableList: [],
level: 1,
isScreen: true,
terminalList: [],
annualOptions: {
viewControl: {
autoRotate: false
}, },
grid: {
top: "5%",
bottom: "10%",
}, },
xAxis3D: { xAxis3D: {
name: '',
type: "category", type: "category",
data: hours, data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
splitLine: { splitLine: {
lineStyle: { show: false
color: "rgba(255,255,255,0.3)",
},
}, },
axisPointer: {
show: false
}
}, },
yAxis3D: { yAxis3D: {
type: "value", name: ' ',
splitLine: { type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisLabel: {
show: false
},
axisLine: {
lineStyle: { lineStyle: {
color: "rgba(255,255,255,0.3)", opacity: 0
}
}, },
axisTick: {
show: false
},
splitLine: {
show: false
}, },
axisPointer: {
show: false
}
}, },
zAxis3D: { zAxis3D: {
type: "value", name: ' ',
type: 'value',
splitLine: { splitLine: {
lineStyle: { show: false
color: "rgba(255,255,255,0.3)",
},
}, },
axisPointer: {
show: false
}
}, },
grid3D: { grid3D: {
boxWidth: 230, boxWidth: 200,
boxHeight: 120, boxDepth: 80,
boxDepth: 90,
viewControl: {
alpha: 0,
beta: 0,
},
axisLine: { axisLine: {
lineStyle: { color: "rgba(255,255,255,0.1)" }, lineStyle: { color: '#444' }
},
axisPointer: {
lineStyle: { color: '#fff' },
},
splitLine: {
lineStyle: { color: '#444' }
},
axisLabel: {
textStyle: {
color: '#fff'
}
},
viewControl: {
maxBeta: 0,
minBeta: 0,
minAlpha: 0,
maxAlpha: 0
}, },
light: { light: {
main: { main: {
shadow: true, intensity: 1.2,
quality: "ultra", shadow: true
intensity: 1.5,
},
}, },
ambient: {
intensity: 0.3
}
}
}, },
series: [ series: [
{ {
data: [[0, 1, 4], [1, 1, 1], [2, 1, 2], [3, 1, 3]],
type: "bar3D", type: "bar3D",
data: data.map(function (item) { emphasis: {
return { itemStyle: {
value: [item[1], item[0], item[2]], opacity: 0
}
}
},
],
},
// annualOptions: {
// // 直角坐标系内绘图网格,设置组件距离容器的距离
// grid: {
// left: 50,
// top: 50,
// right: 50,
// bottom: 50
// },
// // 设置鼠标移入的提示，默认显示
// tooltip: {},
// // 设置图例
// legend: {
// textStyle: {
// color: '#999'
// }
// },
// // 设置x轴
// xAxis: {
// data: [],
// // 显示x轴
// axisLine: {
// show: true
// },
// // 设置x轴的颜色和偏移量
// axisLabel: {
// color: '#999',
// rotate: 0
// },
// // 不显示x轴刻度
// axisTick: {
// show: false
// }
// },
// // 设置y轴
// yAxis: {
// // 显示y轴
// axisLine: {
// show: true
// },
// // 设置y轴的颜色
// axisLabel: {
// color: '#999',
// },
// // 不显示y轴刻度
// axisTick: {
// show: false
// },
// // 不显示分隔线
// splitLine: {
// show: false
// }
// },
// 表示不同系列的列表
// series: []
// },
areaName: "",
colums: [
{
props: 'index',
color: "#fff",
},
{
props: 'projectName',
color: "#fff",
width: "30%",
},
{
props: 'deptName',
color: "rgb(0, 255, 186)",
width: "30%",
},
{
props: 'province',
color: "rgb(255, 234, 0)",
},
{
props: 'riskNum',
width: "10%",
}
],
mapDataNums: []
}; };
}), },
shading: "color", mounted() {
label: { this.myMap = echarts.init(this.$refs.myEchart);
// this.getMapData()
// this.initData(['周一', '周二', '周三', '周四', '周五', '周六'], [100, 50, 70, 80, 60, 40])
},
watch: {
'$route': {
handler(val) {
const code = val.query.code || 100000;
const name = val.query.name ? decodeURI(val.query.name) : '';
this.level = val.query.level || 1;
this.getMapData(code, name)
},
immediate: true
}
},
methods: {
getMapData(id, name) {
centerMap({
level: this.level,
areaName: name,
type: 0
}).then(res => {
this.mapDataNums = res.data;
this.initMap(id, name);
})
},
getColors(index) {
return this.assessLevelColors[index]?.join(',') || '227, 101, 88'
},
getColors1(index) {
return this.assessLevelColors[index].map((x, index) => index == 1 ? x : x + 50).join(',') || '227, 101, 88'
},
initAll() {
this.getAssess()
this.initListeners();
this.getTableList();
this.getTotal()
this.annualEcharts()
this.getlevelStatic()
this.assessLevel()
this.accidentType()
},
getlevelStatic() {
const levelColor = ['#00a0ea', 'yellow', 'orange', 'red']
rightlevelStatic({ areaName: this.areaName }).then(res => {
const list = res.data.map((x, index) => {
return {
name: x.levelName,
y: x.levelNum - '',
color: levelColor[index]
}
})
this.levelStaticOptions = {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 25
},
marginLeft: 0,
spacingLeft: 0,
backgroundColor: "transparent"
},
legend: {
layout: "vertical",
floating: true,
align: 'right',
verticalAlign: 'top',
itemMarginTop: 10,
itemMarginLeft: 20,
itemStyle: {
color: "#fff"
}
},
title: {
text: ''
},
credits: {
enabled: false
},
plotOptions: {
pie: {
size: '90%',
innerSize: '50%',
depth: 15,
showInLegend: true,
dataLabels: {
enabled: false
}
}
},
series: [{
data: list
}]
}
})
},
getAssess() {
leftEvaluation({ areaName: this.areaName }).then(res => {
this.accessData.forEach(val => {
val.count = res.data[val.key + 'Num']
})
this.assessEcharts();
})
},
assessEcharts() {
// 评估数据统计
for (let i = 0; i < this.accessData.length; i++) {
const val = this.accessData[i]
const echart = echarts.init(document.getElementById("leftTop" + i));
const options = this.assessEchartsOptions;
options.series[0] = {
...options.series[0],
data: [{ value: val.count }],
max: i == 0 ? 5000 : 100000,
}
echart.setOption(options);
this.myTopLeft.push(echart);
}
},
accidentType() {
rightAccidentType({ areaName: this.areaName, type: '' }).then(res => {
this.accidentEchartsList = res.data.slice(0, 11);
const maxNum = res.data[0].typeNum;
const max = 80, min = 40;
let group = 0, groupW = 0, groupH = 0;
const groupList = [[]];
this.accidentEchartsList.forEach(val => {
val.g = group;
val.l = group == 0 ? 140 : groupW;
val.w = Math.max(max * val.typeNum / maxNum, min);
val.t = groupH;
groupW += (val.w + (Math.random() * 10))
groupList[group].push(val)
if (groupW > 300 || group == 0) {
group++;
groupW = (3 - group) * 20
groupH = group == 0 ? val.w : Math.max.apply(null, groupList[group - 1].map(x => x.t + x.w))
groupList[group] = []
}
})
})
},
annualEcharts() {
// 风险类型统计
const bar = echarts.init(this.$refs.bar, this.annualOptions);
leftAnnualSort({
areaName: this.areaName,
type: ''
}).then(result => {
const x = Object.keys(result.data);
const z = Object.values(result.data);
const data = x.reduce((total, currentValue, currentIndex) => { total.push([currentIndex, 0, z[currentIndex]]); return total }, [])
this.annualOptions.xAxis3D.data = x;
this.annualOptions.series[0] = {
data,
type: "bar3D",
}
bar.setOption(this.annualOptions)
})
},
initDta(xData, yData) {
// 设置顶部和底部的值
let symbolData = [], newShadowHight = []
let heights = 0
yData.forEach(item => {
symbolData.push(1)
heights += item
})
newShadowHight = yData.map(item => heights)
options.xAxis.data = xData
options.series = [
// 底部
{
z: 2,
type: 'pictorialBar',
symbol: 'diamond',
symbolOffset: ['0%', '50%'],
symbolSize: [30, 12],
toolltip: {
show: false
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#1f7eff' }, { offset: 1, color: '#64adff' }])
},
data: symbolData, // [1,1,1,1,1]
},
// 内容区域
{
z: 1,
type: 'bar',
barWidth: 30,
data: yData
},
// 内容的顶部
{
z: 3,
type: 'pictorialBar',
symbol: 'diamond',
symbolPosition: 'end',
symbolOffset: ['0%', '-50%'],
symbolSize: [30, 12],
toolltip: {
show: false
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#1f7eff' }, { offset: 1, color: '#64adff' }])
},
data: yData,
},
// 阴影区域
{
z: 0,
type: 'bar',
barWidth: 30,
data: newShadowHight, // [400, 400, 400, 400, 400]
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#9cc1ff' }, { offset: 1, color: '#ecf5ff' }])
}
}
, // 阴影的顶部
{
z: 3,
type: 'pictorialBar',
symbol: 'diamond',
symbolPosition: 'end',
symbolOffset: ['0%', '-50%'],
symbolSize: [30, 12],
toolltip: {
show: false
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#1f7eff' }, { offset: 1, color: '#64adff' }])
},
data: newShadowHight,
}
]
// 设置配置项
bar.setOption(options)
},
assessLevel() {
rightAccessLevel({ areaName: this.areaName, level: this.assessLevelType, type: '' }).then(res => {
this.terminalList = res.data
})
},
getTotal() {
centerStatistic({ areaName: this.areaName, type: '' }).then(result => {
this.totalData.forEach(val => {
val.count = result.data[val.key + 'Num'] || 0
})
})
},
changeScreen() {
this.isScreen = !this.isScreen;
let i = 0;
const timer = setInterval(() => {
this.myMap.resize();
i++;
if (i > 20) {
clearInterval(timer);
}
}, 350);
},
getTableList() {
leftRiskSort({
areaName: this.areaName,
type: ''
}).then(res => {
this.tableList = res.data
})
},
object2Geojson(data) {
var featureCollection = { type: "FeatureCollection" };
var features = new Array();
for (let i = 0; i < data.length; i++) {
var feature = { type: "Feature" };
feature.properties = data[i];
var geometry = { type: "Point" };
geometry.coordinates = [data[i].LON, data[i].LAT];
feature.geometry = geometry;
features.push(feature);
}
featureCollection.features = features;
return featureCollection;
},
initMap(code = 100000, name = '') {
const _this = this;
if (code != this.name) {
this.myMap.clear();
}
this.name = code == 100000 ? "china" : code + "";
this.areaName = code == 100000 ? "" : name;
this.initAll()
// `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${code}_full`
axios
.get(`/mapJson/${this.name}.json`, { dataType: "json" })
.then((geoJson) => {
if (!geoJson.data) {
return;
}
echarts.registerMap(this.name, { geoJSON: geoJson.data });
this.mapData = geoJson.data.features;
this.level = this.mapData[0].properties.level;
// 装饰省市区
var regions = [];
this.mapData.forEach(function (feature) {
if (feature.properties.cp && feature.properties.cp.length) {
const has = _this.mapDataNums.find(x => x.areaName && x.areaName.indexOf(feature.properties.name) >= 0)
let riskNum = 0, areaColor = '', opacity;
if (has) {
riskNum = has.riskNum
areaColor = has.areaColor
opacity = has.areaColor ? 0.6 : 1
}
regions.push({
name: feature.properties.name,
itemStyle: {
color: areaColor,
opacity
}
});
}
});
let boxWidth = 84, setCodeArr = [340000, 140000, 610000, 370300, 371600, 320900, 320900]
if (code != 100000) {
if (setCodeArr.includes(code - '')) { //山西省和陕西省
boxWidth = 45
} else {
boxWidth = 65
}
}
if (this.level != 2) {
// 标记坐标点位
var scatters = [];
_this.mapDataNums.forEach(val => {
if (val.projectList) {
scatters.push(...val.projectList.map(x => {
return {
value: [x.lng - '', x.lat - '', 0],
itemStyle: {
color: x.riskColor
},
info: x,
tooltip: {
backgroundColor: 'transparent',
padding: 0,
borderColor: 'transparent',
formatter: (...rest) => {
return `
<div class="tooltip-item">
<div>${x.projectName}</div>
<div class='tooltip-item-total'>风险总数量 ${String(x.riskSumNum).split('').map(x => `<span>${x}</span>`).join('')}</div>
<div class='tab4'>
<div class='tab4-item'><div class='title'>固有风险</div>${x.inherentNum}</div>
<div class='tab4-item'><div class='title'>现状风险</div>${x.existingNum}</div>
</div>
</div>
`
}
}
}
}))
}
})
}
this.myMap.setOption(
{
geo3D: {
map: this.name,
show: false, show: false,
fontSize: 16, boxWidth: 84,
borderWidth: 1, regionHeight: 6,
viewControl: {
alpha: 80,
},
}, },
itemStyle: { xAxis3D: {
opacity: 1, name: "protein",
}, },
emphasis: { yAxis3D: {
label: { name: "fiber",
fontSize: 20,
color: "#900",
}, },
itemStyle: { zAxis3D: {
color: "#900", name: "sodium",
}, },
tooltip: {
trigger: 'item',
showContent: true,//是否显示提示框浮层，默认显示
alwaysShowContent: false,//是否永远显示提示框内容，默认情况下在移出可触发提示框区域后 一定时间 后隐藏，设置为 true 可以保证一直显示提示框内容
hideDelay: 0,//鼠标移出坐标点时，浮层隐藏的延迟时间，单位为 ms，在 alwaysShowContent 为 true 的时候无效
formatter: function (params, ticket, callback) { return '' }
}, },
series: [
{
type: "map3D",
boxWidth: boxWidth,
map: this.name,
regionHeight: 4,
itemStyle: {},
viewControl: {
alpha: 80,
}, },
],
};
bar.setOption(option);
bar1.setOption(option);
},
resetEcharts() {},
map2d() {
this.myMap.setOption({
geo: {
map: "china",
label: { label: {
show: true, show: true,
formatter: (params) => {
return params.name + " ";
},
textStyle: { textStyle: {
color: "#fff", color: "#2cb0e2",
fontSize: 10, fontSize: 10,
}, },
}, },
itemStyle: { itemStyle: {
borderWidth: 2, borderWidth: 2,
borderColor: "#2cb0e2", borderColor: "#2cb0e2",
color: "#1f7fad",
color: "rgba(0, 0, 0, 0.3)", color: "rgba(0, 0, 0, 0.3)",
opacity: 0.6,
shadowColor: "rgba(0, 0, 0, 1)", shadowColor: "rgba(0, 0, 0, 1)",
shadowBlur: 1, shadowBlur: 1,
}, },
emphasis: { data: regions,
label: {
show: true,
distance: 10,
formatter: "{a}",
color: "#fff",
fontSize: 10,
},
itemStyle: {
borderWidth: 2,
borderColor: "#5ad8ff",
color: "rgb(51 203 254)",
opacity: 0.8,
},
},
postEffect: {
enable: true,
bloom: {
enable: false,
}, },
{
type: "scatter3D",
coordinateSystem: "geo3D",
symbolSize: 10,
data: scatters,
zlevel: 1,
}
],
}, },
);
});
}, },
initListeners() {
const _this = this;
this.myMap.on("click", "series.map3D", function (params) {
if (_this.level == 4) {
// _this.$router.push("/map/detail");
return false
}
const selectData = _this.mapData.find(
(x) => x.properties.name == params.name
);
if (selectData) {
_this.$router.push({
name: _this.$route.name,
query: {
code: encodeURI(selectData.properties.id),
level: _this.level,
name: encodeURI(selectData.properties.name),
}
})
}
});
this.myMap.on("click", "series.scatter3D", function (params) {
const info = params.data.info;
if (info && info.projectId) {
_this.$router.push("/map/detail?projectId=" + info.projectId);
}
}); });
}, },
}, },
}; };
</script> </script>
<style lang="scss">
.tooltip-item {
width: 280px;
background: url('../../assets/map/tooltip-bg.png') center center;
background-size: 100% 100%;
display: flex;
flex-direction: column;
justify-content: center;
line-height: 30px;
padding: 30px 20px 10px;
color: #fff;
.tooltip-item-total {
font-size: 14px;
margin: 5px 0;
span {
border: 1px solid #11afff;
font-size: 20px;
padding: 0 5px;
margin-left: 15px;
border-radius: 5px;
}
}
}
.tooltip-item>div {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.tab4 {
.tab4-item {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(90deg,
rgba(0, 125, 183, 0.4) 30%,
rgba(0, 0, 0, 0) 70%);
padding: 0 10px;
margin: 10px 0;
font-size: 14px;
font-weight: 500;
border-radius: 40px;
height: 30px;
line-height: 30px;
.title {
&:before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgb(0, 125, 183);
margin-right: 10px;
}
}
}
.tab4-item:first-child {
background: linear-gradient(90deg,
rgba(243, 90, 76, 0.6) 30%,
rgba(0, 0, 0, 0) 70%);
.title:before {
background-color: rgb(243, 90, 76);
}
}
.tab4-item:last-child {
background: linear-gradient(90deg,
rgba(234, 156, 71, 0.6) 30%,
rgba(0, 0, 0, 0) 70%);
.title:before {
background-color: rgb(234, 156, 71);
}
}
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
@keyframes pathAnimation {
0% {
transform: translateY(-8px);
}
50% {
transform: translateY(0);
}
// 100% {
// transform: translateY(5px);
// }
}
.level-static {
width: 100%;
height: 100%;
}
.echart-top-center {
width: 80%;
margin: 0 auto;
height: 90px;
background: url('../../assets//map/centerTop.png') no-repeat center bottom;
background-size: 85% 70%;
display: flex;
position: absolute;
justify-content: center;
left: 50%;
transform: translateX(-49%);
.echart-total-count {
color: #11afff;
text-align: center;
margin: 0 10px;
position: relative;
min-width: 40px;
img {
width: 50px;
height: 50px;
position: absolute;
top: 20px;
left: 50%;
margin-left: -25px;
}
.echart-total-group {
font-size: 14px;
animation: TotalAnimal 0.8s ease-in-out infinite;
margin-top: -15px;
z-index: 100;
.echart-total-num {
font-size: 28px;
font-weight: bold;
}
.echart-total-title {}
}
}
}
@keyframes TotalAnimal {
0% {
transform: translateY(4px);
}
50% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
.terminal-group {
height: 90%;
overflow: auto;
}
.terminal-item-bar {
display: flex;
align-items: center;
background: linear-gradient(to right, rgb(var(--bg-color)), rgba(var(--bg-color1), 1));
color: #e3e3e3;
height: 26px;
border-radius: 26px;
padding: 0 20px;
margin-top: 10px;
justify-content: space-between;
font-size: 13px;
font-weight: 500;
>span {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.terminal-item-title {
display: inline-block;
font-size: 16px;
font-weight: 500;
color: #ffffff;
line-height: 21px;
text-align: right;
min-width: 100px;
margin-right: 20px;
}
.el-progress {
flex: 1;
}
.terminal-item-bar:nth-of-type(2n) {
margin: 14px 0;
}
.terminal-item-bar:nth-of-type(n) {
::v-deep .el-progress-bar__inner {
background: linear-gradient(90deg, rgba(0, 0, 0, 0), #ffe556);
}
}
.terminal-item-bar:nth-of-type(2n) {
::v-deep .el-progress-bar__inner {
background: linear-gradient(90deg, rgba(0, 0, 0, 0), #30e1ac);
}
}
.terminal-item-bar:nth-of-type(3n) {
::v-deep .el-progress-bar__inner {
background: linear-gradient(90deg, rgba(0, 0, 0, 0), #11afff);
}
}
}
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: all 0.1s ease;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(-20px);
opacity: 0;
}
.map-index { .map-index {
width: 100%; width: 100%;
height: 100%; height: 100%;
// overflow: hidden;
&-left, &-left,
&-right { &-right {
width: 25%; width: 25%;
height: 100%; height: 100%;
float: left; float: left;
position: relative; position: relative;
transform: translateX(0);
transition: all 0.5s ease;
}
&-center {
width: 50%;
height: 100%;
margin: 0 auto;
float: left;
display: flex;
position: relative;
transition: width 0.5s ease;
.echart-protect-left,
.echart-protect-right {
// width: 15%;
}
.echart-protect-center {
width: 100%;
padding: 0 6%;
box-sizing: border-box;
position: relative;
}
.echart-protect-left,
.echart-protect-right,
.echart-protect-bottom {
height: 100%;
position: absolute;
left: 10px;
img {
width: 90%;
height: 100%;
}
}
.echart-protect-right {
left: auto;
right: 0px;
text-align: right;
}
.echart-protect-bottom {
height: 100px;
width: 100%;
bottom: 0;
}
}
.map-index-screen {
float: none;
width: 95%;
}
.map-index-none {
transform: translateX(-1000px);
width: 0;
}
.map-index-right-none {
transform: translateX(100%);
width: 0;
} }
// &-left::after, // &-left::after,
// &-right::after { // &-right::after {
// content: ""; // content: "";
...@@ -630,6 +1238,7 @@ export default { ...@@ -630,6 +1238,7 @@ export default {
margin-left: 20px; margin-left: 20px;
height: 100%; height: 100%;
} }
&-right-wrap { &-right-wrap {
margin-right: 40px; margin-right: 40px;
height: 100%; height: 100%;
...@@ -637,11 +1246,59 @@ export default { ...@@ -637,11 +1246,59 @@ export default {
} }
.echart-instance { .echart-instance {
width: 50%; width: 800px;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
float: left;
// &-bottom {
// height: 30px;
// }
}
.legend-map {
position: absolute;
bottom: 4%;
left: 18%;
color: #fff;
display: flex;
align-items: center;
>span {
font-size: 15px;
margin-right: 15px;
display: flex;
align-items: center;
&::before {
content: ' ';
width: 14px;
height: 14px;
border-radius: 50%;
background: #00a0ea;
overflow: hidden;
margin-right: 6px;
}
}
>span:nth-of-type(2) {
&::before {
background: yellow;
}
}
>span:nth-of-type(3) {
&::before {
background: orange;
}
}
>span:nth-of-type(4) {
&::before {
background: red;
}
}
} }
.map-circle-item { .map-circle-item {
border-radius: 50%; border-radius: 50%;
animation: circleAnimation 0.5s infinite; animation: circleAnimation 0.5s infinite;
...@@ -658,12 +1315,15 @@ export default { ...@@ -658,12 +1315,15 @@ export default {
.map-circle-item:nth-of-type(2n + 1) { .map-circle-item:nth-of-type(2n + 1) {
animation: circleAnimation 1.8s infinite; animation: circleAnimation 1.8s infinite;
} }
.map-circle-item:nth-of-type(2n) { .map-circle-item:nth-of-type(2n) {
animation: circleAnimation 2s infinite; animation: circleAnimation 2s infinite;
} }
.map-circle-item:nth-of-type(1) { .map-circle-item:nth-of-type(1) {
animation: circleAnimation 2.5s infinite; animation: circleAnimation 2.5s infinite;
} }
.map-circle-item:last-child { .map-circle-item:last-child {
animation: circleAnimation 1.2s infinite; animation: circleAnimation 1.2s infinite;
} }
...@@ -672,9 +1332,11 @@ export default { ...@@ -672,9 +1332,11 @@ export default {
0% { 0% {
transform: translateY(0); transform: translateY(0);
} }
50% { 50% {
transform: translateY(-10px); transform: translateY(-10px);
} }
100% { 100% {
transform: translateY(0); transform: translateY(0);
} }
...@@ -689,6 +1351,7 @@ export default { ...@@ -689,6 +1351,7 @@ export default {
display: inline-block; display: inline-block;
width: 40%; width: 40%;
text-align: center; text-align: center;
.content-assess-title { .content-assess-title {
height: 60px; height: 60px;
width: 100%; width: 100%;
...@@ -700,26 +1363,32 @@ export default { ...@@ -700,26 +1363,32 @@ export default {
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;
} }
.content-assess-echarts {}
.content-assess-num { .content-assess-num {
width: 100%; width: 100%;
height: 30px; height: 30px;
margin: 0 auto; margin: 0 auto;
background: url("../../assets/map/content-assess-bottom.png") center center; background: url("../../assets/map/content-assess-bottom.png") center bottom;
background-size: 100% 100%; background-size: 100% 100%;
font-size: 22px; font-size: 22px;
color: #48aefb; color: #48aefb;
position: relative; position: relative;
&-txt { &-txt {
display: inline-block; display: inline-block;
transform: translateY(-25px); transform: translateY(-20px);
} }
} }
} }
.content-assess-tab { .content-assess-tab {
font-size: 10px; font-size: 10px;
color: #fff; color: #fff;
text-align: left; text-align: left;
& > div {
&>div {
display: inline-block; display: inline-block;
width: 45px; width: 45px;
text-align: center; text-align: center;
...@@ -728,24 +1397,58 @@ export default { ...@@ -728,24 +1397,58 @@ export default {
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
} }
& > .active {
&>.active {
border-radius: 50%; border-radius: 50%;
border-image: linear-gradient(90deg, #48aefb, #87cafc) 1 1; border-image: linear-gradient(90deg, #48aefb, #87cafc) 1 1;
} }
} }
.map-index { .map-index {
width: 98%; width: 98%;
margin: 0 auto; margin: 0 auto;
.map-content-item { .map-content-item {
height: 34%; height: 34%;
} }
} }
.echarts-accident { .echarts-accident {
width: 90%; // width: 200px;
height: 90%; height: 100%;
margin: 0 auto; margin: 0 auto;
background: url("../../assets/map/accident.png") center bottom no-repeat; background: url("../../assets/map/accident.png") center bottom no-repeat;
background-size: 100%; background-size: 100%;
position: relative; position: relative;
text-align: center;
>div {
width: var(--width);
height: var(--width);
left: var(--left);
top: var(--top);
position: absolute;
background: rgba($color: #fafafa, $alpha: .8);
border-radius: 50%;
color: #fff;
background: rgba(var(--bg-color), .8);
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
// animation: pathAnimation 0.3s infinite;
}
>div:nth-of-type(2n) {
animation: pathAnimation 0.6s infinite;
}
>div:nth-of-type(2n+1) {
animation: pathAnimation 0.4s infinite;
}
>div:nth-of-type(3n) {
animation: pathAnimation 0.3s ease-in-out infinite;
}
} }
</style> </style>
src/views/map/map-layout.vue
View file @ 0a982eb5
<template> <template>
<div class="map-layout"> <div class="map-layout">
<div class="map-header"> <div class="map-header">
<!-- <div ><el-input /></div> --> <div class="map-header-search">
<el-input placeholder="请输入关键字" v-model="searchValue" @focus="onFoucs" />
<transition name="fade">
<ul class="header-search-group" ref="headerSearchGroup" v-show="showHeaderList">
<li class="header-search-list" @click="toDetail(item)" v-for="item in searchList" :key="item.id">
<div>
<p class="list-name">{{ item.name }}</p>
<p>{{ item.address }}</p>
</div>
<div class="list-area">{{ item.deptName }}</div>
</li>
</ul>
</transition>
</div>
<div class="map-header-center"> <div class="map-header-center">
<div class="map-header-center-title">融通地产危险源辨识系统</div> <div class="map-header-center-title">融通地产危险源辨识系统</div>
<div class="map-header-center-tip"> <!-- <div class="map-header-center-tip">
Rongtong Real Estate Hazard Identification System Rongtong Real Estate Hazard Identification System
</div> -->
</div> </div>
<div class="map-header-right">
<span @click="toBack"><i class="el-icon-back"></i>返回</span>
<span><i class="el-icon-s-home"></i>管理端</span>
<!-- <span><i class="el-icon-switch-button"></i> 退出</span> -->
</div> </div>
</div> </div>
<div class="map-content"> <div class="map-content">
<div class="map-content-left"></div> <div class="map-content-left"></div>
<mapDetail v-if="$route.name == 'mapDetail'" /> <mapDetail v-if="$route.name == 'mapDetail'" />
<mapIndex v-if="$route.name == 'mapIndex'" /> <mapIndex ref="mapIndex" v-if="$route.name == 'mapIndex'" />
<div class="map-content-right"></div> <div class="map-content-right"></div>
</div> </div>
...@@ -23,18 +41,120 @@ ...@@ -23,18 +41,120 @@
<script> <script>
import mapIndex from "./map-index.vue"; import mapIndex from "./map-index.vue";
import mapDetail from "./map-detail.vue"; import mapDetail from "./map-detail.vue";
import { projectList } from '@/api/map'
export default { export default {
name: "echarts", name: "echarts",
components: { mapIndex, mapDetail }, components: { mapIndex, mapDetail },
data() { data() {
return {}; return {
showHeaderList: false,
searchValue: "",
searchList: []
};
},
mounted() {
this.getProjectList()
document.addEventListener('click', e => {
if (this.showHeaderList) {
const headerSearchGroup = document.querySelector('.map-header-search')
if (!headerSearchGroup.contains(e.target)) {
this.showHeaderList = false
}
}
})
},
watch: {
searchValue() {
this.getProjectList()
}
},
methods: {
toBack() {
// if (this.$route.name == 'mapDetail') {
this.$router.go(-1)
// } else {
// }
},
onFoucs() {
this.showHeaderList = true
},
getProjectList() {
projectList({ name: this.searchValue.trim() }).then(res => {
this.searchList = res.data.rows;
})
},
toDetail(item) {
if (this.$route.name == 'mapDetail') {
this.$router.replace({
name: 'mapDetail',
query: {
projectId: item.id
}
})
} else {
this.$router.push({
name: 'mapDetail',
query: {
projectId: item.id
}
})
}
this.showHeaderList = false
}
}, },
mounted() {},
methods: {},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.header-search-group {
width: 110%;
height: 350px;
position: absolute;
background: #001525;
padding: 20px 10px;
z-index: 10;
overflow: auto;
top: 30px;
left: 10px;
.header-search-list {
background: #003863;
width: 100%;
display: flex;
padding: 10px 16px;
align-items: center;
justify-content: space-between;
font-size: 14px;
margin-bottom: 5px;
border-radius: 5px;
&>div:first-child {
flex: 1;
overflow: hidden;
p {
white-space: nowrap;
text-overflow: ellipsis;
margin: 0;
width: 90%;
overflow: hidden;
}
.list-name {
font-size: 16px;
font-weight: 500;
margin-bottom: 5px;
}
}
.list-area {
color: orange;
}
}
}
.map-layout { .map-layout {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -50,29 +170,85 @@ export default { ...@@ -50,29 +170,85 @@ export default {
background: url("../../assets/map/top.png") no-repeat; background: url("../../assets/map/top.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
box-shadow: border-box; box-shadow: border-box;
display: flex;
.map-header-search {
width: 20%;
position: relative;
margin-top: 3px;
.el-input {
::v-deep input {
height: 30px;
background: transparent;
border-color: #005495;
border-radius: 30px;
color: #fff;
&::placeholder {
color: rgb(125, 125, 125);
font-size: 12px;
}
}
}
}
&-center { &-center {
text-align: center; text-align: center;
flex: 1;
&-title { &-title {
text-shadow: 0px 0px 10px rgba(21, 203, 249, 1); text-shadow: 0px 0px 10px rgba(21, 203, 249, 1);
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 30px;
line-height: 53px;
height: 100%;
} }
&-tip { &-tip {
font-family: "微软雅黑", sans-serif; font-family: "微软雅黑", sans-serif;
font-size: 16px; font-size: 16px;
color: rgba(215, 215, 215, 0.4); color: rgba(215, 215, 215, 0.4);
} }
} }
.map-header-right {
width: 20%;
font-size: 12px;
vertical-align: middle;
margin-top: 8px;
color: #2391FF;
display: flex;
justify-content: flex-end;
span {
margin-left: 20px;
}
i {
width: 23px;
height: 23px;
border-radius: 100%;
border: 1px solid #2391FF;
display: inline-block;
text-align: center;
line-height: 22px;
margin-right: 6px;
}
}
} }
.map-footer { .map-footer {
background: url("../../assets/map/bottom.png") no-repeat; background: url("../../assets/map/bottom.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
height: 44px; height: 44px;
} }
.map-content { .map-content {
width: 100%; width: 100%;
height: calc(100% - 128px); height: calc(100% - 128px);
position: relative; position: relative;
&-left::after, &-left::after,
&-right::after { &-right::after {
content: ""; content: "";
...@@ -86,6 +262,7 @@ export default { ...@@ -86,6 +262,7 @@ export default {
z-index: 10; z-index: 10;
transform: translateY(-52%); transform: translateY(-52%);
} }
&-right::after { &-right::after {
background-image: url("../../assets/map/hud-right.png"); background-image: url("../../assets/map/hud-right.png");
position: absolute; position: absolute;
...@@ -94,6 +271,7 @@ export default { ...@@ -94,6 +271,7 @@ export default {
} }
} }
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
......
src/views/risk/drawCanvas/index.vue
View file @ 0a982eb5
...@@ -11,48 +11,25 @@ ...@@ -11,48 +11,25 @@
<!-- <el-button @click="editItem" type="default" v-if="!isViews">修改</el-button> --> <!-- <el-button @click="editItem" type="default" v-if="!isViews">修改</el-button> -->
<div <div id="printDiv" :style="{ minHeight: layoutHeight + 'px', padding: '20px' }" class="vue-grid-layout">
id="printDiv"
:style="{ minHeight: layoutHeight + 'px', padding: '20px' }"
class="vue-grid-layout"
>
<div class="north" style="margin-right: 20px"> <div class="north" style="margin-right: 20px">
<img src="../../../assets/images/north.png" alt="" /> <img src="../../../assets/images/north.png" alt="" />
</div> </div>
<vue-draggable-resizable <vue-draggable-resizable parent ref="dragResizable" v-for="item in layout" :x="(W / 12) * item.x" :y="item.y * 30"
parent :w="(W / 12) * item.w" :h="item.h * 30" :i="item.i" :key="item.i" :z="item.zIndex"
ref="dragResizable" :draggable="item.isDraggable && !isViews" :resizable="item.isResizable && !isViews"
v-for="item in layout" @resizestop="(x, y, w, h) => resizedEvent(item, x, y, w, h)" @dragging="(x, y) => onDrag(item, x, y)" @dragstop="(x, y) => {
:x="(W / 12) * item.x"
:y="item.y * 30"
:w="(W / 12) * item.w"
:h="item.h * 30"
:i="item.i"
:key="item.i"
:z="item.zIndex"
:draggable="item.isDraggable && !isViews"
:resizable="item.isResizable && !isViews"
@resizestop="(x, y, w, h) => resizedEvent(item, x, y, w, h)"
@dragging="(x, y) => onDrag(item, x, y)"
@dragstop="
(x, y) => {
movedEvent(item, x, y); movedEvent(item, x, y);
} }
" " @resizing="(x, y, w, h) => onResize(item, x, y, w, h)" @activated="onActivated(item)"
@resizing="(x, y, w, h) => onResize(item, x, y, w, h)" @click.native="dbClickEvent($event, item)" :style="{
@activated="onActivated(item)"
@click.native="dbClickEvent($event, item)"
:style="{
backgroundColor: item.c, backgroundColor: item.c,
border: item.type == 'thorough' ? 'none !important' : '', border: item.type == 'thorough' ? 'none !important' : '',
}" }">
>
<span class="text" :class="item.w > item.h * 5 ? '' : 'rowText'">{{ <span class="text" :class="item.w > item.h * 5 ? '' : 'rowText'">{{
item.name item.name
}}</span> }}</span>
<span class="remove" @click.stop="removeItem(item.i)" v-if="!isViews" <span class="remove" @click.stop="removeItem(item.i)" v-if="!isViews">x</span>
>x</span
>
</vue-draggable-resizable> </vue-draggable-resizable>
</div> </div>
</div> </div>
...@@ -64,24 +41,16 @@ ...@@ -64,24 +41,16 @@
</el-form-item> </el-form-item>
<el-form-item label="房间类型" prop="roomType"> <el-form-item label="房间类型" prop="roomType">
<el-select v-model="roomType" placeholder="请选择房间类型"> <el-select v-model="roomType" placeholder="请选择房间类型">
<el-option <el-option v-for="item in roomArr" :key="item.dictValue" :label="item.dictLabel"
v-for="item in roomArr" :value="item.dictValue"></el-option>
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</div> </div>
<div v-else-if="isBase"> <div v-else-if="isBase">
<el-form-item label="房间名称" prop="roomName"> <el-form-item label="房间名称" prop="roomName">
<el-select v-model="roomName" placeholder="请选择房间类型"> <el-select v-model="roomName" placeholder="请选择房间类型">
<el-option <el-option v-for="item in copyRoom.typeData" :key="item.dictValue" :label="item.dictLabel"
v-for="item in copyRoom.typeData" :value="item.dictValue"></el-option>
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</div> </div>
...@@ -96,27 +65,14 @@ ...@@ -96,27 +65,14 @@
></el-option> ></el-option>
</el-select> --> </el-select> -->
<!-- v-model="copyRoom.floor.name" --> <!-- v-model="copyRoom.floor.name" -->
<el-cascader <el-cascader :options="copyRoom.floorData" :props="{
:options="copyRoom.floorData"
:props="{
label: 'name', label: 'name',
value: 'id', value: 'id',
}" }" @change="handleChange"></el-cascader>
@change="handleChange"
></el-cascader>
</el-form-item> </el-form-item>
<el-form-item label="房间" prop="copyRoomName"> <el-form-item label="房间" prop="copyRoomName">
<el-select <el-select v-model="copyRoom.room.id" @visible-change="seletRoom" placeholder="选择房间">
v-model="copyRoom.room.id" <el-option v-for="item in copyRoom.roomData" :key="item.id" :label="item.name" :value="item.id"></el-option>
@visible-change="seletRoom"
placeholder="选择房间"
>
<el-option
v-for="item in copyRoom.roomData"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="房间名称"> <el-form-item label="房间名称">
...@@ -131,27 +87,15 @@ ...@@ -131,27 +87,15 @@
placeholder="选择房间类型" placeholder="选择房间类型"
@click="selectType" @click="selectType"
/> --> /> -->
<el-select <el-select v-model="copyRoom.type1.dictValue" placeholder="选择房间" @change="copyTypeChnage">
v-model="copyRoom.type1.dictValue" <el-option v-for="item in copyRoom.typeData" :key="item.dictValue" :label="item.dictLabel"
placeholder="选择房间" :value="item.dictValue"></el-option>
@change="copyTypeChnage"
>
<el-option
v-for="item in copyRoom.typeData"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</div> </div>
<div v-else> <div v-else>
<el-form-item label="名称" prop="roomName"> <el-form-item label="名称" prop="roomName">
<el-input <el-input v-model="roomName" label="名称" placeholder="请输入名称" />
v-model="roomName"
label="名称"
placeholder="请输入名称"
/>
</el-form-item> </el-form-item>
</div> </div>
</el-form> </el-form>
...@@ -160,7 +104,7 @@ ...@@ -160,7 +104,7 @@
<el-button type="primary" @click="saveRoomName">确 定</el-button> <el-button type="primary" @click="saveRoomName">确 定</el-button>
</div> </div>
</el-dialog> </el-dialog>
<el-row v-if="isViews" style="margin-top: 20px; margin-left: 20px"> <el-row v-if="isViews && componentBtn" style="margin-top: 20px; margin-left: 20px">
<el-row :gutter="5" style="margin-top: 20px; margin-left: 20px"> <el-row :gutter="5" style="margin-top: 20px; margin-left: 20px">
<el-col :span="2"> 风险等级图例:</el-col> <el-col :span="2"> 风险等级图例:</el-col>
<el-col :span="3"> <span class="riskTab type1"></span>重大风险</el-col> <el-col :span="3"> <span class="riskTab type1"></span>重大风险</el-col>
...@@ -236,11 +180,40 @@ export default { ...@@ -236,11 +180,40 @@ export default {
}, },
}; };
}, },
props: {
componentBuilding: Number,
componentIsViews: {
type: Boolean,
default: true
},
componentBtn: {
type: Boolean,
default: true
},
componentFloorId: {
type: String,
default: '18'
},
},
watch: {
componentBuilding(val) {
this.copyRoom.buildingId = val;
this.isViews = this.componentIsViews;
this.selectType();
this.getFloor();
this.W = document.documentElement.clientWidth;
this.H = document.documentElement.clientHeight - 180;
},
componentFloorId(val) {
this.getRoomInfo();
}
},
mounted() { mounted() {
// screenfull.toggle(this.$refs.mapbox); // screenfull.toggle(this.$refs.mapbox);
// this.$nextTick(() => { // this.$nextTick(() => {
// this.rotateBox(); // this.rotateBox();
// }); // });
if (!this.$route.params.buildingId) return;
this.copyRoom.buildingId = this.$route.params.buildingId; this.copyRoom.buildingId = this.$route.params.buildingId;
this.isViews = this.$route.params.isViews; this.isViews = this.$route.params.isViews;
this.getRoomInfo(); this.getRoomInfo();
...@@ -436,7 +409,7 @@ export default { ...@@ -436,7 +409,7 @@ export default {
}, },
getRoomInfo() { getRoomInfo() {
let data = { let data = {
floorId: this.$route.params.floorId ? this.$route.params.floorId : "18", floorId: this.$route.params.floorId || this.componentFloorId,
}; };
getFun("/ledger/room/list", data) getFun("/ledger/room/list", data)
.then((res) => { .then((res) => {
...@@ -848,11 +821,13 @@ export default { ...@@ -848,11 +821,13 @@ export default {
.router-view { .router-view {
padding-bottom: 0px !important; padding-bottom: 0px !important;
} }
.wrap { .wrap {
/* height: 100vh; */ /* height: 100vh; */
width: 105%; width: 105%;
position: relative; position: relative;
} }
.north { .north {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
...@@ -860,9 +835,11 @@ export default { ...@@ -860,9 +835,11 @@ export default {
right: 100px; right: 100px;
z-index: 999; z-index: 999;
} }
.north img { .north img {
width: 40px; width: 40px;
} }
.footer { .footer {
/* position: fixed; */ /* position: fixed; */
/* left: 0; */ /* left: 0; */
...@@ -870,6 +847,7 @@ export default { ...@@ -870,6 +847,7 @@ export default {
font-size: 0.3rem; font-size: 0.3rem;
font-weight: 600; font-weight: 600;
} }
.riskTab { .riskTab {
display: inline-block; display: inline-block;
width: 50px; width: 50px;
...@@ -877,18 +855,23 @@ export default { ...@@ -877,18 +855,23 @@ export default {
margin: 0 10px 0px 15px; margin: 0 10px 0px 15px;
border-radius: 5px; border-radius: 5px;
} }
.type1 { .type1 {
background-color: #ff4433; background-color: #ff4433;
} }
.type2 { .type2 {
background-color: #ff9800; background-color: #ff9800;
} }
.type3 { .type3 {
background-color: #ffff00; background-color: #ffff00;
} }
.type4 { .type4 {
background-color: #0091ea; background-color: #0091ea;
} }
.layoutJSON { .layoutJSON {
background: #ddd; background: #ddd;
border: 1px solid black; border: 1px solid black;
...@@ -916,28 +899,34 @@ export default { ...@@ -916,28 +899,34 @@ export default {
align-items: flex-start; align-items: flex-start;
/* flex-direction: column; */ /* flex-direction: column; */
} }
.setBtns .el-button--mini { .setBtns .el-button--mini {
padding: 0 10px; padding: 0 10px;
} }
.remove { .remove {
position: absolute; position: absolute;
right: 2px; right: 2px;
top: 0; top: 0;
cursor: pointer; cursor: pointer;
} }
::v-deep .el-dialog__header { ::v-deep .el-dialog__header {
padding-top: 15px !important; padding-top: 15px !important;
padding-bottom: 15px !important; padding-bottom: 15px !important;
} }
.vue-grid-item { .vue-grid-item {
-ms-touch-action: none; -ms-touch-action: none;
touch-action: none; touch-action: none;
box-sizing: border-box; box-sizing: border-box;
/* container-type: inline-size; */ /* container-type: inline-size; */
} }
.vue-grid-layout { .vue-grid-layout {
background: #f0f1f5; background: #f0f1f5;
} }
.vue-grid-item:not(.vue-grid-placeholder) { .vue-grid-item:not(.vue-grid-placeholder) {
background: #ccc; background: #ccc;
border: 1px solid black; border: 1px solid black;
...@@ -965,11 +954,13 @@ export default { ...@@ -965,11 +954,13 @@ export default {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.rowText { .rowText {
writing-mode: vertical-rl; writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;
font-size: 20px; font-size: 20px;
} }
.vue-grid-item .no-drag { .vue-grid-item .no-drag {
height: 100%; height: 100%;
width: 100%; width: 100%;
...@@ -989,8 +980,7 @@ export default { ...@@ -989,8 +980,7 @@ export default {
height: 20px; height: 20px;
top: 0; top: 0;
left: 0; left: 0;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
no-repeat;
background-position: bottom right; background-position: bottom right;
padding: 0 8px 8px 0; padding: 0 8px 8px 0;
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -998,6 +988,7 @@ export default { ...@@ -998,6 +988,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
} }
.header { .header {
width: 100%; width: 100%;
height: 1.2rem; height: 1.2rem;
...@@ -1008,11 +999,13 @@ export default { ...@@ -1008,11 +999,13 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.iconLeft { .iconLeft {
color: white; color: white;
font-size: 12px; font-size: 12px;
transform: scale(0.8); transform: scale(0.8);
} }
.header span { .header span {
color: white; color: white;
font-size: 16px; font-size: 16px;
...@@ -1020,11 +1013,13 @@ export default { ...@@ -1020,11 +1013,13 @@ export default {
margin: auto; margin: auto;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
} }
.iconRight { .iconRight {
color: white; color: white;
font-size: 12px; font-size: 12px;
transform: scale(0.8); transform: scale(0.8);
} }
.vdr { .vdr {
border-style: solid; border-style: solid;
} }
......
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