-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
@@ -86,26 +226,67 @@ import Chart from "./chart.vue";
// import io from 'socket.io-client'
import BasicBox5 from "@/components/BasicBox5";
import axios from "axios";
-import {getHomePageInfo} from "@/api/api";
-import mqtt from 'mqtt'
+import { getHomePageInfo } from "@/api/api";
+import mqtt from "mqtt";
// let socketRefs = '';
export default {
mixins: [drawMixin],
data() {
return {
- totalCustomer:'',//客户总数
- totalTransformationSite:'',//主要总数
- popShow:false,
- leftInfodata:[
- {pic:require('@/assets/newbanImg/biandianzhan.png'),num:'',text:'变电站总数',unit:'座',name:'totalSite'},
- {pic:require('@/assets/newbanImg/daibangongdan.png'),num:'',text:"代办工单总数",unit:'条',name:'workOrder'},
- {pic:require('@/assets/newbanImg/jinggao.png'),num:'',text:"告警总数",unit:'条',name:'warningNum'},
+ qujiIconShow: false, //区级图标显示
+ jiangsuMapShow: true, //江苏地图显示
+ shijiIconShow: false, //市级图标降落
+ nanjingIconShow: false, // 南京动效图标显示
+ nanjingsekuai: true, //南京色块显示
+ totalCustomer: "", //客户总数
+ totalTransformationSite: "", //主要总数
+ popShow: false,
+ leftInfodata: [
+ {
+ pic: require("@/assets/newbanImg/biandianzhan.png"),
+ num: "",
+ text: "变电站总数",
+ unit: "座",
+ name: "totalSite",
+ },
+ {
+ pic: require("@/assets/newbanImg/daibangongdan.png"),
+ num: "",
+ text: "代办工单总数",
+ unit: "条",
+ name: "workOrder",
+ },
+ {
+ pic: require("@/assets/newbanImg/jinggao.png"),
+ num: "",
+ text: "告警总数",
+ unit: "条",
+ name: "warningNum",
+ },
],
- rightInfodata:[
- {pic:require('@/assets/newbanImg/zhuyao.png'),num:'',text:'主要总容量',unit:'kVA',name:'transformationCapacity'},
- {pic:require('@/assets/newbanImg/shishifuhe.png'),num:'',text:"实时负荷",unit:'kW',name:'realTimeLoad'},
- {pic:require('@/assets/newbanImg/zuori.png'),num:'',text:"昨日总电量",unit:'kWh',name:'yesterdayTotalElectricity'},
+ rightInfodata: [
+ {
+ pic: require("@/assets/newbanImg/zhuyao.png"),
+ num: "",
+ text: "主要总容量",
+ unit: "kVA",
+ name: "transformationCapacity",
+ },
+ {
+ pic: require("@/assets/newbanImg/shishifuhe.png"),
+ num: "",
+ text: "实时负荷",
+ unit: "kW",
+ name: "realTimeLoad",
+ },
+ {
+ pic: require("@/assets/newbanImg/zuori.png"),
+ num: "",
+ text: "昨日总电量",
+ unit: "kWh",
+ name: "yesterdayTotalElectricity",
+ },
],
Visible: false,
basicInfoShow: true,
@@ -130,7 +311,7 @@ export default {
// header:['规划用途', '南京数量', '南京占比'],
data: [],
},
- zhengjiang: {
+ zhenjiang: {
header: ["规划用途", "全省数量", "全省占比"],
data: [],
},
@@ -176,7 +357,7 @@ export default {
count: 1,
},
],
- zhengjiang: [
+ zhenjiang: [
{
name: "规划阶段",
count: 62,
@@ -198,7 +379,7 @@ export default {
resourcesList: [],
centerListData: {
nanjing: [],
- zhengjiang: [],
+ zhenjiang: [],
},
centerList: [
{
@@ -290,7 +471,8 @@ export default {
jdNameNew: "",
itemViewM: "",
photoPathsM: [],
- searchShow:true
+ searchShow: true,
+ leftNum : []
};
},
@@ -304,64 +486,64 @@ export default {
Chart,
},
computed: {
- // query() {
- // return this.socketData
- // },
- // 'socketRefs': function(){
- // return this.firstname + '-' + this.lastname
- // }
},
-
mounted() {
// this.getDataByMqtt(
// "ws://175.24.235.243:8083/mqtt",
// "tra_topic"
// );
- this.cancelLoading();
- // this.initWebSocket();
- // window.addEventListener("message", this.handleMessage);
- this.go("nanjing");
- // this.type=this.params.type
- // this.getJdData(this.params.type)
- // this.workListData = this.workList
let that = this;
- window.addEventListener('message', function (e) {
- var res = e.data;
- if (res.params != null) {
- that.searchShow = false
- }
- })
-
- window.setInterval(()=>{
- getHomePageInfo({
- }).then((res)=>{
- this.totalCustomer = res.data.data.totalCustomer
- this.totalTransformationSite = res.data.data.totalTransformationSite
- let realTimeLoad = res.data.data.realTimeLoad.toString();
- let realData = realTimeLoad.substring(0,realTimeLoad.indexOf(".")+3)
- for(var key in res.data.data){
- for (let i = 0; i < this.leftInfodata.length; i++) {
- if (key == this.leftInfodata[i].name) {
- this.leftInfodata[i].num = res.data.data[key]
- }
- }
- for (let i = 0; i < this.rightInfodata.length; i++) {
- if (key == this.rightInfodata[i].name) {
- this.rightInfodata[i].num = res.data.data[key]
- this.rightInfodata[1].num = realData
- }
- }
- }
- })
- },3000)
- this.leftInfodata.forEach((item,index) => {
- if (index != null) {
- this.leftInitEcharts('echarts' + index)
+ window.addEventListener("message", function (e) {
+ var res = e.data;
+ if (res.params != null) {
+ that.searchShow = false;
}
});
- this.rightInfodata.forEach((item,index) => {
+ //市级图标降落
+ window.setTimeout(() => {
+ that.shijiIconShow = true;
+ }, 1600);
+ //南京市图标动效显示
+ window.setTimeout(() => {
+ that.nanjingIconShow = true;
+ }, 2600);
+ window.setInterval(() => {
+ getHomePageInfo({}).then((res) => {
+ that.leftNum = []
+ console.log(res.data.data,'数据');
+ that.totalCustomer = res.data.data.totalCustomer;
+ that.totalTransformationSite = res.data.data.totalTransformationSite;
+ let realTimeLoad = res.data.data.realTimeLoad.toString();
+ let realData = realTimeLoad.substring(0, realTimeLoad.indexOf(".") + 3);
+ for (var key in res.data.data) {
+ for (let i = 0; i < that.leftInfodata.length; i++) {
+ if (key == that.leftInfodata[i].name) {
+ that.leftInfodata[i].num = res.data.data[key];
+ that.leftNum.push(that.leftInfodata[i].num)
+ }
+ }
+ for (let i = 0; i < that.rightInfodata.length; i++) {
+ if (key == that.rightInfodata[i].name) {
+ that.rightInfodata[i].num = res.data.data[key];
+ that.rightInfodata[1].num = realData;
+ }
+ }
+ }
+ });
+ }, 3000);
+ that.leftInfodata.forEach((item, index) => {
+ if (index == 0) {
+ that.leftInitEcharts("echarts" + index,that.leftNum[0]);
+ }else if (index == 1) {
+ that.leftInitEcharts("echarts" + index,that.leftNum[1]);
+ }else if (index == 2) {
+ that.leftInitEcharts("echarts" + index,that.leftNum[2]);
+ }
+ });
+
+ this.rightInfodata.forEach((item, index) => {
if (index != null) {
- this.rightInitEcharts('rightEcharts' + index)
+ this.rightInitEcharts("rightEcharts" + index);
}
});
},
@@ -377,158 +559,178 @@ export default {
},
},
methods: {
- leftInitEcharts(id){
- console.log(id,'id');
- var imageUrl = '';
- if (id == 'echarts0') {
- imageUrl = '/newbanImg/biandianzhan.png'
- }else if (id == 'echarts1') {
- imageUrl = '/newbanImg/daibangongdan.png'
- }else if (id == 'echarts2') {
- imageUrl = '/newbanImg/jinggao.png'
+ //南京区域移入操作
+ regionMouseEnter() {
+ this.nanjingsekuai = false;
+ },
+ //南京区域移出操作
+ regionMouseLeave() {
+ this.nanjingsekuai = true;
+ },
+ //切换南京地图
+ switchNanJing() {
+ this.jiangsuMapShow = false;
+ this.shijiIconShow = false;
+ window.setTimeout(() => {
+ this.qujiIconShow = true;
+ }, 1600);
+ },
+ leftInitEcharts(id,echartsData) {
+ let data = [];
+ var imageUrl = "";
+ if (id == "echarts0") {
+ imageUrl = "/newbanImg/biandianzhan.png";
+ } else if (id == "echarts1") {
+ imageUrl = "/newbanImg/daibangongdan.png";
+ } else if (id == "echarts2") {
+ imageUrl = "/newbanImg/jinggao.png";
}
var myChart = this.$echarts.init(document.getElementById(id));
var option = {
- angleAxis: {
- max: 100,
- // 隐藏刻度线
- show: false,
- startAngle: 90
- },
- radiusAxis: {
- type: 'category',
- show: true,
- axisLabel: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false
- },
- },
- polar: {
- radius: '100%' //图形大小
- },
- graphic: {
- elements:[
- {
- type: 'image',
- left: 'center',
- top: 'middle',
- style: {
- image: imageUrl,
- width: 25,
- height: 25,
- }
- }
- ]
+ angleAxis: {
+ max: 100,
+ // 隐藏刻度线
+ show: false,
+ startAngle: 90,
+ },
+ radiusAxis: {
+ type: "category",
+ show: true,
+ axisLabel: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ polar: {
+ radius: "100%", //图形大小
+ },
+ graphic: {
+ elements: [
+ {
+ type: "image",
+ left: "center",
+ top: "middle",
+ style: {
+ image: imageUrl,
+ width: 25,
+ height: 25,
+ },
+ },
+ ],
+ },
+ series: [
+ {
+ type: "bar",
+ data: ['56.77'],
+ showBackground: true,
+ roundCap: true,
+ // backgroundStyle: {
+ // color: 'rgba(64, 76, 76, 1)',
+ // },
+ coordinateSystem: "polar",
+ barWidth: 2,
+ itemStyle: {
+ normal: {
+ color: "rgb(24,234,253)",
+ },
},
- series: [{
- type: 'bar',
- data: ['56.77'],
- showBackground: true,
- roundCap: true,
- // backgroundStyle: {
- // color: 'rgba(64, 76, 76, 1)',
- // },
- coordinateSystem: 'polar',
- barWidth: 2,
- itemStyle: {
- normal: {
- color: 'rgb(24,234,253)'
- }
},
- }]
- }
- myChart.setOption(option);
+ ]
+
+ };
+ myChart.setOption(option);
},
- rightInitEcharts(id){
- console.log(id,'id');
- var imageUrl = '';
- if (id == 'rightEcharts0') {
- imageUrl = '/newbanImg/zhuyao.png'
- }else if (id == 'rightEcharts1') {
- imageUrl = '/newbanImg/shishifuhe.png'
- }else if (id == 'rightEcharts2') {
- imageUrl = '/newbanImg/zuori.png'
+ rightInitEcharts(id) {
+ var imageUrl = "";
+ if (id == "rightEcharts0") {
+ imageUrl = "/newbanImg/zhuyao.png";
+ } else if (id == "rightEcharts1") {
+ imageUrl = "/newbanImg/shishifuhe.png";
+ } else if (id == "rightEcharts2") {
+ imageUrl = "/newbanImg/zuori.png";
}
var myChart = this.$echarts.init(document.getElementById(id));
var option = {
- angleAxis: {
- max: 100,
- // 隐藏刻度线
- show: false,
- startAngle: 90
- },
- radiusAxis: {
- type: 'category',
- show: true,
- axisLabel: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false
- },
- },
- polar: {
- radius: '100%' //图形大小
- },
- graphic: {
- elements:[
- {
- type: 'image',
- left: 'center',
- top: 'middle',
- style: {
- image: imageUrl,
- width: 25,
- height: 25,
- }
- }
- ]
- },
- series: [{
- type: 'bar',
- data: ['56.77'],
- showBackground: true,
- roundCap: true,
- // backgroundStyle: {
- // color: 'rgba(64, 76, 76, 1)',
- // },
- coordinateSystem: 'polar',
- barWidth: 2,
- itemStyle: {
- normal: {
- color: 'rgb(24,234,253)'
- }
- },
- }]
- }
- myChart.setOption(option);
+ angleAxis: {
+ max: 100,
+ // 隐藏刻度线
+ show: false,
+ startAngle: 90,
+ },
+ radiusAxis: {
+ type: "category",
+ show: true,
+ axisLabel: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ polar: {
+ radius: "100%", //图形大小
+ },
+ graphic: {
+ elements: [
+ {
+ type: "image",
+ left: "center",
+ top: "middle",
+ style: {
+ image: imageUrl,
+ width: 25,
+ height: 25,
+ },
+ },
+ ],
+ },
+ series: [
+ {
+ type: "bar",
+ data: ["56.77"],
+ showBackground: true,
+ roundCap: true,
+ // backgroundStyle: {
+ // color: 'rgba(64, 76, 76, 1)',
+ // },
+ coordinateSystem: "polar",
+ barWidth: 2,
+ itemStyle: {
+ normal: {
+ color: "rgb(24,234,253)",
+ },
+ },
+ },
+ ],
+ };
+ myChart.setOption(option);
},
- intoMain(){
+ intoMain() {
this.$router.push("landChildren");
},
- popInfor(){
- // // 鼠标在盒子内移动后盒子变粉
- this.popShow = true
+ popInfor() {
+ // // 鼠标在盒子内移动后盒子变粉
+ this.popShow = true;
},
- popInforLeave(){
- this.popShow = false
+ popInforLeave() {
+ this.popShow = false;
},
guid() {
- return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
- var r = Math.random() * 16 | 0,
- v = c == 'x' ? r : (r & 0x3 | 0x8);
- return v.toString(16);
- });
+ return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+ var r = (Math.random() * 16) | 0,
+ v = c == "x" ? r : (r & 0x3) | 0x8;
+ return v.toString(16);
+ });
},
- // mqtt订阅（独立）
+ // mqtt订阅（独立）
getDataByMqtt(url, topic) {
const clientId = this.guid(); // 用户名
const host = url; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
@@ -573,8 +775,8 @@ export default {
// console.log(
// );
// 订阅
- this.mqttClient.subscribe(topic, { qos: 2});
- console.log("[MQTT-TEST] 连接回调....");
+ this.mqttClient.subscribe(topic, { qos: 2 });
+ console.log("[MQTT-TEST] 连接回调....");
});
// 接收回调
this.mqttClient.on("message", (topic, message, packet) => {
@@ -584,411 +786,17 @@ export default {
// 解析后端数据
let dataReceived = JSON.parse(message.toString());
// this.infodata[4].num = dataReceived.realTimeLoad
- console.log(dataReceived.realTimeLoad,'dataReceived');
+ console.log(dataReceived.realTimeLoad, "dataReceived");
});
}
-
- },
- go(val) {
- if (val == "nanjing") {
- this.nanj = false;
- this.landC = true;
- // console.log("")
- this.imgList = this.imgListData.nanjing;
- // this.centerList = this.centerListData.nanjing
- this.config = this.configData.nanjing.data;
- this.resourcesList = this.resourcesListData.nanjing;
- this.levelConfig.data = this.levelConfigData.nanjing.data;
- // this.$forceUpdate();
- // this.cancelLoading();
- } else if (val == "landChild") {
- this.$router.push("/landChild");
- this.landC = false;
- }
},
show: function () {
this.leftOpen = true;
this.rightOpen = true;
this.basicInfoShow = true;
},
- //获取基地数据
- getJdData(val) {
- axios
- .get("/json/qqData.json")
- .then((result) => {
- for (var i = 0; i < result.data.length; i++) {
- if (result.data[i].jd == this.params.params) {
- this.workListqq[0].value = result.data[i].qq;
- }
- }
- })
- .catch((error) => {
- console.log(error);
- });
- if (val == "不动产") {
- // this.tit="土地证信息"
- this.workListData = [];
- axios
- .get("/json/jdData.json")
- .then((result) => {
- console.log("getMenuData111", result.data);
- for (var i = 0; i < result.data.length; i++) {
- if (result.data[i].jd == this.params.params) {
- console.log("result.data[i]", result.data[i]);
- // this.workList.push(result.data[i])
- this.workListData.push(result.data[i]);
- this.changeWorkListBdc(result.data[i]);
- this.changeWorkList(result.data[i]);
- }
- }
- })
- .catch((error) => {
- console.log(error);
- });
- } else if (val == "土地证") {
- // this.tit="土地证信息"
- this.workListData = [];
- this.fczShow = true;
- axios
- .get("/json/tdData.json")
- .then((result) => {
- console.log("getMenuData111", result.data);
- console.log("this.params.params", this.params.params);
- for (var i = 0; i < result.data.length; i++) {
- if (result.data[i].jd == this.params.params) {
- console.log("result.data[i]", result.data[i]);
- this.workListData.push(result.data[i]);
- this.changeWorkListTd(result.data[i]);
- this.changeWorkList(result.data[i]);
- }
- }
- })
- .catch((error) => {
- console.log(error);
- });
- this.workListDatafcz = [];
- axios
- .get("/json/fczData.json")
- .then((result) => {
- console.log("getMenuData111", result.data);
- for (var i = 0; i < result.data.length; i++) {
- if (result.data[i].jd == this.params.params) {
- console.log("result.data[i]", result.data[i]);
- this.workListDatafcz.push(result.data[i]);
- this.changeWorkListfcz(result.data[i]);
- // this.changeWorkList(result.data[i])
- }
- }
- })
- .catch((error) => {
- console.log(error);
- });
- } else {
- this.workListData = [];
- this.fczShow = true;
- axios
- .get("/json/jdData.json")
- .then((result) => {
- console.log("getMenuData111", result.data);
- for (var i = 0; i < result.data.length; i++) {
- if (result.data[i].jd == this.params.params) {
- this.changeWorkListBdc(result.data[i]);
- }
- }
- })
- .catch((error) => {
- console.log(error);
- });
- axios
- .get("/json/tdData.json")
- .then((result) => {
- console.log("getMenuData111", result.data);
- console.log("this.params.params", this.params.params);
- for (var i = 0; i < result.data.length; i++) {
- if (result.data[i].jd == this.params.params) {
- console.log("result.data[i]", result.data[i]);
- this.workListData.push(result.data[i]);
- this.changeWorkListTd(result.data[i]);
- this.changeWorkList(result.data[i]);
- }
- }
- })
- .catch((error) => {
- console.log(error);
- });
- this.workListDatafcz = [];
- axios
- .get("/json/fczData.json")
- .then((result) => {
- console.log("getMenuData111", result.data);
- for (var i = 0; i < result.data.length; i++) {
- if (result.data[i].jd == this.params.params) {
- console.log("result.data[i]", result.data[i]);
- this.workListDatafcz.push(result.data[i]);
- this.changeWorkListfcz(result.data[i]);
- // this.changeWorkList(result.data[i])
- }
- }
- })
- .catch((error) => {
- console.log(error);
- });
- }
- },
- getMain() {
- this.$router.push({
- name: "landChild",
- params: { id: this.params.params, type: this.params.type },
- });
- },
- //建筑物信息
- changeWorkList(data) {
- var entries = Object.entries(data);
- var list = entries.map(function (item) {
- return {
- value: item[1],
- name: item[0],
- };
- });
- for (var i = 0; i < list.length; i++) {
- for (var t = 0; t < this.workList.length; t++) {
- if (list[i].name == this.workList[t].name) {
- this.workList[t].value = list[i].value;
- }
- }
- }
- this.workListData = this.workList;
- },
- //不动产
- changeWorkListBdc(data) {
- // this.workListBdc=[]
- var entries = Object.entries(data);
- var list = entries.map(function (item) {
- return {
- value: item[1],
- name: item[0],
- };
- });
- for (var i = 0; i < list.length; i++) {
- for (var t = 0; t < this.workListBdc.length; t++) {
- if (list[i].name == this.workListBdc[t].name) {
- this.workListBdc[t].value = list[i].value;
- }
- }
- }
- // this.workListData = this.workListBdc
- },
- //土地证
- changeWorkListTd(data) {
- console.log("data", data);
- var entries = Object.entries(data);
- var list = entries.map(function (item) {
- return {
- value: item[1],
- name: item[0],
- };
- });
- for (var i = 0; i < list.length; i++) {
- for (var t = 0; t < this.workListNew.length; t++) {
- if (list[i].name == this.workListNew[t].name) {
- this.workListNew[t].value = list[i].value;
- }
- }
- }
- this.workListData = this.workListNew;
- },
- //房产证
- changeWorkListfcz(data) {
- var entries = Object.entries(data);
- var list = entries.map(function (item) {
- return {
- value: item[1],
- name: item[0],
- };
- });
- for (var i = 0; i < list.length; i++) {
- for (var t = 0; t < this.workListFCZ.length; t++) {
- if (list[i].name == this.workListFCZ[t].name) {
- this.workListFCZ[t].value = list[i].value;
- }
- }
- }
- // this.workListData = this.workListFCZ
- },
- //获取地图参数
- getFromIframe(value) {
- this.tit = "建筑物信息";
- (this.workListBdc = [
- // { key: "建筑物名称", value: "",name:"jd" },
- // { key: "坐落地址", value: "",name:"tudi" },
- { key: "不动产证号", value: "", name: "bdczh" },
- { key: "权力性质", value: "", name: "qlxz" },
- { key: "用途", value: "", name: "yt" },
- { key: "宗地面积", value: "", name: "zdmj" },
- { key: "建筑面积", value: "", name: "jzmj" },
- { key: "权利人", value: "", name: "qlr" },
- // { key: "共有情况", value: "",name:"gyqk" },
- // { key: "坐落", value: "" ,name:"zl"},
- // { key: "不动产单元号", value: "" ,name:"bdcdyh"},
- // { key: "权力类型", value: "" ,name:"qllx"},
- // { key: "使用期限", value: "" ,name:"syqx"},
- // { key: "房屋结构", value: "" ,name:"fwjg"},
- // { key: "房屋总层数", value: "" ,name:"fwzcs"},
- // { key: "所在层数", value: "" ,name:"szcs"},
- // { key: "丘权号", value: "" ,name:"qqh"},
- // { key: "来源", value: "" ,name:"ly"},
- ]),
- (this.workListNew = [
- // { key: "建筑物名称", value: "",name:"jd" },
- // { key: "坐落地址", value: "",name:"tudi" },
- { key: "土地证号", value: "", name: "tdzh" },
- { key: "权力性质", value: "", name: "syqlx" },
- { key: "土地用途", value: "", name: "dlyt" },
- { key: "土地面积", value: "", name: "tdmj" },
- { key: "权利人", value: "", name: "tdsyqr" },
- // { key: "共有情况", value: "",name:"gyqk" },
- // { key: "坐落", value: "",name:"zl" },
- // { key: "地号", value: "" ,name:"dh"},
-
- // { key: "图号", value: "" ,name:"th"},
-
- // { key: "使用权面积", value: "",name:"syqmj" },
- // { key: "终止日期", value: "" ,name:"zzrq"},
- ]),
- (this.workListFCZ = [
- // { key: "建筑物名称", value: "",name:"jd" },
- // { key: "坐落地址", value: "",name:"tudi" },
- // { key: "房产证号", value: "" ,name:"fczh"},
- // { key: "房产使用权人", value: "",name:"fwsyqr" },
- // { key: "坐落", value: "",name:"zl" },
- // { key: "房屋用途", value: "" ,name:"fwcb"},
- // { key: "结构", value: "",name:"jg" },
- // { key: "房屋总层数", value: "",name:"fwzcs" },
- // { key: "面积", value: "" ,name:"jzmj"},
- // { key: "面积", value: "" ,name:"cqly"},
- { key: "房产证号", value: "", name: "fczh" },
- { key: "房屋产别", value: "", name: "fwcb" },
- { key: "房屋用途", value: "", name: "fwyt" },
- { key: "房屋面积", value: "", name: "jzmj" },
- { key: "房产使用权人", value: "", name: "fwsyqr" },
- ]),
- (this.activeColor = -1);
- this.workListqq = [{ key: "确权信息", value: "", name: "qq" }];
- this.params = value;
- if (this.params.type == "不动产") {
- this.centerList = [
- {
- title: "不动产权证信息",
- count: 0,
- imgUrl: require("@/assets/landRes/bdc.png"),
- },
- {
- title: "确权情况",
- count: 0,
- imgUrl: require("@/assets/landRes/qq.png"),
- },
- {
- title: "证件查看",
- count: 0,
- imgUrl: require("@/assets/landRes/fdc.png"),
- },
- ];
- } else if (this.params.type == "土地证") {
- this.centerList = [
- {
- title: "土地证信息",
- count: "无",
- imgUrl: require("@/assets/landRes/tdz.png"),
- },
- {
- title: "房产证信息",
- count: 0,
- imgUrl: require("@/assets/landRes/fdc.png"),
- },
- {
- title: "确权情况",
- count: 0,
- imgUrl: require("@/assets/landRes/qq.png"),
- },
- {
- title: "证件查看",
- count: 0,
- imgUrl: require("@/assets/landRes/bdc.png"),
- },
- ];
- }
- this.getJdData(this.params.type);
- this.leftOpen = false;
- this.rightOpen = false;
- this.Visible = false;
- this.basicInfoShow = true;
- },
-
- //菜单跳转
- btn(val, index) {
- if (val != "证件查看") {
- this.tit = val;
- }
-
- this.Visible = false;
- this.basicInfoShow = true;
- this.activeColor = index;
- if (val == "不动产权证信息") {
- this.workListData = this.workListBdc;
- this.rightOpen = false;
- } else if (val == "土地证信息") {
- this.workListData = this.workListNew;
- this.rightOpen = false;
- } else if (val == "房产证信息") {
- this.workListData = this.workListFCZ;
- this.rightOpen = false;
- } else if (val == "确权情况") {
- console.log("this.workListqq", this.workListqq);
- this.workListData = this.workListqq;
- this.rightOpen = false;
- }
- },
-
- search(data) {
- console.log("data", data);
- this.Visible = true;
- this.basicInfoShow = false;
- this.rightOpen = false;
- this.$nextTick(() => {
- //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
- //init调用的是dialog-component组件里面的init方法
- //data是传递给弹窗页面的值
- this.$refs.dialog.init(data);
- });
- },
- //关闭查询弹框
- getClose() {
- this.Visible = false;
- this.rightOpen = true;
- this.basicInfoShow = true;
- },
- getjdName(val) {
- this.jdNameNew = val;
- },
- getjdNameClick(val) {
- console.log("val", val);
- this.$router.push({
- name: "landChild",
- params: { id: val.jd, type: val.type },
- });
- },
- goPage(val) {
- if (val == 0) {
- console.log("返回房地资源-主场景");
- // this.$router.push("/land");
- this.$router.push("/");
- }
- },
- cancelLoading() {
- setTimeout(() => {
- this.loading = false;
- }, 500);
- },
+
+
/**
* 动态传输城市名称
* @param event
@@ -1006,7 +814,6 @@ export default {
window["vueDefinedMyProp"] = (build) => {
this.build();
};
- window.getFromIframe = this.getFromIframe;
window.show = this.show;
},
};
@@ -1032,15 +839,15 @@ export default {
background-image: url("../../assets/bt-02.png");
cursor: pointer;
}
-.bg{
+.bg {
height: 1920px;
width: 1080px;
background: url("../../assets/newbanImg/mapBeijing.png") no-repeat !important;
background-size: 100% 100% !important;
display: flex;
- flex-wrap: wrap;
- align-content: space-around;
- .mains{
+ flex-wrap: wrap;
+ align-content: space-around;
+ .mains {
width: 100%;
height: calc(100% - 149px);
display: flex;
@@ -1048,11 +855,11 @@ export default {
box-sizing: border-box;
justify-content: space-between;
align-items: flex-end;
- .leftContent{
+ .leftContent {
width: 20%;
height: 85%;
padding: 0 10px;
- .kehuCount{
+ .kehuCount {
height: 15%;
width: 100%;
display: flex;
@@ -1060,112 +867,645 @@ export default {
justify-content: space-evenly;
padding-left: 10%;
}
- .countInfor{
+ .countInfor {
height: calc(100% - 40%);
width: 55%;
- .content{
+ .content {
height: 25%;
width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-around;
- .text{
- height: 50%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ .text {
+ height: 50%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
}
}
-
}
- .rightContent{
+ .rightContent {
width: 20%;
height: 85%;
padding: 0 10px;
display: flex;
- flex-direction: column;
- align-items: flex-end;
- .kehuCount{
+ flex-direction: column;
+ align-items: flex-end;
+ .kehuCount {
height: 15%;
width: 55%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
- .countInfor{
+ .countInfor {
height: calc(100% - 40%);
width: 67%;
- .content{
+ .content {
height: 25%;
width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-around;
- .text{
- height: 50%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ .text {
+ height: 50%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
}
}
}
- .yellowIcon{
- position: absolute !important;
- top: 28%;
- left: 36%;
+ .datushaIcon {
+ position: absolute !important;
+ top: 32%;
+ left: 37%;
+ animation: datushaIcon 1s linear;
+ }
+ @keyframes datushaIcon {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 32%;
+ } //最终时图片位于300px处
+ }
+ .yellowIcon {
+ position: absolute !important;
+ top: 32%;
+ left: 37%;
+ z-index: 999;
+ animation: movepoint 1s infinite;
+ display: flex;
+ flex-direction: column;
+ }
+ #pop {
+ position: absolute !important;
+ top: 5%;
+ left: 37%;
+ display: inline-block;
+ overflow: hidden;
+ width: 288px;
+ height: 275px;
+ .mask {
+ position: absolute;
+ width: 288px;
+ height: 275px;
+ top: 0;
+ left: 0;
z-index: 999;
- animation: movepoint 1s infinite;
- display: flex;
- flex-direction: column;
}
- #pop{
- position: absolute !important;
- top: 6%;
- left: 36%;
- display: inline-block;
- overflow: hidden;
- width:288px;
- height:275px;
- .mask{
- position: absolute;
- width: 288px;
- height: 275px;
- top: 0;
- left: 0;
- z-index:999
- }
- }
- @keyframes movepoint {
-
+ }
+ @keyframes movepoint {
0% {
transform: translateY(0px);
- }
- 50% {
+ }
+ 50% {
transform: translateY(5px);
- }
- 100% {
+ }
+ 100% {
transform: translateY(0px);
+ }
}
-
+ .mask {
+ animation: animate 3s linear;
+ overflow: hidden;
+ }
+
+ @keyframes animate {
+ from {
+ height: 48px;
+ top: 275px;
+ }
+ to {
+ height: 275px;
+ top: 0px;
+ }
+ }
+
}
- .mask{
- animation: animate 3s linear;
- overflow: hidden;
- }
- @keyframes animate{
- from {
- height: 0px;
- top : 230px;
- }
- to {
- height: 275px;
- top : 0px;
- }
+ //背景圆圈的效果
+ .decorate {
+ width: 1091px;
+ height: 934px;
+ position: absolute;
+ top: 9%;
+ left: 22%;
+ -webkit-animation: scaleout 1.5s infinite ease-in-out;
+ animation: scaleout 1.5s infinite ease-in-out;
+ }
+ @-webkit-keyframes scaleout {
+ 0% {
+ -webkit-transform: scale(1);
}
- }
+ 100% {
+ -webkit-transform: scale(1.02);
+ opacity: 0;
+ }
+ }
+ @keyframes scaleout {
+ 0% {
+ transform: scale(1);
+ -webkit-transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(1.02);
+ -webkit-transform: scale(1.02);
+ opacity: 0;
+ }
+ }
+ //江苏地图效果
+ .jiangsuMap {
+ width: 1920px;
+ height: 1080px;
+ position: absolute;
+ top: 0;
+ -webkit-animation: scalemap 1.5s infinite ease-in-out;
+ animation: scalemap 1.5s infinite ease-in-out;
+ animation-iteration-count: 1;
+ -webkit-animation-iteration-count: 1;
+ opacity: 1;
+ z-index: 100;
+ }
+ @-webkit-keyframes scalemap {
+ 0% {
+ -webkit-transform: scale(0);
+ opacity: 0;
+ }
+
+ 100% {
+ -webkit-transform: scale(1);
+ opacity: 1;
+ }
+ }
+ @keyframes scalemap {
+ 0% {
+ transform: scale(0);
+ -webkit-transform: scale(0);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: scale(1);
+ -webkit-transform: scale(1);
+ opacity: 1;
+ }
+ }
+ //南京地图
+ .nanjingMap {
+ width: 1920px;
+ height: 1080px;
+ position: absolute;
+ top: 0;
+ -webkit-animation: scalemap 1.5s infinite ease-in-out;
+ animation: scalemap 1.5s infinite ease-in-out;
+ animation-iteration-count: 1;
+ -webkit-animation-iteration-count: 1;
+ opacity: 1;
+ z-index: 100;
+ }
+ //江苏省市级图标
+ .shijiIcon {
+ width: 1920px;
+ height: 1080px;
+ position: absolute;
+ z-index: 200;
+ top: 0;
+ }
+ .xuzhou {
+ animation: xuzhou 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性
+ animation-iteration-count: 1;
+ width: 68px;
+ height: 45px;
+ position: absolute;
+ top: 21%;
+ left: 30%;
+ }
+ .lianyungang {
+ animation: lianyungang 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性
+ animation-iteration-count: 1;
+ width: 68px;
+ height: 45px;
+ position: absolute;
+ top: 18%;
+ left: 45%;
+ }
+ .suqian {
+ animation: suqian 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性
+ animation-iteration-count: 1;
+ width: 68px;
+ height: 45px;
+ position: absolute;
+ top: 28%;
+ left: 38%;
+ }
+ .huaian {
+ animation: huaian 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性
+ animation-iteration-count: 1;
+ width: 68px;
+ height: 45px;
+ position: absolute;
+ top: 35%;
+ left: 40%;
+ }
+ .yancheng {
+ animation: yancheng 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性
+ animation-iteration-count: 1;
+ width: 68px;
+ height: 45px;
+ position: absolute;
+ top: 30%;
+ left: 53%;
+ }
+ .yangzhou {
+ animation: yangzhou 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性
+ animation-iteration-count: 1;
+ width: 68px;
+ height: 45px;
+ position: absolute;
+ top: 43%;
+ left: 46%;
+ }
+ .taizhou {
+ animation: taizhou 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性
+ animation-iteration-count: 1;
+ width: 68px;
+ height: 45px;
+ position: absolute;
+ top: 47%;
+ left: 53%;
+ }
+ .nantong {
+ animation: nantong 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性
+ animation-iteration-count: 1;
+ width: 68px;
+ height: 45px;
+ position: absolute;
+ top: 47%;
+ left: 63%;
+ }
+ .zhenjiang {
+ animation: zhenjiang 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性
+ animation-iteration-count: 1;
+ width: 68px;
+ height: 45px;
+ position: absolute;
+ top: 52%;
+ left: 46%;
+ }
+ .wuxi {
+ animation: wuxi 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性
+ animation-iteration-count: 1;
+ width: 68px;
+ height: 45px;
+ position: absolute;
+ top: 62%;
+ left: 56%;
+ }
+ .suzhou {
+ animation: suzhou 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性
+ animation-iteration-count: 1;
+ width: 68px;
+ height: 45px;
+ position: absolute;
+ top: 65%;
+ left: 61%;
+ }
+ .changzhou {
+ animation: changzhou 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性
+ animation-iteration-count: 1;
+ width: 68px;
+ height: 45px;
+ position: absolute;
+ top: 61%;
+ left: 46%;
+ }
+ .nanjing {
+ animation: nanjing 1s linear; //动画名称为falling，持续时间1s，动画速度变化线性
+ animation-iteration-count: 1;
+ width: 167px;
+ height: 168px;
+ position: absolute;
+ top: 50%;
+ left: 36%;
+ }
+ .nanjing1 {
+ animation: movepoint 1s infinite;
+ z-index: 200;
+ cursor: pointer;
+ width: 167px;
+ height: 168px;
+ position: absolute;
+ top: 50%;
+ left: 36%;
+ }
+ .nanjingxuanshi {
+ width: 182px;
+ height: 282px;
+ position: absolute;
+ top: 46%;
+ left: 36%;
+ cursor: pointer;
+ }
+ .nanjingsekuai {
+ width: 182px;
+ height: 282px;
+ position: absolute;
+ top: 46%;
+ left: 36%;
+ cursor: pointer;
+ }
+ @keyframes xuzhou {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 21%;
+ } //最终时图片位于300px处
+ }
+ @keyframes lianyungang {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 18%;
+ } //最终时图片位于300px处
+ }
+ @keyframes suqian {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 28%;
+ } //最终时图片位于300px处
+ }
+ @keyframes huaian {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 35%;
+ } //最终时图片位于300px处
+ }
+ @keyframes yancheng {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 30%;
+ } //最终时图片位于300px处
+ }
+ @keyframes yangzhou {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 43%;
+ } //最终时图片位于300px处
+ }
+ @keyframes taizhou {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 47%;
+ } //最终时图片位于300px处
+ }
+ @keyframes nantong {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 47%;
+ } //最终时图片位于300px处
+ }
+ @keyframes zhenjiang {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 52%;
+ } //最终时图片位于300px处
+ }
+ @keyframes changzhou {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 61%;
+ } //最终时图片位于300px处
+ }
+ @keyframes wuxi {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 62%;
+ } //最终时图片位于300px处
+ }
+ @keyframes suzhou {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 65%;
+ } //最终时图片位于300px处
+ }
+ @keyframes nanjing {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 50%;
+ } //最终时图片位于300px处
+ }
+ //区级图标
+ .qujiIcon {
+ width: 1920px;
+ height: 1080px;
+ position: absolute;
+ z-index: 200;
+ top: 0;
+ .liuhe {
+ width: 103px;
+ height: 75px;
+ position: absolute;
+ top: 24%;
+ left: 40%;
+ animation: liuhe 1s linear;
+ }
+ @keyframes liuhe {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 24%;
+ } //最终时图片位于300px处
+ }
+ .pukou {
+ width: 103px;
+ height: 75px;
+ position: absolute;
+ top: 41%;
+ left: 31%;
+ animation: pukou 1s linear;
+ }
+ @keyframes pukou {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 41%;
+ } //最终时图片位于300px处
+ }
+ .yuhua {
+ width: 103px;
+ height: 75px;
+ position: absolute;
+ top: 43%;
+ left: 36%;
+ animation: yuhua 1s linear;
+ }
+ @keyframes yuhua {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 43%;
+ } //最终时图片位于300px处
+ }
+ .jianye {
+ width: 103px;
+ height: 75px;
+ position: absolute;
+ top: 37%;
+ left: 38%;
+ animation: jianye 1s linear;
+ }
+ @keyframes jianye {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 37%;
+ } //最终时图片位于300px处
+ }
+ .gulou {
+ width: 103px;
+ height: 75px;
+ position: absolute;
+ top: 33%;
+ left: 38.5%;
+ animation: gulou 1s linear;
+ }
+ @keyframes gulou {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 33%;
+ } //最终时图片位于300px处
+ }
+ .qixia {
+ width: 103px;
+ height: 75px;
+ position: absolute;
+ top: 30%;
+ left: 44%;
+ animation: qixia 1s linear;
+ }
+ @keyframes qixia {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 30%;
+ } //最终时图片位于300px处
+ }
+ .xuanwu {
+ width: 103px;
+ height: 75px;
+ position: absolute;
+ top: 35%;
+ left: 42%;
+ animation: xuanwu 1s linear;
+ }
+ @keyframes xuanwu {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 35%;
+ } //最终时图片位于300px处
+ }
+ .qinhuai {
+ width: 103px;
+ height: 75px;
+ position: absolute;
+ top: 41%;
+ left: 42%;
+ animation: qinhuai 1s linear;
+ }
+ @keyframes qinhuai {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 41%;
+ } //最终时图片位于300px处
+ }
+ .jiangning {
+ width: 103px;
+ height: 75px;
+ position: absolute;
+ top: 45%;
+ left: 46%;
+ animation: jiangning 1s linear;
+ }
+ @keyframes jiangning {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 45%;
+ } //最终时图片位于300px处
+ }
+ .gaochun {
+ width: 103px;
+ height: 75px;
+ position: absolute;
+ top: 70%;
+ left: 60%;
+ animation: gaochun 1s linear;
+ }
+ @keyframes gaochun {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 70%;
+ } //最终时图片位于300px处
+ }
+ .lishui {
+ width: 103px;
+ height: 75px;
+ position: absolute;
+ top: 52%;
+ left: 57%;
+ animation: lishui 1s linear;
+ }
+ @keyframes lishui {
+ 0% {
+ top: 0px;
+ } //初始时图片位于顶部
+ 100% {
+ top: 52%;
+ } //最终时图片位于300px处
+ }
+ }
}
.back-button a:hover {
background-image: url("../../assets/bt-002.png");
@@ -1340,7 +1680,6 @@ export default {
}
}
-
.leftModel {
width: 24%;
left: 1%;
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
new file mode 100644
index 000000000..b652a5323
--- /dev/null
+++ b/src/views/login/login.vue
@@ -0,0 +1,166 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/pop/model.vue b/src/views/pop/model.vue
index 864028825..df2d87d6a 100644
--- a/src/views/pop/model.vue
+++ b/src/views/pop/model.vue
@@ -35,7 +35,7 @@ mounted(){
this.text = '纪念馆-新馆'
}else{
this.unityUrl = "/htWeb/unity.html?src=2";
- this.text = '纪念馆-久馆'
+ this.text = '纪念馆-旧馆'
}
},
methods:{
|
|
|
+ -->
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+