NanJingLamanRadarProject/04.系统编码/Frontend/src/components/DecisionSupport.vue

<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('plan-advice')" :class="{'active': currentIndicator === 'plan-advice'}">通风廊道规划建议</span></el-col>
                    <el-col :span="24"><span @click="onIndicatorClick('pollution-indicator')" :class="{'active': currentIndicator === 'pollution-indicator'}">高楼污染指数</span></el-col>
                </el-row>
            </div>
            <div class="menu-item" v-if="currentIndicator === 'plan-advice'">
                <h2 class="tip">产品选择</h2>
                <el-row :gutter="12">
                    <el-col :span="24"><span @click="onProductClick('control-experiment')" :class="{'active': currentProduct === 'control-experiment'}">控制实验</span></el-col>
                    <el-col :span="24"><span @click="onProductClick('product-influence')" :class="{'active': currentProduct === 'product-influence'}">通风廊道的影响</span></el-col>
                    <el-col :span="24"><span @click="onProductClick('product-experiment')" :class="{'active': currentProduct === 'product-experiment'}">通风廊道试验</span></el-col>
                </el-row>
            </div>
        </div>
        <div class="container panel decision-container">
            <span class="save-btn"><img src="/images/save.png" /></span>
            
            <div class="picture-view advice-picture-view" v-if="currentIndicator === 'plan-advice'">
                <el-row :gutter="0">
                    <el-col :span="8" v-for="(item, index) in items" :key="index">
                        <h2 class="title">{{item.title}}</h2>
                        <el-image
                        :src="item.imgUrl"
                        :preview-src-list="item.preview"
                        :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>
                    </el-col>
                </el-row>
            </div>
            <div class="picture-view indicator-picture-view" v-if="currentIndicator === 'pollution-indicator'">
                <h2 class="title">高楼污染指数</h2>
                <div class="picture-block">
                    <div class="picture">
                        <el-image
                        :src="indicatorImg"
                        :preview-src-list="indicatorPreview"
                        :initial-index="1"
                        fit="contain"
                        >
                        </el-image>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { onMounted, reactive, toRefs } from 'vue';
    import * as Tiff from 'browser-tiff.js';
    import { DecisionSupportConfig } from '../uilts/Config';
    
    export default {
        name: 'DecisionSupport',
        setup() {
            let options = reactive({
                currentIndicator: 'plan-advice',
                currentProduct: 'control-experiment',
                items: [{
                    title: '比湿',
                    imgName: 'TFLD_Q2',
                    imgUrl: '/images/null-picture.png',
                    preview: []
                }, {
                    title: '风速和风向',
                    imgName: 'TFLD_V10',
                    imgUrl: '/images/null-picture.png',
                    preview: []
                }, {
                    title: '降水',
                    imgName: 'TFLD_RAIN',
                    imgUrl: '/images/null-picture.png',
                    preview: []
                }, {
                    title: '平均气温',
                    imgName: 'TFLD_T2',
                    imgUrl: '/images/null-picture.png',
                    preview: []
                }, {
                    title: '最低温度',
                    imgName: 'TFLD_TN',
                    imgUrl: '/images/null-picture.png',
                    preview: []
                }, {
                    title: '最高温度',
                    imgName: 'TFLD_TX',
                    imgUrl: '/images/null-picture.png',
                    preview: []
                }],
                indicatorImg: '/images/decision-support/pollution-indicator/pollution-indicator.png',
                indicatorPreview: ['/images/decision-support/pollution-indicator/pollution-indicator.png']
            })

            onMounted(() => {
                setImage(options.currentIndicator + '/' + options.currentProduct);
            })

            const onIndicatorClick = (indicator) => {
                options.currentIndicator = indicator;

                if(options.currentIndicator === 'plan-advice')
                    setImage(options.currentIndicator + '/' + options.currentProduct);
            }

            const onProductClick = (product) => {
                options.currentProduct = product;
                setImage('plan-advice' + '/' + options.currentProduct);
            }

            const setImage = (type) => {
                for(let index = 0; index < 6; index ++){
                    initImage(type, options.items[index].imgName, index);
                }
            }

            const initImage = (type, imgName, index) => {
                var xhr = new XMLHttpRequest();
                xhr.responseType = 'arraybuffer';
                xhr.open('GET', DecisionSupportConfig.getUrl(type, imgName));
                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.items[index].imgUrl = image.src;
                    options.items[index].preview = [image.src];
                };
                xhr.send();
            }

            return {
                ...toRefs(options),
                onIndicatorClick,
                onProductClick
            }
        }
    }
</script>
<style lang="less" scoped>
    .main {
        .decision-container {
            height: calc(~"100% - 0.6rem");
            padding: 0.2rem 0 0.2rem 0.2rem;
            .save-btn {
                top: 0.6rem;
                right: 0.6rem;
            }
            .advice-picture-view {
                width: 100%;
                height: 100%;
                display: flex;
                :deep(.el-row) {
                    width: 100%;
                    .title {
                        padding: 0;
                        font-size: 0.22rem;
                    }
                    .el-col {
                        height: 46%;
                        margin-top: 1%;
                        text-align: center;
                        .el-image {
                            height: calc(~"100% - 0.4rem");
                            margin-top: 0.1rem;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                }
            }
            .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>