|
@@ -44,27 +44,213 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="mpBoxTitle">
|
|
|
+ <div class="mpBoxTitleBox">
|
|
|
+ <div class="titleText">
|
|
|
+ 动态数据看板
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="border"></div>
|
|
|
+ </div>
|
|
|
+ <div class="mapBox">
|
|
|
+ <div class="sjkb_box">
|
|
|
+ <div class="sjkb_frame">
|
|
|
+ <!-- 数据 -->
|
|
|
+ <baidu-map class="bm-view" @zoomend="zoomendChange" @ready="init" :min-zoom="5" :max-zoom="18">
|
|
|
+ <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
|
|
|
+ <bm-copyright
|
|
|
+ anchor="BMAP_ANCHOR_TOP_RIGHT"
|
|
|
+ :copyright="[
|
|
|
+ { id: 1, content: 'Copyright Message', bounds: { ne: { lng: 110, lat: 40 }, sw: { lng: 0, lat: 0 } } },
|
|
|
+ { id: 2, content: '<a>添利节能科技有限公司</a>' }
|
|
|
+ ]"
|
|
|
+ ></bm-copyright>
|
|
|
+ <bm-marker
|
|
|
+ class="bm-marker"
|
|
|
+ v-for="(item, index) in companyList"
|
|
|
+ :key="index"
|
|
|
+ :position="{
|
|
|
+ lng: item.longtitude,
|
|
|
+ lat: item.lattitude
|
|
|
+ }"
|
|
|
+ @click="infoWindowOpen(item)"
|
|
|
+ >
|
|
|
+ <bm-label v-if="zoomActive >= 15" :content="item.name" :labelStyle="item.style" :offset="item.textType" />
|
|
|
+ <my-overlay :position="{ lng: item.longtitude, lat: item.lattitude - 0.003 }" :item="item" v-if="item.alertShow == true"></my-overlay>
|
|
|
+ </bm-marker>
|
|
|
+ </baidu-map>
|
|
|
+
|
|
|
+ <div class="sjkb_wrap">
|
|
|
+ <div class="sjkb_item">
|
|
|
+ <el-image class="iconMapTop" :src="require('@/assets/img/info001.png')" fit="cover"></el-image>
|
|
|
+ <div class="shebeitji_box">
|
|
|
+ <span class="sjkb_title">合作企业(家)</span>
|
|
|
+ <div class="sjkb_content">
|
|
|
+ <span class="sjkb_now">{{ machineList.machine_company_num || '0' }}</span>
|
|
|
+ <!-- <el-image class="" :src="require('@/assets/index_up.png')" fit="cover"></el-image>
|
|
|
+ <span class="sjkb_upNum">0</span> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sjkb_item">
|
|
|
+ <el-image class="iconMapTop" :src="require('@/assets/img/info003.png')" fit="cover"></el-image>
|
|
|
+ <div class="shebeitji_box">
|
|
|
+ <span class="sjkb_title">经济效益(万元)</span>
|
|
|
+ <div class="sjkb_content">
|
|
|
+ <span class="sjkb_now">{{ parseFloat(machineList.machine_save_money / 10000).toFixed(2) || '0' }}</span>
|
|
|
+ <!-- <el-image class="" :src="require('@/assets/index_up.png')" fit="cover"></el-image>
|
|
|
+ <span class="sjkb_upNum">0</span> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sjkb_item">
|
|
|
+ <el-image class="iconMapTop" :src="require('@/assets/img/info002.png')" fit="cover"></el-image>
|
|
|
+ <div class="shebeitji_box">
|
|
|
+ <span class="sjkb_title">用水总量(万吨)</span>
|
|
|
+ <div class="sjkb_content">
|
|
|
+ <span class="sjkb_now">{{ parseFloat(machineList.machine_use_water / 10000).toFixed(2) || '0' }}</span>
|
|
|
+ <!-- <el-image class="" :src="require('@/assets/rili.png')" fit="cover"></el-image>
|
|
|
+ <span class="sjkb_upNum">{{ machineList.machine_use_time_max }}</span> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sjkb_item">
|
|
|
+ <el-image class="iconMapTop" :src="require('@/assets/img/info002.png')" fit="cover"></el-image>
|
|
|
+ <div class="shebeitji_box">
|
|
|
+ <span class="sjkb_title">节水总量(万吨)</span>
|
|
|
+ <div class="sjkb_content">
|
|
|
+ <span class="sjkb_now">{{ parseFloat(machineList.machine_save_water / 10000).toFixed(2) || '0' }}</span>
|
|
|
+ <!-- <el-image class="" :src="require('@/assets/rili.png')" fit="cover"></el-image>
|
|
|
+ <span class="sjkb_upNum">{{ machineList.machine_use_time_max }}</span> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import ItemTitle from './homeChild/ItemTitle.vue';
|
|
|
-
|
|
|
+import { loadIndexs, aboutList, machine, companies, formBaoCun } from '@/api/index';
|
|
|
+import MyOverlay from '@/components/MyOverlay.vue';
|
|
|
export default {
|
|
|
components: {
|
|
|
- ItemTitle
|
|
|
+ ItemTitle,
|
|
|
+ MyOverlay
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
openNews: [],
|
|
|
redNews: [],
|
|
|
- showNew: [{}, {}]
|
|
|
+ showNew: [{}, {}],
|
|
|
+ map: null, //保存地图
|
|
|
+ // 公司列表
|
|
|
+ companyList: [],
|
|
|
+ // 默认层级
|
|
|
+ zoomActive: 12,
|
|
|
+ machineList: {} // 设备总体信息
|
|
|
};
|
|
|
},
|
|
|
filters: {},
|
|
|
computed: {},
|
|
|
- created() {},
|
|
|
- methods: {}
|
|
|
+ created() {
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 加载初始数据
|
|
|
+ loadData(){
|
|
|
+ companies().then(e => {
|
|
|
+ this.companyList = e.data.map(e => {
|
|
|
+ // 初始化弹窗显示隐藏
|
|
|
+ e.alertShow = false;
|
|
|
+ // e.lattitude = 28.243198;
|
|
|
+ // e.longtitude = 121.279239;
|
|
|
+ // 设置文字样式
|
|
|
+ e.textType = {
|
|
|
+ width: -((e.name.length / 2) * 10),
|
|
|
+ height: 30
|
|
|
+ };
|
|
|
+ e.data = {};
|
|
|
+ e.style = {
|
|
|
+ background: 'none',
|
|
|
+ color: '#333333',
|
|
|
+ fontSize: '10px',
|
|
|
+ border: 'none'
|
|
|
+ };
|
|
|
+ return e;
|
|
|
+ });
|
|
|
+ this.setCompanyData();
|
|
|
+ })
|
|
|
+ machine({}, 0).then(res => {
|
|
|
+ this.machineList = res.data;
|
|
|
+ console.log(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 保存处理公司数据
|
|
|
+ setCompanyData() {
|
|
|
+ let obj = this;
|
|
|
+ console.log(this.companyList, 55);
|
|
|
+ for (let i = 0; i < this.companyList.length; i++) {
|
|
|
+ let data = this.companyList[i];
|
|
|
+ setTimeout(() => {
|
|
|
+ obj.getData(data.id)
|
|
|
+ .then(e => {
|
|
|
+ data.data = e.data;
|
|
|
+ data.data.machine_name = data.name;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ }, 100 * i);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取单个公司数据
|
|
|
+ getData(machineid) {
|
|
|
+ return new Promise((ok, err) => {
|
|
|
+ machine({}, machineid)
|
|
|
+ .then(e => {
|
|
|
+ ok(e);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ err(e);
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /* 设置弹窗 */
|
|
|
+ zoomendChange(type) {
|
|
|
+ const obj = this;
|
|
|
+ obj.zoomActive = type.target.getZoom();
|
|
|
+ // if (obj.zoomActive >= 15) {
|
|
|
+ // for(let i=0; i< obj.companyList.length; i++) {
|
|
|
+ // obj.companyList[i].alertShow = true;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ if (obj.zoomActive <= 10) {
|
|
|
+ for (let i = 0; i < obj.companyList.length; i++) {
|
|
|
+ obj.companyList[i].alertShow = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 显示数据
|
|
|
+ infoWindowOpen(item) {
|
|
|
+ item.alertShow = true;
|
|
|
+ },
|
|
|
+ // 初始化地图
|
|
|
+ init({ BMap, map }) {
|
|
|
+ this.map = map;
|
|
|
+ // 初始化地图,设置中心点坐标
|
|
|
+ var point = new BMap.Point(121.434817, 28.653649);
|
|
|
+ map.centerAndZoom(point, this.zoomActive);
|
|
|
+ // this.setMarker();
|
|
|
+ // 添加鼠标滚动缩放
|
|
|
+ map.enableScrollWheelZoom();
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -124,10 +310,10 @@ export default {
|
|
|
bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
- .case{
|
|
|
+ .case {
|
|
|
width: 33%;
|
|
|
height: 450px;
|
|
|
- background: #FFFFFF;
|
|
|
+ background: #ffffff;
|
|
|
margin-left: 20px;
|
|
|
}
|
|
|
.news {
|
|
@@ -194,4 +380,137 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+// 地图样式
|
|
|
+.mpBoxTitle{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 50px;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 30px;
|
|
|
+ .border{
|
|
|
+ height: 1px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #E0E2E4;
|
|
|
+ }
|
|
|
+ .mpBoxTitleBox{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .titleText{
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ font-size: 26px;
|
|
|
+ padding: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.mapBox{
|
|
|
+ position: relative;
|
|
|
+ padding-top: 33.33%;
|
|
|
+ margin: 15px;
|
|
|
+}
|
|
|
+.sjkb_box {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ .sjkb_frame {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ // 地图
|
|
|
+ .bm-view {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ // 数据
|
|
|
+ .sjkb_wrap {
|
|
|
+ position: absolute;
|
|
|
+ top: 40px;
|
|
|
+ left: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .sjkb_item {
|
|
|
+ padding: 10px;
|
|
|
+ margin-right: 15px;
|
|
|
+ line-height: 1;
|
|
|
+ background: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ &:last-of-type {
|
|
|
+ margin-right: 0;
|
|
|
+ // padding-right: 20px;
|
|
|
+ }
|
|
|
+ .iconMapTop{
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ // align-items: center;
|
|
|
+ .shebeitji_box {
|
|
|
+ padding-right: 20px;
|
|
|
+ padding-top: 8px;
|
|
|
+ // border-right: 1px solid #f0f0f0;
|
|
|
+ text-align: left;
|
|
|
+ .sjkb_title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #101010;
|
|
|
+ }
|
|
|
+ .sjkb_content {
|
|
|
+ text-align: left;
|
|
|
+ .sjkb_now {
|
|
|
+ font-size: 40px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #101010;
|
|
|
+ }
|
|
|
+ .sjkb_upNum {
|
|
|
+ margin-left: 3px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #101010;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sbtj_tongji {
|
|
|
+ padding: 0 70px 10px 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ .sbtj_shuju {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #101010;
|
|
|
+ .sbtj_dian {
|
|
|
+ margin-right: 3px;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .lanse {
|
|
|
+ background: #1890ff;
|
|
|
+ }
|
|
|
+ .hongse {
|
|
|
+ background: #f25657;
|
|
|
+ }
|
|
|
+ .huise {
|
|
|
+ background: #eeeeee;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|