Skip to content

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

业态添加经营状态

parent c5504a91
Expand all Show whitespace changes
Inline Side-by-side
Showing with 948 additions and 480 deletions
package.json
View file @ dfa102a0
......@@ -6,6 +6,7 @@
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve",
"serve": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
......
src/views/ledger/project/index.vue
View file @ dfa102a0
......@@ -255,7 +255,10 @@
</el-radio-group>
</el-form-item>
<el-form-item label="是否为物业" prop="propertyManagement">
<el-checkbox v-model="form.propertyManagement">备选项</el-checkbox>
<el-radio-group v-model="form.propertyManagement">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
......
src/views/map.vue
View file @ dfa102a0
......@@ -10,28 +10,51 @@
</div>
<div class="map-content">
<div class="map-content-left">
<div class="map-content-left-wrap">
<map-item-container title="评估数据统计">
<div ref="leftTop" style="width: 100%; height: 100%"></div>
<div
v-for="item in 3"
:key="item"
style="width: 30%; display: inline-block"
class="content-assess-item"
>
<div class="content-assess-title">评估项目</div>
<div :id="'leftTop' + item" style="height: 100%"></div>
</div>
</map-item-container>
<map-item-container title="评估数据统计">
<map-item-container title="项目风险排名">
<mapTable />
</map-item-container>
<map-item-container title="评估数据统计">
<echartMap />
<map-item-container title="项目风险排名">
<div ref="bar" style="width: 100%; height: 100%"></div>
</map-item-container>
</div>
</div>
<div ref="myEchart" class="echart-instance"></div>
<div class="map-content-right">
<div class="map-content-right-wrap">
<map-item-container title="风险级别统计">
<echartMap />
</map-item-container>
<map-item-container title="事故类型统计">
<div style="columns: 4">
<div
v-for="item in 10"
:key="item"
:style="randomCircle()"
class="map-circle-item"
></div>
>
<div>物体打击</div>
<div>1455</div>
</div>
</div>
</map-item-container>
<map-item-container title="项目风险排名">
<div ref="bar1" style="width: 100%; height: 100%"></div>
</map-item-container>
</div>
</div>
</div>
<div class="map-footer"></div>
</div>
......@@ -57,6 +80,7 @@ export default {
name: 100000,
myMap: null,
mapData: [],
myTopLeft: [],
};
},
mounted() {
......@@ -67,7 +91,7 @@ export default {
},
methods: {
randomCircle() {
const w = parseInt(Math.random() * 160 - 100);
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);
......@@ -75,6 +99,7 @@ export default {
width: w + "px",
height: w + "px",
backgroundColor: `rgba(${r},${g},${b},0.4)`,
color: `rgb(${r},${g},${b})`,
};
},
initMap(code = 100000) {
......@@ -143,15 +168,14 @@ export default {
});
},
initEcharts() {
this.myLeft = echarts.init(this.$refs.leftTop);
this.myLeft.setOption({
// 评估数据统计
for (let i = 1; i <= 3; i++) {
const echart = echarts.init(document.getElementById("leftTop" + i));
echart.setOption({
series: [
{
name: "Pressure",
type: "gauge",
progress: {
show: true,
},
detail: {
show: false,
},
......@@ -161,35 +185,193 @@ export default {
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%",
length: "100%",
offsetCenter: [0, "8%"],
itemStyle: {
color: "rgba(255, 252, 57,0.6)",
},
},
anchor: {
show: true,
showAbove: true,
size: 8,
color: "green",
itemStyle: {
borderWidth: 2,
borderColor: "rgba(255, 252, 57,0.6)",
},
},
axisLine: {
show: true,
lineStyle: {
opacity: 0.1,
},
},
progress: {
show: true,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgba(164, 190, 203,0.6)", // 0% 处的颜色
},
{
offset: 0.5,
color: "rgba(1,179,227,0.6)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(67,243,203,0.6)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
data: [
{
value: 50,
value: i * 30,
},
],
},
],
});
this.myTopLeft.push(echart);
}
// 风险类型统计
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],
[1, 17, 4],
[1, 16, 7],
[1, 1, 3],
[1, 13, 4],
[1, 8, 11],
[1, 20, 3],
[0, 16, 14],
[0, 10, 2],
[0, 6, 0],
[0, 3, 12],
[0, 20, 16],
];
const option = {
visualMap: {
show: false,
max: 20,
inRange: {
color: [
"#313695",
"#4575b4",
"#74add1",
"#abd9e9",
"#e0f3f8",
"#ffffbf",
"#fee090",
"#fdae61",
"#f46d43",
"#d73027",
"#a50026",
],
},
},
xAxis3D: {
type: "category",
data: hours,
},
yAxis3D: {
type: "value",
},
zAxis3D: {
type: "value",
},
grid3D: {
boxWidth: 150,
boxHeight: 80,
boxDepth: 90,
viewControl: {
alpha: 15,
beta: 0,
},
axisLine: {
lineStyle: { color: "rgba(255,255,255,0.3)" },
},
light: {
main: {
shadow: true,
quality: "ultra",
intensity: 1.5,
},
},
},
series: [
{
type: "bar3D",
data: data.map(function (item) {
return {
value: [item[1], item[0], item[2]],
};
}),
shading: "color",
label: {
show: false,
fontSize: 16,
borderWidth: 1,
},
itemStyle: {
opacity: 0.8,
},
emphasis: {
label: {
fontSize: 20,
color: "#900",
},
itemStyle: {
color: "#900",
},
},
},
],
};
bar.setOption(option);
bar1.setOption(option);
},
resetEcharts() {},
map2d() {
......@@ -304,6 +486,14 @@ export default {
right: 0;
left: auto;
}
&-left-wrap {
margin-left: 20px;
height: 100%;
}
&-right-wrap {
margin-right: 40px;
height: 100%;
}
}
.echart-instance {
......@@ -314,10 +504,55 @@ export default {
}
.map-circle-item {
border-radius: 50%;
animation: circleAnimation 0.5s infinite;
margin: 10px;
break-inside: avoid;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.map-circle-item:nth-of-type(2n) {
animation: circleAnimation 0.4s infinite;
}
.map-circle-item:nth-of-type(2n + 1) {
animation: circleAnimation 0.3s infinite;
}
.map-circle-item:last-child {
animation: circleAnimation 0.6s infinite;
}
}
@keyframes circleAnimation {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
::-webkit-scrollbar {
display: none;
}
// 评估数据
.content-assess-item {
display: inline-block;
width: 40%;
.content-assess-title {
height: 60px;
width: 100%;
background: url("../assets/map/content-assess-title.png") center center;
background-size: 100% 100%;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: bold;
}
}
</style>
src/views/map/map-item-container.vue
View file @ dfa102a0
......@@ -18,12 +18,13 @@ export default {
<style lang="scss" scoped>
.map-content-item {
width: 100%;
height: 35%;
height: 34%;
overflow: hidden;
padding-left: 30px;
.map-content-inner {
height: 100%;
padding: 10px;
text-align: center;
padding-left: 30px;
}
.map-content-title {
......
src/views/map/map-table.vue
View file @ dfa102a0
......@@ -59,6 +59,8 @@ export default {
}
.map-table-list {
transition: all 1s;
margin: 0;
padding: 0;
&-item {
display: flex;
height: 30px;
......
src/views/risk/plan/index.vue
View file @ dfa102a0
This diff is collapsed.
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