Skip to content

R
rongtong-pc
Commit 6b088b4c authored by p-wanping.song's avatar p-wanping.song
Browse files
Options

0906问题列表修复（隐藏默认筛选、项目管理添加经营状态）

parent 33810b3e
Hide whitespace changes
Inline Side-by-side
Showing with 1415 additions and 143 deletions
package.json
View file @ 6b088b4c
......@@ -37,10 +37,12 @@
},
"dependencies": {
"@riophae/vue-treeselect": "0.4.0",
"amfe-flexible": "^2.2.1",
"axios": "0.24.0",
"clipboard": "2.0.8",
"core-js": "3.25.3",
"echarts": "5.4.0",
"echarts-gl": "^2.0.9",
"element-ui": "2.15.13",
"file-saver": "2.0.5",
"fuse.js": "6.4.3",
......@@ -51,6 +53,7 @@
"jsencrypt": "3.0.0-rc.1",
"jspdf": "^2.5.1",
"nprogress": "0.2.0",
"postcss-pxtorem": "^5.1.1",
"quill": "1.3.7",
"screenfull": "5.0.2",
"sortablejs": "1.10.2",
......
src/App.vue
View file @ 6b088b4c
......@@ -11,14 +11,18 @@ import ThemePicker from "@/components/ThemePicker";
export default {
name: "App",
components: { ThemePicker },
metaInfo() {
return {
title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
titleTemplate: title => {
return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
}
}
}
metaInfo() {
return {
title:
this.$store.state.settings.dynamicTitle &&
this.$store.state.settings.title,
titleTemplate: (title) => {
return title
? `${title} - ${process.env.VUE_APP_TITLE}`
: process.env.VUE_APP_TITLE;
},
};
},
};
</script>
<style scoped>
......
src/components/RightToolbar/index.vue
View file @ 6b088b4c
<template>
<div class="top-right-btn" :style="style">
<el-row>
<el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
<el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
<el-tooltip
class="item"
effect="dark"
:content="showSearch ? '隐藏搜索' : '显示搜索'"
placement="top"
v-if="search"
>
<el-button
size="mini"
circle
icon="el-icon-search"
@click="toggleSearch()"
/>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="刷新" placement="top">
<el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
<el-button
size="mini"
circle
icon="el-icon-refresh"
@click="refresh()"
/>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
<el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
<el-tooltip
class="item"
effect="dark"
content="显隐列"
placement="top"
v-if="columns"
>
<el-button
size="mini"
circle
icon="el-icon-menu"
@click="showColumn()"
/>
</el-tooltip>
</el-row>
<el-dialog :title="title" :visible.sync="open" append-to-body>
......@@ -34,10 +61,11 @@ export default {
open: false,
};
},
props: {
showSearch: {
type: Boolean,
default: true,
default: false,
},
columns: {
type: Array,
......@@ -58,7 +86,7 @@ export default {
ret.marginRight = `${this.gutter / 2}px`;
}
return ret;
}
},
},
created() {
// 显隐列初始默认隐藏列
......@@ -68,6 +96,10 @@ export default {
}
}
},
mounted() {
// 默认关闭搜索
this.$emit("update:showSearch", false);
},
methods: {
// 搜索
toggleSearch() {
......
src/main.js
View file @ 6b088b4c
......@@ -13,6 +13,7 @@ import router from './router'
import directive from './directive' // directive
import plugins from './plugins' // plugins
import { download } from '@/utils/request'
import "amfe-flexible"
import './assets/icons' // icon
import './permission' // permission control
......
src/router/index.js
View file @ 6b088b4c
......@@ -30,6 +30,11 @@ import Layout from "@/layout";
// 公共路由
export const constantRoutes = [
{
path: "/map",
component: () => import('@/views/map.vue'),
hidden: true,
},
{
path: "/redirect",
component: Layout,
......@@ -41,6 +46,7 @@ export const constantRoutes = [
},
],
},
{
path: "/login",
component: () => import("@/views/login"),
......
src/views/ledger/project/index.vue
View file @ 6b088b4c
......@@ -78,6 +78,7 @@
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
type="primary"
......@@ -206,7 +207,7 @@
<!-- 添加或修改基础数据-项目对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form ref="form" :model="form" :rules="rules" label-width="84px">
<el-form-item label="项目名称" prop="name">
<el-input v-model="form.name" placeholder="请输入项目名称" />
</el-form-item>
......@@ -247,6 +248,15 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="经营状态" prop="businessStatus">
<el-radio-group v-model="form.businessStatus">
<el-radio label="自营">自营</el-radio>
<el-radio label="租赁">租赁</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="是否为物业" prop="propertyManagement">
<el-checkbox v-model="form.propertyManagement">备选项</el-checkbox>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
......@@ -316,7 +326,9 @@ export default {
status: null,
},
// 表单参数
form: {},
form: {
businessStatus: "",
},
// 表单校验
rules: {},
};
......
src/views/map.vue 0 → 100644
View file @ 6b088b4c
<template>
<div class="map-layout">
<div class="map-header">
<div class="map-header-center">
<div class="map-header-center-title">融通地产危险源辨识系统</div>
<div class="map-header-center-tip">
Rongtong Real Estate Hazard Identification System
</div>
</div>
</div>
<div class="map-content">
<div class="map-content-left">
<map-item-container title="评估数据统计">
<div ref="leftTop" style="width: 100%; height: 100%"></div>
</map-item-container>
<map-item-container title="评估数据统计">
<mapTable />
</map-item-container>
<map-item-container title="评估数据统计">
<echartMap />
</map-item-container>
</div>
<div ref="myEchart" class="echart-instance"></div>
<div class="map-content-right">
<map-item-container title="事故类型统计">
<div
v-for="item in 10"
:key="item"
:style="randomCircle()"
class="map-circle-item"
></div>
</map-item-container>
</div>
</div>
<div class="map-footer"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";
import echartMap from "./pie.vue";
import echartMap2 from "./pie2.vue";
import { mapTable, mapItemContainer } from "@/views/map/index.js";
export default {
name: "echarts",
components: {
echartMap,
echartMap2,
mapTable,
mapItemContainer,
},
data() {
return {
name: 100000,
myMap: null,
mapData: [],
};
},
mounted() {
this.myMap = echarts.init(this.$refs.myEchart);
this.initMap();
this.initListeners();
this.initEcharts();
},
methods: {
randomCircle() {
const w = parseInt(Math.random() * 160 - 100);
let r = Math.floor(Math.random() * 256); //0-255.999999
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
return {
width: w + "px",
height: w + "px",
backgroundColor: `rgba(${r},${g},${b},0.4)`,
};
},
initMap(code = 100000) {
if (code != this.name) {
this.myMap.clear();
}
this.name = code == 100000 ? "china" : code + "";
axios
.get(
`https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${code}_full`
)
.then((geoJson) => {
if (!geoJson.data) {
return;
}
echarts.registerMap(this.name, { geoJSON: geoJson.data });
this.mapData = geoJson.data.features;
this.myMap.setOption(
{
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)",
// opacity: 0.6,
shadowColor: "rgba(0, 0, 0, 1)",
shadowBlur: 1,
},
},
],
},
{
notMerge: true,
}
);
});
},
initListeners() {
const _this = this;
this.myMap.on("click", "series.map3D", function (params) {
const selectData = _this.mapData.find(
(x) => x.properties.name == params.name
);
if (selectData) {
_this.initMap(selectData.properties.adcode);
}
});
},
initEcharts() {
this.myLeft = echarts.init(this.$refs.leftTop);
this.myLeft.setOption({
series: [
{
name: "Pressure",
type: "gauge",
progress: {
show: true,
},
detail: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
},
axisLabel: {
show: false,
},
pointer: {
icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
width: 1,
length: "80%",
offsetCenter: [0, "8%"],
},
anchor: {
show: true,
showAbove: true,
size: 8,
color: "green",
itemStyle: {
borderWidth: 2,
},
},
data: [
{
value: 50,
},
],
},
],
});
},
resetEcharts() {},
map2d() {
this.myMap.setOption({
geo: {
map: "china",
label: {
show: true,
textStyle: {
color: "#fff",
fontSize: 10,
},
},
itemStyle: {
borderWidth: 2,
borderColor: "#2cb0e2",
color: "#1f7fad",
color: "rgba(0, 0, 0, 0.3)",
opacity: 0.6,
shadowColor: "rgba(0, 0, 0, 1)",
shadowBlur: 1,
},
emphasis: {
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,
},
},
},
});
},
},
};
</script>
<style lang="scss" scoped>
.map-layout {
width: 100%;
height: 100%;
background: #000;
background: url("../assets/map/bg.png") no-repeat;
background-size: 100% 100%;
.map-header {
height: 83px;
z-index: 10;
color: #fff;
padding: 5px 16px;
background: url("../assets/map/top.png") no-repeat;
background-size: 100% 100%;
box-shadow: border-box;
&-center {
text-align: center;
&-title {
text-shadow: 0px 0px 10px rgba(21, 203, 249, 1);
font-weight: 700;
font-size: 24px;
}
&-tip {
font-family: "微软雅黑", sans-serif;
font-size: 16px;
color: rgba(215, 215, 215, 0.4);
}
}
}
.map-footer {
background: url("../assets/map/bottom.png") no-repeat;
background-size: 100% 100%;
height: 44px;
}
.map-content {
width: 100%;
height: calc(100% - 128px);
&-left,
&-right {
width: 25%;
height: 100%;
float: left;
position: relative;
}
&-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;
}
}
.echart-instance {
width: 50%;
height: 100%;
margin: 0 auto;
float: left;
}
.map-circle-item {
border-radius: 50%;
}
}
::-webkit-scrollbar {
display: none;
}
</style>
src/views/map/index.js 0 → 100644
View file @ 6b088b4c
export { default as mapItemContainer } from './map-item-container.vue';
export { default as mapTable } from './map-table.vue';
\ No newline at end of file
src/views/map/map-item-container.vue 0 → 100644
View file @ 6b088b4c
<template>
<div class="map-content-item">
<div class="map-content-title">{{ title }}</div>
<div class="map-content-inner">
<slot />
</div>
</div>
</template>
<script>
export default {
props: {
title: String,
},
};
</script>
<style lang="scss" scoped>
.map-content-item {
width: 100%;
height: 35%;
overflow: hidden;
padding-left: 30px;
.map-content-inner {
height: 100%;
padding: 10px;
}
.map-content-title {
width: 100%;
height: 40px;
background: url("../../assets/map/title.png") no-repeat;
background-size: 100% 100%;
font-size: 19px;
color: #fff;
padding-left: 64px;
font-weight: 500;
}
}
</style>
\ No newline at end of file
src/views/map/map-table.vue 0 → 100644
View file @ 6b088b4c
<template>
<div class="map-table-container" ref="mapTableContainer">
<ul class="map-table-list" ref="mapTableList">
<li class="map-table-list-item" v-for="item in 10" :key="item">
<div class="serial">{{ item }}</div>
<div class="name">高德大厦</div>
<div class="province">广东区域</div>
<div class="city">珠海市</div>
<div class="num">22</div>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
mapTableListHeight: 0,
mapTableContainerHeight: 0,
h: 0,
};
},
mounted() {
this.getHeight();
this.compareH();
},
methods: {
// 获取map-table-list的高度
getHeight() {
// 获取map-table-list的高度
let mapTableContainer = this.$refs.mapTableContainer;
this.mapTableContainerHeight = mapTableContainer.offsetHeight;
},
// 比较map-table-list高度
compareH() {
let mapTableList = this.$refs.mapTableList;
this.mapTableListHeight = mapTableList.offsetHeight;
if (this.mapTableContainerHeight < this.mapTableListHeight) {
console.log(this.mapTableContainerHeight, this.mapTableListHeight);
// 添加定时器滚动map-table-list-item
setInterval(() => {
this.h -= 25;
if (Math.abs(this.h) > this.mapTableListHeight) {
this.h = 0;
}
this.$refs.mapTableList.style.transform = `translateY(${this.h}px) `;
}, 1500);
}
},
},
};
</script>
<style lang="scss" scoped>
.map-table-container {
height: 100%;
overflow: auto;
}
.map-table-list {
transition: all 1s;
&-item {
display: flex;
height: 30px;
margin-bottom: 5px;
line-height: 30px;
color: #fff;
text-align: center;
background: linear-gradient(
180deg,
rgba(0, 102, 153, 1) 0%,
rgba(0, 102, 153, 1) 17%,
rgba(9, 60, 106, 1) 100%,
rgba(9, 60, 106, 1) 100%
);
.serial {
width: 40px;
height: 100%;
position: relative;
text-align: center;
background: #2a719d;
color: #fff;
font-weight: bold;
font-size: 16px;
&::after {
position: absolute;
right: -14px;
top: 0;
content: "";
display: block;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 16px solid #2a719d;
}
}
.name {
width: 30%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 18px;
}
.province,
.city,
.num {
width: 20%;
}
.province {
color: #02a7f0;
}
// #FFEA00
.city {
color: #ffea00;
}
.num {
color: rgba(217, 0, 27, 0.9);
font-size: 12px;
}
}
&-item:hover {
background: rgba(255, 166, 0, 0.802);
color: #000;
.province,
.city {
color: #000;
}
.serial {
background: linear-gradient(#ff6048 0%, #ff7346 100%);
&::after {
border-left-color: #ff7346;
}
}
}
}
</style>
\ No newline at end of file
src/views/pie.vue 0 → 100644
View file @ 6b088b4c
<template>
<div ref="myEchart" style="width: 100%; height: 180px"></div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl";
export default {
data() {
return {
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.myMap = echarts.init(this.$refs.myEchart);
this.myMap.setOption(this.getPie3D(this.chartData, 0.71));
},
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: 16,
},
rich: {
align: "center",
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;
},
},
};
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/views/pie2.vue 0 → 100644
View file @ 6b088b4c
<template>
<div ref="myEchart" style="width: 100%; height: 180px"></div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl";
export default {
data() {
return {
pieChart: [
{
name: "a",
value: 25,
itemStyle: {
color: "#00d8ff",
},
},
{
name: "b",
value: 5,
itemStyle: {
color: "#018ef1",
},
},
{
name: "c",
value: 4,
itemStyle: {
color: "#f8bc87",
},
},
{
name: "d",
value: 3,
itemStyle: {
color: "#ffa130",
},
},
{
name: "e",
value: 2,
itemStyle: {
color: "#c23531",
},
},
{
name: "f",
value: 1,
itemStyle: {
color: "#fd5d48",
},
},
],
};
},
mounted() {
// this.getPie3D(this.pieChart, 0.59);
this.myMap = echarts.init(this.$refs.myEchart);
this.myMap.setOption(this.getPie3D(this.pieChart, 0.71));
},
methods: {
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k) {
// 计算
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);
}
return Math.sin(v) > 0 ? 1 : -1;
},
};
},
// 生成模拟 3D 饼图的配置项
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,
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;
}
series.push(seriesItem);
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
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 = this.getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
true,
false,
1
);
startValue = endValue;
legendData.push(series[i].name);
}
// 补充一个透明的圆环，用于支撑高亮功能的近似实现。
series.push({
name: "mouseoutSeries",
type: "surface",
parametric: true,
wireframe: {
show: false,
},
itemStyle: {
opacity: 1,
color: "rgba(18,236,252,.5)",
},
parametricEquation: {
u: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
v: {
min: 0,
max: Math.PI,
step: Math.PI / 1.4,
},
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;
},
},
});
// 准备待返回的配置项，把准备好的 legendData、series 传入。
let option = {
//animation: false,
legend: {
show: true,
data: legendData,
},
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.value}`;
}
},
},
xAxis3D: {
min: -1.3,
max: 1.3,
},
yAxis3D: {
min: -1.3,
max: 1.3,
},
zAxis3D: {
min: -1.3,
max: 1.3,
},
grid3D: {
show: false,
boxHeight: 10,
// top: '30%',
left: "0",
bottom: "50%",
viewControl: {
//3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 20,
// beta: 40,
rotateSensitivity: 0,
zoomSensitivity: 0,
panSensitivity: 0,
autoRotate: true,
// autoRotateSpeed: 5,
// autoRotateAfterStill: 10
},
},
series: series,
};
return option;
},
},
// 传入数据生成 option
};
</script>
<style lang="scss" scoped></style>
src/views/risk/existing/index.vue
View file @ 6b088b4c
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="110px">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="110px"
>
<el-form-item label="危险源名称" prop="hazardSourceName">
<el-input
v-model="queryParams.hazardSourceName"
......@@ -11,134 +18,139 @@
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button
type="primary"
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>
<el-table v-loading="loading" :data="inherentList" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center">
<el-table
v-loading="loading"
:data="inherentList"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
align="center"
fixed="left"
/>
<!-- <el-table-column label="序号" align="center">
<template slot-scope="scope">
<span>{{ scope.$index + 1 }}</span>
</template>
</el-table-column> -->
<el-table-column
label="风险名称"
align="center"
prop="name"
fixed="left"
/>
<el-table-column label="所属建筑" align="center" prop="buildingName">
<template slot-scope="scope">
<el-popover
placement="top-start"
title="所属建筑"
width="200"
trigger="hover"
:content="scope.row.buildingName"
>
<span slot="reference">{{
scope.row.buildingName.length > 10
? scope.row.buildingName.substring(0, 10) + "..."
: scope.row.buildingName
}}</span>
</el-popover>
</template>
</el-table-column>
<el-table-column label="风险名称" align="center" prop="name" />
<el-table-column label="所属建筑" align="center" prop="buildingName" >
<template slot-scope="scope">
<el-popover
placement="top-start"
title="所属建筑"
width="200"
trigger="hover"
:content="scope.row.buildingName"
>
<span slot="reference">{{
scope.row.buildingName.length > 10
? scope.row.buildingName.substring(0, 10) + "..."
: scope.row.buildingName
}}</span>
</el-popover>
</template>
</el-table-column>
<el-table-column label="所属楼层" align="center" prop="floorName" />
<el-table-column
label="所属楼层"
align="center"
prop="floorName"
/>
<el-table-column
label="所属房间"
align="center"
prop="roomName"
/>
<el-table-column
label="风险等级（系数）"
align="center"
prop="level"
/>
<el-table-column label="风险因素" align="center" prop="factor" >
<template slot-scope="scope">
<el-popover
placement="top-start"
title="风险因素"
width="200"
trigger="hover"
:content="scope.row.factor"
>
<span slot="reference">{{
scope.row.factor.length > 10
? scope.row.factor.substring(0, 10) + "..."
: scope.row.factor
}}</span>
</el-popover>
</template>
</el-table-column>
<el-table-column label="准事故类型" align="center" prop="type">
<template slot-scope="scope">
<el-popover
placement="top-start"
title="准事故类型"
width="200"
trigger="hover"
:content="scope.row.type"
>
<span slot="reference">{{
scope.row.type.length > 10
? scope.row.type.substring(0, 10) + "..."
: scope.row.type
}}</span>
</el-popover>
</template>
</el-table-column>
<el-table-column
label="存在部位"
align="center"
prop="presenceLocation"
> <template slot-scope="scope">
<el-popover
placement="top-start"
title="存在部位"
width="200"
trigger="hover"
:content="scope.row.presenceLocation"
>
<span slot="reference">{{
scope.row.presenceLocation.length > 10
? scope.row.presenceLocation.substring(0, 10) + "..."
: scope.row.presenceLocation
}}</span>
</el-popover>
</template>
</el-table-column>
<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-column label="所属房间" align="center" prop="roomName" />
<el-table-column label="风险等级（系数）" align="center" prop="level" />
<el-table-column label="风险因素" align="center" prop="factor">
<template slot-scope="scope">
<el-popover
placement="top-start"
title="风险因素"
width="200"
trigger="hover"
:content="scope.row.factor"
>
<span slot="reference">{{
scope.row.factor.length > 10
? scope.row.factor.substring(0, 10) + "..."
: scope.row.factor
}}</span>
</el-popover>
</template>
</el-table-column>
<el-table-column label="准事故类型" align="center" prop="type">
<template slot-scope="scope">
<el-popover
placement="top-start"
title="准事故类型"
width="200"
trigger="hover"
:content="scope.row.type"
>
<span slot="reference">{{
scope.row.type.length > 10
? scope.row.type.substring(0, 10) + "..."
: scope.row.type
}}</span>
</el-popover>
</template>
</el-table-column>
<el-table-column label="存在部位" align="center" prop="presenceLocation">
<template slot-scope="scope">
<el-popover
placement="top-start"
title="存在部位"
width="200"
trigger="hover"
:content="scope.row.presenceLocation"
>
<span slot="reference">{{
scope.row.presenceLocation.length > 10
? scope.row.presenceLocation.substring(0, 10) + "..."
: scope.row.presenceLocation
}}</span>
</el-popover>
</template>
</el-table-column>
<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"
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
......@@ -194,8 +206,7 @@ export default {
// 表单参数
form: {},
// 表单校验
rules: {
}
rules: {},
};
},
created() {
......@@ -205,7 +216,7 @@ export default {
/** 查询固有风险清单库列表 */
getList() {
this.loading = true;
listList(this.queryParams).then(response => {
listList(this.queryParams).then((response) => {
this.inherentList = response.rows;
this.total = response.total;
this.loading = false;
......@@ -252,7 +263,7 @@ export default {
createTime: null,
updateBy: null,
updateTime: null,
remark: null
remark: null,
};
this.resetForm("form");
},
......@@ -268,9 +279,9 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
exportList(id) {
this.download("system/risk/plan/exportWord/riskNotification/" + id, {});
......@@ -283,6 +294,6 @@ export default {
},
});
},
}
},
};
</script>
vue.config.js
View file @ 6b088b4c
"use strict";
const path = require("path");
const pxtorem = require('postcss-pxtorem')
function resolve(dir) {
return path.join(__dirname, dir);
......@@ -35,8 +36,8 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: "http://192.168.10.137:8080/",
// target: `http://192.168.4.232:8080`, //服务器地址
// target: "http://192.168.10.137:8080/",
target: `http://192.168.4.232:8080`, //服务器地址
// target: `http://192.168.15.230:8081`, //晓晋本地地址
changeOrigin: true,
pathRewrite: {
......@@ -51,6 +52,15 @@ module.exports = {
sass: {
sassOptions: { outputStyle: "expanded" },
},
postcss: {
plugins: [
pxtorem({
rootValue: 192,//这个尺寸可以根据自己的图去配置，这里配置的是宽度375的图（如果用了vant插件）
propList: ['*'],
exclude: /(element-ui|node_modules)/
})
]
}
},
},
configureWebpack: {
......@@ -126,10 +136,10 @@ module.exports = {
});
config.optimization.runtimeChunk("single"),
{
from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
to: "./", //到根目录下
};
{
from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
to: "./", //到根目录下
};
});
},
};
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