SystemDev
/
FCC


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!DOCTYPE html>

<link rel="stylesheet" href="~/css/config.css" />

<div class="config-body" id="ConfigBodyDiv">
    <div id="configcontainer" class="config-container">
    </div>
    <div class="config-footer">
        <fnav class="config-footer-fnav config-footer-fnav-image" onclick="OnclickFnav(this.id)" id="FuelConfigFnav">{{$t('ProductConfig')}}</fnav>
        <fnav class="config-footer-fnav" onclick="OnclickFnav(this.id)" id="TankConfigFnav" @*style="visibility: hidden"*@>{{$t('TankMonitor')}}</fnav>
        <fnav class="config-footer-fair" onclick="OnclickFnav(this.id)" id="FairbanksFnav"></fnav>
        <select class="language-select" v-model="i18n.locale" @@change="changeLanguage">
            <option v-for="(item, i) in languages" :key="i" :value="item.value">{{ item.name }}</option>
        </select>
    </div>
</div>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/js/vue.min.js"></script>
<script type="text/javascript" src="~/js/vue-i18n.js"></script>
<script src="~/js/mqtt.min.js"></script>
<script src="~/js/config.js"></script>

<script type="text/javascript">
    //var requestData = ["webapi", ["IfsfFdcServer"]];
    ShowMeAPIS(["webapi", ["IfsfFdcServer"]], function () {
        OnloadConfig();
    });
    //OnloadConfig();
    Vue.use(VueI18n)

    const zhcn = {
        Product: '油品',
        CurrentPrice: '当前价格(元)',
        NewPrice: '新价格(元)',
        ProductConfig: '油品配置',
        TankMonitor: '油罐监测',
        Config: '配置选择',
        PriceChange: '修改价格',
        ProductChange: '更换油品',
        ProductName: '油品名称',
        NozzleMapping: '油枪映射',
        SftpAddress: 'Sftp地址',
        DeviceSN: '设备编号',
        SiteName: '油站名称',
        FairbanksAddress: 'Fanirbanks服务器地址',
        UserID: '数据上传用户名',
        Password: '数据上传密码',
        FrequencyUpload: '数据上传时间间隔（分钟）'
    }
    const enus = {
        Product: 'Product',
        CurrentPrice: 'Current Price',
        NewPrice: 'New Price',
        ProductConfig: 'FuelConfig',
        TankMonitor: 'TankMonitor',
        Config: 'Config',
        PriceChange: 'PriceChange',
        ProductChange: 'FuelChange',
        ProductName: 'Product',
        NozzleMapping: 'Nozzle Mapping',
        SftpAddress: 'Sftp Address',
        DeviceSN: 'Device SN.',
        SiteName: 'Site Name',
        FairbanksAddress: 'Server Address of Fairbanks',
        UserID: 'User ID',
        Password: 'Password',
        FrequencyUpload: 'Frequency of Data Upload（min）'
    }

    const i18n = new VueI18n({
        locale: 'zh-CN',
        messages: {
            'zh-CN': zhcn,
            'en-US': enus
        }
    })

    var vm = new Vue({
        el: '#ConfigBodyDiv',
        i18n,
        data: {
            languages: [{ icon: "/images/config/cn.png", name: "简体中文", value: "zh-CN" },
            { icon: "/images/config/en.png", name: "English", value: "en-US" }],
            imageUrl: "/images/config/cn.png"
        }
    })

    OnChangeLanguage(i18n.locale, $('fnav'));
    function changeLanguage(event) {
        OnChangeLanguage(i18n.locale, $('rnav'));
        return OnChangeLanguage(event.target.value, $('fnav'));
    }

    function OnclickFnav(currentId) {
        return RenderContainer(currentId, $('fnav'));
    }
    
    //$(document).ready(function () {
    //    var requestData = ["webapi", ["IfsfFdcServer"]];
    //    ShowMeAPIS(requestData);
    //});
</script>

<style scoped>
    .language-select {
        position: absolute;
        right: 0;
        margin: 0 0.8%;
        border: 0;
        width: 13%;
        height: 60%;
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .SelectDiv {
        width: 200px;
        height: 30px;
        line-height: 30px;
        vertical-align: middle;
        display: block;
        background: transparent url(/images/config/cn.png) no-repeat;
        position: relative;
        margin: 0px;
        padding-top: 6px;
        padding-left: 2px;
        z-index: 1;
    }

    .SelectDiv1 {
        width: 160px;
        height: 15px;
        line-height: 15px;
        vertical-align: middle;
        background: transparent;
        position: relative;
        overflow: hidden;
        border-width: 0px;
        border-top-style: none;
        border-right-style: none;
        border-left-style: none;
        border-bottom-style: none;
        -webkit-appearance: none;
        z-index: 2;
    }

    .SelectDiv2 {
        top: -2px;
        left: -2px;
        width: 180px;
        height: 20px;
        border-width: 0px;
        border-top-style: none;
        border-right-style: none;
        border-left-style: none;
        border-bottom-style: none;
        display: block;
        position: relative;
        overflow: hidden;
        z-index: 3;
    }
</style>