@model Edge.WebHost.Models.SmartFuel.SmartFuelViewInfo
<!DOCTYPE html>
@{
Layout = "../Shared/_Layout.cshtml";
}
<link rel="stylesheet" href="~/WebConsole/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" style="visibility: hidden">{{$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="~/WebConsole/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/WebConsole/js/vue.min.js"></script>
<script type="text/javascript" src="~/WebConsole/js/vue-i18n.js"></script>
<script src="~/WebConsole/js/mqtt.min.js"></script>
<script src="~/WebConsole/js/config.js"></script>
<script type="text/javascript">
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: "/WebConsole/images/config/cn.png", name: "简体中文", value: "zh-CN" },
{ icon: "/WebConsole/images/config/en.png", name: "English", value: "en-US" }],
imageUrl: "/WebConsole/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'));
}
ShowMeAPIS(["webapi", ["IfsfFdcServer"]], function () {
if ("@Model.queryString" === "") {
OnloadConfig();
} else {
if ("@Model.queryString".toUpperCase() === "PRICE") {
OnclickFnav('FuelConfigFnav')
} else if ("@Model.queryString".toUpperCase() === "PRICE") {
OnclickFnav('ListTabFnav')
}
}
});
</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>