diff --git a/04.系统编码/Frontend/public/images/decision-support/通风廊道规划建议/通风廊道1.png b/04.系统编码/Frontend/public/images/decision-support/通风廊道规划建议/通风廊道1.png
new file mode 100644
index 0000000..ae735bd
Binary files /dev/null and b/04.系统编码/Frontend/public/images/decision-support/通风廊道规划建议/通风廊道1.png differ
diff --git a/04.系统编码/Frontend/public/images/decision-support/通风廊道规划建议/通风廊道2.png b/04.系统编码/Frontend/public/images/decision-support/通风廊道规划建议/通风廊道2.png
new file mode 100644
index 0000000..a208a9e
Binary files /dev/null and b/04.系统编码/Frontend/public/images/decision-support/通风廊道规划建议/通风廊道2.png differ
diff --git a/04.系统编码/Frontend/public/images/decision-support/高楼污染指数/高楼污染指数1.png b/04.系统编码/Frontend/public/images/decision-support/高楼污染指数/高楼污染指数1.png
new file mode 100644
index 0000000..9c64b93
Binary files /dev/null and b/04.系统编码/Frontend/public/images/decision-support/高楼污染指数/高楼污染指数1.png differ
diff --git a/04.系统编码/Frontend/public/images/decision-support/高楼污染指数/高楼污染指数2.png b/04.系统编码/Frontend/public/images/decision-support/高楼污染指数/高楼污染指数2.png
new file mode 100644
index 0000000..8bd729f
Binary files /dev/null and b/04.系统编码/Frontend/public/images/decision-support/高楼污染指数/高楼污染指数2.png differ
diff --git a/04.系统编码/Frontend/public/images/logo.png b/04.系统编码/Frontend/public/images/logo.png
index eb959f9..4599b2f 100644
Binary files a/04.系统编码/Frontend/public/images/logo.png and b/04.系统编码/Frontend/public/images/logo.png differ
diff --git a/04.系统编码/Frontend/public/images/picture2.png b/04.系统编码/Frontend/public/images/picture2.png
new file mode 100644
index 0000000..e5d2795
Binary files /dev/null and b/04.系统编码/Frontend/public/images/picture2.png differ
diff --git a/04.系统编码/Frontend/public/images/picture3.png b/04.系统编码/Frontend/public/images/picture3.png
new file mode 100644
index 0000000..e3be46a
Binary files /dev/null and b/04.系统编码/Frontend/public/images/picture3.png differ
diff --git a/04.系统编码/Frontend/public/images/picture5.png b/04.系统编码/Frontend/public/images/picture5.png
new file mode 100644
index 0000000..e5f7739
Binary files /dev/null and b/04.系统编码/Frontend/public/images/picture5.png differ
diff --git a/04.系统编码/Frontend/src/components/DecisionSupport.vue b/04.系统编码/Frontend/src/components/DecisionSupport.vue
index d0ced3a..21066ec 100644
--- a/04.系统编码/Frontend/src/components/DecisionSupport.vue
+++ b/04.系统编码/Frontend/src/components/DecisionSupport.vue
@@ -1,16 +1,154 @@
 <template>
+    <div class="tabs"></div>
+    <div class="main">
+        <div class="menu panel">
+            <div class="menu-item">
+                <h2 class="tip">指标选择</h2>
+                <el-row :gutter="12">
+                    <el-col :span="24"><span @click="onIndicatorClick('通风廊道规划建议')" :class="{'active': currentIndicator === '通风廊道规划建议'}">通风廊道规划建议</span></el-col>
+                    <el-col :span="24"><span @click="onIndicatorClick('高楼污染指数')" :class="{'active': currentIndicator === '高楼污染指数'}">高楼污染指数</span></el-col>
+                </el-row>
+            </div>
+        </div>
+        <div class="container panel">
+            <span class="save-btn"><img src="/images/save.png" /></span>
+            
+            <div class="picture-view advice-picture-view" v-if="currentIndicator === '通风廊道规划建议'">
+                <div class="picture">
+                    <h2 class="title">南京市潜在通风廊道</h2>
+                    <el-image
+                    src="/images/decision-support/通风廊道规划建议/通风廊道1.png"
+                    :preview-src-list="srcList"
+                    :initial-index="1"
+                    fit="contain"
+                    >
+                    </el-image>
+                </div>
+                <div class="picture">
+                    <h2 class="title">南京市通风廊道规划示意图</h2>
+                    <el-image
+                    src="/images/decision-support/通风廊道规划建议/通风廊道2.png"
+                    :preview-src-list="srcList"
+                    :initial-index="1"
+                    fit="contain"
+                    class="border"
+                    >
+                    </el-image>
+                </div>
+            </div>
+            <div class="picture-view indicator-picture-view" v-if="currentIndicator === '高楼污染指数'">
+                <h2 class="title">南京市高楼污染指数-PM2.5</h2>
+                <div class="picture-block">
+                    <div class="picture">
+                        <el-image
+                        src="/images/decision-support/高楼污染指数/高楼污染指数1.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </div>
+                    <div class="picture">
+                        <el-image
+                        src="/images/decision-support/高楼污染指数/高楼污染指数2.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
-<script>
-export default {
-   name: "app",
-   setup() {
-     return {
+<script lang="ts">
+    import { onMounted, reactive, toRefs } from 'vue';
+    import moment from "moment";
+    
+    export default {
+        name: 'DecisionSupport',
+        setup() {
+            let options = reactive({
+                currentIndicator: '通风廊道规划建议',
+                srcList: ['/images/picture.png']
+            })
 
-     }
-   }
-}
-</script>
+            const onIndicatorClick = (indicator) => {
+                options.currentIndicator = indicator;
+            }
 
+            return {
+                ...toRefs(options),
+                onIndicatorClick
+            }
+        }
+    }
+</script>
 <style lang="less" scoped>
+    .main {
+        .container {
+            .save-btn {
+                top: 0.6rem;
+                right: 0.6rem;
+            }
+            .advice-picture-view {
+                height: 100%;
+                display: flex;
+                align-items: center;
+                .picture {
+                    width: 7.98rem;
+                    height: auto;
+                    display: block;
+                    .title {
+                        padding: 0;
+                        margin-bottom: 0.7rem;
+                    }
+                    .el-image {
+                        width: 99%;
+                        height: auto;
+                        margin: 0 auto;
+                        &.border {
+                            border: 1px solid #666666;
+                        }
+                    }
+
+                    &:last-of-type {
+                        width: 5.34rem;
+                    }
+                }
+            }
+            .indicator-picture-view {
+                height: 100%;
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                justify-content: center;
+                .title {
+                    padding: 0;
+                    margin-bottom: 0.7rem;
+                }
+                .picture-block {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                .picture {
+                    width: 6.5rem;
+                    height: auto;
+                    display: block;
+                    .el-image {
+                        width:100%;
+                        height: auto;
+                        margin: 0 auto;
+                    }
+
+                    &:last-of-type {
+                        width: 6.44rem;
+                    }
+                }
+            }
+        }
+    }
 </style>
diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index a04d047..ffe46a7 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="tabs">
-        <div class="tab-item" @click="onTabClick('垂直廓线')" :class="{'active': currentTab === '垂直廓线'}">
+        <div class="tab-item" @click="onTabClick('kuoxian')" :class="{'active': currentTab === 'kuoxian'}">
             垂直廓线
-            <img src="/images/line.png" v-if="currentTab === '垂直廓线'" />
+            <img src="/images/line.png" v-if="currentTab === 'kuoxian'" />
         </div>
         <div class="tab-item" @click="onTabClick('对流指数')" :class="{'active': currentTab === '对流指数'}">
             对流指数
@@ -22,18 +22,18 @@
             <div class="menu-item">
                 <h2 class="tip">区域选择</h2>
                 <el-row :gutter="12">
-                    <el-col :span="8"><span @click="onRegionClick('江宁')" :class="{'active': currentRegion === '江宁'}">江宁</span></el-col>
-                    <el-col :span="8"><span @click="onRegionClick('六合')" :class="{'active': currentRegion === '六合'}">六合</span></el-col>
-                    <el-col :span="8"><span @click="onRegionClick('浦口')" :class="{'active': currentRegion === '浦口'}">浦口</span></el-col>
-                    <el-col :span="8"><span @click="onRegionClick('高淳')" :class="{'active': currentRegion === '高淳'}">高淳</span></el-col>
-                    <el-col :span="8"><span @click="onRegionClick('溧水')" :class="{'active': currentRegion === '溧水'}">溧水</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('jiangning')" :class="{'active': currentRegion === 'jiangning'}">江宁</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('liuhe')" :class="{'active': currentRegion === 'liuhe'}">六合</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('pukou')" :class="{'active': currentRegion === 'pukou'}">浦口</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('gaochun')" :class="{'active': currentRegion === 'gaochun'}">高淳</span></el-col>
+                    <el-col :span="8"><span @click="onRegionClick('lishui')" :class="{'active': currentRegion === 'lishui'}">溧水</span></el-col>
                 </el-row>
             </div>
-            <div class="menu-item" v-if="currentTab === '垂直廓线'">
+            <div class="menu-item" v-if="currentTab === 'kuoxian'">
                 <h2 class="tip">要素选择</h2>
                 <el-row :gutter="12">
-                    <el-col :span="8"><span @click="onElementClick('温度')" :class="{'active': currentElement === '温度'}">温度</span></el-col>
-                    <el-col :span="8"><span @click="onElementClick('湿度')" :class="{'active': currentElement === '湿度'}">湿度</span></el-col>
+                    <el-col :span="8"><span @click="onElementClick('TEMP')" :class="{'active': currentElement === 'TEMP'}">温度</span></el-col>
+                    <el-col :span="8"><span @click="onElementClick('RH')" :class="{'active': currentElement === 'RH'}">湿度</span></el-col>
                 </el-row>
             </div>
             <div class="menu-item" v-if="currentTab === '对流指数'">
@@ -52,13 +52,13 @@
                         <span class="minute" @click="onTimeClick(time)">{{time.minute}}</span>
                     </div>
                 </div>
-                <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker">
+                <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker"  @change="onDateChange">
                 </el-date-picker>
                 <div class="control-btn">
-                    <span><img src="/images/prev.png" /></span>
-                    <span><img src="/images/next.png" /></span>
+                    <span @click="onPrevDayClick"><img src="/images/prev.png" /></span>
+                    <span @click="onNextDayClick"><img src="/images/next.png" /></span>
                 </div>
-                <el-select v-model="currentHour" placeholder="">
+                <el-select v-model="currentHour" placeholder="" @change="onHourChange">
                     <el-option
                     v-for="item in hours"
                     :key="item.value"
@@ -77,16 +77,16 @@
                 </div>
             </div>
             <div class="picture-view">
-                <span class="arrow arrow-prev"><img src="/images/prev-btn.png" /></span>
-                <span class="arrow arrow-next"><img src="/images/next-btn.png" /></span>
+                <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>
+                <span class="arrow arrow-next" @click="onNextImgClick"><img src="/images/next-btn.png" /></span>
                 <span class="save-btn"><img src="/images/save.png" /></span>
-                <h2 class="title">2021.11.21 10:42 Temperature</h2>
+                <h2 class="title">{{title}}</h2>
                 <div class="picture">
                     <el-image
-                    src="/images/picture.png"
-                    :preview-src-list="srcList"
-                    :initial-index="1"
-                    fit="contain"
+                        :src="imgUrl"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
                     >
                     </el-image>
                 </div>
@@ -98,31 +98,33 @@
 <script lang="ts">
     import { onMounted, reactive, toRefs } from 'vue';
     import moment from "moment";
+    import { MicrowaveRadiationConfig } from '../hooks/Config';
     
     export default {
         name: 'MicrowaveRadiation',
         setup() {
             let options = reactive({
-                currentTab: '垂直廓线',
-                currentRegion: '江宁',
-                currentElement: '温度',
+                currentTab: 'kuoxian',
+                currentRegion: 'jiangning',
+                currentElement: 'TEMP',
                 currentCategory: 'CAPE',
-                date: new Date(),
+                date: moment().format('YYYY-MM-DD'),
                 currentHour: '10',
-                hours: [{
-                    value: '10',
-                    label: '10'
-                }, {
-                    value: '11',
-                    label: '11'
-                }],
+                hours: [],
                 times: [],
                 currentTime: null,
-                srcList: ['/images/picture.png']
+                imgUrl: null,
+                srcList: ['/images/picture.png'],
+                isPlay: false,
+                title: null,
+                test: []
             })
 
             onMounted(() => {
-                initTimes();
+                initHours();
+                initTimeLine();
+                activeImage();
+                setTitle(moment(options.date, 'YYYY-MM-DD').hour(parseInt(options.currentHour)))
             })
             
             const onTabClick = (name) => {
@@ -141,18 +143,32 @@
                 options.currentCategory = category;
             }
 
-            const initTimes = () => {
-                let now = moment();
+            const setTitle = (date) => {
+                console.log(date)
+                options.title = date.format('YYYY.MM.DD HH:mm') + '  ' + options.currentElement;
+            }
+
+            const activeImage = () => {
+                console.log(MicrowaveRadiationConfig.getUrl("jingning", "kuoxian_TEMP", moment()));
+                options.imgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_' + options.currentElement, moment(options.date).hour(parseInt(options.currentHour)).minute(0));
+                console.log(options.imgUrl)
+            }
+
+            const initTimeLine = () => {
+                options.times = [];
+                options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm');
+
+                let now = moment(options.date).hour(parseInt(options.currentHour) - 2);
+
                 let minute = now.minute();
                 const remainder = minute % 6;
                 if (remainder > 0){
                     now.minute(minute + (6 - remainder));
                 }
 
-                options.currentTime = now.format('YYYY-MM-DD HH:mm');
                 now.minute(now.minute() - 6);
 
-                for (let i = 0; i < 20 ; i++) {
+                for (let i = 0; i < 21 ; i++) {
                     options.times.push({
                         hour: now.add(6, 'minute').format('HH时'),
                         minute: now.format('mm'),
@@ -162,10 +178,45 @@
                 }
             }
 
+            const initHours = () => {
+                for (let i = 0; i < 23; i++) {
+                    options.hours.push({
+                        value: i,
+                        label: i < 10 ? '0' + i : i,
+                    })
+                }
+            }
+
             const onTimeClick = (time) => {
-                console.log(time.date)
                 options.currentTime = time.date;
-                console.log(options.currentTime)
+                setTitle(moment(time.date, 'YYYY-MM-DD HH:mm'));
+                activeImage();
+            }
+
+            const onPrevDayClick = () => {
+                options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD')
+            }
+
+            const onNextDayClick = () => {
+                options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD')
+            }
+
+            const onPrevImgClick = () => {
+
+            }
+            
+            const onNextImgClick = () => {
+                
+            }
+
+            const onHourChange = () => {
+                initTimeLine();
+                setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+            }
+
+            const onDateChange = () => {
+                initTimeLine();
+                setTitle(moment(options.date).hour(parseInt(options.currentHour)));
             }
 
             return {
@@ -174,7 +225,13 @@
                 onRegionClick,
                 onElementClick,
                 onCategoryClick,
-                onTimeClick
+                onTimeClick,
+                onPrevDayClick,
+                onNextDayClick,
+                onPrevImgClick,
+                onNextImgClick,
+                onHourChange,
+                onDateChange
             }
         }
     }
diff --git a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
index c2bb804..8b98108 100644
--- a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
+++ b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
@@ -19,7 +19,7 @@
     </div>
     <div class="main">
         <div class="menu panel">
-            <div class="menu-item">
+            <div class="menu-item" v-if="currentTab === '植被变化对气候的影响' || currentTab === '植被分布对气候的影响'">
                 <h2 class="tip">要素选择</h2>
                 <el-row :gutter="12">
                     <el-col :span="24"><span @click="onElementClick('归一化植被指数NDVI')" :class="{'active': currentElement === '归一化植被指数NDVI'}">归一化植被指数NDVI</span></el-col>
@@ -27,9 +27,63 @@
                     <el-col :span="24"><span @click="onElementClick('增强植被指数EVI')" :class="{'active': currentElement === '增强植被指数EVI'}">增强植被指数EVI</span></el-col>
                 </el-row>
             </div>
+            <div class="menu-item" v-if="currentTab === '植被和气候要素变化趋势' || currentTab === '植被和气候要素的监测'">
+                <h2 class="tip">要素选择</h2>
+                <el-row :gutter="12">
+                    <el-col :span="24"><span @click="onCategoryClick('地表温度LST')" :class="{'active': currentCategory === '地表温度LST'}">地表温度LST</span></el-col>
+                    <el-col :span="24"><span @click="onCategoryClick('叶面积指数LAI')" :class="{'active': currentCategory === '叶面积指数LAI'}">叶面积指数LAI</span></el-col>
+                    <el-col :span="24"><span @click="onCategoryClick('增强植被指数EVI')" :class="{'active': currentCategory === '增强植被指数EVI'}">增强植被指数EVI</span></el-col>
+                    <el-col :span="24"><span @click="onCategoryClick('归一化植被指数NDVI')" :class="{'active': currentCategory === '归一化植被指数NDVI'}">归一化植被指数NDVI</span></el-col>
+                    <el-col :span="24"><span @click="onCategoryClick('反照率Albedo')" :class="{'active': currentCategory === '反照率Albedo'}">反照率Albedo</span></el-col>
+                    <el-col :span="24"><span @click="onCategoryClick('蒸散发Evapotranspiration')" :class="{'active': currentCategory === '蒸散发Evapotranspiration'}">蒸散发Evapotranspiration</span></el-col>
+                    <el-col :span="24" v-if="currentTab === '植被和气候要素的监测'"><span @click="onCategoryClick('土地覆盖类型')" :class="{'active': currentCategory === '土地覆盖类型'}">土地覆盖类型</span></el-col>
+                </el-row>
+            </div>
+            <div class="menu-item" v-if="currentTab === '植被和气候要素的监测'">
+                <h2 class="tip">时间点选择</h2>
+                <el-row :gutter="12">
+                    <el-col :span="24"><span @click="onTimeClick('地表温度（01:30）')" :class="{'active': currentTime === '地表温度（01:30）'}">地表温度（01:30）</span></el-col>
+                    <el-col :span="24"><span @click="onTimeClick('地表温度（10:30）')" :class="{'active': currentTime === '地表温度（10:30）'}">地表温度（10:30）</span></el-col>
+                    <el-col :span="24"><span @click="onTimeClick('地表温度（13:30）')" :class="{'active': currentTime === '地表温度（13:30）'}">地表温度（13:30）</span></el-col>
+                    <el-col :span="24"><span @click="onTimeClick('地表温度（13:30）')" :class="{'active': currentTime === '地表温度（22:30）'}">地表温度（22:30）</span></el-col>
+                </el-row>
+            </div>
         </div>
-        <div class="container panel">
-            <div class="picture-view synergy-picture-view">
+        <div class="container panel synergy-container">
+            <span class="save-btn"><img src="/images/save.png" /></span>
+            <div class="element-select" v-if="currentTab === '植被和气候要素变化趋势' || currentTab === '植被和气候要素的监测'">
+                <div class="surface-temperature" v-if="currentTab === '植被和气候要素变化趋势'">
+                    <span @click="onSurfaceTemperatureClick('地表温度（01:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（01:30）'}">地表温度（01:30）</span>
+                    <span @click="onSurfaceTemperatureClick('地表温度（10:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（10:30）'}">地表温度（10:30）</span>
+                    <span @click="onSurfaceTemperatureClick('地表温度（13:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（13:30）'}">地表温度（13:30）</span>
+                    <span @click="onSurfaceTemperatureClick('地表温度（22:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（22:30）'}">地表温度（22:30）</span>
+                </div>
+                <div class="surface-temperature" v-if="currentTab === '植被和气候要素的监测'">
+                    <span @click="onYearClick('2000')" :class="{'active': currentYear === '2000'}">2000</span>
+                    <span @click="onYearClick('2001')" :class="{'active': currentYear === '2001'}">2001</span>
+                    <span @click="onYearClick('2002')" :class="{'active': currentYear === '2002'}">2002</span>
+                    <span @click="onYearClick('2003')" :class="{'active': currentYear === '2003'}">2003</span>
+                    <span @click="onYearClick('2004')" :class="{'active': currentYear === '2004'}">2004</span>
+                    <span @click="onYearClick('2005')" :class="{'active': currentYear === '2005'}">2005</span>
+                    <span @click="onYearClick('2006')" :class="{'active': currentYear === '2006'}">2006</span>
+                    <span @click="onYearClick('2007')" :class="{'active': currentYear === '2007'}">2007</span>
+                    <span @click="onYearClick('2008')" :class="{'active': currentYear === '2008'}">2008</span>
+                    <span @click="onYearClick('2009')" :class="{'active': currentYear === '2009'}">2009</span>
+                    <span @click="onYearClick('2010')" :class="{'active': currentYear === '2010'}">2010</span>
+                    <span @click="onYearClick('2011')" :class="{'active': currentYear === '2011'}">2011</span>
+                    <span @click="onYearClick('2012')" :class="{'active': currentYear === '2012'}">2012</span>
+                    <span @click="onYearClick('2013')" :class="{'active': currentYear === '2013'}">2013</span>
+                    <span @click="onYearClick('2014')" :class="{'active': currentYear === '2014'}">2014</span>
+                    <span @click="onYearClick('2015')" :class="{'active': currentYear === '2015'}">2015</span>
+                    <span @click="onYearClick('2016')" :class="{'active': currentYear === '2016'}">2016</span>
+                    <span @click="onYearClick('2017')" :class="{'active': currentYear === '2017'}">2017</span>
+                    <span @click="onYearClick('2018')" :class="{'active': currentYear === '2018'}">2018</span>
+                    <span @click="onYearClick('2019')" :class="{'active': currentYear === '2019'}">2019</span>
+                    <span @click="onYearClick('2020')" :class="{'active': currentYear === '2020'}">2020</span>
+                    <span @click="onYearClick('多年平均值2000-2020')" :class="{'active': currentYear === '多年平均值2000-2020'}">多年平均值2000-2020</span>
+                </div>
+            </div>
+            <div class="picture-view synergy-picture-view" v-if="currentTab === '植被变化对气候的影响' || currentTab === '植被分布对气候的影响'">
                 <el-row :gutter="0">
                     <el-col :span="8">
                         <h2 class="title">地表温度（01:30）</h2>
@@ -44,7 +98,7 @@
                     <el-col :span="8">
                         <h2 class="title">地表温度（01:30）</h2>
                         <el-image
-                        src="/images/picture1.png"
+                        src="/images/picture2.png"
                         :preview-src-list="srcList"
                         :initial-index="1"
                         fit="contain"
@@ -93,6 +147,118 @@
                     </el-col>
                 </el-row>
             </div>
+            <div class="picture-view multi-picture-view" v-if="currentTab === '植被和气候要素变化趋势' || currentTab === '植被和气候要素的监测'">
+                <el-row :gutter="0">
+                    <el-col :span="4">
+                        <el-image
+                        src="/images/picture3.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="4">
+                        <el-image
+                        src="/images/picture3.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="4">
+                        <el-image
+                        src="/images/picture3.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="4">
+                        <el-image
+                        src="/images/picture3.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="4">
+                        <el-image
+                        src="/images/picture3.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="4">
+                        <el-image
+                        src="/images/picture3.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="4">
+                        <el-image
+                        src="/images/picture3.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="4">
+                        <el-image
+                        src="/images/picture3.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="4">
+                        <el-image
+                        src="/images/picture3.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="4">
+                        <el-image
+                        src="/images/picture3.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="4">
+                        <el-image
+                        src="/images/picture3.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                    <el-col :span="4">
+                        <el-image
+                        src="/images/picture3.png"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </el-col>
+                </el-row>
+            </div>
         </div>
     </div>
 </template>
@@ -107,16 +273,10 @@
             let options = reactive({
                 currentTab: '植被变化对气候的影响',
                 currentElement: '归一化植被指数NDVI',
-                date: new Date(),
-                currentHour: '10',
-                hours: [{
-                    value: '10',
-                    label: '10'
-                }, {
-                    value: '11',
-                    label: '11'
-                }],
-                currentTime: null,
+                currentCategory: '地表温度LST',
+                currentTime: '地表温度（01:30）',
+                currentYear: '2000',
+                currentSurfaceTemperatureTime: '地表温度（01:30）',
                 srcList: ['/images/picture1.png']
             })
 
@@ -132,16 +292,29 @@
                 options.currentElement = element;
             }
 
+            const onCategoryClick = (category) => {
+                options.currentCategory = category;
+            }
+
             const onTimeClick = (time) => {
-                console.log(time.date)
-                options.currentTime = time.date;
-                console.log(options.currentTime)
+                options.currentTime = time;
+            }
+
+            const onSurfaceTemperatureClick = (value) => {
+                options.currentSurfaceTemperatureTime = value;
+            }
+
+            const onYearClick = (year) => {
+                options.currentYear = year;
             }
 
             return {
                 ...toRefs(options),
                 onTabClick,
                 onElementClick,
+                onCategoryClick,
+                onSurfaceTemperatureClick,
+                onYearClick,
                 onTimeClick
             }
         }
@@ -149,7 +322,9 @@
 </script>
 <style lang="less" scoped>
     .main {
-        .container {
+        .synergy-container {
+            height: calc(~"100% - 0.6rem");
+            padding: 0.2rem 0 0.2rem 0.2rem;
             .synergy-picture-view {
                 height: 100%;
                 display: flex;
@@ -169,6 +344,54 @@
                     }
                 }
             }
+            .multi-picture-view {
+                height: calc(~"100% - 0.76rem");
+                .el-row {
+                    height: 100%;
+                    .el-col {
+                        max-width: calc(~"(100% / 6) - 0.2rem");
+                        height: 50%;
+                        margin: 0.2rem 0.2rem 0 0;
+                        border: 1px solid #666666;
+                        .el-image {
+                            height: 100%;
+                            display: flex;
+                            align-items: center;
+                        }
+
+                        &:nth-of-type(6n) {
+                            margin-right: 0;
+                        }
+                    }
+                }
+            }
+            .element-select {
+                position: relative;
+                .surface-temperature {
+                    display: flex;
+                    align-items: center;
+                    border-left: 1px solid #498DF0;
+                    
+                    span {
+                        height: 0.34rem;
+                        padding: 0 0.1rem;
+                        text-align: center;
+                        line-height: 0.34rem;
+                        border: 1px solid #498DF0;
+                        border-left: 0;
+                        cursor: pointer;
+
+                        &.active {
+                            color: #ffffff;
+                            background-color: #498DF0;
+                        }
+                    }
+                }
+            }
+            .save-btn {
+                right: 0.2rem;
+                top: 0.2rem;
+            }
         }
     }
 </style>
diff --git a/04.系统编码/Frontend/src/hooks/Config.ts b/04.系统编码/Frontend/src/hooks/Config.ts
new file mode 100644
index 0000000..4d2c0ea
--- /dev/null
+++ b/04.系统编码/Frontend/src/hooks/Config.ts
@@ -0,0 +1,13 @@
+import { Moment } from "moment";
+
+export class Config {
+    public static parentUrl: string = "http://112.124.40.88:8890/product/picture";
+}
+
+export class MicrowaveRadiationConfig {
+    private static url: string = Config.parentUrl + "/weibo";
+
+    public static getUrl(station: string, type: string, time: Moment): string {
+        return this.url+ '/' + station + '/' + type + '/' + time.format("YYYY/YYYYMM/YYYYMMDD/YYYYMMDDHHmmss.png");
+    }
+}
\ No newline at end of file
diff --git a/04.系统编码/Frontend/src/hooks/String.ts b/04.系统编码/Frontend/src/hooks/String.ts
new file mode 100644
index 0000000..0ea850f
--- /dev/null
+++ b/04.系统编码/Frontend/src/hooks/String.ts
@@ -0,0 +1,6 @@
+export function format(...args: any[]) {
+    return args[0].replace(/{(\d+)}/g, function (match: any, number: any) {
+        let index = parseInt(number) + 1;
+        return typeof args[index] !== 'undefined' ? args[index] : match;
+    });
+}
\ No newline at end of file
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index 1162064..fb403c2 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@@ -104,8 +104,9 @@ img {
 }
 
 .main {
-    width: 100%;
+    width: calc(~"100% - 0.4rem");
     height: calc(~"100vh - 1.44rem");
+    padding: 0 0.2rem;
     display: flex;
 
     .panel {
@@ -118,7 +119,6 @@ img {
         width: 2.5rem;
         padding: 0.2rem;
         height: calc(~"100% - 0.6rem");
-        border-radius: 0 0.1rem 0.1rem 0;
 
         .tip {
             height: 0.32rem;
@@ -163,6 +163,7 @@ img {
     .container {
         width: calc(~"100% - 2.9rem");
         margin-left: 0.2rem;
+        position: relative;
 
         .toolbar {
             padding-top: 0.25rem;
@@ -360,12 +361,8 @@ img {
             }
 
             .save-btn {
-                width: 0.26rem;
-                display: block;
-                position: absolute;
                 top: 0.6rem;
                 right: 2rem;
-                cursor: pointer;
             }
 
             .title {
@@ -396,5 +393,14 @@ img {
                 }
             }
         }
+
+        .save-btn {
+            width: 0.26rem;
+            cursor: pointer;
+            position: absolute;
+            right: 0.2rem;
+            top: 0;
+            z-index: 10;
+        }
     }
 }
\ No newline at end of file