diff --git a/04.系统编码/Frontend/package-lock.json b/04.系统编码/Frontend/package-lock.json
index 412ca60..ed66113 100644
--- a/04.系统编码/Frontend/package-lock.json
+++ b/04.系统编码/Frontend/package-lock.json
@@ -4404,6 +4404,11 @@
         "duplexer": "0.1.1"
       }
     },
+    "browser-tiff.js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/browser-tiff.js/download/browser-tiff.js-1.0.1.tgz",
+      "integrity": "sha1-XbeQO58jBJL4Tl9bZqwL55H70KI="
+    },
     "buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npm.taobao.org/buffer/download/buffer-5.7.1.tgz?cache=0&sync_timestamp=1606098189689&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbuffer%2Fdownload%2Fbuffer-5.7.1.tgz",
diff --git a/04.系统编码/Frontend/package.json b/04.系统编码/Frontend/package.json
index 7f02dec..7cecb78 100644
--- a/04.系统编码/Frontend/package.json
+++ b/04.系统编码/Frontend/package.json
@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "axios": "^0.21.4",
+    "browser-tiff.js": "^1.0.1",
     "element-plus": "^1.2.0-beta.4",
     "moment": "^2.29.1",
     "qs": "^6.10.1",
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/111.tif b/04.系统编码/Frontend/public/images/ecological-environment/111.tif
new file mode 100644
index 0000000..314bc01
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/111.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/albedo.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/albedo.tif
new file mode 100644
index 0000000..4e6f148
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/albedo.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/evaporation.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/evaporation.tif
new file mode 100644
index 0000000..abba1cd
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/evaporation.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature0130.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature0130.tif
new file mode 100644
index 0000000..c547d43
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature0130.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature1030.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature1030.tif
new file mode 100644
index 0000000..41ff39b
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature1030.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature1330.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature1330.tif
new file mode 100644
index 0000000..fed6550
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature1330.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature2230.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature2230.tif
new file mode 100644
index 0000000..3ad93c7
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature2230.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/albedo.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/albedo.tif
new file mode 100644
index 0000000..54eb05f
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/albedo.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/evaporation.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/evaporation.tif
new file mode 100644
index 0000000..635139d
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/evaporation.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature0130.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature0130.tif
new file mode 100644
index 0000000..845d6d8
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature0130.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature1030.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature1030.tif
new file mode 100644
index 0000000..a06bbbe
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature1030.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature1330.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature1330.tif
new file mode 100644
index 0000000..c1f82da
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature1330.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature2230.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature2230.tif
new file mode 100644
index 0000000..156df3d
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature2230.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/albedo.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/albedo.tif
new file mode 100644
index 0000000..833069e
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/albedo.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/evaporation.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/evaporation.tif
new file mode 100644
index 0000000..53cc17a
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/evaporation.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature0130.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature0130.tif
new file mode 100644
index 0000000..314bc01
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature0130.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature1030.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature1030.tif
new file mode 100644
index 0000000..d8a8c05
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature1030.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature1330.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature1330.tif
new file mode 100644
index 0000000..737a197
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature1330.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature2230.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature2230.tif
new file mode 100644
index 0000000..1dbdd3a
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature2230.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/albedo.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/albedo.tif
new file mode 100644
index 0000000..0bebb03
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/albedo.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/evaporation.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/evaporation.tif
new file mode 100644
index 0000000..5e1f03f
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/evaporation.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature0130.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature0130.tif
new file mode 100644
index 0000000..db55c14
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature0130.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature1030.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature1030.tif
new file mode 100644
index 0000000..37eb92a
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature1030.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature1330.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature1330.tif
new file mode 100644
index 0000000..8a79e8d
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature1330.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature2230.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature2230.tif
new file mode 100644
index 0000000..79b47d1
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature2230.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/albedo.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/albedo.tif
new file mode 100644
index 0000000..24ad44f
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/albedo.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/evaporation.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/evaporation.tif
new file mode 100644
index 0000000..dc78ad6
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/evaporation.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature0130.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature0130.tif
new file mode 100644
index 0000000..062e1df
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature0130.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature1030.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature1030.tif
new file mode 100644
index 0000000..b372661
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature1030.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature1330.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature1330.tif
new file mode 100644
index 0000000..0167eb2
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature1330.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature2230.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature2230.tif
new file mode 100644
index 0000000..bd0408b
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature2230.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/albedo.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/albedo.tif
new file mode 100644
index 0000000..a9d7655
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/albedo.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/evaporation.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/evaporation.tif
new file mode 100644
index 0000000..72ec2e0
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/evaporation.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature0130.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature0130.tif
new file mode 100644
index 0000000..c5b4f4a
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature0130.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature1030.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature1030.tif
new file mode 100644
index 0000000..228fe88
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature1030.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature1330.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature1330.tif
new file mode 100644
index 0000000..d5be6b9
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature1330.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature2230.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature2230.tif
new file mode 100644
index 0000000..e6568bb
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature2230.tif differ
diff --git a/04.系统编码/Frontend/public/images/null-picture.png b/04.系统编码/Frontend/public/images/null-picture.png
new file mode 100644
index 0000000..41adcdc
Binary files /dev/null and b/04.系统编码/Frontend/public/images/null-picture.png differ
diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index b30f465..1a05f03 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -4,17 +4,17 @@
             垂直廓线
             <img src="/images/line.png" v-if="currentTab === 'kuoxian'" />
         </div>
-        <div class="tab-item" @click="onTabClick('对流指数')" :class="{'active': currentTab === '对流指数'}">
+        <div class="tab-item" @click="onTabClick('shixu')" :class="{'active': currentTab === 'shixu'}">
             对流指数
-            <img src="/images/line.png" v-if="currentTab === '对流指数'" />
+            <img src="/images/line.png" v-if="currentTab === 'shixu'" />
         </div>
-        <div class="tab-item" @click="onTabClick('T-logP图')" :class="{'active': currentTab === 'T-logP图'}">
+        <div class="tab-item" @click="onTabClick('T-logP')" :class="{'active': currentTab === 'T-logP'}">
             T-logP图
-            <img src="/images/line.png" v-if="currentTab === 'T-logP图'" />
+            <img src="/images/line.png" v-if="currentTab === 'T-logP'" />
         </div>
-        <div class="tab-item" @click="onTabClick('BP反演产品')" :class="{'active': currentTab === 'BP反演产品'}">
+        <div class="tab-item" @click="onTabClick('BPFY')" :class="{'active': currentTab === 'BPFY'}">
             BP反演产品
-            <img src="/images/line.png" v-if="currentTab === 'BP反演产品'" />
+            <img src="/images/line.png" v-if="currentTab === 'BPFY'" />
         </div>
     </div>
     <div class="main">
@@ -29,18 +29,13 @@
                     <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 === 'kuoxian'">
+            <div class="menu-item" v-if="currentTab === 'kuoxian' || currentTab === 'shixu'">
                 <h2 class="tip">要素选择</h2>
                 <el-row :gutter="12">
-                    <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 === '对流指数'">
-                <h2 class="tip">要素选择</h2>
-                <el-row :gutter="12">
-                    <el-col :span="8"><span @click="onCategoryClick('CAPE')" :class="{'active': currentCategory === 'CAPE'}">CAPE</span></el-col>
-                    <el-col :span="8"><span @click="onCategoryClick('CIN')" :class="{'active': currentCategory === 'CIN'}">CIN</span></el-col>
+                    <el-col :span="8" v-if="currentTab === 'kuoxian'"><span @click="onElementClick('TEMPERATURE', 'TEMP')" :class="{'active': currentElement === 'TEMPERATURE'}">温度</span></el-col>
+                    <el-col :span="8" v-if="currentTab === 'kuoxian'"><span @click="onElementClick('HUMIDITY', 'RH')" :class="{'active': currentElement === 'HUMIDITY'}">湿度</span></el-col>
+                    <el-col :span="8" v-if="currentTab === 'shixu'"><span @click="onElementClick('CAPE时序图', 'CAPE')" :class="{'active': currentElement === 'CAPE时序图'}">CAPE</span></el-col>
+                    <el-col :span="8" v-if="currentTab === 'shixu'"><span @click="onElementClick('CIN时序图', 'CIN')" :class="{'active': currentElement === 'CIN时序图'}">CIN</span></el-col>
                 </el-row>
             </div>
         </div>
@@ -49,16 +44,16 @@
                 <div class="times">
                     <div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}">
                         <span class="hour">{{time.hour}}</span>
-                        <span class="minute" @click="onTimeClick(time)">{{time.minute}}</span>
+                        <span class="minute" @click="onTimeClick(time, index)">{{time.minute}}</span>
                     </div>
                 </div>
-                <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker"  @change="onDateChange">
+                <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker" @change="onChange">
                 </el-date-picker>
                 <div class="control-btn">
                     <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="" @change="onHourChange">
+                <el-select v-model="currentHour" placeholder="" @change="onChange">
                     <el-option
                     v-for="item in hours"
                     :key="item.value"
@@ -68,11 +63,11 @@
                     </el-option>
                 </el-select>
                 <p class="unit">时</p>
-                <div class="refresh-btn">
+                <div class="refresh-btn" @click="onRefreshClick">
                     <img src="/images/refresh.png" />
                 </div>
                 <div class="btns-group">
-                    <span>播放动画</span>
+                    <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
                     <span>下载动画</span>
                 </div>
             </div>
@@ -80,15 +75,23 @@
                 <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">{{title}}</h2>
-                <div class="picture">
-                    <el-image
-                        :src="imgUrl"
-                        :preview-src-list="srcList"
-                        :initial-index="1"
-                        fit="contain"
-                    >
-                    </el-image>
+                <div class="picture-container">
+                    <h2 class="title">{{title}}</h2>
+                    <div class="picture">
+                        <el-image
+                            :src="imgUrl"
+                            :preview-src-list="srcList"
+                            :initial-index="0"
+                            fit="contain"
+                        >
+                            <template #error>
+                                <div class="image-slot">
+                                    <img src="/images/null-picture.png" />
+                                </div>
+                                <p class="image-tip">暂无图片</p>
+                            </template>
+                        </el-image>
+                    </div>
                 </div>
             </div>
         </div>
@@ -103,40 +106,70 @@
     export default {
         name: 'MicrowaveRadiation',
         setup() {
+            let timer = null;
             let options = reactive({
                 currentTab: 'kuoxian',
                 currentRegion: 'jiangning',
-                currentElement: 'TEMP',
+                currentType: 'TEMP',
+                currentElement: 'TEMPERATURE',
                 currentCategory: 'CAPE',
-                date: moment().format('YYYY-MM-DD'),
+                date: moment('2020-07-01').format('YYYY-MM-DD'),
                 currentHour: '10',
                 hours: [],
                 times: [],
                 currentTime: null,
                 imgUrl: null,
-                srcList: ['/images/picture.png'],
+                srcList: [],
                 isPlay: false,
                 title: null,
-                test: []
+                index: 0
             })
 
             onMounted(() => {
                 initHours();
                 initTimeLine();
-                activeImage();
-                setTitle(moment(options.date, 'YYYY-MM-DD').hour(parseInt(options.currentHour)))
+                setTitle(moment(options.date, 'YYYY-MM-DD').hour(parseInt(options.currentHour)));
+                setTimeout(() => {
+                    activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute());
+                }, 50);
             })
             
             const onTabClick = (name) => {
                 options.currentTab = name;
+                if (options.currentTab === 'kuoxian') {
+                    options.currentType = 'TEMP';
+                    options.currentElement = 'TEMPERATURE';
+                } else if (options.currentTab === 'shixu') {
+                    options.currentType = 'CAPE';
+                    options.currentElement = 'CAPE时序图';
+                } else if (options.currentTab === 'T-logP') {
+                    options.currentType = 'T-logP';
+                    options.currentElement = 'T-logP';
+                } else {
+                    options.currentType = 'BPFY';
+                    options.currentElement = 'BPFY';
+                }
+
+                cancelActive();
+                setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
             }
 
             const onRegionClick = (region) => {
                 options.currentRegion = region;
+
+                cancelActive();
+                setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
             }
 
-            const onElementClick = (element) => {
+            const onElementClick = (element, type) => {
                 options.currentElement = element;
+                options.currentType = type;
+
+                cancelActive();
+                setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
             }
 
             const onCategoryClick = (category) => {
@@ -144,14 +177,14 @@
             }
 
             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 activeImage = (hour, minute) => {
+                let time = moment(options.date).hour(hour).minute(minute);
+                let type = (options.currentTab === 'T-logP' || options.currentTab === 'BPFY') ? options.currentTab : (options.currentTab + '_' + options.currentType);
+                options.imgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time);
+                options.srcList = [options.imgUrl];
             }
 
             const initTimeLine = () => {
@@ -176,6 +209,7 @@
                         name: 'hour' + now.format('HH')
                     });
                 }
+                options.index = options.times.length - 1;
             }
 
             const initHours = () => {
@@ -187,10 +221,17 @@
                 }
             }
 
-            const onTimeClick = (time) => {
+            const onTimeClick = (time, index) => {
                 options.currentTime = time.date;
+                options.index = index;
+                cancelActive();
                 setTitle(moment(time.date, 'YYYY-MM-DD HH:mm'));
-                activeImage();
+                activeImage(moment(time.date).hour(), moment(time.date).minute());
+            }
+
+            const cancelActive = () => {
+                clearTimer();
+                options.isPlay = false;
             }
 
             const onPrevDayClick = () => {
@@ -202,21 +243,78 @@
             }
 
             const onPrevImgClick = () => {
+                console.log(options.index);
+                let element = getCurrentElement();
+
+                options.index--;
+                if (options.index < 0)
+                    options.index = element.childElementCount - 1;
 
+                setCurrentPlayElement(element);
             }
             
             const onNextImgClick = () => {
+                let element = getCurrentElement();
+
+                options.index++;
+                if (options.index > element.childElementCount - 1)
+                    options.index = 0;
                 
+                setCurrentPlayElement(element);
             }
 
-            const onHourChange = () => {
-                initTimeLine();
-                setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+            const onRefreshClick = () => {
+                cancelActive();
+                options.date = moment('2020-07-01').format('YYYY-MM-DD');
+                options.currentHour = '10';
+            }
+
+            const onPlayClick = () => {
+                options.isPlay = !options.isPlay;
+                if (options.isPlay) {
+                    timeExcute();
+                } else {
+                    clearTimer();
+                }
+            }
+
+            const timeExcute = () => {
+                clearTimer();
+
+                let element = getCurrentElement();;
+
+                timer = setInterval( () => {
+                    options.index++;
+                    if (options.index > element.childElementCount - 1)
+                        options.index = 0;
+
+                    setCurrentPlayElement(element);
+                }, 2000)
             }
 
-            const onDateChange = () => {
+            const clearTimer = () => {
+                if (timer)
+                    clearInterval(timer);
+            }
+
+            const getCurrentElement = () => {
+                return document.querySelector('.times');
+            }
+
+            const setCurrentPlayElement = (element) => {
+                for(let i = 0; i < element.childElementCount; i++)
+                    element.children[i].classList.remove('active');
+
+                element.children[options.index].classList.add('active');
+                options.currentTime = options.times[options.index].date;
+                setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD HH:mm'));
+                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
+            }
+
+            const onChange = () => {
                 initTimeLine();
                 setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
             }
 
             return {
@@ -230,8 +328,9 @@
                 onNextDayClick,
                 onPrevImgClick,
                 onNextImgClick,
-                onHourChange,
-                onDateChange
+                onRefreshClick,
+                onPlayClick,
+                onChange
             }
         }
     }
@@ -239,4 +338,3 @@
 <style lang="less" scoped>
     
 </style>
-
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index 15fbe96..070d7aa 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -5,18 +5,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('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-row>
             </div>
             <div class="menu-item">
                 <h2 class="tip">要素选择</h2>
                 <el-row :gutter="12">
-                    <el-col :span="24"><span @click="onElementClick('激光雷达比')" :class="{'active': currentElement === '激光雷达比'}">激光雷达比</span></el-col>
-                    <el-col :span="24"><span @click="onElementClick('消光系数')" :class="{'active': currentElement === '消光系数'}">消光系数</span></el-col>
-                    <el-col :span="24"><span @click="onElementClick('气溶胶浓度')" :class="{'active': currentElement === '气溶胶浓度'}">气溶胶浓度</span></el-col>
-                    <el-col :span="24"><span @click="onElementClick('云和气溶胶识别')" :class="{'active': currentElement === '云和气溶胶识别'}">云和气溶胶识别</span></el-col>
+                    <el-col :span="24"><span @click="onElementClick('lidar-ratio', '激光雷达比')" :class="{'active': currentElement === 'lidar-ratio'}">激光雷达比</span></el-col>
+                    <el-col :span="24"><span @click="onElementClick('extinction-coefficient', '消光系数')" :class="{'active': currentElement === 'extinction-coefficient'}">消光系数</span></el-col>
+                    <el-col :span="24"><span @click="onElementClick('aerosol-conc', '气溶胶浓度')" :class="{'active': currentElement === 'aerosol-conc'}">气溶胶浓度</span></el-col>
+                    <el-col :span="24"><span @click="onElementClick('cloud-aerosol-identify', '云和气溶胶识别')" :class="{'active': currentElement === 'cloud-aerosol-identify'}">云和气溶胶识别</span></el-col>
                 </el-row>
             </div>
         </div>
@@ -25,16 +25,16 @@
                 <div class="times">
                     <div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}">
                         <span class="hour">{{time.hour}}</span>
-                        <span class="minute" @click="onTimeClick(time)">{{time.minute}}</span>
+                        <span class="minute" @click="onTimeClick(time, index)">{{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="onChange">
                 </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"  @change="onChange">
                     <el-option
                     v-for="item in hours"
                     :key="item.value"
@@ -44,27 +44,29 @@
                     </el-option>
                 </el-select>
                 <p class="unit">时</p>
-                <div class="refresh-btn">
+                <div class="refresh-btn" @click="onRefreshClick">
                     <img src="/images/refresh.png" />
                 </div>
                 <div class="btns-group">
-                    <span>播放动画</span>
+                    <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
                     <span>下载动画</span>
                 </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>
-                <div class="picture">
-                    <el-image
-                    src="/images/picture.png"
-                    :preview-src-list="srcList"
-                    :initial-index="1"
-                    fit="contain"
-                    >
-                    </el-image>
+                <div class="picture-container">
+                    <h2 class="title">{{title}}</h2>
+                    <div class="picture">
+                        <el-image
+                        :src="imgUrl"
+                        :preview-src-list="srcList"
+                        :initial-index="1"
+                        fit="contain"
+                        >
+                        </el-image>
+                    </div>
                 </div>
             </div>
         </div>
@@ -74,51 +76,79 @@
 <script lang="ts">
     import { onMounted, reactive, toRefs } from 'vue';
     import moment from "moment";
+    import { RamanLidarConfig } from '../hooks/Config';
     
     export default {
         name: 'RamanLidar',
         setup() {
+            let timer = null;
             let options = reactive({
-                currentRegion: '江宁',
-                currentElement: '激光雷达比',
-                date: new Date(),
+                currentRegion: 'jiangning',
+                currentElement: 'lidar-ratio',
+                currentType: '激光雷达比',
+                date: moment('2020-07-01').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: [],
+                isPlay: false,
+                title: null,
+                index: 0
             })
 
             onMounted(() => {
-                initTimes();
+                initHours();
+                initTimeLine();
+                setTitle(moment(options.date, 'YYYY-MM-DD').hour(parseInt(options.currentHour)));
+                setTimeout(() => {
+                    activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute());
+                }, 50);
             })
 
             const onRegionClick = (region) => {
                 options.currentRegion = region;
+
+                cancelActive();
+                setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
             }
 
-            const onElementClick = (element) => {
+            const onElementClick = (element, type) => {
                 options.currentElement = element;
+                options.currentType = type
+
+                cancelActive();
+                setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
+            }
+
+            const setTitle = (date) => {
+                options.title = date.format('YYYY.MM.DD HH:mm') + '  ' + options.currentType;
             }
 
-            const initTimes = () => {
-                let now = moment();
+            const activeImage = (hour, minute) => {
+                let time = moment(options.date).hour(hour).minute(minute);
+                options.imgUrl = RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time);
+                options.srcList = [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'),
@@ -126,19 +156,126 @@
                         name: 'hour' + now.format('HH')
                     });
                 }
+                options.index = options.times.length - 1;
+            }
+
+            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)
+            const onTimeClick = (time, index) => {
                 options.currentTime = time.date;
-                console.log(options.currentTime)
+                options.index = index;
+                cancelActive();
+                setTitle(moment(time.date, 'YYYY-MM-DD HH:mm'));
+                activeImage(moment(time.date).hour(), moment(time.date).minute());
+            }
+
+            const cancelActive = () => {
+                clearTimer();
+                options.isPlay = false;
+            }
+
+            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 = () => {
+                console.log(options.index);
+                let element = getCurrentElement();
+
+                options.index--;
+                if (options.index < 0)
+                    options.index = element.childElementCount - 1;
+
+                setCurrentPlayElement(element);
+            }
+            
+            const onNextImgClick = () => {
+                let element = getCurrentElement();
+
+                options.index++;
+                if (options.index > element.childElementCount - 1)
+                    options.index = 0;
+                
+                setCurrentPlayElement(element);
+            }
+
+            const onRefreshClick = () => {
+                cancelActive();
+                options.date = moment('2020-07-01').format('YYYY-MM-DD');
+                options.currentHour = '10';
+            }
+
+            const onPlayClick = () => {
+                options.isPlay = !options.isPlay;
+                if (options.isPlay) {
+                    timeExcute();
+                } else {
+                    clearTimer();
+                }
+            }
+
+            const timeExcute = () => {
+                clearTimer();
+
+                let element = getCurrentElement();;
+
+                timer = setInterval( () => {
+                    options.index++;
+                    if (options.index > element.childElementCount - 1)
+                        options.index = 0;
+
+                    setCurrentPlayElement(element);
+                }, 2000)
+            }
+
+            const clearTimer = () => {
+                if (timer)
+                    clearInterval(timer);
+            }
+
+            const getCurrentElement = () => {
+                return document.querySelector('.times');
+            }
+
+            const setCurrentPlayElement = (element) => {
+                for(let i = 0; i < element.childElementCount; i++)
+                    element.children[i].classList.remove('active');
+
+                element.children[options.index].classList.add('active');
+                options.currentTime = options.times[options.index].date;
+                setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD HH:mm'));
+                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
+            }
+
+            const onChange = () => {
+                initTimeLine();
+                setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
             }
 
             return {
                 ...toRefs(options),
                 onRegionClick,
                 onElementClick,
-                onTimeClick
+                onTimeClick,
+                onPrevDayClick,
+                onNextDayClick,
+                onPrevImgClick,
+                onNextImgClick,
+                onRefreshClick,
+                onPlayClick,
+                onChange
             }
         }
     }
diff --git a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
index 8b98108..91677f9 100644
--- a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
+++ b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="tabs">
-        <div class="tab-item" @click="onTabClick('植被变化对气候的影响')" :class="{'active': currentTab === '植被变化对气候的影响'}">
+        <div class="tab-item" @click="onTabClick('plant-change')" :class="{'active': currentTab === 'plant-change'}">
             植被变化对气候的影响
-            <img src="/images/line.png" v-if="currentTab === '植被变化对气候的影响'" />
+            <img src="/images/line.png" v-if="currentTab === 'plant-change'" />
         </div>
-        <div class="tab-item" @click="onTabClick('植被分布对气候的影响')" :class="{'active': currentTab === '植被分布对气候的影响'}">
+        <div class="tab-item" @click="onTabClick('plant-distribute')" :class="{'active': currentTab === 'plant-distribute'}">
             植被分布对气候的影响
-            <img src="/images/line.png" v-if="currentTab === '植被分布对气候的影响'" />
+            <img src="/images/line.png" v-if="currentTab === 'plant-distribute'" />
         </div>
         <div class="tab-item" @click="onTabClick('植被和气候要素变化趋势')" :class="{'active': currentTab === '植被和气候要素变化趋势'}">
             植被和气候要素变化趋势
@@ -19,12 +19,12 @@
     </div>
     <div class="main">
         <div class="menu panel">
-            <div class="menu-item" v-if="currentTab === '植被变化对气候的影响' || currentTab === '植被分布对气候的影响'">
+            <div class="menu-item" v-if="currentTab === 'plant-change' || currentTab === 'plant-distribute'">
                 <h2 class="tip">要素选择</h2>
                 <el-row :gutter="12">
-                    <el-col :span="24"><span @click="onElementClick('归一化植被指数NDVI')" :class="{'active': currentElement === '归一化植被指数NDVI'}">归一化植被指数NDVI</span></el-col>
-                    <el-col :span="24"><span @click="onElementClick('叶面积指数LAI')" :class="{'active': currentElement === '叶面积指数LAI'}">叶面积指数LAI</span></el-col>
-                    <el-col :span="24"><span @click="onElementClick('增强植被指数EVI')" :class="{'active': currentElement === '增强植被指数EVI'}">增强植被指数EVI</span></el-col>
+                    <el-col :span="24"><span @click="onElementClick('NDVI')" :class="{'active': currentElement === 'NDVI'}">NDVI</span></el-col>
+                    <el-col :span="24"><span @click="onElementClick('LAI')" :class="{'active': currentElement === 'LAI'}">LAI</span></el-col>
+                    <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 === '植被和气候要素的监测'">
@@ -83,12 +83,12 @@
                     <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 === '植被分布对气候的影响'">
+            <div class="picture-view synergy-picture-view" v-if="currentTab === 'plant-change' || currentTab === 'plant-distribute'">
                 <el-row :gutter="0">
                     <el-col :span="8">
                         <h2 class="title">地表温度(01:30)</h2>
                         <el-image
-                        src="/images/picture1.png"
+                        :src="imgUrl"
                         :preview-src-list="srcList"
                         :initial-index="1"
                         fit="contain"
@@ -96,7 +96,7 @@
                         </el-image>
                     </el-col>
                     <el-col :span="8">
-                        <h2 class="title">地表温度(01:30)</h2>
+                        <h2 class="title">地表温度(10:30)</h2>
                         <el-image
                         src="/images/picture2.png"
                         :preview-src-list="srcList"
@@ -106,7 +106,7 @@
                         </el-image>
                     </el-col>
                     <el-col :span="8">
-                        <h2 class="title">地表温度(01:30)</h2>
+                        <h2 class="title">地表温度(13:30)</h2>
                         <el-image
                         src="/images/picture1.png"
                         :preview-src-list="srcList"
@@ -116,7 +116,7 @@
                         </el-image>
                     </el-col>
                     <el-col :span="8">
-                        <h2 class="title">地表温度(01:30)</h2>
+                        <h2 class="title">地表温度(22:30)</h2>
                         <el-image
                         src="/images/picture1.png"
                         :preview-src-list="srcList"
@@ -126,7 +126,7 @@
                         </el-image>
                     </el-col>
                     <el-col :span="8">
-                        <h2 class="title">地表温度(01:30)</h2>
+                        <h2 class="title">反照率</h2>
                         <el-image
                         src="/images/picture1.png"
                         :preview-src-list="srcList"
@@ -136,7 +136,7 @@
                         </el-image>
                     </el-col>
                     <el-col :span="8">
-                        <h2 class="title">地表温度(01:30)</h2>
+                        <h2 class="title">蒸散发</h2>
                         <el-image
                         src="/images/picture1.png"
                         :preview-src-list="srcList"
@@ -265,24 +265,61 @@
 
 <script lang="ts">
     import { onMounted, reactive, toRefs } from 'vue';
-    import moment from "moment";
+    import { format } from '../hooks/String';
+    import * as Tiff from 'browser-tiff.js';
+    import { SynergyEvaluationConfig } from '../hooks/Config';
     
     export default {
         name: 'SynergyEvaluation',
         setup() {
             let options = reactive({
-                currentTab: '植被变化对气候的影响',
-                currentElement: '归一化植被指数NDVI',
+                currentTab: 'plant-change',
+                currentElement: 'NDVI',
                 currentCategory: '地表温度LST',
                 currentTime: '地表温度(01:30)',
                 currentYear: '2000',
                 currentSurfaceTemperatureTime: '地表温度(01:30)',
-                srcList: ['/images/picture1.png']
+                srcList: [],
+                imgUrl: null,
+                imgUrls: [],
+                items: [{
+                    //'地表温度(10:30)', '地表温度(13:30)', '地表温度(22:30)', '反照率', '蒸散发',
+                    title: '地表温度(01:30)',
+                    type: 'temperature0130'
+                }]
             })
 
             onMounted(() => {
-                
+                setImage();
             })
+
+            const setImage = () => {
+                initImage(options.currentTab, options.currentElement, 'temperature0130');
+                initImage(options.currentTab, options.currentElement, 'temperature1030');
+                initImage(options.currentTab, options.currentElement, 'temperature1330');
+                initImage(options.currentTab, options.currentElement, 'temperature2230');
+                initImage(options.currentTab, options.currentElement, 'albedo');
+                initImage(options.currentTab, options.currentElement, 'evaporation');
+
+                for (let i = 0; i < options.items.length; i++) {
+                    initImage(options.currentTab, options.currentElement, 'temperature0130');
+                }
+            }
+
+            const initImage = (tabName, elementName, type) => {
+                var xhr = new XMLHttpRequest();
+                xhr.responseType = 'arraybuffer';
+                xhr.open('GET', SynergyEvaluationConfig.getUrl(tabName, elementName, type));
+                xhr.onload = function (e) {
+                    let tiff = new Tiff({buffer: xhr.response});
+                    let canvas = tiff.toCanvas();
+                    let image = new Image();
+                    image.src = canvas.toDataURL("image/png");
+                    options.imgUrl = image.src;
+                    options.srcList = [image.src];
+                };
+                xhr.send();
+            }
             
             const onTabClick = (name) => {
                 options.currentTab = name;
@@ -315,7 +352,7 @@
                 onCategoryClick,
                 onSurfaceTemperatureClick,
                 onYearClick,
-                onTimeClick
+                onTimeClick,
             }
         }
     }
diff --git a/04.系统编码/Frontend/src/hooks/Config.ts b/04.系统编码/Frontend/src/hooks/Config.ts
index 08a7a8e..6a758d5 100644
--- a/04.系统编码/Frontend/src/hooks/Config.ts
+++ b/04.系统编码/Frontend/src/hooks/Config.ts
@@ -1,4 +1,5 @@
 import { Moment } from "moment";
+import { format } from "./String";
 
 export class Config {
     public static parentUrl: string = "http://112.124.40.88:8890/product/picture";
@@ -9,4 +10,21 @@ export class MicrowaveRadiationConfig {
     public static getUrl(station: string, type: string, time: Moment): string {
         return this.url+ '/' + station + '/' + type + '/' + time.format("YYYY/YYYYMM/YYYYMMDD/YYYYMMDDHHmmss.png");
     }
+}
+
+export class RamanLidarConfig {
+    private static url: string = Config.parentUrl + "/radar";
+
+    public static getUrl(station: string, type: string, time: Moment): string {
+        return this.url+ '/' + station + '/' + type + '/' + time.format("YYYY/YYYYMM/YYYYMMDD/YYYYMMDDHHmmss.png");
+    }
+}
+
+export class SynergyEvaluationConfig {
+    public static url: string = "/images/ecological-environment/111.tif";
+
+    public static getUrl(tabName: string, elementName: string, type: string): string {
+        return format('/images/ecological-environment/{0}/{1}/{2}.tif', tabName, elementName, type)
+        //return this.url+ '/' + station + '/' + type + '/' + time.format("YYYY/YYYYMM/YYYYMMDD/YYYYMMDDHHmmss.png");
+    }
 }
\ No newline at end of file
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index fb403c2..72707aa 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@@ -351,6 +351,7 @@ img {
                 position: absolute;
                 top: 50%;
                 left: 0.3rem;
+                z-index: 10;
                 cursor: pointer;
                 transform: translateY(-50%);
 
@@ -366,22 +367,69 @@ img {
             }
 
             .title {
-                padding: 0.4rem 0;
+                padding-bottom: 0.4rem;
                 line-height: 0.3rem;
                 text-align: center;
                 font-size: 0.3rem;
                 font-weight: bold;
             }
 
+            .picture-container {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+
+                .picture {
+                    height: 70%;
+
+                    .el-image {
+                        height: 100%;
+                    }
+                }
+            }
+
             .picture {
-                width: 72%;
-                height: calc(~"100% - 1.2rem");
+                width: 100%;
+                height: calc(~"100% - 1.1rem");
                 margin: 0 auto;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 overflow: hidden;
 
+                .el-image {
+                    height: 90%;
+                    margin: 0 auto;
+
+                    .el-image__inner {
+                        width: auto;
+                        max-width: 100%;
+                        margin: 0 auto;
+                    }
+
+                    .image-slot {
+                        width: 1.5rem;
+                        height: 1.5rem;
+                        margin: 1rem auto 0 auto;
+                        text-align: center;
+                        display: flex;
+                        align-items: center;
+                        background: #F7F8FA;
+
+                        img {
+                            width: 0.8rem;
+                            height: 0.8rem;
+                            margin: 0 auto;
+                        }
+                    }
+
+                    .image-tip {
+                        text-align: center;
+                        margin-top: 10px;
+                    }
+                }
+
                 .el-image-viewer__mask {
                     opacity: 0.8;
                 }