|
|
@@ -0,0 +1,561 @@
|
|
|
+<template>
|
|
|
+ <div style="width: 100%; padding: 1rem 1rem 0rem 1rem; color: white">
|
|
|
+ <el-row :gutter="10" style="display: flex; align-items: center">
|
|
|
+ <el-col :span="18">
|
|
|
+ {{ info.BenchmarkLandPrice.ProjectName }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-button size="mini" type="default">导出报告</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-row :gutter="10" class="container_center">
|
|
|
+ <el-col
|
|
|
+ :span="8"
|
|
|
+ class="container_center"
|
|
|
+ style="
|
|
|
+ height: 3rem;
|
|
|
+ background-color: rgba(2, 167, 240, 1);
|
|
|
+ border-radius: 6px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <i style="font-size: 2rem" class="el-icon-office-building"></i>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="16"
|
|
|
+ class="container_center"
|
|
|
+ style="justify-content: flex-start"
|
|
|
+ >
|
|
|
+ <div class="con-col" style="align-items: flex-start">
|
|
|
+ <a style="color: white">分析面积（平方米）</a>
|
|
|
+ <a style="font-weight: bold; color: rgba(2, 167, 240, 1)"
|
|
|
+ >66666</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-row :gutter="10" class="container_center">
|
|
|
+ <el-col
|
|
|
+ :span="8"
|
|
|
+ class="container_center"
|
|
|
+ style="
|
|
|
+ height: 3rem;
|
|
|
+ background-color: rgba(2, 167, 240, 1);
|
|
|
+ border-radius: 6px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <i style="font-size: 2rem" class="el-icon-bank-card"></i>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="16"
|
|
|
+ class="container_center"
|
|
|
+ style="justify-content: flex-start"
|
|
|
+ >
|
|
|
+ <div class="con-col" style="align-items: flex-start">
|
|
|
+ <a style="color: white">总地价（万元）</a>
|
|
|
+ <a style="font-weight: bold; color: rgba(2, 167, 240, 1)"
|
|
|
+ >55555</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-row :gutter="10" class="container_center">
|
|
|
+ <el-col
|
|
|
+ :span="8"
|
|
|
+ class="container_center"
|
|
|
+ style="
|
|
|
+ height: 3rem;
|
|
|
+ background-color: rgba(2, 167, 240, 1);
|
|
|
+ border-radius: 6px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <i style="font-size: 2rem" class="el-icon-discount"></i>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="16"
|
|
|
+ class="container_center"
|
|
|
+ style="justify-content: flex-start"
|
|
|
+ >
|
|
|
+ <div class="con-col" style="align-items: flex-start">
|
|
|
+ <a style="color: white">国有建设</a>
|
|
|
+ <a style="color: white">用地地价（万元）</a>
|
|
|
+ <a style="font-weight: bold; color: rgba(2, 167, 240, 1)"
|
|
|
+ >66666</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-row :gutter="10" class="container_center">
|
|
|
+ <el-col
|
|
|
+ :span="8"
|
|
|
+ class="container_center"
|
|
|
+ style="
|
|
|
+ height: 3rem;
|
|
|
+ background-color: rgba(2, 167, 240, 1);
|
|
|
+ border-radius: 6px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <i style="font-size: 2rem" class="el-icon-price-tag"></i>
|
|
|
+ </el-col>
|
|
|
+ <el-col
|
|
|
+ :span="16"
|
|
|
+ class="container_center"
|
|
|
+ style="justify-content: flex-start"
|
|
|
+ >
|
|
|
+ <div class="con-col" style="align-items: flex-start">
|
|
|
+ <a style="color: white">集体建设</a>
|
|
|
+ <a style="color: white">用地地价（万元）</a>
|
|
|
+ <a style="font-weight: bold; color: rgba(2, 167, 240, 1)"
|
|
|
+ >55555</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10" style="display: flex; align-items: center">
|
|
|
+ <el-col :span="24">
|
|
|
+ 土地用途：
|
|
|
+ <el-select
|
|
|
+ size="mini"
|
|
|
+ v-model="jzdj_LandUse"
|
|
|
+ placeholder="请选择土地用途"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="dict in zt_jzdj_LandUse"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div id="echartFGY" ref="echartFGY" class="EchartsWH">
|
|
|
+ <div
|
|
|
+ id="GYEcharts"
|
|
|
+ ref="GYEcharts"
|
|
|
+ :style="{ width: '100%', height: '100%' }"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div id="echartFJT" ref="echartFJT" class="EchartsWH">
|
|
|
+ <div
|
|
|
+ id="JTEcharts"
|
|
|
+ ref="JTEcharts"
|
|
|
+ :style="{ width: '100%', height: '100%' }"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { v4 as uuidv4 } from "uuid";
|
|
|
+import moment from "moment";
|
|
|
+import jzdjfxsmInfo from "./jzdjfxsmInfo.vue";
|
|
|
+import elementResizeDetectorMaker from "element-resize-detector";
|
|
|
+import {
|
|
|
+ cartesian3ToWGS84,
|
|
|
+ mapQuery,
|
|
|
+ flatten,
|
|
|
+ mercator2lonLat,
|
|
|
+ undergroundMode,
|
|
|
+} from "@/utils/MapHelper/MapHelper.js";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tooltip: createTooltip(document.body),
|
|
|
+ zt_jzdj_LandUse: window.dict.zt_jzdj_LandUse,
|
|
|
+ /**
|
|
|
+ * tabs 标签
|
|
|
+ */
|
|
|
+ activeName: "first",
|
|
|
+ //绘制事件
|
|
|
+ handlerPolygon: null,
|
|
|
+ jzdj_LandUse: "商服用地",
|
|
|
+ rules: {
|
|
|
+ ProjectName: [
|
|
|
+ { required: true, message: "请输入项目名称", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ ProjectScope: [
|
|
|
+ { required: true, message: "请添加项目范围", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ BenchmarkLandPriceList: [],
|
|
|
+ GYmyChart: null,
|
|
|
+ JTmyChart: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ info: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ layerid: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ lydata: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ lyoption: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const erd = elementResizeDetectorMaker();
|
|
|
+ let that = this;
|
|
|
+ erd.listenTo([this.$refs.echartFGY, this.$refs.echartFJT], () => {
|
|
|
+ that.$nextTick(() => {
|
|
|
+ //监听到事件后执行的业务逻辑
|
|
|
+ window.echarts.init(this.$refs.GYEcharts).resize();
|
|
|
+ window.echarts.init(this.$refs.JTEcharts).resize();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.BenchmarkLandPriceList = window.BenchmarkLandPriceList;
|
|
|
+ this.initGY();
|
|
|
+ this.initJT();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * tas切换
|
|
|
+ * @param {String} tab
|
|
|
+ * @param {Object} event
|
|
|
+ */
|
|
|
+ handleClick(tab, event) {
|
|
|
+ console.log(tab, event);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ *基准地价说明
|
|
|
+ */
|
|
|
+ jzdjsmShow() {
|
|
|
+ var that = this;
|
|
|
+ if (that.layerid) that.$layer.close(that.layerid);
|
|
|
+ var width = "40rem";
|
|
|
+ var height = "30rem";
|
|
|
+
|
|
|
+ that.layerid = that.$layer.iframe({
|
|
|
+ content: {
|
|
|
+ content: jzdjfxsmInfo, //传递的组件对象
|
|
|
+ parent: this, //当前的vue对象
|
|
|
+ data: {}, //props
|
|
|
+ },
|
|
|
+
|
|
|
+ area: [width.toString(), height.toString()],
|
|
|
+ title: "基准地价分析说明",
|
|
|
+ maxmin: false,
|
|
|
+ shade: false, //是否显示遮罩
|
|
|
+ shadeClose: false, //点击遮罩是否关闭
|
|
|
+ cancel: () => {
|
|
|
+ //关闭事件
|
|
|
+ // alert("关闭iframe");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 绘制范围
|
|
|
+ */
|
|
|
+ getProjectScope() {
|
|
|
+ let that = this;
|
|
|
+ this.clear();
|
|
|
+ this.handlerPolygon = new Cesium.DrawHandler(
|
|
|
+ viewer,
|
|
|
+ Cesium.DrawMode.Polygon,
|
|
|
+ Cesium.ClampMode.Space
|
|
|
+ );
|
|
|
+ this.handlerPolygon.activate();
|
|
|
+ this.handlerPolygon.activeEvt.addEventListener(function (isActive) {
|
|
|
+ if (isActive == true) {
|
|
|
+ viewer.enableCursorStyle = false;
|
|
|
+ viewer._element.style.cursor = "";
|
|
|
+ document.body.classList.add("drawCur");
|
|
|
+ } else {
|
|
|
+ viewer.enableCursorStyle = true;
|
|
|
+ document.body.classList.remove("drawCur");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.handlerPolygon.movingEvt.addEventListener((windowPosition) => {
|
|
|
+ that.tooltip.showAt(
|
|
|
+ windowPosition,
|
|
|
+ "<p>点击鼠标左键开始绘制分析区域</p>"
|
|
|
+ );
|
|
|
+ });
|
|
|
+ this.handlerPolygon.drawEvt.addEventListener((result) => {
|
|
|
+ that.tooltip.setVisible(false);
|
|
|
+ var polygon = result.object;
|
|
|
+ if (!polygon) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let points = [];
|
|
|
+ let positions = polygon.positions;
|
|
|
+ //遍历多边形，取出所有点
|
|
|
+ for (var i = 0, len = positions.length; i < len; i++) {
|
|
|
+ let xyz = cartesian3ToWGS84(positions[i]);
|
|
|
+ points.push({ x: xyz.lng, y: xyz.lat, z: xyz.alt });
|
|
|
+ }
|
|
|
+ if (points.length > 0) {
|
|
|
+ if (points[0] != points[points.length - 1]) {
|
|
|
+ points.push(points[0]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ that.form.ProjectScope = points;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clear() {
|
|
|
+ if (this.handlerPolygon) {
|
|
|
+ this.handlerPolygon.clear();
|
|
|
+ this.handlerPolygon.deactivate();
|
|
|
+ this.handlerPolygon = null;
|
|
|
+ }
|
|
|
+ this.tooltip.setVisible(false);
|
|
|
+ },
|
|
|
+
|
|
|
+ submitForm(formName) {
|
|
|
+ let that = this;
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ that.form.id = uuidv4();
|
|
|
+ that.form.analysisDate = moment(new Date()).format(
|
|
|
+ "YYYY-MM-DD HH:mm:ss"
|
|
|
+ );
|
|
|
+ window.BenchmarkLandPriceList.push(that.form);
|
|
|
+ that.resetForm(formName);
|
|
|
+ that.$message({
|
|
|
+ message: "保存成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.clear();
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 打开分析结果弹窗
|
|
|
+ openAnalyzeResults() {
|
|
|
+ if (this.FXJGInfolayerid) {
|
|
|
+ this.$layer.close(this.FXJGInfolayerid);
|
|
|
+ }
|
|
|
+ let that = this;
|
|
|
+ let w = document.body.offsetWidth;
|
|
|
+ let h = document.body.offsetHeight;
|
|
|
+ //左上角(left=弹窗宽/2;top=弹窗高/2+header高)
|
|
|
+ //右上角 (left=w-弹窗宽+(弹窗宽/2);top=弹窗高/2+header高);
|
|
|
+ let left = w - 430 + 430 / 2;
|
|
|
+ let top = 430 / 2 + 60;
|
|
|
+ this.FXJGInfolayerid = this.$layer.iframe({
|
|
|
+ content: {
|
|
|
+ content: HighLimitAnalysis, //传递的组件对象
|
|
|
+ parent: this, //当前的vue对象
|
|
|
+ data: { info: {} }, //props
|
|
|
+ },
|
|
|
+ offset: [left, top], //left top
|
|
|
+ area: ["430px", "430px"], //宽 高
|
|
|
+ title: "分析结果",
|
|
|
+ maxmin: false,
|
|
|
+ shade: false, //是否显示遮罩
|
|
|
+ shadeClose: false, //点击遮罩是否关闭
|
|
|
+ cancel: () => {},
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ initGY() {
|
|
|
+ this.GYmyChart = window.echarts.init(this.$refs.GYEcharts);
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ color: [
|
|
|
+ "#5470c6",
|
|
|
+ "#91cc75",
|
|
|
+ "#fac858",
|
|
|
+ "#ee6666",
|
|
|
+ "#73c0de",
|
|
|
+ "#3ba272",
|
|
|
+ "#fc8452",
|
|
|
+ "#9a60b4",
|
|
|
+ "#ea7ccc",
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ left: "right",
|
|
|
+ top: "center",
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFFFFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "Access From",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["40%", "70%"],
|
|
|
+ center: ["35%", "50%"], // 将饼图的中心点向左调整到容器宽度的30%，纵坐标保持在中心
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 10,
|
|
|
+ borderColor: "#fff",
|
|
|
+ borderWidth: 2,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: "center",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 20,
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: "I" },
|
|
|
+ { value: 735, name: "II" },
|
|
|
+ { value: 580, name: "III" },
|
|
|
+ { value: 484, name: "IV" },
|
|
|
+ { value: 300, name: "V" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ this.GYmyChart.setOption(option);
|
|
|
+ },
|
|
|
+ initJT() {
|
|
|
+ this.JTmyChart = window.echarts.init(this.$refs.JTEcharts);
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ color: [
|
|
|
+ "#5470c6",
|
|
|
+ "#91cc75",
|
|
|
+ "#fac858",
|
|
|
+ "#ee6666",
|
|
|
+ "#73c0de",
|
|
|
+ "#3ba272",
|
|
|
+ "#fc8452",
|
|
|
+ "#9a60b4",
|
|
|
+ "#ea7ccc",
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ left: "right",
|
|
|
+ top: "center",
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFFFFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "Access From",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["40%", "70%"],
|
|
|
+ center: ["35%", "50%"], // 将饼图的中心点向左调整到容器宽度的30%，纵坐标保持在中心
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 10,
|
|
|
+ borderColor: "#fff",
|
|
|
+ borderWidth: 2,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: "center",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 20,
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1048, name: "I" },
|
|
|
+ { value: 735, name: "II" },
|
|
|
+ { value: 580, name: "III" },
|
|
|
+ { value: 484, name: "IV" },
|
|
|
+ { value: 300, name: "V" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ this.JTmyChart.setOption(option);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.clear();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+@import "@/../../zt.scss";
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+.el-date-editor--daterange.el-input__inner {
|
|
|
+ width: auto;
|
|
|
+ background-color: rgba(4, 28, 50, 0.5);
|
|
|
+ border: 1px solid rgba(15, 122, 200, 0.4);
|
|
|
+}
|
|
|
+.card_body_style {
|
|
|
+ border: 1px dashed #02a7f0;
|
|
|
+}
|
|
|
+.hover_style:hover {
|
|
|
+ border: 1px solid #02a7f0;
|
|
|
+}
|
|
|
+.con-col {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column nowrap;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.container_center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ justify-content: center; /* 水平居中，如果也需要水平居中的话 */
|
|
|
+}
|
|
|
+.EchartsWH {
|
|
|
+ width: 100%;
|
|
|
+ height: 16rem;
|
|
|
+}
|
|
|
+</style>
|
