自动打包

deploy/deploy.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  privateKey: '', // 本地私钥地址，位置一般在C:/Users/xxx/.ssh/id_rsa，非必填，有私钥则配置
+  passphrase: '', // 本地私钥密码，非必填，有私钥则配置
+  projectName: '', // 项目名称
+  // 根据需要进行配置，如只需部署prod线上环境，请删除dev测试环境配置，反之亦然，支持多环境部署
+  dev: { // 测试环境
+    name: '测试环境',
+    script: "npm run build", // 测试环境打包脚本
+    host: '192.168.100.30', // 测试服务器地址
+    port: 22, // ssh port，一般默认22
+    username: 'root', // 登录服务器用户名
+    password: '123456', // 登录服务器密码
+    distPath: 'dist',  // 本地打包dist目录
+    webDir: '/data/nginx1.20.2/html/real3d-portalsite',  // // 测试环境服务器地址
+  },
+  // prod: {  // 线上环境
+  //   name: '线上环境',
+  //   script: "npm run build", // 线上环境打包脚本
+  //   host: '', // 线上服务器地址
+  //   port: 22, // ssh port，一般默认22
+  //   username: '', // 登录服务器用户名
+  //   password: '', // 登录服务器密码
+  //   distPath: 'dist',  // 本地打包dist目录
+  //   webDir: '' // 线上环境web目录
+  // }
+  // 再还有多余的环境按照这个格式写即可
+}

src/main.js

@@ -53,7 +53,7 @@ Vue.use(components);
 
 import Vue from 'vue';
 Vue.prototype.bus = new Vue();
-
+console.log('2024-7-4打包测试')
 // import './common/js/cover_css'
 new Vue({
     el: '#app',

src/views/cockpit/bjxm.vue

@@ -165,7 +165,7 @@ export default {
         //你的代码
         backgroundColor: 'rgba(17, 42, 62, 0)',//"#012366",
         tooltip: {
-          show: true,
+          show:false,
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
@@ -398,7 +398,7 @@ export default {
   border: 1px solid red;
   height: 17rem;
   top: 38.5rem;
-  left: 26.5rem;
+  left: 27.5vw;
   border-radius: 0px;
   -webkit-box-shadow: none;
   box-shadow: none;
@@ -544,7 +544,7 @@ export default {
 }
 
 .title {
-  width: 21rem;
+  width: 22vw;
   background-size: 100% 89%;
 }
 </style>

src/views/cockpit/common/DiscountedAColumnar.vue

@@ -0,0 +1,306 @@
+<template>
+    <div id="discounted_columnar_echart" ref="discounted_columnar_echart"></div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+
+export default {
+    components: {},
+    data() {
+        return {};
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {},
+    //方法集合
+    methods: {
+        init_bjxm_echart() {
+            var myChart = echarts.init(this.$refs.discounted_columnar_echart);
+            // 柱状图的宽度，y是x的一半
+            const offsetX = 10
+            const offsetY = 5
+
+            // 绘制左侧面
+            const CubeLeft = echarts.graphic.extendShape({
+                shape: {
+                    x: 0,
+                    y: 0
+                },
+                buildPath: function (ctx, shape) {
+                    const xAxisPoint = shape.xAxisPoint
+                    const c0 = [shape.x, shape.y]
+                    const c1 = [shape.x - offsetX, shape.y - offsetY]
+                    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
+                    const c3 = [xAxisPoint[0], xAxisPoint[1]]
+                    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
+                }
+            })
+            // 绘制右侧面
+            const CubeRight = echarts.graphic.extendShape({
+                shape: {
+                    x: 0,
+                    y: 0
+                },
+                buildPath: function (ctx, shape) {
+                    const xAxisPoint = shape.xAxisPoint
+                    const c1 = [shape.x, shape.y]
+                    const c2 = [xAxisPoint[0], xAxisPoint[1]]
+                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
+                    const c4 = [shape.x + offsetX, shape.y - offsetY]
+                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
+                }
+            })
+            // 绘制顶面
+            const CubeTop = echarts.graphic.extendShape({
+                shape: {
+                    x: 0,
+                    y: 0,
+                },
+                buildPath: function (ctx, shape) {
+                    const c1 = [shape.x, shape.y]
+                    const c2 = [shape.x + offsetX, shape.y - offsetY]
+                    const c3 = [shape.x, shape.y - offsetX]
+                    const c4 = [shape.x - offsetX, shape.y - offsetY]
+                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
+                }
+            })
+            // 注册三个面图形
+            echarts.graphic.registerShape('CubeLeft', CubeLeft)
+            echarts.graphic.registerShape('CubeRight', CubeRight)
+            echarts.graphic.registerShape('CubeTop', CubeTop)
+            // 数据
+            const VALUE = [210.9, 260.8, 204.2, 504.9, 740.5]
+            let option = {
+                //你的代码
+                backgroundColor: 'rgba(17, 42, 62, 0)',//"#012366",
+                tooltip: {
+                    show:false,
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    formatter: function (params) {
+                        const item = params[1]
+                        return item.name + "\n" + item.value;
+                    }
+                },
+                grid: {
+                    left: 0,
+                    right: 0,
+                    bottom: 20,
+                    top: 30,
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['崖州区', '天崖区', '吉阳区', '海棠区', '育才区'],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#BCD3E5'
+                        }
+                    },
+                    // offset: 25,
+                    axisTick: {
+                        show: false,
+                        length: 9,
+                        alignWithLabel: true,
+                        lineStyle: {
+                            color: '#BCD3E5'
+                        }
+                    },
+                    axisLabel: {
+                        show: true,
+                        fontSize: 12,
+                    },
+                },
+                yAxis: [
+                    {
+                        min: 0,
+                        max: 1200,
+                        interval: 200,
+                        type: 'value',
+                        name: '临时用地(公顷)',
+                        axisLine: {
+                            show: false,
+                            lineStyle: {
+                                color: '#BCD3E5'
+                            }
+                        },
+                        splitLine: {
+                            show: false,
+                            lineStyle: {
+                                type: "dashed",
+                                color: "rgba(255,255,255,0.1)"
+                            },
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: true,
+                            fontSize: 12,
+
+                        },
+                        boundaryGap: ['20%', '20%']
+                    },
+                    {
+                        min: 0,
+                        max: 1200,
+                        interval: 200,
+                        name: '项目数(个)',
+                        type: 'value',
+                        axisLine: {
+                            show: false,
+                            lineStyle: {
+                                color: '#BCD3E5'
+                            }
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                type: "dashed",
+                                color: "rgba(255,255,255,0.1)"
+                            },
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: true,
+                            fontSize: 12,
+
+                        },
+                        boundaryGap: ['20%', '20%']
+                    },],
+                series: [
+                    {
+                        type: 'custom',
+                        renderItem: (params, api) => {
+                            const location = api.coord([api.value(0), api.value(1)])
+                            var color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: 'rgba(33,101,140,0.5)'
+
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(33,101,140,0.5)'
+
+                            }
+                            ])
+                            return {
+                                type: 'group',
+                                children: [
+                                    {
+                                        type: 'CubeLeft',
+                                        shape: {
+                                            api,
+                                            xValue: api.value(0),
+                                            yValue: api.value(1),
+                                            x: location[0],
+                                            y: location[1],
+                                            xAxisPoint: api.coord([api.value(0), 0])
+                                        },
+                                        style: {
+                                            fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                                offset: 0,
+                                                color: 'rgba(34, 129, 209, 0.8)'
+                                            },
+                                            {
+                                                offset: 0.8,
+                                                color: 'rgba(34, 129, 209, 0.8)'
+
+
+                                            }
+                                            ])
+                                        }
+                                    },
+                                    {
+                                        type: 'CubeRight',
+                                        shape: {
+                                            api,
+                                            xValue: api.value(0),
+                                            yValue: api.value(1),
+                                            x: location[0],
+                                            y: location[1],
+                                            xAxisPoint: api.coord([api.value(0), 0])
+                                        },
+                                        style: {
+                                            fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                                offset: 0,
+                                                color: 'rgba(97, 173, 237, 0.8)'
+                                            },
+                                            {
+                                                offset: 0.8,
+                                                color: 'rgba(97, 173, 237, 0.8)'
+                                            }
+                                            ])
+                                        }
+                                    }, {
+                                        type: 'CubeTop',
+                                        shape: {
+                                            api,
+                                            xValue: api.value(0),
+                                            yValue: api.value(1),
+                                            x: location[0],
+                                            y: location[1],
+                                            xAxisPoint: api.coord([api.value(0), 0])
+                                        },
+                                        style: {
+                                            fill: color = api.value(1) > 10000 ? 'red' : new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                                offset: 0,
+                                                color: 'rgba(60, 167, 255, 1)'
+
+                                            },
+                                            {
+                                                offset: 1,
+                                                color: 'rgba(135, 200, 255, 1)'
+
+                                            }
+                                            ])
+                                        }
+                                    }]
+                            }
+                        },
+
+                        data: VALUE
+                    },
+                    {
+                        type: 'line',
+                        smooth: true,
+                        itemStyle: {
+                            normal: {
+                                color: '#FFCC64'  // 折线的颜色
+                            }
+                        },
+                        data: VALUE,
+                    },
+                ]
+            };
+            myChart.setOption(option);
+        },
+    },
+    beforeCreate() { }, //生命周期 - 创建之前
+    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
+    beforeMount() { }, //生命周期 - 挂载之前
+    mounted() {
+        this.init_bjxm_echart();
+    }, //生命周期 - 挂在完成
+    beforeUpdate() { }, //生命周期 - 更新之前
+    updated() { }, //生命周期 - 更新之后
+    beforeDestroy() { }, //生命周期 - 销毁之前
+    destroy() { },//生命周期 - 销毁完成
+    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+};
+</script>
+<style  scoped>
+#discounted_columnar_echart {
+    position: relative;
+    top: 1rem;
+    width: 23.5rem;
+    height: 11rem;
+}
+</style>

src/views/cockpit/hysy.vue

@@ -2,54 +2,41 @@
     <div class="hysy">
         <div class="title">
             <div class="icon"></div>
-            <!-- <span>重点用地监管</span> -->
+            <span>重点用地监管</span>
         </div>
-        <!-- <div class="hysy_box">
-         
-        </div> -->
+        <div class="selectTab left_tab">
+
+            <el-select v-model="left_value" placeholder="请选择" :popper-append-to-body="false" @change="changeChartsLeft">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+            </el-select>
+        </div>
+        <div class="selectTab right_tab">
+            <el-select v-model="right_value" placeholder="请选择" :popper-append-to-body="false" @change="changeChartsRight">
+                <el-option v-for="item in right_options" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+            </el-select>
+        </div>
+
+        <DiscountedAColumnar />
     </div>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 import { QueryOne, QueryList } from "../../api/cockpitNew";
-import BarGraph3D from './common/BarGraph3D.vue';
-import DialWatch from './common/DialWatch.vue';
+import DiscountedAColumnar from './common/DiscountedAColumnar.vue';
 
 export default {
-    components: { BarGraph3D, DialWatch },
+    components: { DiscountedAColumnar },
     data() {
         return {
-            legendData: ['计划收储', '完成收储'],
-            xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
-            result: [
-                { name: '计划收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
-                { name: '完成收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
+            radio: 'cut',
+            left_value: 'nzyd',
+            options: [
+                { value: "nzyd", label: "农转用地" },
+                { value: "lsyd", label: "临时用地" },
             ],
-
-            dial_watch_info: {
-                lt: {
-                    key: '计划出让海域',
-                    value: 0,
-                    unit: "公顷",
-
-                }, lb: {
-                    key: "完成出让海域",
-                    value: 0,
-                    unit: "公顷",
-
-                }, rt: {
-                    key: "计划出让项目",
-                    value: 0,
-                    unit: "个",
-
-                }, rb: {
-                    key: "完成出让项目",
-                    value: 0,
-                    unit: "个",
-
-                },
-            },
         };
     },
     //监听属性 类似于data概念
@@ -63,85 +50,6 @@ export default {
     }, //生命周期 - 创建完成（可以访问当前this实例）
     beforeMount() { }, //生命周期 - 挂载之前
     methods: {
-
-        async init_info(params) {
-            const that = this;
-            let obj = {
-                jscType: 'jsc_hysyq_ztsh',
-                beginTime: params ? params.beginTime : store.state.cockpit_date[0],
-                endTime: params ? params.endTime : store.state.cockpit_date[1],
-                id: params ? params.id : '4602'
-            };
-            let data = await QueryList(obj);
-            that.dial_watch_info = {
-                lt: {
-                    key: '计划出让海域',
-                    value: data.data[0].jh_mj,
-                    unit: "公顷",
-
-                }, lb: {
-                    key: "完成出让海域",
-                    value: data.data[0].sj_mj,
-                    unit: "公顷",
-
-                }, rt: {
-                    key: "计划出让项目",
-                    value: data.data[0].jh_number,
-                    unit: "个",
-
-                }, rb: {
-                    key: "完成出让项目",
-                    value: data.data[0].sj_number,
-                    unit: "个",
-
-                },
-            }
-            let echart_data = 0;
-            if (data.data[0].sj_mj == 0) {
-                echart_data = 0
-            } else if (data.data[0].jh_mj == 0 && data.data[0].sj_mj > 0) {
-                echart_data = 100
-            } else {
-                echart_data = (data.data[0].sj_mj / data.data[0].jh_mj * 100).toFixed(2)
-            }
-            that.$refs.hysy_dial_watch.init_dial_watch(echart_data);
-            // store.state.cockpit_hysy.info = data.data[0]
-        },
-        async init_echart_data(params) {
-            const that = this;
-            let obj = {
-                jscType: 'jsc_hysyq_yelx',
-                beginTime: params ? params.beginTime : store.state.cockpit_date[0],
-                endTime: params ? params.endTime : store.state.cockpit_date[1],
-                id: params ? params.id : '4602'
-            };
-            let data = await QueryList(obj);
-
-            let xdata = [];
-            let result = [
-                {
-                    name: "计划出让",
-                    data: []
-                },
-                {
-                    name: "完成出让",
-                    data: []
-                }
-            ];
-            data.data.forEach((res) => {
-                xdata.push(res.yhlx_name);
-                result[0].data.push(res.jh_mj);
-                result[1].data.push(res.sj_mj);
-
-            })
-
-            that.xdata = xdata;
-            that.result = result;
-            that.legendData = ['计划出让', '完成出让'];
-            this.$refs.hysy_bar_graph.setOptions(this.legendData, this.xdata, this.result);
-
-        }
-
     },
     mounted() {
         const that = this;
@@ -195,7 +103,7 @@ export default {
         font-weight: bold;
         position: relative;
         top: 0.3rem;
-        left: -18rem;
+        left: -15rem;
     }
 }
 
@@ -224,4 +132,87 @@ export default {
         color: #68f4fb;
     }
 }
+
+
+.selectTab {
+    position: absolute;
+    top: 3px;
+    right: 22px;
+    z-index: 100;
+
+    /deep/ .el-input__inner {
+        // padding-right: 30px;
+        width: 128px !important;
+        height: 24px !important;
+        line-height: 24px;
+        padding-left: 22px;
+        padding-right: 0px;
+        font-size: 12px;
+        color: #bcd3e5;
+        border: none;
+        // background: url("/static/images/overview/selectBg.png") no-repeat !important;
+        background-color: rgba(0, 0, 0, 0) !important;
+        background-size: 100% 100%;
+    }
+
+    /deep/ .el-input__icon {
+        line-height: 1;
+    }
+
+    /deep/ .el-input__suffix {
+        right: -2px;
+    }
+
+    /deep/ .el-select-dropdown__list {
+        color: #bcd3e5 !important;
+        background: linear-gradient(180deg,
+                rgba(3, 115, 177, 0) 11%,
+                rgba(3, 115, 177, 0.48) 100%);
+        border-image: linear-gradient(360deg,
+                rgba(75, 185, 250, 0.2),
+                rgba(75, 185, 250, 0.05)) 1 1 !important;
+        border: none;
+    }
+
+    /deep/ .el-select-dropdown__item.hover,
+    .el-select-dropdown__item:hover {
+        background-color: rgba(87, 163, 226, 0.5);
+    }
+
+    /deep/ .el-select-dropdown__item {
+        color: #ecf6ff;
+    }
+}
+
+/deep/ {
+    .el-select-dropdown__item.selected {
+        color: #409eff;
+    }
+}
+
+/deep/ .el-popper[x-placement^="bottom"] {
+    margin-top: 12px;
+    background: #163253;
+}
+
+/deep/ .el-select-dropdown {
+    border: none;
+}
+
+/deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
+    border-bottom-color: #163253;
+    top: 0;
+}
+
+.left_tab {
+    position: absolute;
+    right: 122px;
+    bottom: 9px;
+}
+
+.right_tab {
+    position: absolute;
+    right: 8px;
+    bottom: 9px;
+}
 </style>