瀏覽代碼

fix: 隐藏果园档案

刘秀芳 1 周之前
父節點
當前提交
89a7211b6f

File diff suppressed because it is too large
+ 2 - 0
src/assets/images/home/qi-100.svg


+ 9 - 7
src/views/home/components/homePage.vue

@@ -2,9 +2,9 @@
     <div class="chart-list">
         <div class="chart-item">
             <chart-box name="气象预警">
-                <template #title-right>
+                <!-- <template #title-right>
                     <div class="button" @click="gybg">果园报告</div>
-                </template>
+                </template> -->
                 <div class="base-wrap">
                     <div
                         class="base-item"
@@ -16,6 +16,7 @@
                     </div>
                 </div>
                 <one-line-chart class="line-chart" :yData="lineYdata" :minData="minData"></one-line-chart>
+                <!-- <weatherChart class="line-chart"></weatherChart> -->
             </chart-box>
         </div>
 <!--        <div class="chart-item phenology">-->
@@ -125,6 +126,7 @@
 import { ref, onMounted, onUnmounted } from "vue";
 import chartBox from "@/components/chartBox.vue";
 import tabs from "./tabs.vue";
+import weatherChart from "./weatherChart.vue";
 import barChart from "@/components/charts/barChart.vue";
 import oneLineChart from "@/components/charts/oneLineChart.vue";
 import eventBus from "@/api/eventBus";
@@ -319,7 +321,7 @@ const gybg = () => {
         }
         .base-wrap {
             width: 100%;
-            height: 64px;
+            height: 56px;
             margin-top: 4px;
             display: flex;
             justify-content: space-evenly;
@@ -337,13 +339,13 @@ const gybg = () => {
                 background: url("@/assets/images/home/scale-bg.png") no-repeat center center / 100% 100%;
                 .label {
                     width: 85px;
-                    height: 20px;
-                    line-height: 20px;
+                    height: 16px;
+                    line-height: 16px;
                     color: #fff;
                     background: url("@/assets/images/home/label-bg.png") no-repeat center center / 100% 100%;
                 }
                 .value {
-                    font-size: 19px;
+                    font-size: 18px;
                     font-family: "PangMenZhengDao";
                     span{
                       font-size: 12px;
@@ -352,7 +354,7 @@ const gybg = () => {
             }
         }
         .line-chart {
-          height: calc(100% - 65px);
+          height: calc(100% - 56px);
         }
         .box-bg {
             border-radius: 2px 2px 0 0;

+ 482 - 0
src/views/home/components/weatherChart.vue

@@ -0,0 +1,482 @@
+<template>
+    <div ref="chartDom" class="chart"></div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from "vue";
+import * as echarts from "echarts";
+
+// const props = defineProps({
+//     list: {
+//         type: Array,
+//         default: () => [],
+//         required: true,
+//     },
+// });
+
+let demoData = [
+    {
+        sourceof: null,
+        create_by: null,
+        update_by: null,
+        remark: null,
+        sys_dept_code: null,
+        createTime: null,
+        updateTime: null,
+        rq: "08/28",
+        weatherZgwd: 30,
+        weatherZdwd: 18,
+        weatherTqDay: "晴",
+        weatherTqNight: "晴",
+        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
+        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
+        windDirectDay: "南风",
+        windDirectNight: "南风",
+        windPowerDay: "微风",
+        windPowerNight: "微风",
+        week: "星期三",
+    },
+    {
+        sourceof: null,
+        create_by: null,
+        update_by: null,
+        remark: null,
+        sys_dept_code: null,
+        createTime: null,
+        updateTime: null,
+        rq: "08/29",
+        weatherZgwd: 31,
+        weatherZdwd: 19,
+        weatherTqDay: "晴",
+        weatherTqNight: "晴",
+        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
+        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
+        windDirectDay: "南风",
+        windDirectNight: "南风",
+        windPowerDay: "微风",
+        windPowerNight: "微风",
+        week: "星期四",
+    },
+    {
+        sourceof: null,
+        create_by: null,
+        update_by: null,
+        remark: null,
+        sys_dept_code: null,
+        createTime: null,
+        updateTime: null,
+        rq: "08/30",
+        weatherZgwd: 30,
+        weatherZdwd: 19,
+        weatherTqDay: "晴",
+        weatherTqNight: "多云",
+        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
+        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
+        windDirectDay: "西南风",
+        windDirectNight: "北风",
+        windPowerDay: "微风",
+        windPowerNight: "微风",
+        week: "星期五",
+    },
+    {
+        sourceof: null,
+        create_by: null,
+        update_by: null,
+        remark: null,
+        sys_dept_code: null,
+        createTime: null,
+        updateTime: null,
+        rq: "08/31",
+        weatherZgwd: 30,
+        weatherZdwd: 21,
+        weatherTqDay: "多云",
+        weatherTqNight: "雷阵雨",
+        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
+        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
+        windDirectDay: "北风",
+        windDirectNight: "南风",
+        windPowerDay: "3~4级",
+        windPowerNight: "3~4级",
+        week: "星期六",
+    },
+    {
+        sourceof: null,
+        create_by: null,
+        update_by: null,
+        remark: null,
+        sys_dept_code: null,
+        createTime: null,
+        updateTime: null,
+        rq: "09/01",
+        weatherZgwd: 25,
+        weatherZdwd: 16,
+        weatherTqDay: "雷阵雨",
+        weatherTqNight: "多云",
+        weatherImgDay: "https://d.scggqx.com/forecast/img/多云.png",
+        weatherImgNight: "https://d.scggqx.com/forecast/img/多云.png",
+        windDirectDay: "北风",
+        windDirectNight: "北风",
+        windPowerDay: "3~4级",
+        windPowerNight: "3~4级",
+        week: "星期日",
+    },
+    {
+        sourceof: null,
+        create_by: null,
+        update_by: null,
+        remark: null,
+        sys_dept_code: null,
+        createTime: null,
+        updateTime: null,
+        rq: "09/02",
+        weatherZgwd: 26,
+        weatherZdwd: 15,
+        weatherTqDay: "晴",
+        weatherTqNight: "晴",
+        weatherImgDay: "https://d.scggqx.com/forecast/img/阴.png",
+        weatherImgNight: "https://d.scggqx.com/forecast/img/阴.png",
+        windDirectDay: "北风",
+        windDirectNight: "北风",
+        windPowerDay: "3~4级",
+        windPowerNight: "微风",
+        week: "星期一",
+    },
+    {
+        sourceof: null,
+        create_by: null,
+        update_by: null,
+        remark: null,
+        sys_dept_code: null,
+        createTime: null,
+        updateTime: null,
+        rq: "09/03",
+        weatherZgwd: 27,
+        weatherZdwd: 18,
+        weatherTqDay: "多云",
+        weatherTqNight: "阴",
+        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
+        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
+        windDirectDay: "无持续风向",
+        windDirectNight: "无持续风向",
+        windPowerDay: "微风",
+        windPowerNight: "微风",
+        week: "星期二",
+    },
+    {
+        sourceof: null,
+        create_by: null,
+        update_by: null,
+        remark: null,
+        sys_dept_code: null,
+        createTime: null,
+        updateTime: null,
+        rq: "09/04",
+        weatherZgwd: 27,
+        weatherZdwd: 18,
+        weatherTqDay: "多云",
+        weatherTqNight: "阴",
+        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
+        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
+        windDirectDay: "无持续风向",
+        windDirectNight: "无持续风向",
+        windPowerDay: "微风",
+        windPowerNight: "微风",
+        week: "星期二",
+    },
+];
+
+let weekday = [];
+let datelist = [];
+let weatherDaylist = [];
+let weatherNightlist = [];
+let weatherImgDaylist = [];
+let weatherImgNightlist = [];
+let windDirectlist = [];
+let windPowerlist = [];
+let weatherZgwdlist = [];
+let weatherZdwdlist = [];
+
+let weatherImgDaylistRich = {};
+let weatherImgNightlistRich = {};
+
+let maxWD = 30;
+let minWD = 0;
+
+demoData.forEach((item) => {
+    weekday.push(item.week);
+    datelist.push(item.rq);
+    weatherDaylist.push(item.weatherTqDay);
+    weatherNightlist.push(item.weatherTqNight);
+    weatherImgDaylist.push(item.weatherImgDay);
+    weatherImgNightlist.push(item.weatherImgNight);
+    windDirectlist.push(item.windDirectDay);
+    windPowerlist.push(item.windPowerDay);
+    weatherZgwdlist.push(item.weatherZgwd);
+    weatherZdwdlist.push(item.weatherZdwd);
+});
+maxWD = Math.max(...weatherZgwdlist) + 30;
+minWD = Math.min(...weatherZdwdlist) - 30;
+let weatherImgDaylistStyle = weatherImgDaylist.map((item) => {
+    let dateUrl = item;
+    return {
+        backgroundColor: {
+            image: require("@/assets/images/home/qi-100.svg"),
+        },
+        height: 20,
+        width: 20,
+        color: "#fff"
+    };
+});
+let weatherImgNightlistStyle = weatherImgNightlist.map((item) => {
+    let dateUrl = item;
+    return {
+        backgroundColor: {
+            image: dateUrl,
+        },
+        height: 20,
+        width: 20,
+    };
+});
+weatherImgDaylistStyle.forEach((i, index) => {
+    weatherImgDaylistRich[index] = i;
+});
+weatherImgNightlistStyle.forEach((i, index) => {
+    weatherImgNightlistRich[index] = i;
+});
+
+const myChart = ref(null);
+const chartDom = ref(null);
+const options = {
+    grid: {
+        top: "-100px",
+        right: "20px",
+        bottom: '-80px',
+        left: "-20px",
+        containLabel: true,
+    },
+    xAxis: [
+        {
+            type: "category",
+            boundaryGap: false,
+            position: "top",
+            offset: 0,
+            zlevel: 100,
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+            splitLine: {
+                show: false,
+            },
+            axisLabel: {
+                interval: 0,
+                formatter: ["{a|{value}}"].join("\n"),
+                rich: {
+                    a: {
+                        color: "#fff",
+                    },
+                },
+            },
+            data: weekday,
+        },
+        {
+            type: "category",
+            position: "top",
+            offset: -40,
+            boundaryGap: false,
+            zlevel: 100,
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                interval: 0,
+                formatter: ["{a|{value}}"].join("\n"),
+                rich: {
+                    a: {
+                        fontSize: 11,
+                    },
+                },
+            },
+            data: datelist,
+            axisPointer: {
+                show: false,
+            },
+        },
+        // {
+        //     type: "category",
+        //     position: "top",
+        //     offset: -40,
+        //     boundaryGap: false,
+        //     zlevel: 100,
+        //     axisLine: {
+        //         show: false,
+        //     },
+        //     axisTick: {
+        //         show: false,
+        //     },
+        //     axisLabel: {
+        //         interval: 0,
+        //         formatter: ["{a|{value}}"].join("\n"),
+        //         rich: {
+        //             a: {
+        //                 color: "#fff",
+        //             },
+        //         },
+        //     },
+        //     data: weatherDaylist,
+        //     axisPointer: {
+        //         show: false,
+        //     },
+        // },
+        {
+            type: "category",
+            boundaryGap: false,
+            position: "top",
+            offset: -65,
+            zlevel: 100,
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                interval: 0,
+                formatter: ["{{value}|}"].join("\n"),
+                // formatter: `<i class="qi-100-fill"></i>`,
+                // formatter: function(params) {
+                //     // return `<i class="qi-100-fill"></i>`
+                //     return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff"></span>`
+                // },
+                rich: weatherImgDaylistRich,
+            },
+            data: ["0", "1", "2", "3", "4", "5", "6","7"],
+            axisPointer: {
+                show: false,
+            },
+        },
+        {
+            type: "category",
+            position: "top",
+            offset: -85,
+            boundaryGap: false,
+            zlevel: 100,
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                interval: 0,
+                formatter: ["{a|{value}°}"].join("\n"),
+                rich: {
+                    a: {
+                        color: "#fff",
+                    },
+                },
+            },
+            data: weatherZgwdlist,
+            axisPointer: {
+                show: false,
+            },
+        },
+    ],
+    yAxis: {
+        show: false,
+        interval: 15,
+        type: "value",
+        axisLabel: {
+            formatter: "{value}" + "℃",
+        },
+        max: maxWD,
+        min: minWD,
+    },
+    series: [
+        {
+            name: "最高温度",
+            type: "line",
+            data: weatherZgwdlist,
+            symbol: "circle",
+            symbolSize: 5,
+            showSymbol: true,
+            smooth: true,
+            itemStyle: {
+                color: "#FA8258", // 设置圆形的填充色
+                borderColor: "#ffffff", // 设置边框颜色
+                borderWidth: 1, // 设置边框宽度
+            },
+            lineStyle: {
+                width: 2, // 设置折线的宽度
+                color: "#FA8258", // 设置折线的颜色
+                shadowColor: "#FA8258", // 线的阴影颜色
+                shadowBlur: 5, // 线的阴影模糊级数
+                shadowOffsetX: 0, // 线的阴影水平偏移
+                shadowOffsetY: 5, // 线的阴影垂直偏移
+            },
+            silent: false,
+        },
+        {
+            name: "最低温度",
+            type: "line",
+            data: weatherZdwdlist,
+            symbol: "circle",
+            symbolSize: 5,
+            showSymbol: true,
+            smooth: true,
+            itemStyle: {
+                color: "#2E9AFE", // 设置圆形的填充色
+                borderColor: "#ffffff", // 设置边框颜色
+                borderWidth: 1, // 设置边框宽度
+            },
+
+            lineStyle: {
+                width: 2, // 设置折线的宽度
+                color: "#2E9AFE", // 设置折线的颜色
+                shadowColor: "#2E9AFE", // 线的阴影颜色
+                shadowBlur: 5, // 线的阴影模糊级数
+                shadowOffsetX: 0, // 线的阴影水平偏移
+                shadowOffsetY: 5, // 线的阴影垂直偏移
+            },
+            silent: false,
+        },
+    ],
+};
+
+onMounted(() => {
+    setTimeout(()=>{
+        initChart();
+    },200)
+});
+
+
+// watch(
+//     () => props.list,
+//     (newValue, oldValue) => {
+//         // if(newValue){
+//         //     options.xAxis[0].data = newValue.map(item => item[1] + item[2])
+//         //     options.series[0].data = newValue.map(item => Math.floor(item[3]))
+//         // }
+//         myChart.value.setOption(options);
+//     }
+// );
+
+const initChart = () => {
+    myChart.value = echarts.init(chartDom.value);
+    myChart.value.setOption(options);
+};
+
+
+</script>
+
+<style lang="scss" scoped>
+.chart {
+    width: 100%;
+    height: 100%;
+}
+</style>

+ 5 - 6
src/views/home/index.vue

@@ -11,7 +11,7 @@
                     <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
                 </div>
             </div>
-            <div class="home-bottom">
+            <!-- <div class="home-bottom"> -->
                 <!-- <time-line class="time-wrap yes-events"></time-line>
         <img class="fly-icon" src="@/assets/images/home/fly-icon.png" alt=""> -->
                 <!-- <div class="log-box yes-events">
@@ -38,14 +38,13 @@
                         <file-bar></file-bar>
                     </chart-box>
                 </div> -->
-                <div class="garden-file yes-events" :class="{ isShrink: isShrink }">
-                    <home-file></home-file
-                    ><!-- 箭头 -->
+                <!-- <div class="garden-file yes-events" :class="{ isShrink: isShrink }">
+                    <home-file></home-file>
                     <div class="arrow" @click="handleShrink('bottom')">
                         <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
                     </div>
-                </div>
-            </div>
+                </div> -->
+            <!-- </div> -->
             <div class="right yes-events">
                 <div class="list album-r">
                     <chart-box name="农事列表" arrow="arrow-left" :class="{ 'list-wrap': rightIndex === 0 }">

+ 1 - 1
src/views/workDetail/components/prescriptionBox.vue

@@ -559,7 +559,7 @@ const remove = () => {
             }
         }
         .new-prescription + .new-prescription {
-            margin-top: 8px;
+            // margin-top: 8px;
             border-top: 1px solid #444444;
         }
     }

Some files were not shown because too many files changed in this diff