Skip to content

W
whp-xl
Commit ede73aa5 authored by yaqizhang's avatar yaqizhang
Browse files
Options

大屏

parent 6c16b6f3
Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 25 deletions
dcit-hcsystem-hcsystem-master/src/views/Enterprises/demo.vue
View file @ ede73aa5
......@@ -189,7 +189,7 @@ export default {
padding: 30px;
}
.el-main .el-tabs .el-tabs__content{
background-image: url(gif.gif);
background-image: url(bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
/* height: 100%; */
......
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue
View file @ ede73aa5
......@@ -4,28 +4,13 @@
<!-- <Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search> -->
<!-- <DrawTool :MAP="MAP" v-if="mapLoadDone"></DrawTool> -->
<!-- <div style="width:200px;height:250px;" class="show-box" > -->
<button @click="Mutil.tianSlA()">切换1</button>
<button @click="Mutil.tianSlB()">切换2</button>
<button @click="Mutil.tianSlC()">切换3</button>
<dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" >
<div class="markBox">
<ul>
<div class="ul-div"><li><img width="15px" src="@/assets/mark/markqy.png" /> 注册企业 <span>{{tjNumberObj.enterpriseRegNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/weixianyuan.png" /> 危险源 <span>{{tjNumberObj.dangerNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/jiankong.png" /> 监控监测点<span>{{tjNumberObj.cameraNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/weihaichangsuo.png" /> 职业危害场所<span>2</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/yinhuan.png" /> 隐患<span>0</span></li></div>
</ul>
<div style="position:absolute;left:500px;top:10px">
<button @click="Mutil.tianSlA()" class="map-botton">切换1</button>
<button @click="Mutil.tianSlB()" class="map-botton">切换2</button>
<button @click="Mutil.tianSlC()" class="map-botton">切换3</button>
</div>
</dv-border-box-10>
</div>
......@@ -41,7 +26,39 @@
<div class="rb"></div>
<div class="lb"></div>
</div>
</div> -->
</div> -->
<div style="">
<div style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.4);position: absolute;top: 0;left: 10px;float: left;">
<div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
<!-- <div id="pieReport" style="width: 400px;height: 300px;background-color: rgba(2, 20, 44, 0.4)"></div> -->
</div>
<div style="width: 500px;height: 100%;z-index: 12;background-color: rgba(0, 0, 0, 0.3);position: absolute;top: 0;right: 10px;float: right">
<!-- <dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" >
<div class="markBox">
<ul>
<div class="ul-div"><li><img width="15px" src="@/assets/mark/markqy.png" /> 注册企业 <span>{{tjNumberObj.enterpriseRegNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/weixianyuan.png" /> 危险源 <span>{{tjNumberObj.dangerNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/jiankong.png" /> 监控监测点<span>{{tjNumberObj.cameraNum}}</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/weihaichangsuo.png" /> 职业危害场所<span>2</span></li></div>
</ul>
<ul>
<div class="ul-div"><li><img width="20px" src="@/assets/mark/yinhuan.png" /> 隐患<span>0</span></li></div>
</ul>
</div>
</dv-border-box-10></div> -->
<div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
</div>
</div>
</div>
</template>
......@@ -60,6 +77,13 @@ import "@/utils/VamapLoad.ts";
import DrawTool from "@/components/drawTool.vue";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";
let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import METHOD from "@/utils/methods";
@Component({
components: {
DrawTool,
......@@ -67,6 +91,17 @@ import Mutil from "@/utils/mapUtil.js";
},
})
export default class GIS extends Vue {
data() {
return {
charts: "",
opinion: ["及格人数", "未及格人数"],
opinionData: [
{ value: 12, name: "及格人数", itemStyle: "#1ab394" },
{ value: 18, name: "未及格人数", itemStyle: "#79d2c0" }
]
};
}
@Provide() Mutil: any;
@Provide() mapLoadDone = false;
@Provide() MAP: any;
......@@ -262,6 +297,9 @@ export default class GIS extends Vue {
})
this.getStatiData();
this.Mutil.changeCenter("石家庄");
// this.$nextTick(function() {
// this.drawPie("pieReport");
// });
}
getStatiData() {
let that = this;
......@@ -290,7 +328,7 @@ export default class GIS extends Vue {
}
);
}
// tianSlA() {
// console.log("dfsddddddddddddddddddddddddddddddddd")
......@@ -315,6 +353,22 @@ export default class GIS extends Vue {
<style lang="scss">
@import "@/utils/public.scss";
.map-botton{
width: 100px;
height: 50px;
outline: none;
z-index: 10;
position:absolute;
}
.map-botton:nth-child(1){
left:50px;
}
.map-botton:nth-child(2){
left:160px;
}
.map-botton:nth-child(3){
left:270px;
}
/* // .BoxWrap{
// width: 200px;
// height: 200px;
......@@ -368,7 +422,7 @@ export default class GIS extends Vue {
.markBox {
width: 100%;
z-index: 9;
z-index: 12;
ul {
.ul-div{
margin-left: -30px;
......@@ -404,4 +458,8 @@ export default class GIS extends Vue {
top: 14px;
left: 80px;
}
.ol-zoom {
top: .5em;
left: 500px !important;
}
</style>
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