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 @@ ...@@ -6,6 +6,7 @@
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"dev": "vue-cli-service serve", "dev": "vue-cli-service serve",
"serve": "vue-cli-service serve",
"build:prod": "vue-cli-service build", "build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging", "build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview", "preview": "node build/index.js --preview",
......
src/views/ledger/project/index.vue
View file @ dfa102a0
...@@ -255,7 +255,10 @@ ...@@ -255,7 +255,10 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="是否为物业" prop="propertyManagement"> <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-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
......
src/views/map.vue
View file @ dfa102a0
...@@ -10,28 +10,51 @@ ...@@ -10,28 +10,51 @@
</div> </div>
<div class="map-content"> <div class="map-content">
<div class="map-content-left"> <div class="map-content-left">
<div class="map-content-left-wrap">
<map-item-container title="评估数据统计"> <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>
<map-item-container title="评估数据统计"> <map-item-container title="项目风险排名">
<mapTable /> <mapTable />
</map-item-container> </map-item-container>
<map-item-container title="评估数据统计"> <map-item-container title="项目风险排名">
<echartMap /> <div ref="bar" style="width: 100%; height: 100%"></div>
</map-item-container> </map-item-container>
</div> </div>
</div>
<div ref="myEchart" class="echart-instance"></div> <div ref="myEchart" class="echart-instance"></div>
<div class="map-content-right"> <div class="map-content-right">
<div class="map-content-right-wrap">
<map-item-container title="风险级别统计">
<echartMap />
</map-item-container>
<map-item-container title="事故类型统计"> <map-item-container title="事故类型统计">
<div style="columns: 4">
<div <div
v-for="item in 10" v-for="item in 10"
:key="item" :key="item"
:style="randomCircle()" :style="randomCircle()"
class="map-circle-item" 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> </map-item-container>
</div> </div>
</div> </div>
</div>
<div class="map-footer"></div> <div class="map-footer"></div>
</div> </div>
...@@ -57,6 +80,7 @@ export default { ...@@ -57,6 +80,7 @@ export default {
name: 100000, name: 100000,
myMap: null, myMap: null,
mapData: [], mapData: [],
myTopLeft: [],
}; };
}, },
mounted() { mounted() {
...@@ -67,7 +91,7 @@ export default { ...@@ -67,7 +91,7 @@ export default {
}, },
methods: { methods: {
randomCircle() { 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 r = Math.floor(Math.random() * 256); //0-255.999999
let g = Math.floor(Math.random() * 256); let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256); let b = Math.floor(Math.random() * 256);
...@@ -75,6 +99,7 @@ export default { ...@@ -75,6 +99,7 @@ export default {
width: w + "px", width: w + "px",
height: w + "px", height: w + "px",
backgroundColor: `rgba(${r},${g},${b},0.4)`, backgroundColor: `rgba(${r},${g},${b},0.4)`,
color: `rgb(${r},${g},${b})`,
}; };
}, },
initMap(code = 100000) { initMap(code = 100000) {
...@@ -143,15 +168,14 @@ export default { ...@@ -143,15 +168,14 @@ export default {
}); });
}, },
initEcharts() { 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: [ series: [
{ {
name: "Pressure", name: "Pressure",
type: "gauge", type: "gauge",
progress: {
show: true,
},
detail: { detail: {
show: false, show: false,
}, },
...@@ -161,35 +185,193 @@ export default { ...@@ -161,35 +185,193 @@ export default {
splitLine: { splitLine: {
show: false, show: false,
}, },
axisLine: {
show: true,
},
axisLabel: { axisLabel: {
show: false, show: false,
}, },
pointer: { 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", 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, width: 1,
length: "80%", length: "100%",
offsetCenter: [0, "8%"], offsetCenter: [0, "8%"],
itemStyle: {
color: "rgba(255, 252, 57,0.6)",
},
}, },
anchor: { anchor: {
show: true, show: true,
showAbove: true, showAbove: true,
size: 8, size: 8,
color: "green",
itemStyle: { itemStyle: {
borderWidth: 2, 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: [ 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() {}, resetEcharts() {},
map2d() { map2d() {
...@@ -304,6 +486,14 @@ export default { ...@@ -304,6 +486,14 @@ export default {
right: 0; right: 0;
left: auto; left: auto;
} }
&-left-wrap {
margin-left: 20px;
height: 100%;
}
&-right-wrap {
margin-right: 40px;
height: 100%;
}
} }
.echart-instance { .echart-instance {
...@@ -314,10 +504,55 @@ export default { ...@@ -314,10 +504,55 @@ export default {
} }
.map-circle-item { .map-circle-item {
border-radius: 50%; 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 { ::-webkit-scrollbar {
display: none; 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> </style>
src/views/map/map-item-container.vue
View file @ dfa102a0
...@@ -18,12 +18,13 @@ export default { ...@@ -18,12 +18,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.map-content-item { .map-content-item {
width: 100%; width: 100%;
height: 35%; height: 34%;
overflow: hidden; overflow: hidden;
padding-left: 30px;
.map-content-inner { .map-content-inner {
height: 100%; height: 100%;
padding: 10px; padding: 10px;
text-align: center;
padding-left: 30px;
} }
.map-content-title { .map-content-title {
......
src/views/map/map-table.vue
View file @ dfa102a0
...@@ -59,6 +59,8 @@ export default { ...@@ -59,6 +59,8 @@ export default {
} }
.map-table-list { .map-table-list {
transition: all 1s; transition: all 1s;
margin: 0;
padding: 0;
&-item { &-item {
display: flex; display: flex;
height: 30px; 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