卫片监管接口、耕地保护

src/api/cockpitNew.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 卫片监管
+export function QueryList(params) {
+    return request({
+        url: '/apply/jsc/QueryList',
+        method: 'get',
+        params
+    })
+}

src/components/echartsTemplate/3dPie.vue

@@ -0,0 +1,331 @@
+<template>
+  <div id="sankey_echart" ref="echart"></div>
+</template>
+
+<script>
+let option = {
+  legend: {
+    tooltip: {
+      show: true,
+    },
+    orient: "vertical",
+
+    itemWidth: 12, // 设置宽度
+    itemHeight: 12, // 设置高度
+    data: ["征收", "收购", "回收"],
+    bottom: "40%",
+    right: "40%",
+
+    itemGap: 10,
+    textStyle: {
+      color: "#fff",
+      fontSize: 14,
+    },
+    formatter: function (name) {
+      console.log(name);
+
+      return name;
+    },
+  },
+  animation: true,
+
+  backgroundColor: "rgba(0,0,0,0)",
+  labelLine: {
+    show: false,
+    lineStyle: {
+      color: "#7BC0CB",
+    },
+  },
+  label: {
+    show: false,
+    position: "outside",
+    formatter: "{d}%",
+    color: "inherit",
+  },
+  xAxis3D: {
+    min: -1,
+    max: 1,
+  },
+  yAxis3D: {
+    min: -1,
+    max: 1,
+  },
+  zAxis3D: {
+    min: -1,
+    max: 1,
+  },
+  grid3D: {
+    show: false,
+    boxHeight: 1,
+    top: "-5%",
+    left: "-25%",
+    // bottom: '-80%',
+    //					environment: '#021041',
+    viewControl: {
+      distance: 180,
+      alpha: 25,
+      beta: 20,
+      // autoRotate: true, // 自动旋转
+    },
+  },
+
+  series: [],
+};
+export default {
+  name: "sankey_echart",
+  components: {},
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  methods: {
+    setOptions(data) {
+      if (!this.myChart) {
+        // var dom = document.getElementById("sankey_echart");
+        this.myChart = echarts.init(this.$refs.echart);
+      }
+      
+      this.initEchartXzqh(data);
+    },
+    initEchartXzqh(optionsData) {
+      const series = this.getPie3D(optionsData, 0.6);
+      option.series = series;
+
+      // series.push({
+      //   name: "pie2d",
+      //   type: "pie",
+
+      //   label: {
+      //     normal: {
+      //       show: false, //设为false
+      //       position: "center", //center表示文本显示位置为内部
+      //     },
+      //     opacity: 1,
+      //     fontSize: 13,
+      //     lineHeight: 20,
+      //     textStyle: {
+      //       fontSize: 22,
+      //     },
+      //   },
+      //   labelLine: {
+      //     length: 20,
+      //     length2: 40,
+      //   },
+      //   startAngle: -30, //起始角度，支持范围[0, 360]。
+      //   clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+      //   radius: ["30%", "55%"],
+      //   center: ["52%", "38%"],
+      //   // 没啥用
+      //   data: [
+      //     {
+      //       name: "征收",
+      //       value: 20,
+      //       itemStyle: {
+      //         //						 opacity: 0.8,
+      //         color: "#3b8584",
+      //       },
+      //     },
+
+      //     {
+      //       name: "收购",
+      //       value: 50,
+      //       itemStyle: {
+      //         //						 opacity: 0.8,
+      //         color: "#64d9e0",
+      //       },
+      //     },
+      //     {
+      //       name: "回收",
+      //       value: 30,
+      //       itemStyle: {
+      //         //						 opacity: 0.8,
+      //         color: "#dac254",
+      //       },
+      //     },
+      //   ],
+      //   itemStyle: {
+      //     opacity: 0,
+      //   },
+      // });
+      // // 准备待返回的配置项，把准备好的 legendData、series 传入。
+
+      let total = optionsData.reduce(function (prev, cur, index, arr) {
+        return prev + cur.value;
+      }, 0); //数据总和
+
+      this.myChart.setOption(option);
+    },
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(
+      startRatio,
+      endRatio,
+      isSelected,
+      isHovered,
+      k,
+      height
+    ) {
+      // 计算
+      let midRatio = (startRatio + endRatio) / 2;
+
+      let startRadian = startRatio * Math.PI * 2;
+      let endRadian = endRatio * Math.PI * 2;
+      let midRadian = midRatio * Math.PI * 2;
+
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = typeof k !== "undefined" ? k : 1 / 3;
+
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      let hoverRate = isHovered ? 1.05 : 1;
+
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u);
+          }
+          return Math.sin(v) > 0 ? 1 * height : -1;
+        },
+      };
+    },
+
+    // 生成模拟 3D 饼图的配置项
+    getPie3D(pieData, internalDiameterRatio) {
+      let series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      let legendData = [];
+      let k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value;
+
+        let seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+
+        if (typeof pieData[i].itemStyle != "undefined") {
+          let itemStyle = {};
+
+          typeof pieData[i].itemStyle.color != "undefined"
+            ? (itemStyle.color = pieData[i].itemStyle.color)
+            : null;
+          typeof pieData[i].itemStyle.opacity != "undefined"
+            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+            : null;
+
+          seriesItem.itemStyle = itemStyle;
+        }
+
+        series.push(seriesItem);
+      }
+
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value;
+
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+
+        startValue = endValue;
+
+        legendData.push(series[i].name);
+      }
+
+      return series;
+    },
+  },
+  mounted() {
+    this.setOptions();
+  },
+};
+</script>
+<style lang="scss" scoped>
+.sankey_echart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/cockpitNew1/datePicker.vue

@@ -77,12 +77,15 @@ export default {
 // 日期按选择器样式修改
 .timePicker {
   position: absolute;
-  top: 10%;
-  left: 30%;
+  top: 30px;
+  left: 22%;
   z-index: 100;
   font-size: 14px;
   padding: 0;
-  width: 220px !important;
+  width: 180px !important;
+}
+.el-date-editor .el-range__close-icon {
+  display: none;
 }
 .el-picker-panel__sidebar {
   background: #002446;

src/views/cockpitNew1/gdbh.vue

@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <highPie id="gdbh_echart" ref="echartRef"></highPie>
+    <pie3d id="gdbh_echart" ref="echartRef"></pie3d>
   </borderTemplate>
 </template>
 
@@ -18,13 +18,13 @@
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 import borderTemplate from "./borderTemplate.vue";
 import highPie from "../../components/echartsTemplate/highPie.vue";
-
+import pie3d from "../../components/echartsTemplate/3dPie.vue";
 export default {
-  components: { borderTemplate, highPie },
+  components: { borderTemplate, pie3d },
   data() {
     return {
       sdlist: [
-        { name: "耕地保有量", value: "", unit: "km²" },
+        { name: "高标准农田", value: "", unit: "km²" }, //耕地保有量
         { name: "补充耕地项目", value: "", unit: "个" },
         { name: "永久基本农田", value: "", unit: "km²" },
         { name: "补充耕地面积", value: "", unit: "km²" },
@@ -39,14 +39,42 @@ export default {
 
   methods: {},
   mounted() {
-    let data = [
-      ["货1", 23],
-      ["客1", 18],
-      ["货2", 23],
-      ["客2", 18],
+    // let data = [
+    //   ["货1", 23],
+    //   ["客1", 18],
+    //   ["货2", 23],
+    //   ["客2", 18],
+    // ];
+    // 传入数据生成 option
+    const optionsData = [
+      {
+        name: "回收",
+        value: 50,
+        itemStyle: {
+          opacity: 0.8,
+          color: "RGBA(235, 184, 86, 1)",
+        },
+      },
+      {
+        name: "征收",
+        value: 20,
+        itemStyle: {
+          opacity: 0.8,
+          color: "RGBA(100, 184, 255, 1)",
+        },
+      },
+
+      {
+        name: "收购",
+        value: 30,
+        itemStyle: {
+          opacity: 0.8,
+          color: "RGBA(71, 203, 129, 1)",
+        },
+      },
     ];
     this.$nextTick(() => {
-      this.$refs.echartRef.setOptions(data);
+      this.$refs.echartRef.setOptions(optionsData);
     });
   },
 };

src/views/cockpitNew1/wpjg.vue

@@ -6,11 +6,11 @@
     <div class="stacontent">
       <div class="item">
         <span class="dlabel">图斑变化数量：</span>
-        <span class="dvalue">{{ sdata.value || 0 }}个</span>
+        <span class="dvalue">{{ sdata.xzqdm_num || 0 }}个</span>
       </div>
       <div class="item">
         <span class="dlabel"> 图斑变化面积：</span>
-        <span class="dvalue">{{ sdata.value || 0 }}公顷</span>
+        <span class="dvalue">{{ sdata.jcmj || 0 }}亩</span>
       </div>
     </div>
     <sankey id="wpjp_echart" ref="echartRef"></sankey>
@@ -20,6 +20,7 @@
 <script>
 import borderTemplate from "./borderTemplate.vue";
 import sankey from "../../components/echartsTemplate/sankey.vue";
+import { QueryList } from "../../api/cockpitNew";
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 let lcolors = ["#1677CA", "#5BB57A", "#B1651F"];
 let rcolors = [
@@ -46,128 +47,51 @@ export default {
   watch: {},
 
   methods: {
-    getComputedStyle() {
-      let data = [
-        { name: "t耕地" },
-        { name: "t园地" },
-        { name: "t林地" },
-        { name: "t草地" },
-        // { name: "t湿地" },
-        // { name: "t农业设施用地" },
-        {
-          name: "t居住用地",
-        },
-        { name: "t交通运输用地" },
-        // { name: "t公共设施用地" },
-        // { name: "t绿地与开敞空间用地" },
+    getQueryListyelx() {
+      let data = [];
+      let links = [];
 
-        { name: "t陆地水城" },
-        // { name: "t其他土地" },
-        {
-          // name: "t渔业用海、工矿通信用海、交通运输用海、游憩用海、特殊用海、其他海域",
-        },
-        // { name: "耕地" },
-        // { name: "园地" },
-        // { name: "林地" },
-        // { name: "草地" },
-        // { name: "湿地" },
-        { name: "农业设施用地" },
-        {
-          name: "居住用地",
-        },
-        { name: "交通运输用地" },
-        // { name: "公共设施用地" },
-        { name: "绿地与开敞空间用地" },
-
-        { name: "陆地水城" },
-        // { name: "其他土地" },
-        {
-          // name: "渔业用海、工矿通信用海、交通运输用海、游憩用海、特殊用海、其他海域",
-        },
-      ];
-
-      let l = [
-        { source: "t耕地", target: "陆地水城", value: 1 },
-        { source: "t耕地", target: "农业设施用地", value: 1 },
-        {
-          source: "t耕地",
-          target: "居住用地",
-          value: 25,
-        },
-        { source: "t耕地", target: "交通运输用地", value: 16 },
-        {
-          source: "t陆地水城",
-          target: "居住用地",
-          value: 1,
-        },
-        { source: "t陆地水城", target: "交通运输用地", value: 5 },
-        { source: "t园地", target: "农业设施用地", value: 2 },
-        {
-          source: "t园地",
-          target: "居住用地",
-          value: 3,
-        },
-        { source: "t林地", target: "陆地水城", value: 1 },
-        { source: "t林地", target: "农业设施用地", value: 4 },
-        {
-          source: "t林地",
-          target: "居住用地",
-          value: 56,
-        },
-        { source: "t林地", target: "交通运输用地", value: 6 },
-        { source: "t草地", target: "农业设施用地", value: 1 },
-        {
-          source: "t草地",
-          target: "居住用地",
-          value: 89,
-        },
-        { source: "t草地", target: "交通运输用地", value: 8 },
-        {
-          source: "t居住用地",
-          target: "绿地与开敞空间用地",
-          value: 3,
-        },
-        {
-          source: "t居住用地",
-          target: "陆地水城",
-          value: 1,
-        },
-        {
-          source: "t居住用地",
-          target: "农业设施用地",
-          value: 2,
-        },
-        {
-          source: "t居住用地",
-          target: "居住用地",
-          value: 170,
-        },
-        {
-          source: "t居住用地",
-          target: "交通运输用地",
-          value: 10,
-        },
-        {
-          source: "t居住用地",
-          target: "交通运输用地",
-          value: 1,
-        },
-        { source: "t交通运输用地", target: "交通运输用地", value: 1 },
-      ];
-      // l.forEach((a)=>{
-      //   data.push({name:a.source})
-      // })
-      // l.forEach((item, k) => {
-
-      //   option.series.push(o);
-      // });
-      this.$nextTick(() => {
-        this.$refs.echartRef.setOptions(data, l);
+      let params = {
+        beginTime: 20230612,
+        endTime: 20230817,
+        jscType: "jsc_wpjc_yelx",
+        id: 46,
+      };
+      QueryList(params).then((res) => {
+        res.data.forEach((edata) => {
+          if (edata.qlx_type_name && edata.hlx_type_name) {
+            links.push({
+              source: edata.qlx_type_name,
+              target: edata.hlx_type_name,
+              value: edata.xzqdm_num,
+            });
+            if (data.findIndex((a) => a.name == edata.qlx_type_name) < 0)
+              data.push({ name: edata.qlx_type_name });
+            if (data.findIndex((a) => a.name == edata.hlx_type_name) < 0)
+              data.push({ name: edata.hlx_type_name });
+          }
+        });
+        this.$nextTick(() => {
+          this.$refs.echartRef.setOptions(data, links);
+        });
+      });
+    },
+    // /apply/jsc/QueryList?beginTime=20230612&endTime=20230817&jscType=&id=46
+    GetQueryListztsh() {
+      let params = {
+        beginTime: 20230612,
+        endTime: 20230817,
+        jscType: "jsc_wpjc_ztsh",
+        id: 46,
+      };
+      QueryList(params).then((res) => {
+        this.sdata = res.data && res.data.length > 0 ? res.data[0] : {};
       });
     },
   },
   mounted() {
-    this.getComputedStyle();
+    this.GetQueryListztsh();
+    this.getQueryListyelx();
   },
 };
 </script>

src/views/map3d.vue

@@ -86,13 +86,13 @@
     <div class="masking_left"></div>
     <div class="masking_bottom"></div>
     <div class="masking_right"></div>
+    <div class="masking_right"></div> -->
     <el-drawer :visible.sync="drawer" :with-header="false" :append-to-body="true" :show-close="false" >
       <iframe
-        src="https://agent-poc.h1url.cn/agents-admin-vue/#/chat/chat?shareId=c4f34731679ac2aad8bfeff0e4fd2f42"
+        :src="aiModel"
         style="width: 100%; height: 100%; position: absolute"
       ></iframe>
     </el-drawer>
-    <div class="masking_right"></div> -->
 
   </div>
 </template>
@@ -111,6 +111,7 @@ export default {
       formattedTime: "",
       activeMenuId: 0,
       drawer:false,
+      aiModel:window.aiModel
     };
   },
   created() {

static/Config/config.js

@@ -19,7 +19,8 @@ window.mapview = [110.0353, 16.3, 300000.0];
 window.baseImgLayer = "http://192.168.60.3:8099/iserver/services/map-WorkSpace/rest/maps/%E6%B5%B7%E5%8D%97%E5%B2%9B%E5%BD%B1%E5%83%8F15%E7%BA%A7_Level_15%40DataSource";
 //三维模型查询地址
 window.baseModelQueryLayer = "http://192.168.60.3:8099/iserver/services/data-building/rest/data/featureResults.rjson?returnContent=true";
-/**
+// ai大模型
+window.aiModel = "https://agent-demo.h1url.cn/agents-admin-vue/#/chat/chat?shareId=f509257cc7f8964f44b177aa72549204";/**
  * 模型对应数据图层
  * url:数据服务地址
  * DataName:数据源:数据集