2179 lines
89 KiB
JavaScript
2179 lines
89 KiB
JavaScript
|
||
import vue from "./vue.build.js";
|
||
import $ from '../plugins/jquery/jquery.esm.js';
|
||
import '../plugins/switch/js/bootstrap-switch.min.js';
|
||
import "../plugins/timepicker/js/bootstrap-timepicker.js";
|
||
import * as noUiSlider from "../plugins/nouislider/js/nouislider.esm.js";
|
||
import mutationObserver from '../plugins/polyfill/mutationobserver.esm.js'
|
||
import { func, confirm, rebootConfirm, alertMsg, axios_post, isEmpty,formatTime } from './lp.utils.js'
|
||
import { useDiskConf } from "./vue.hooks.js";
|
||
|
||
const {ref,reactive,toRefs,watch,watchEffect,
|
||
computed,onMounted,nextTick,defineAsyncComponent} = vue;
|
||
|
||
export const ignoreCustomElementPlugin = {
|
||
install: (app) => {
|
||
app.config.compilerOptions.isCustomElement = (tag) => tag === 'cn' || tag === 'en';
|
||
}
|
||
};
|
||
|
||
export const highlightTextPlugin = {
|
||
install(app, options) {
|
||
//const urlParam = options.urlParam || 'highlight';
|
||
//const urlValue = new URLSearchParams(window.location.search).get(urlParam);
|
||
const urlValue = "预"
|
||
if (urlValue) {
|
||
nextTick(()=>{
|
||
const elements = document.querySelectorAll('main cn, main en');
|
||
elements.forEach((el) => {
|
||
const textContent = el.textContent;
|
||
const startIndex = textContent.indexOf(urlValue);
|
||
if (startIndex !== -1) {
|
||
const endIndex = startIndex + urlValue.length;
|
||
const beforeText = textContent.slice(0, startIndex);
|
||
const highlightedText = textContent.slice(startIndex, endIndex);
|
||
const afterText = textContent.slice(endIndex);
|
||
|
||
const highlightedElement = document.createElement('span');
|
||
highlightedElement.style.fontWeight = '700';
|
||
highlightedElement.style.color = 'red';
|
||
highlightedElement.textContent = highlightedText;
|
||
|
||
el.innerHTML = beforeText;
|
||
el.appendChild(highlightedElement);
|
||
el.innerHTML += afterText;
|
||
}
|
||
})
|
||
})
|
||
}
|
||
}
|
||
};
|
||
|
||
export const languageOptionDirective = {
|
||
mounted(el, binding, vnode) {
|
||
const update = () => {
|
||
const lang = html.getAttribute('data-bs-language');
|
||
el.textContent = el.getAttribute(lang);
|
||
}
|
||
|
||
const html = document.querySelector('html');
|
||
update();
|
||
const observer = new mutationObserver(() => {
|
||
update();
|
||
});
|
||
const config = {
|
||
attributes: true,
|
||
attributeFilter: ["data-bs-language"],
|
||
subtree: false
|
||
};
|
||
observer.observe(html, config);
|
||
}
|
||
};
|
||
|
||
export const clickOutsideDirective = {
|
||
mounted(el, binding) {
|
||
const eventHandler = (e) => {
|
||
if (el.contains(e.target)) {
|
||
return false
|
||
}
|
||
if (binding.value && typeof binding.value === 'function') {
|
||
binding.value(e)
|
||
}
|
||
}
|
||
el.__click_outside__ = eventHandler
|
||
document.addEventListener('click', eventHandler)
|
||
},
|
||
beforeUnmount(el) {
|
||
document.removeEventListener('click', el.__click_outside__)
|
||
delete el.__click_outside__
|
||
}
|
||
}
|
||
|
||
export const statusTemperatureComponent = {
|
||
template: `<div class="pie">
|
||
<div class="temperature">
|
||
<div class="bar">
|
||
<div class="mask" ref="tmp_mask"></div>
|
||
<span class="percent" ref="tmp_text">0℃</span>
|
||
</div>
|
||
</div>
|
||
</div>`,
|
||
props: ['value','color'],
|
||
setup(props, context) {
|
||
|
||
const tmp_mask = ref(null);
|
||
const tmp_text = ref(null);
|
||
|
||
const { value } = toRefs(props);
|
||
|
||
watch(value,()=>{
|
||
tmp_mask.value.style.bottom = props.value + '%';
|
||
tmp_text.value.textContent = props.value + '℃';
|
||
})
|
||
|
||
onMounted(()=>{
|
||
tmp_mask.value.parentElement.style.background = props.color;
|
||
})
|
||
|
||
return { tmp_mask,tmp_text }
|
||
}
|
||
};
|
||
|
||
export const statusPieChartComponent = {
|
||
template: `<div class="pie">
|
||
<div class="chart" ref="pie_chart"></div>
|
||
<span class="percent" ref="pie_text"></span>
|
||
</div>`,
|
||
props: {
|
||
modelValue: {
|
||
type:Number,
|
||
default: 0
|
||
},
|
||
activeColor: {
|
||
type: String,
|
||
default: "#fb0"
|
||
},
|
||
trackColor: {
|
||
type: String,
|
||
default: "#777"
|
||
}
|
||
},
|
||
setup(props, context) {
|
||
|
||
const pie_chart = ref(null);
|
||
const pie_text = ref(null);
|
||
|
||
const { modelValue } = toRefs(props);
|
||
|
||
watch(modelValue,newValue => {
|
||
if($(pie_chart.value).data( 'easyPieChart' ))
|
||
$(pie_chart.value).data( 'easyPieChart' ).update( newValue);
|
||
})
|
||
|
||
onMounted(()=>{
|
||
pie_text.value.textContent = "0%";
|
||
$(pie_chart.value).easyPieChart({
|
||
easing: 'easeOutElastic',
|
||
delay: 2000,
|
||
barColor: props.activeColor,
|
||
trackColor: props.trackColor,
|
||
scaleColor: false,
|
||
lineWidth: 20,
|
||
trackWidth: 16,
|
||
lineCap: 'butt',
|
||
width: 50,
|
||
onStep: (from, to, percent) => {
|
||
pie_text.value.textContent = Math.round(percent) + "%";
|
||
}
|
||
});
|
||
})
|
||
|
||
return { pie_chart,pie_text }
|
||
}
|
||
};
|
||
|
||
export const netFlotChartComponent = {
|
||
template: `<div class="col-lg-12 netState" ref="net_chart"> </div>`,
|
||
props: {
|
||
line1Color: {
|
||
type: String,
|
||
default: "#FB0"
|
||
},
|
||
line2Color: {
|
||
type: String,
|
||
default: "#555"
|
||
},
|
||
maxy: {
|
||
type: Number,
|
||
maxy: 800
|
||
},
|
||
data1: {
|
||
type: Array,
|
||
default: [],
|
||
},
|
||
data2: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
tickColor: {
|
||
type: String,
|
||
default:"#eee"
|
||
},
|
||
borderColor: {
|
||
type: String,
|
||
default: "#ccc"
|
||
},
|
||
tipBorderColor:{
|
||
type: String,
|
||
default: "#fb0"
|
||
},
|
||
tipBgColor: {
|
||
type: String,
|
||
default: "#fff"
|
||
},
|
||
tipTxtColor: {
|
||
type: String,
|
||
default: "#555"
|
||
}
|
||
},
|
||
setup(props,context) {
|
||
const net_chart = ref(null);
|
||
let plot = {};
|
||
|
||
const showTooltip = (x, y, color, contents) => {
|
||
$('<div id="tooltip">' + contents + '</div>').css({
|
||
position: 'absolute',
|
||
display: 'none',
|
||
top: y - 40,
|
||
left: x - 120,
|
||
border: '2px solid ' + props.tipBorderColor,
|
||
padding: '3px',
|
||
'font-size': '9px',
|
||
'border-radius': '5px',
|
||
'color':props.tipTxtColor,
|
||
'background-color': props.tipBgColor,
|
||
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
|
||
opacity: 0.9
|
||
}).appendTo("body").fadeIn(200);
|
||
}
|
||
|
||
const initPlot = () => {
|
||
if(Object.keys(plot).length === 0) {
|
||
let color = props.color;
|
||
let data1 = props.data1;
|
||
let data2 = props.data2;
|
||
plot = $.plot(net_chart.value, [
|
||
{
|
||
data: data1,
|
||
lines: {
|
||
fill: true,
|
||
}
|
||
},
|
||
{
|
||
data: data2,
|
||
lines: {
|
||
show: true,
|
||
}
|
||
}]
|
||
,
|
||
{
|
||
series: {
|
||
lines: {
|
||
show: true,
|
||
fill: true,
|
||
},
|
||
shadowSize: 0
|
||
},
|
||
yaxis: {
|
||
min: 0,
|
||
max: 800,
|
||
tickSize: 160,
|
||
tickFormatter: ( v, axis ) => {
|
||
if ( axis.max < 1024 )
|
||
return v + "Kb/s";
|
||
else {
|
||
v /= 1024;
|
||
|
||
if ( axis.max < 10240 )
|
||
return v.toFixed( 2 ) + "Mb/s";
|
||
else
|
||
return Math.floor( v ) + "Mb/s";
|
||
}
|
||
}
|
||
},
|
||
xaxis: {
|
||
show: false
|
||
},
|
||
grid: {
|
||
hoverable: true,
|
||
clickable: true,
|
||
tickColor: props.tickColor,
|
||
borderWidth: 1,
|
||
borderColor: props.borderColor,
|
||
},
|
||
colors: [ props.line1Color, props.line2Color ],
|
||
tooltip: false
|
||
});
|
||
|
||
$.fn.tooltip = () => {
|
||
let prePoint = null, preLabel = null;
|
||
$(net_chart.value).bind("plothover", (event, pos, item) => {
|
||
if (item) {
|
||
if ((preLabel !== item.series.label) || (prePoint !== item.dataIndex)) {
|
||
prePoint = item.dataIndex;
|
||
preLabel = item.series.label;
|
||
$("#tooltip").remove();
|
||
|
||
$(this).css({
|
||
"cursor": "pointer"
|
||
})
|
||
|
||
let data = item.series.data[item.dataIndex][1];
|
||
if(data > 1024)
|
||
data = parseInt(data/1024)+"Mb/s";
|
||
else
|
||
data += "kb/s";
|
||
|
||
if (item.seriesIndex === 0)
|
||
showTooltip(item.pageX + 100, item.pageY - 10, color, "<cn>上行</cn><en>upward</en>: " + data);
|
||
if (item.seriesIndex === 1)
|
||
showTooltip(item.pageX + 100, item.pageY - 10, color, "<cn>下行</cn><en>downward</en>: " + data);
|
||
}
|
||
}
|
||
else {
|
||
prePoint = null;
|
||
preLabel = null;
|
||
$(this).css({
|
||
"cursor": "auto"
|
||
});
|
||
$("#tooltip").remove();
|
||
}
|
||
});
|
||
}
|
||
$(net_chart.value).tooltip();
|
||
}
|
||
}
|
||
|
||
const updatePlot = () => {
|
||
if(Object.keys(plot).length !== 0) {
|
||
let maxy = props.maxy;
|
||
let data1 = props.data1;
|
||
let data2 = props.data2;
|
||
plot.setData([data1, data2]);
|
||
plot.draw();
|
||
plot.getOptions().yaxes[ 0 ].max = maxy;
|
||
plot.getOptions().yaxes[ 0 ].tickSize = Math.floor( maxy / 5 );
|
||
plot.setupGrid();
|
||
}
|
||
}
|
||
|
||
watch(props.data1,()=>{
|
||
updatePlot();
|
||
},{deep: true})
|
||
|
||
onMounted(()=>{
|
||
setTimeout(initPlot,100);
|
||
})
|
||
|
||
return {net_chart}
|
||
}
|
||
}
|
||
|
||
|
||
export const bootstrapSwitchComponent = {
|
||
template: `<input type="checkbox" class="switch form-control" ref="bs_switch">`,
|
||
props: {
|
||
modelValue: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
size: {
|
||
type: String,
|
||
default:"small" //normal
|
||
}
|
||
},
|
||
setup(props, context) {
|
||
|
||
const { modelValue,size } = toRefs(props);
|
||
const bs_switch = ref(null);
|
||
|
||
watch(modelValue,()=>{
|
||
$(bs_switch.value).bootstrapSwitch('state', modelValue.value, true);
|
||
})
|
||
|
||
onMounted(() => {
|
||
$(bs_switch.value).bootstrapSwitch({
|
||
"state": props.modelValue,
|
||
"size": size.value,
|
||
onInit(dom, event, state) {
|
||
$(bs_switch.value).on('focus.bootstrapSwitch', () => {
|
||
this.$wrapper.removeClass("bootstrap-switch-focused")
|
||
})
|
||
},
|
||
onSwitchChange(event, state) {
|
||
context.emit('update:modelValue', state);
|
||
context.emit('switch-change', state);
|
||
}
|
||
})
|
||
})
|
||
return { bs_switch }
|
||
}
|
||
};
|
||
|
||
|
||
export const multipleSelectComponent = {
|
||
template: `<select class="form-select" v-model="selectValue" @change="onSelectChange">
|
||
<slot></slot>
|
||
</select>`,
|
||
props: {
|
||
value1: {
|
||
type: [Number,String,Boolean],
|
||
default: 0
|
||
},
|
||
value2: {
|
||
type: [Number,String,Boolean],
|
||
default: 0
|
||
},
|
||
split: {
|
||
type: String,
|
||
default: 0
|
||
}
|
||
},
|
||
setup(props,context){
|
||
|
||
let selectValue = ref("");
|
||
|
||
watchEffect(()=>{
|
||
selectValue.value = props.value1 + props.split + props.value2;
|
||
})
|
||
|
||
const parseValue = (value) => {
|
||
if (value === "true" || value === "false") {
|
||
return JSON.parse(value);
|
||
}
|
||
return isNaN(Number(value)) ? value : Number(value);
|
||
};
|
||
|
||
const onSelectChange = () =>{
|
||
let [value1, value2] = selectValue.value.split(props.split);
|
||
context.emit('update:value1', parseValue(value1));
|
||
context.emit('update:value2', parseValue(value2));
|
||
}
|
||
|
||
onMounted(()=>{
|
||
selectValue.value = props.value1 + props.split + props.value2;
|
||
})
|
||
|
||
return {selectValue,onSelectChange}
|
||
}
|
||
};
|
||
|
||
|
||
export const multipleInputComponent = {
|
||
template: `<input type="text" class="form-control" v-model="selectValue" @change="onInputChange">`,
|
||
props: {
|
||
value1: {
|
||
type: [Number,String],
|
||
default: 0
|
||
},
|
||
value2: {
|
||
type: [Number,String],
|
||
default: 0
|
||
},
|
||
split: {
|
||
type: String,
|
||
default: 0
|
||
}
|
||
},
|
||
setup(props,context) {
|
||
|
||
let selectValue = ref("");
|
||
const { value1,value2 } = toRefs(props);
|
||
watchEffect(()=>{
|
||
const val1 = (typeof value1.value === "string") ? value1.value.trim() : value1.value;
|
||
const val2 = (typeof value2.value === "string") ? value2.value.trim() : value2.value;
|
||
selectValue.value = val1 + props.split + val2;
|
||
})
|
||
|
||
const onInputChange = () =>{
|
||
let [val1,val2] = selectValue.value.split(props.split);
|
||
val1 = isNaN(Number(val1)) ? val1 : Number(val1);
|
||
val2 = isNaN(Number(val2)) ? val2 : Number(val2);
|
||
|
||
if(typeof val1 === "string")
|
||
val1 = val1.trim();
|
||
if(typeof val2 === "string")
|
||
val2 = val2.trim();
|
||
|
||
context.emit('update:value1', val1);
|
||
context.emit('update:value2', val2);
|
||
|
||
selectValue.value = val1 + props.split + val2;
|
||
}
|
||
|
||
return {selectValue,onInputChange}
|
||
}
|
||
};
|
||
|
||
export const nouiSliderComponent = {
|
||
template: `<div class="slider-wrap lp-cursor-pointer" ref="slider"></div>`,
|
||
props: {
|
||
modelValue: {
|
||
type: [Number,String],
|
||
default: 0
|
||
},
|
||
min: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
max: {
|
||
type: Number,
|
||
default: 100
|
||
},
|
||
step: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
fix: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
funcValue: {
|
||
type: Number,
|
||
},
|
||
format: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
disable: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
index: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
setup(props,context) {
|
||
const slider = ref(null);
|
||
let handle = ref(null);
|
||
let hover = false;
|
||
let isSlide = false;
|
||
const showTooltip = () => {
|
||
let tooltip = handle.value.querySelector(".noUi-tooltip")
|
||
tooltip.style.display = 'block';
|
||
hover = true;
|
||
}
|
||
|
||
const hideTooltip = () => {
|
||
let tooltip = handle.value.querySelector(".noUi-tooltip")
|
||
tooltip.style.display = 'none';
|
||
hover = false;
|
||
}
|
||
|
||
const formatTooltipValue = value => {
|
||
if(isEmpty(props.format)) {
|
||
if(props.fix === 0)
|
||
value = parseInt(value);
|
||
else
|
||
value = parseFloat(value).toFixed(props.fix);
|
||
}
|
||
|
||
if(props.format === "time")
|
||
value = formatTime(value);
|
||
|
||
return value;
|
||
}
|
||
|
||
watch(() => props.modelValue, (newValue, oldValue) => {
|
||
if (slider.value && !isSlide) {
|
||
slider.value.noUiSlider.updateOptions({
|
||
start: newValue,
|
||
range: {'min': props.min, 'max': props.max},
|
||
});
|
||
if(!hover)
|
||
hideTooltip();
|
||
}
|
||
});
|
||
|
||
watch(() => props.funcValue, (newValue, oldValue) => {
|
||
if (slider.value && !isSlide) {
|
||
slider.value.noUiSlider.updateOptions({
|
||
start: newValue,
|
||
range: {'min': props.min, 'max': props.max},
|
||
});
|
||
if(!hover)
|
||
hideTooltip();
|
||
}
|
||
});
|
||
|
||
watch(() => props.max, (newValue, oldValue) => {
|
||
if (slider.value && !isSlide) {
|
||
slider.value.noUiSlider.updateOptions({
|
||
range: {'min': props.min, 'max': newValue},
|
||
});
|
||
if(!hover)
|
||
hideTooltip();
|
||
}
|
||
});
|
||
|
||
onMounted(async () => {
|
||
noUiSlider.create(slider.value, {
|
||
start: props.modelValue,
|
||
connect: [true, false],
|
||
tooltips: {
|
||
to: formatTooltipValue,
|
||
},
|
||
range: {'min': props.min, 'max': props.max},
|
||
step: props.step,
|
||
});
|
||
|
||
if(props.disable)
|
||
slider.value.noUiSlider.disable();
|
||
|
||
handle.value = slider.value.querySelector('.noUi-handle');
|
||
hideTooltip();
|
||
|
||
slider.value.addEventListener('mouseenter', () => {
|
||
showTooltip();
|
||
});
|
||
|
||
slider.value.addEventListener('mouseleave', () => {
|
||
hideTooltip();
|
||
});
|
||
|
||
slider.value.noUiSlider.on('slide', (values, mark) => {
|
||
isSlide = true;
|
||
});
|
||
|
||
// slider.value.noUiSlider.on('end', (values, mark) => {
|
||
// isSlide = false;
|
||
// context.emit('update:modelValue', formatTooltipValue(values[mark]));
|
||
// context.emit('slide-end', formatTooltipValue(values[mark]),props.index);
|
||
// });
|
||
|
||
slider.value.noUiSlider.on('change', (values, mark) => {
|
||
isSlide = false;
|
||
context.emit('update:modelValue', formatTooltipValue(values[mark]));
|
||
context.emit('slide-end', formatTooltipValue(values[mark]),props.index);
|
||
});
|
||
})
|
||
|
||
return { slider }
|
||
}
|
||
};
|
||
|
||
export const h5PlayerComponent = {
|
||
template: `<div style="width:100%; padding-bottom: 56.25%; position: relative;">
|
||
<video autoplay controls muted style="width:100%;height: 100%; position: absolute; background: #555;" ref="videoHandler"></video>
|
||
<div style="position: absolute;width: 100%;height: 100%" ref="jessHandler"></div>
|
||
<div class="lp-video-cloud" ref="cloudHandler">
|
||
<div class="loading"></div>
|
||
</div>
|
||
</div>`,
|
||
props: {
|
||
url: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
codec: {
|
||
type: String,
|
||
default: "h264"
|
||
},
|
||
audio: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
buffer: {
|
||
type: Number,
|
||
default: 200
|
||
},
|
||
canplay: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
setup(props,context) {
|
||
|
||
const { url,codec,audio,buffer,canplay } = toRefs(props);
|
||
const state = {
|
||
videoHandler: ref(null),
|
||
jessHandler: ref(null),
|
||
cloudHandler: ref(null),
|
||
hadInitPlayer: false,
|
||
flvJsModule: {},
|
||
h5Player: {},
|
||
}
|
||
|
||
watchEffect(()=>{
|
||
if(canplay.value) {
|
||
if(url.value !== "") {
|
||
if(state.hadInitPlayer)
|
||
destroyPlayer();
|
||
setTimeout(initPlayer,300);
|
||
}
|
||
} else {
|
||
if(state.hadInitPlayer)
|
||
destroyPlayer();
|
||
}
|
||
})
|
||
|
||
const initPlayer = async () => {
|
||
if(props.url === "")
|
||
return;
|
||
|
||
if(props.codec === "h265") {
|
||
state.videoHandler.value.style.display = 'none';
|
||
state.jessHandler.value.style.display = 'block';
|
||
if(!window.Jessibuca)
|
||
await import('../plugins/jessibuca/jessibuca.js');
|
||
state.h5Player = new Jessibuca({
|
||
container: state.jessHandler.value,
|
||
videoBuffer: buffer.value/1000,
|
||
decoder: "assets/plugins/jessibuca/decoder.js",
|
||
isResize: false,
|
||
audio: JSON.parse(audio.value),
|
||
operateBtns: {
|
||
fullscreen: true,
|
||
play: true,
|
||
audio: JSON.parse(audio.value),
|
||
},
|
||
forceNoOffscreen: true,
|
||
isNotMute: false,
|
||
});
|
||
state.h5Player.play(url.value);
|
||
state.h5Player.on("play", (flag) => {
|
||
state.cloudHandler.value.style.display = 'none'
|
||
})
|
||
} else {
|
||
state.videoHandler.value.style.display = 'block';
|
||
state.jessHandler.value.style.display = 'none';
|
||
if(!window.flvjs)
|
||
await import('../plugins/flvjs/flv.js');
|
||
state.h5Player = flvjs.createPlayer({
|
||
type: 'flv',
|
||
url: url.value,
|
||
audio: JSON.parse(audio.value),
|
||
});
|
||
state.h5Player.attachMediaElement(state.videoHandler.value);
|
||
state.h5Player.load();
|
||
state.h5Player.play();
|
||
|
||
state.videoHandler.value.addEventListener("canplay",() => {
|
||
state.cloudHandler.value.style.display = 'none'
|
||
});
|
||
}
|
||
state.hadInitPlayer = true;
|
||
}
|
||
const destroyPlayer = () => {
|
||
if(Object.keys(state.h5Player).length > 0) {
|
||
if(state.h5Player.hasOwnProperty("unload")) {
|
||
state.h5Player.unload();
|
||
state.h5Player.detachMediaElement();
|
||
}
|
||
state.h5Player.destroy();
|
||
state.h5Player = {};
|
||
}
|
||
state.cloudHandler.value.style.display = 'flex';
|
||
state.videoHandler.value.removeEventListener("canplay",()=>{});
|
||
state.hadInitPlayer = false;
|
||
}
|
||
const checkDelay = () => {
|
||
// if (Object.keys(state.h5Player).length > 0 && state.h5Player.hasOwnProperty("buffered") && state.h5Player.buffered.length > 0) {
|
||
// if (state.h5Player.buffered.end(0) - state.h5Player.currentTime > 1.5) {
|
||
// state.h5Player.currentTime = state.h5Player.buffered.end(0) - 0.2;
|
||
// }
|
||
// }
|
||
// setTimeout(checkDelay,1000);
|
||
}
|
||
|
||
onMounted(checkDelay);
|
||
|
||
return { ...state }
|
||
}
|
||
};
|
||
|
||
export const videoPlayerComponent = {
|
||
template: `<div style="width:100%; padding-bottom: 56.25%; position: relative;">
|
||
<video autoplay controls muted style="width:100%;height: 100%; position: absolute; background: #555;" ref="videoHandler"></video>
|
||
<div class="lp-video-cloud" ref="cloudHandler">
|
||
<div class="loading"></div>
|
||
</div>
|
||
</div>`,
|
||
props: {
|
||
url: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
canplay: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
setup(props,context) {
|
||
|
||
const { url,canplay } = toRefs(props);
|
||
const state = {
|
||
videoHandler: ref(null),
|
||
cloudHandler: ref(null),
|
||
hadInitPlayer: false,
|
||
}
|
||
|
||
watchEffect(()=>{
|
||
if(canplay.value) {
|
||
if(url.value !== "") {
|
||
if(state.hadInitPlayer)
|
||
destroyPlayer();
|
||
setTimeout(initPlayer,300);
|
||
}
|
||
} else {
|
||
if(state.hadInitPlayer)
|
||
destroyPlayer();
|
||
}
|
||
})
|
||
|
||
const initPlayer = () => {
|
||
if(url.value === "")
|
||
return;
|
||
|
||
state.videoHandler.value.style.display = 'block';
|
||
state.videoHandler.value.src = url.value;
|
||
state.videoHandler.value.play();
|
||
|
||
state.videoHandler.value.addEventListener("canplay",() => {
|
||
state.cloudHandler.value.style.display = 'none'
|
||
});
|
||
state.hadInitPlayer = true;
|
||
}
|
||
|
||
const destroyPlayer = () => {
|
||
state.cloudHandler.value.style.display = 'flex';
|
||
state.videoHandler.value.removeEventListener("canplay",()=>{});
|
||
state.hadInitPlayer = false;
|
||
}
|
||
|
||
return { ...state }
|
||
}
|
||
};
|
||
|
||
export const timepickerComponent = {
|
||
template: `<div class="input-group bootstrap-timepicker">
|
||
<input type="text" class="form-control" ref="timepicker">
|
||
<span class="input-group-text input-group-addon"><i class="fa-regular fa-clock"></i></span>
|
||
</div>`,
|
||
props: {
|
||
modelValue: {
|
||
type: String,
|
||
default: "00:00"
|
||
}
|
||
},
|
||
setup(props,context){
|
||
const timepicker = ref(null);
|
||
const { modelValue } = toRefs(props);
|
||
|
||
watch(modelValue,()=>{
|
||
$(timepicker.value).timepicker('setTime', modelValue.value);
|
||
})
|
||
|
||
onMounted(() => {
|
||
$(timepicker.value).timepicker({
|
||
minuteStep: 1,
|
||
defaultTime: props.modelValue,
|
||
showMeridian: false,
|
||
icons: {
|
||
up: 'fa-solid fa-angle-up',
|
||
down: 'fa-solid fa-angle-down'
|
||
},
|
||
});
|
||
|
||
$(timepicker.value).on("changeTime.timepicker", event => {
|
||
context.emit('update:modelValue', event.time.value);
|
||
});
|
||
})
|
||
|
||
return {timepicker}
|
||
}
|
||
};
|
||
|
||
export const vueColorPickerComponent = {
|
||
template: `<div class="color-picker" v-click-outside="clickOutside">
|
||
<input class="form-control" type="text" v-model.trim.lazy="pickerColor" ref="picker" @change="pickerColorChange">
|
||
<div ref="popper" class="popper">
|
||
<sketch-picker v-model="sketchColor"></sketch-picker>
|
||
<div class="arrow" data-popper-arrow></div>
|
||
</div>
|
||
</div>`,
|
||
props: ['modelValue','direct'],
|
||
components: {
|
||
"sketch-picker": defineAsyncComponent(() => {
|
||
return import('../plugins/vueColor/vue3.color.esm.js').then(module => {
|
||
const { Sketch } = module;
|
||
return Sketch;
|
||
})
|
||
}),
|
||
},
|
||
directives: {
|
||
"click-outside": clickOutsideDirective
|
||
},
|
||
setup(props,context){
|
||
|
||
const state = {
|
||
picker: ref(null),
|
||
popper: ref(null),
|
||
pickerColor: ref(""),
|
||
sketchColor: ref(""),
|
||
partyPopper: {},
|
||
popperOptions: reactive({}),
|
||
}
|
||
|
||
watch(state.sketchColor,()=>{
|
||
if(state.sketchColor.value.hasOwnProperty("hex")) {
|
||
state.pickerColor.value = state.sketchColor.value.hex;
|
||
context.emit('update:modelValue', state.pickerColor.value);
|
||
}
|
||
});
|
||
|
||
const pickerColorChange = () => {
|
||
state.sketchColor.value = state.pickerColor.value;
|
||
context.emit('update:modelValue', state.pickerColor.value);
|
||
}
|
||
|
||
const showPopper = () => {
|
||
state.popper.value.setAttribute('data-show', '');
|
||
state.partyPopper.setOptions((options) => ({
|
||
...options,
|
||
modifiers: [
|
||
...options.modifiers,
|
||
{ name: 'eventListeners', enabled: true },
|
||
],
|
||
}));
|
||
state.partyPopper.update();
|
||
}
|
||
|
||
const hidePopper = () => {
|
||
if(Object.keys(state.partyPopper).length > 0) {
|
||
state.popper.value.removeAttribute('data-show');
|
||
state.partyPopper.setOptions((options) => ({
|
||
...options,
|
||
modifiers: [
|
||
...options.modifiers,
|
||
{ name: 'eventListeners', enabled: false },
|
||
],
|
||
}));
|
||
}
|
||
}
|
||
|
||
const clickOutside = (event) => {
|
||
hidePopper();
|
||
}
|
||
|
||
nextTick(async () => {
|
||
const Popper = await import('../plugins/popper/popper.esm.js');
|
||
state.partyPopper = Popper.createPopper(state.picker.value, state.popper.value, {
|
||
placement: props.direct,
|
||
modifiers: [
|
||
{
|
||
name: 'offset',
|
||
options: {
|
||
offset: [0, 8],
|
||
},
|
||
},
|
||
{
|
||
name: 'computeStyles',
|
||
options: {
|
||
gpuAcceleration: false,
|
||
adaptive: false
|
||
}
|
||
}
|
||
],
|
||
});
|
||
state.picker.value.addEventListener("focus", showPopper);
|
||
})
|
||
|
||
onMounted(()=>{
|
||
// state.pickerColor.value = props.modelValue;
|
||
state.sketchColor.value = {'hex':props.modelValue};
|
||
});
|
||
|
||
return {...state,clickOutside,pickerColorChange}
|
||
}
|
||
};
|
||
|
||
export const uploadModalComponent = {
|
||
template: `<div :class="['modal',{'fade':modalFade===undefined ? false : JSON.parse(modalFade)}]" tabindex="-1" aria-hidden="true" ref="modal">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">{{modalTitle}}</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<input type="file" ref="uploadFile" name="uploadFile" multiple />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>`,
|
||
props:['modalTitle','modalShow','modalFade','uploadTip',"uploadAction",'uploadAllow','uploadCount'],
|
||
setup(props,context) {
|
||
|
||
const { modalShow,modalFade } = toRefs(props);
|
||
|
||
const state = {
|
||
modal : ref(null),
|
||
modalTitle : ref(""),
|
||
uploadFile: ref(null),
|
||
uploadTip: "",
|
||
show : false,
|
||
bsModal : {},
|
||
uploadLang: "zh"
|
||
}
|
||
|
||
watch(modalShow,()=>{
|
||
state.show = !state.show;
|
||
if(state.show)
|
||
state.bsModal.show();
|
||
else
|
||
state.bsModal.hide();
|
||
})
|
||
|
||
const initBsModal = () => {
|
||
state.bsModal = new bootstrap.Modal(state.modal.value);
|
||
if(modalShow.value) {
|
||
state.bsModal.show();
|
||
state.show = true;
|
||
} else {
|
||
state.bsModal.hide();
|
||
state.show = false;
|
||
}
|
||
state.modal.value.addEventListener('hide.bs.modal',() => {
|
||
state.show = false;
|
||
context.emit('update:modelShow', false);
|
||
});
|
||
}
|
||
|
||
const updateLangText = () => {
|
||
const html = document.querySelector('html');
|
||
let lang = html.getAttribute('data-bs-language');
|
||
const [tip1,tip2] = props.uploadTip.split("&");
|
||
if(lang === "cn" || tip2 === undefined)
|
||
state.uploadTip = tip1;
|
||
else
|
||
state.uploadTip = tip2;
|
||
|
||
const [title1,title2] = props.modalTitle.split("&");
|
||
if(lang === "cn" || title2 === undefined)
|
||
state.modalTitle.value = title1;
|
||
else
|
||
state.modalTitle.value = title2;
|
||
|
||
state.uploadLang = lang;
|
||
if(lang === "cn")
|
||
state.uploadLang = "zh";
|
||
}
|
||
|
||
const initUploadFile = () => {
|
||
$(state.uploadFile.value).fileinput({
|
||
language: state.uploadLang,
|
||
theme: "fa6",
|
||
dropZoneTitle: state.uploadTip,
|
||
showClose: false,
|
||
browseClass:"btn btn-primary btn-df",
|
||
allowedFileExtensions: eval('('+props.uploadAllow+')'),
|
||
uploadUrl: props.uploadAction,
|
||
maxFileCount: isNaN(Number(props.uploadCount)) ? 1 : Number(props.uploadCount)
|
||
});
|
||
|
||
$(state.uploadFile.value).on('fileuploaded', function(event, data) {
|
||
state.bsModal.hide();
|
||
state.show = false;
|
||
$(state.uploadFile.value).fileinput('clear');
|
||
context.emit("upload-success",data)
|
||
});
|
||
|
||
$(state.uploadFile.value).on('fileuploaderror', function(event, data, msg) {
|
||
if(data.jqXHR.responseText) {
|
||
var errMsg = eval(data.jqXHR.responseText);
|
||
context.emit("upload-error",errMsg);
|
||
}
|
||
});
|
||
}
|
||
|
||
onMounted(()=>{
|
||
const html = document.querySelector('html');
|
||
html.addEventListener("loaded",()=>{
|
||
updateLangText();
|
||
initBsModal();
|
||
initUploadFile();
|
||
})
|
||
})
|
||
|
||
return { ...state,modalFade }
|
||
}
|
||
}
|
||
|
||
export const upgradeModalComponent = {
|
||
template: `<div :class="['modal',{'fade':modalFade===undefined ? false : JSON.parse(modalFade)}]" data-bs-backdrop="static" tabindex="-1" aria-hidden="true" ref="modal">
|
||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||
<div :class="['modal-content front',{'front0':!showLog},{'front180':showLog}]">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">
|
||
<cn>升级包</cn>
|
||
<en>Upgrade</en>
|
||
</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body px-3">
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th>
|
||
<cn>序号</cn>
|
||
<en>Num</en>
|
||
</th>
|
||
<th>
|
||
<cn>名称</cn>
|
||
<en>Name</en>
|
||
</th>
|
||
<th>
|
||
<cn>版本</cn>
|
||
<en>Build</en>
|
||
</th>
|
||
<th>
|
||
<cn>日期</cn>
|
||
<en>Date</en>
|
||
</th>
|
||
<th>
|
||
<cn>级别</cn>
|
||
<en>Impact</en>
|
||
</th>
|
||
<th>
|
||
<cn>日志</cn>
|
||
<en>Log</en>
|
||
</th>
|
||
<th>
|
||
<cn>操作</cn>
|
||
<en>Option</en>
|
||
</th>
|
||
<th>
|
||
<cn>下载</cn>
|
||
<en>Download</en>
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="(item,index) in systemPatchs" :key="item.id">
|
||
<td>{{index+1}}</td>
|
||
<td>{{item.name}}</td>
|
||
<td>{{item.build}}</td>
|
||
<td>{{item.sys_ver}}</td>
|
||
<td v-if="item.impact === '1'" class="lp-color-red">
|
||
<cn>重要</cn>
|
||
<en>impact</en>
|
||
</td>
|
||
<td v-else>
|
||
<cn>普通</cn>
|
||
<en>normal</en>
|
||
</td>
|
||
<td>
|
||
<a class="lp-cursor-pointer" @click="showPatchVersionLog(index)">
|
||
<cn>更新日志</cn>
|
||
<en>Show logs</en>
|
||
</a>
|
||
</td>
|
||
<td>
|
||
<a class="lp-cursor-pointer" @click="handleUpdatePatch(index)">
|
||
<div v-if="upgradePatch.id === item.id && hadUpdate">{{updatePercent}}%</div>
|
||
<div v-else>
|
||
<cn>更新</cn>
|
||
<en>Update</en>
|
||
</div>
|
||
</a>
|
||
</td>
|
||
<td>
|
||
<a class="lp-cursor-pointer" @click="handleDownloadPatch(index)">
|
||
<cn>下载</cn>
|
||
<en>Download</en>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="row mt-4 mb-2">
|
||
<div class="col-lg-12">
|
||
<cn>Tip：级别标记为<cn style="color: red">重要</cn>的升级包不能跳过，更新之后才能继续更新。</cn>
|
||
<en>Tip：Upgrade packages marked as <en style="color: red">impact</en> cannot be skipped and can only be updated after they have been updated</en>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div :class="['modal-content rear',{'rear180':!showLog},{'rear0':showLog}]">
|
||
<div v-if="Object.keys(showLogPatch).length > 0">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">
|
||
Build {{showLogPatch.sys_ver}}
|
||
</h5>
|
||
<button type="button" class="btn-close" @click="hidePatchVersionLog"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<ul>
|
||
<li class="mt-2" v-for="(it,idx) in handleVersionLogs" :key="idx" style="font-size: 15px;white-space:pre-wrap;">{{it}}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>`,
|
||
props:['modalShow','modalFade','checkUpgrade','patchSn'],
|
||
setup(props,context) {
|
||
|
||
const { modalFade,checkUpgrade,patchSn } = toRefs(props);
|
||
|
||
const state = {
|
||
modal: ref(null),
|
||
checkUpgrade: ref(false),
|
||
systemPatchs:reactive([]),
|
||
showLog:ref(false),
|
||
showLogPatch:ref({}),
|
||
hadUpdate:ref(false),
|
||
updatePercent:ref(0),
|
||
upgradePatch:ref({}),
|
||
facAliase:"",
|
||
bsModal: {},
|
||
}
|
||
|
||
watchEffect(async ()=>{
|
||
if(checkUpgrade.value) {
|
||
let result = await func("/upgrade/checkHelpNet");
|
||
if (result.status === "error") {
|
||
alertMsg(result.msg, "error");
|
||
return;
|
||
}
|
||
|
||
if(!patchSn.value) {
|
||
result = await func("/upgrade/getSystemAliase");
|
||
if (result.status === "error") {
|
||
alertMsg(result.msg, "error");
|
||
context.emit('update:checkUpgrade', false);
|
||
return;
|
||
}
|
||
if (result.data.length === 0) {
|
||
alertMsg("<cn>已经是最新版本</cn><en>It is the latest version</en>", "success");
|
||
context.emit('update:checkUpgrade', false);
|
||
return;
|
||
}
|
||
state.facAliase = result.data[0].aliase;
|
||
|
||
result = await func("/upgrade/getAllSystemPatch");
|
||
if (result.status === "error") {
|
||
alertMsg(result.msg, "error");
|
||
context.emit('update:checkUpgrade', false);
|
||
return;
|
||
}
|
||
if (result.data.length === 0) {
|
||
alertMsg("<cn>已经是最新版本</cn><en>It is the latest version</en>", "success");
|
||
context.emit('update:checkUpgrade', false);
|
||
return;
|
||
}
|
||
state.systemPatchs.splice(0);
|
||
state.systemPatchs.push(...result.data);
|
||
|
||
result = await func("/upgrade/checkVersionMaster");
|
||
if (result.status === "error") {
|
||
alertMsg(result.msg, "error");
|
||
context.emit('update:checkUpgrade', false);
|
||
return;
|
||
}
|
||
if (result.data === 0) {
|
||
confirm({
|
||
title: '<cn>注意</cn><en>Tip</en>',
|
||
content: '<cn>设备可能升级过其他固件，如果继续升级，功能可能会被覆盖，是否继续?</cn><en>The device may have been upgraded with custom firmware, and the upgrade function may be overwritten. Do you want to continue?</en>',
|
||
buttons: {
|
||
ok: {
|
||
text: "<cn>继续</cn><en>Continue</en>",
|
||
btnClass: 'btn-primary',
|
||
keys: ['enter'],
|
||
action: () => {
|
||
state.bsModal.show();
|
||
}
|
||
},
|
||
cancel: {
|
||
text: "<cn>取消</cn><en>Cancel</en>",
|
||
action: ()=>{
|
||
context.emit('update:checkUpgrade', false);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
state.bsModal.show();
|
||
}
|
||
} else {
|
||
let result = await func("/upgrade/getSystemAliase");
|
||
if (result.status === "error") {
|
||
alertMsg(result.msg, "error");
|
||
context.emit('update:checkUpgrade', false);
|
||
return;
|
||
}
|
||
if (result.data.length === 0) {
|
||
alertMsg("<cn>无效固件编号</cn><en>Invalid upgrade sn</en>", "error");
|
||
context.emit('update:checkUpgrade', false);
|
||
return;
|
||
}
|
||
state.facAliase = result.data[0].aliase;
|
||
|
||
result = await func("/upgrade/getSystemPatchBySn",{"sn": patchSn.value});
|
||
if (result.data.length === 0) {
|
||
alertMsg("<cn>无效固件编号</cn><en>Invalid upgrade sn</en>", "error");
|
||
context.emit('update:checkUpgrade', false);
|
||
return;
|
||
}
|
||
state.systemPatchs.splice(0);
|
||
state.systemPatchs.push(...result.data);
|
||
state.bsModal.show();
|
||
}
|
||
}
|
||
})
|
||
|
||
const handleVersionLogs = computed(()=>{
|
||
const regex = /[\r\n\t]/g;
|
||
state.showLogPatch.value.description = state.showLogPatch.value.description.replace(regex,"");
|
||
return state.showLogPatch.value.description.split(";").filter((item)=>{
|
||
return item !== "";
|
||
})
|
||
})
|
||
|
||
const showPatchVersionLog = idx => {
|
||
state.showLogPatch.value = state.systemPatchs[idx];
|
||
state.showLog.value = true;
|
||
}
|
||
|
||
const hidePatchVersionLog = () => {
|
||
state.showLog.value = false;
|
||
}
|
||
|
||
const getUpdateFileSize = async name => {
|
||
const params = {
|
||
"action": "get_file_size",
|
||
"name": name
|
||
};
|
||
const data = await axios_post("/link/upgrade.php", params);
|
||
return data.size;
|
||
};
|
||
|
||
const handleUpdatePatch = idx => {
|
||
if(state.hadUpdate.value)
|
||
return;
|
||
|
||
state.upgradePatch.value = state.systemPatchs[idx];
|
||
const patch = state.systemPatchs[idx];
|
||
const chip = patch.chip;
|
||
let name = patch.name;
|
||
let type = "update";
|
||
if(name.indexOf("_sn_") > 0) {
|
||
name = name.replace("_sn_","_"+state.facAliase+"_");
|
||
type = "sn";
|
||
} else {
|
||
name = name.replace("_","_"+state.facAliase+"_");
|
||
type = "update";
|
||
}
|
||
|
||
const params = {
|
||
action:"update", name:name,
|
||
chip:chip, type:type
|
||
}
|
||
|
||
axios_post('/link/upgrade.php', params)
|
||
.then(async data => {
|
||
const total = Number(data.size);
|
||
state.hadUpdate.value = true;
|
||
state.updatePercent.value = 0;
|
||
if(total > 0) {
|
||
const timerId = setInterval(async function () {
|
||
const size = await getUpdateFileSize(name);
|
||
state.updatePercent.value = parseInt(size/total * 100);
|
||
if (size >= total) {
|
||
clearInterval(timerId);
|
||
state.bsModal.hide();
|
||
context.emit('update:checkUpgrade', false);
|
||
state.hadUpdate.value = false;
|
||
state.upgradePatch.value = {};
|
||
rebootConfirm('下载完成，是否立即重启系统完成更新？');
|
||
}
|
||
}, 1000);
|
||
}
|
||
})
|
||
}
|
||
|
||
const handleDownloadPatch = idx => {
|
||
state.upgradePatch.value = state.systemPatchs[idx];
|
||
const patch = state.systemPatchs[idx];
|
||
const chip = patch.chip;
|
||
let name = patch.name;
|
||
let type = "update";
|
||
if(name.indexOf("_sn_") > 0) {
|
||
name = name.replace("_sn_","_"+state.facAliase+"_");
|
||
type = "sn";
|
||
} else {
|
||
name = name.replace("_","_"+state.facAliase+"_");
|
||
type = "update";
|
||
}
|
||
|
||
const params = {
|
||
action:"download", name:name,
|
||
chip:chip, type:type
|
||
}
|
||
|
||
// const fileName = name;
|
||
// axios_post('/link/upgrade.php',params, { responseType: 'arraybuffer' })
|
||
// .then(data => {
|
||
// const blob = new Blob([data], { type: 'application/octet-stream' });
|
||
// const url = URL.createObjectURL(blob);
|
||
// const a = document.createElement('a');
|
||
// a.href = url;
|
||
// a.download = fileName;
|
||
// document.body.appendChild(a);
|
||
// a.click();
|
||
// document.body.removeChild(a);
|
||
// URL.revokeObjectURL(url);
|
||
// })
|
||
|
||
const url = "http://help.linkpi.cn:5735/upgrade/"+chip+"/"+type+"/"+name;
|
||
const downName = "";
|
||
const a = document.createElement('a');
|
||
const e = document.createEvent('MouseEvents');
|
||
e.initEvent('click', false, false);
|
||
a.href = url;
|
||
a.download = downName;
|
||
a.dispatchEvent(e);
|
||
}
|
||
|
||
onMounted(()=>{
|
||
state.bsModal = new bootstrap.Modal(state.modal.value);
|
||
state.modal.value.addEventListener('hide.bs.modal',() => {
|
||
context.emit('update:modelShow', false);
|
||
context.emit('update:checkUpgrade', false);
|
||
});
|
||
})
|
||
return { ...state,modalFade,handleVersionLogs,showPatchVersionLog,hidePatchVersionLog,handleUpdatePatch,handleDownloadPatch }
|
||
}
|
||
}
|
||
|
||
export const customModalComponent = {
|
||
template: `<div :class="['modal',{'fade':modalFade}]" tabindex="-1" aria-hidden="true" ref="modal">
|
||
<div :class="['modal-dialog modal-dialog-centered',modalSize]">
|
||
<div :class="['modal-content',contentClass]">
|
||
<div class="modal-header" v-if="hadHeader">
|
||
<h5 class="modal-title">{{modalTitle}}</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div :class="['modal-body',bodyClass]">
|
||
<slot></slot>
|
||
</div>
|
||
<div class="modal-footer" v-if="hadFooter">
|
||
<button v-if="cancelCloseModal" type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{modalCancelBtnName}}</button>
|
||
<button v-else type="button" class="btn btn-secondary" @click="cancelBtnClick">{{modalCancelBtnName}}</button>
|
||
<button type="button" v-if="hadConfirmBtn" class="btn btn-primary" @click="confirmBtnClick">{{modalConfirmBtnName}}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>`,
|
||
props: {
|
||
modalSize: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
hadHeader: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
hadFooter: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
modalTitle: {
|
||
type:String,
|
||
default: "标题"
|
||
},
|
||
modalShow: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
modalFade: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
bodyClass: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
contentClass: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
confirmBtnName: {
|
||
type: String,
|
||
default:"确定"
|
||
},
|
||
cancelBtnName: {
|
||
type: String,
|
||
default:"取消"
|
||
},
|
||
hadConfirmBtn: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
cancelCloseModal:{
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
setup(props,context) {
|
||
|
||
const { modalShow,modalFade,modalTitle } = toRefs(props);
|
||
const state = {
|
||
modal: ref(null),
|
||
modalTitle: ref(""),
|
||
modalConfirmBtnName:ref("确定"),
|
||
modalCancelBtnName:ref("取消"),
|
||
show: false,
|
||
bsModal: {},
|
||
}
|
||
|
||
watch(modalShow,() => {
|
||
state.show = !state.show;
|
||
if(state.show)
|
||
state.bsModal.show();
|
||
else
|
||
state.bsModal.hide();
|
||
context.emit('modal-visible', state.show);
|
||
})
|
||
|
||
watch(modalTitle,() => {
|
||
updateLangText();
|
||
})
|
||
|
||
const initBsModal = () => {
|
||
state.bsModal = new bootstrap.Modal(state.modal.value);
|
||
if(modalShow.value) {
|
||
state.bsModal.show();
|
||
state.show = true;
|
||
} else {
|
||
state.bsModal.hide();
|
||
state.show = false;
|
||
}
|
||
context.emit('modal-visible', state.show);
|
||
state.modal.value.addEventListener('hide.bs.modal',() => {
|
||
state.show = false;
|
||
context.emit('update:modelShow', state.show);
|
||
context.emit('modal-visible', state.show);
|
||
});
|
||
}
|
||
|
||
const confirmBtnClick = () => {
|
||
context.emit("confirm-btn-click");
|
||
}
|
||
|
||
const cancelBtnClick = () => {
|
||
context.emit("cancel-btn-click");
|
||
}
|
||
|
||
const updateLangText = () => {
|
||
const html = document.querySelector('html');
|
||
let lang = html.getAttribute('data-bs-language');
|
||
if(props.modalTitle !== undefined) {
|
||
const [title1,title2] = props.modalTitle.split("&");
|
||
if(lang === "cn" || title2 === undefined)
|
||
state.modalTitle.value = title1;
|
||
else
|
||
state.modalTitle.value = title2;
|
||
}
|
||
|
||
if(props.confirmBtnName !== undefined) {
|
||
const [name1,name2] = props.confirmBtnName.split("&");
|
||
if(lang === "cn" || name2 === undefined)
|
||
state.modalConfirmBtnName.value = name1;
|
||
else
|
||
state.modalConfirmBtnName.value = name2;
|
||
}
|
||
|
||
if(props.cancelBtnName !== undefined) {
|
||
const [name1,name2] = props.cancelBtnName.split("&");
|
||
if(lang === "cn" || name2 === undefined)
|
||
state.modalCancelBtnName.value = name1;
|
||
else
|
||
state.modalCancelBtnName.value = name2;
|
||
}
|
||
}
|
||
|
||
onMounted(()=>{
|
||
const html = document.querySelector('html');
|
||
html.addEventListener("loaded",()=>{
|
||
updateLangText();
|
||
initBsModal();
|
||
})
|
||
|
||
const observer = new mutationObserver(() => {
|
||
updateLangText();
|
||
});
|
||
const config = {
|
||
attributes: true,
|
||
attributeFilter: ["data-bs-language"],
|
||
subtree: false
|
||
};
|
||
observer.observe(html, config);
|
||
})
|
||
|
||
return { ...state,modalFade,confirmBtnClick,cancelBtnClick }
|
||
}
|
||
}
|
||
|
||
export const loadingButtonComponent = {
|
||
template: `<button type="button" :class="customClass" @click="onButtonClick">
|
||
<span v-if="hadLoading" class="spinner-border spinner-border-sm"></span>
|
||
<span v-else >
|
||
<slot></slot>
|
||
</span>
|
||
</button>`,
|
||
props:['customClass','hadLoading'],
|
||
setup(props,context) {
|
||
|
||
const { hadLoading } = toRefs(props);
|
||
|
||
const onButtonClick = () => {
|
||
context.emit("button-click","click")
|
||
}
|
||
|
||
return { hadLoading,onButtonClick }
|
||
}
|
||
}
|
||
|
||
export const ptzDirectComponent = {
|
||
template: `<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="row">
|
||
<div class="col-lg-6 text-center">
|
||
<cn>云台控制</cn>
|
||
<en>PTZ</en>
|
||
</div>
|
||
<div class="col-lg-6 text-center">
|
||
<cn>预置位</cn>
|
||
<en>Preset</en>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-12 mt-3">
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="row">
|
||
<div class="col-lg-12 text-center">
|
||
<button type="button" @mousedown="handlePtzMove('left-up')" @mouseup="handlePtzMove('move-stop')" :class="['btn btn-primary',arrowClass,{'lp-visibility-hide':!sticks.includes('left-up')}]">
|
||
<i class="fa-solid fa-circle-arrow-up" style="transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);"></i>
|
||
</button>
|
||
<button type="button" @mousedown="handlePtzMove('up')" @mouseup="handlePtzMove('move-stop')" :class="['btn btn-primary',arrowClass,{'lp-visibility-hide':!sticks.includes('up')}]" :style="{'margin':'0px '+gop+'px'}">
|
||
<i class="fa-solid fa-circle-arrow-up"></i>
|
||
</button>
|
||
<button type="button" @mousedown="handlePtzMove('right-up')" @mouseup="handlePtzMove('move-stop')" :class="['btn btn-primary',arrowClass,{'lp-visibility-hide':!sticks.includes('right-up')}]">
|
||
<i class="fa-solid fa-circle-arrow-up" style="transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);"></i>
|
||
</button>
|
||
</div>
|
||
<div class="col-lg-12 text-center" :style="{'marginTop':gop+'px'}">
|
||
<button type="button" @mousedown="handlePtzMove('left')" @mouseup="handlePtzMove('move-stop')" :class="['btn btn-primary',arrowClass,{'lp-visibility-hide':!sticks.includes('left')}]">
|
||
<i class="fa-solid fa-circle-arrow-left"></i>
|
||
</button>
|
||
<button type="button" @mouseup="handlePtzMove('home')" :class="['btn btn-primary',homeClass,{'lp-visibility-hide':!sticks.includes('home')}]" :style="{'margin':'0px '+gop+'px'}">
|
||
<i class="fa-solid fa-house"></i>
|
||
</button>
|
||
<button type="button" @mousedown="handlePtzMove('right')" @mouseup="handlePtzMove('move-stop')" :class="['btn btn-primary',arrowClass,{'lp-visibility-hide':!sticks.includes('right')}]">
|
||
<i class="fa-solid fa-circle-arrow-right"></i>
|
||
</button>
|
||
</div>
|
||
<div class="col-lg-12 text-center" :style="{'marginTop':gop+'px'}">
|
||
<button type="button" @mousedown="handlePtzMove('left-down')" @mouseup="handlePtzMove('move-stop')" :class="['btn btn-primary',arrowClass,{'lp-visibility-hide':!sticks.includes('left-down')}]">
|
||
<i class="fa-solid fa-circle-arrow-up" style="transform: rotate(-135deg);-o-transform: rotate(-135deg);-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);"></i>
|
||
</button>
|
||
<button type="button" @mousedown="handlePtzMove('down')" @mouseup="handlePtzMove('move-stop')" :class="['btn btn-primary',arrowClass,{'lp-visibility-hide':!sticks.includes('down')}]" :style="{'margin':'0px '+gop+'px'}">
|
||
<i class="fa-solid fa-circle-arrow-down"></i>
|
||
</button>
|
||
<button type="button" @mousedown="handlePtzMove('right-down')" @mouseup="handlePtzMove('move-stop')" :class="['btn btn-primary',arrowClass,{'lp-visibility-hide':!sticks.includes('right-down')}]">
|
||
<i class="fa-solid fa-circle-arrow-up" style="transform: rotate(135deg);-o-transform: rotate(135deg);-webkit-transform: rotate(135deg);-moz-transform: rotate(130deg);"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-4">
|
||
<div class="col-lg-3 text-center">
|
||
<cn>焦距</cn>
|
||
<en>Zoom</en>
|
||
</div>
|
||
<div class="col-lg-7 pt-2">
|
||
<noui-slider v-model="zoom" :min="zoomMin" :max="zoomMax" :step="zoomStep" :fix="zoomFix" @slide-end="onTouchSlideEnd"></noui-slider>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="row">
|
||
<div class="col-lg-12 text-center">
|
||
<button type="button" @click="updatePreset(1)" :class="['btn',{'btn-primary':presetVal===1},{'btn-default':presetVal!==1},arrowClass]">
|
||
1
|
||
</button>
|
||
<button type="button" @click="updatePreset(2)" :class="['btn',{'btn-primary':presetVal===2},{'btn-default':presetVal!==2},arrowClass]" :style="{'margin':'0px '+gop+'px'}">
|
||
2
|
||
</button>
|
||
<button type="button" @click="updatePreset(3)" :class="['btn',{'btn-primary':presetVal===3},{'btn-default':presetVal!==3},arrowClass]">
|
||
3
|
||
</button>
|
||
</div>
|
||
<div class="col-lg-12 text-center" :style="{'marginTop':gop+'px'}">
|
||
<button type="button" @click="updatePreset(4)" :class="['btn',{'btn-primary':presetVal===4},{'btn-default':presetVal!==4},arrowClass]">
|
||
4
|
||
</button>
|
||
<button type="button" @click="updatePreset(5)" :class="['btn',{'btn-primary':presetVal===5},{'btn-default':presetVal!==5},arrowClass]" :style="{'margin':'0px '+gop+'px'}">
|
||
5
|
||
</button>
|
||
<button type="button" @click="updatePreset(6)" :class="['btn',{'btn-primary':presetVal===6},{'btn-default':presetVal!==6},arrowClass]">
|
||
6
|
||
</button>
|
||
</div>
|
||
<div class="col-lg-12 text-center" :style="{'marginTop':gop+'px'}">
|
||
<button type="button" @click="updatePreset(7)" :class="['btn',{'btn-primary':presetVal===7},{'btn-default':presetVal!==7},arrowClass]">
|
||
7
|
||
</button>
|
||
<button type="button" @click="updatePreset(8)" :class="['btn',{'btn-primary':presetVal===8},{'btn-default':presetVal!==8},arrowClass]" :style="{'margin':'0px '+gop+'px'}">
|
||
8
|
||
</button>
|
||
<button type="button" @click="updatePreset(9)" :class="['btn',{'btn-primary':presetVal===9},{'btn-default':presetVal!==9},arrowClass]">
|
||
9
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-3">
|
||
<div class="row-lg-12 text-center">
|
||
<button type="button" class="btn btn-primary border-3 px-3 me-1" @click="handleCallPreset">
|
||
<cn>调用</cn>
|
||
<en>Get</en>
|
||
</button>
|
||
<button type="button" class="btn btn-primary border-3 px-3" @click="handleSetPreset">
|
||
<cn>设置</cn>
|
||
<en>Set</en>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>`,
|
||
props: {
|
||
arrowClass: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
homeClass: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
gop: {
|
||
type: Number,
|
||
default: 5
|
||
},
|
||
sticks: {
|
||
type: Array,
|
||
default: ['left', 'left-up', 'up', 'right-up', 'right', 'right-down', 'down', 'left-down','home']
|
||
},
|
||
zoomVal: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
zoomMin: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
zoomMax: {
|
||
type: Number,
|
||
default: 10
|
||
},
|
||
zoomStep: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
zoomFix: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
components:{
|
||
"noui-slider": nouiSliderComponent
|
||
},
|
||
setup(props,context) {
|
||
|
||
const state = {
|
||
zoom: ref(0),
|
||
presetVal: ref(0)
|
||
}
|
||
|
||
watch(()=>props.zoomVal,(newValue,oldValue) => {
|
||
console.log(newValue);
|
||
state.zoom.value = newValue;
|
||
})
|
||
|
||
const handlePtzMove = type => {
|
||
context.emit("ptz-move",type)
|
||
}
|
||
|
||
const updatePreset = val => {
|
||
state.presetVal.value = val;
|
||
}
|
||
|
||
const onTouchSlideEnd = val => {
|
||
context.emit('zoom-change', val);
|
||
}
|
||
|
||
const handleCallPreset = () => {
|
||
context.emit('call-preset',state.presetVal.value);
|
||
}
|
||
|
||
const handleSetPreset = () => {
|
||
context.emit('set-preset',state.presetVal.value);
|
||
}
|
||
|
||
return { ...state,handlePtzMove,onTouchSlideEnd,updatePreset,handleCallPreset,handleSetPreset }
|
||
}
|
||
}
|
||
|
||
export const usbOptionComponent = {
|
||
template:`<a :class="['nav-link lp-usb-ctx',{'active':hadMountDisk}]" data-bs-toggle="dropdown">
|
||
<div class="lp-usb-drive">
|
||
<div class="lp-usb-body"></div>
|
||
<div class="lp-usb-metal"></div>
|
||
<div class="lp-usb-hole"></div>
|
||
</div>
|
||
</a>
|
||
<div class="dropdown">
|
||
<ul class="dropdown-menu dropdown-menu-end">
|
||
<li v-if="hadMountDisk">
|
||
<a class="dropdown-item" href="javascript:;" @click="unInstallDisk">
|
||
<span class="material-symbols-outlined me-2">
|
||
<i class="fa-solid fa-arrow-up-from-bracket me-2"></i>
|
||
<cn>弹出设备</cn>
|
||
<en>Uninstall</en>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li v-if="hadMountDisk"><hr></li>
|
||
<li v-if="hadMountDisk && Object.keys(diskConf).length > 0 && diskConf.used==='local' && diskConf.local.device!=='/dev/mmcblk0p6'">
|
||
<a class="dropdown-item" href="javascript:;" @click="formatDisk">
|
||
<span class="material-symbols-outlined me-2">
|
||
<i class="fa-solid fa-circle-nodes me-2"></i>
|
||
<cn>格式化</cn>
|
||
<en>Format Disk</en>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li v-if="hadMountDisk && Object.keys(diskConf).length > 0 && diskConf.used==='local' && diskConf.local.device!=='/dev/mmcblk0p6'"><hr></li>
|
||
<li>
|
||
<a class="dropdown-item" href="javascript:;" @click="turnMountDisk">
|
||
<span class="material-symbols-outlined me-2">
|
||
<i class="fa-solid fa-right-left me-2"></i>
|
||
<cn>切换挂载</cn>
|
||
<en>Change Disk</en>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li v-if="hadMountDisk"><hr></li>
|
||
<li v-if="hadMountDisk">
|
||
<a class="dropdown-item text-center" href="javascript:;">
|
||
<span class="material-symbols-outlined me-2">
|
||
<cn>已用</cn><en>Used</en>
|
||
{{hadMountInfo.used + ' / ' + hadMountInfo.total}}
|
||
</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>`,
|
||
setup(props,context) {
|
||
|
||
const hadMountInfo = reactive({});
|
||
const hadMountDisk = ref(false);
|
||
const { diskConf,handleDiskConf,updateDiskConf } = useDiskConf();
|
||
|
||
const unInstallDisk = () => {
|
||
confirm({
|
||
title: '<cn>卸载磁盘</cn><en>UnInstall Disk</en>',
|
||
content: '<cn>是否卸载磁盘，请确保没有处于录制状态</cn><en>Whether to uninstall the disk, please make sure it is not in the recording state</en>',
|
||
buttons: {
|
||
ok: {
|
||
text: "<cn>卸载</cn><en>Confirm</en>",
|
||
btnClass: 'btn-primary',
|
||
action: () => {
|
||
func("/system/umountDisk").then(res => {
|
||
alertMsg(res.msg,res.status);
|
||
})
|
||
}
|
||
},
|
||
cancel: {
|
||
text: "<cn>取消</cn><en>Cancel</en>",
|
||
action: () => {}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
const formatDisk = () => {
|
||
confirm({
|
||
title: '<cn>格式化磁盘</cn><en>Formatted Disk</en>',
|
||
content: `<div class="row">
|
||
<div class="col-lg-11">
|
||
<div class="row mt-2">
|
||
<div class="col-lg-3 lp-align-center">
|
||
<label>
|
||
<cn>磁盘格式</cn>
|
||
<en>Format</en>
|
||
</label>
|
||
</div>
|
||
<div class="col-lg-9">
|
||
<select class="form-select" id="diskFormat">
|
||
<option value="ext4">EXT4</option>
|
||
<option value="fat32">FAT32</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-2">
|
||
<div class="col-lg-3 lp-align-center">
|
||
<label>
|
||
<cn>登录密码</cn>
|
||
<en>Password</en>
|
||
</label>
|
||
</div>
|
||
<div class="col-lg-9">
|
||
<input class="form-control" type="password" id="formatPasswd" autocomplete="off">
|
||
</div>
|
||
</div>
|
||
<div class="row mt-4">
|
||
<div class="col-lg-12 p-0">
|
||
<label class="ms-3">
|
||
<cn>Tip: 格式化将清空磁盘数据，且不可逆转，请谨慎操作。</cn>
|
||
<en>Tip: Formatting will erase disk data and is irreversible.</en>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>`,
|
||
buttons: {
|
||
ok: {
|
||
text: "<cn>格式化</cn><en>Format</en>",
|
||
btnClass: 'btn-primary',
|
||
action: () => {
|
||
const formatPasswd = document.querySelector("#formatPasswd").value;
|
||
func("/system/formatReady",{"psd":formatPasswd}).then (res => {
|
||
return new Promise((resolve,reject)=>{
|
||
if(res.status === "error") {
|
||
alertMsg(res.msg,res.status);
|
||
reject();
|
||
return;
|
||
}
|
||
resolve();
|
||
})
|
||
}).then(()=>{
|
||
const diskFormat = document.querySelector("#diskFormat").value;
|
||
const notify = alertMsg("<cn>正在格式化，请勿关闭此页面</cn><en>Do not close this page while formatting</en>","success",99999999);
|
||
func("/system/formatDisk",{"format":diskFormat});
|
||
let interval = setInterval(()=>{
|
||
func("/system/checkFormatProgress").then(res => {
|
||
if(res.data === 0) {
|
||
clearInterval(interval);
|
||
notify.remove();
|
||
setTimeout(()=> alertMsg(res.msg,res.status),600);
|
||
}
|
||
})
|
||
},5000);
|
||
})
|
||
}
|
||
},
|
||
cancel: {
|
||
text: "<cn>取消</cn><en>Cancel</en>",
|
||
action: () => {}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
const checkMountDisk = () => {
|
||
func("/system/getMountDiskSpace").then(res => {
|
||
Object.assign(hadMountInfo,res.data);
|
||
hadMountDisk.value = (res.status === "success");
|
||
})
|
||
setTimeout(checkMountDisk,1000);
|
||
}
|
||
|
||
const turnMountDisk = () => {
|
||
const html = document.querySelector("html");
|
||
const lang = html.getAttribute("data-bs-language");
|
||
const jc = confirm({
|
||
title: '<cn>磁盘挂载</cn><en>Mount Disk</en>',
|
||
content: `<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="row mt-3">
|
||
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
||
<label>
|
||
<cn>类型</cn>
|
||
<en>Type</en>
|
||
</label>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<select class="form-select" id="mount_device">
|
||
<option value="shared">${lang === "cn" ? "网络磁盘" : "net disk"}</option>
|
||
<option value="local">${lang === "cn" ? "移动磁盘" : "usb disk"}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-3 local-device">
|
||
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
||
<label>
|
||
<cn>设备</cn>
|
||
<en>Device</en>
|
||
</label>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<select class="form-select" id="local_devices"></select>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-3 share-device">
|
||
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
||
<label>
|
||
<cn>协议</cn>
|
||
<en>Protocol</en>
|
||
</label>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<select class="form-select" id="shared_protocol">
|
||
<option value="cifs">${lang === "cn" ? "cifs (windows共享目录)" : "cifs (windows shared directory)"}</option>
|
||
<option value="nfs">nfs</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-3 cifs-auth share-device">
|
||
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
||
<label>
|
||
<cn>用户名<small style="color: gray;font-size: 11px;">(选填)</small></cn>
|
||
<en>Username</en>
|
||
</label>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<input class="form-control" id="shared_uname">
|
||
</div>
|
||
</div>
|
||
<div class="row mt-3 cifs-auth share-device">
|
||
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
||
<label>
|
||
<cn>密码<small style="color: gray;font-size: 11px;">(选填)</small></cn>
|
||
<en>Password</en>
|
||
</label>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<input class="form-control" id="shared_passwd">
|
||
</div>
|
||
</div>
|
||
<div class="row mt-3 share-device">
|
||
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
||
<label>
|
||
<cn>IP地址</cn>
|
||
<en>IP Address</en>
|
||
</label>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<input class="form-control" id="shared_ip">
|
||
</div>
|
||
</div>
|
||
<div class="row mt-3 share-device">
|
||
<div class="col-lg-3 offset-lg-1 lp-align-center">
|
||
<label>
|
||
<cn>挂载路径</cn>
|
||
<en>Mount Path</en>
|
||
</label>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<input class="form-control" id="shared_path">
|
||
</div>
|
||
</div>
|
||
<div class="row" style="padding-top: 30px;padding-left: 30px;color: gray">
|
||
<label class="col-lg-12">
|
||
<cn>Tip: 更换挂载设备时，请确保没有处于录制状态</cn>
|
||
<en>Tip: Make sure that you are not recording when you change the mounted device</en>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>`,
|
||
buttons: {
|
||
ok: {
|
||
text: "<cn>挂载</cn><en>Mount</en>",
|
||
btnClass: 'btn-primary',
|
||
action: () => {
|
||
updateDiskConf({
|
||
enable: true,
|
||
used: document.querySelector('#mount_device').value,
|
||
shared: {
|
||
ip:document.querySelector('#shared_ip').value,
|
||
type: document.querySelector('#shared_protocol').value,
|
||
path: document.querySelector('#shared_path').value,
|
||
auth : {
|
||
uname: document.querySelector('#shared_uname').value,
|
||
passwd: document.querySelector('#shared_passwd').value,
|
||
}
|
||
},
|
||
local: {
|
||
device:document.querySelector('#local_devices').value
|
||
}
|
||
}).then(async ()=> {
|
||
handleDiskConf();
|
||
alertMsg("<cn>磁盘检测中，请稍后...</cn><en>Disk checking, please wait...</en>","success");
|
||
const result = await func("/system/mountDisk");
|
||
if(result.status === "success")
|
||
jc.close();
|
||
setTimeout(() => alertMsg(result.msg,result.status),600);
|
||
});
|
||
return false;
|
||
}
|
||
},
|
||
cancel: {
|
||
text: "<cn>取消</cn><en>Cancel</en>",
|
||
action: () => {}
|
||
}
|
||
},
|
||
onOpenBefore: ()=> {
|
||
const display = (type,protocol) => {
|
||
const shareElements = document.querySelectorAll('.share-device');
|
||
const localElements = document.querySelectorAll('.local-device');
|
||
shareElements.forEach(element => element.style.display = 'none');
|
||
localElements.forEach(element => element.style.display = 'none');
|
||
if(type === "shared") {
|
||
shareElements.forEach(element => element.style.display = '');
|
||
const cifsAuthElements = document.querySelectorAll('.cifs-auth');
|
||
document.querySelector('#shared_protocol').value = protocol;
|
||
cifsAuthElements.forEach(element => element.style.display = 'none');
|
||
if(protocol === 'cifs')
|
||
cifsAuthElements.forEach(element => element.style.display = '');
|
||
return;
|
||
}
|
||
localElements.forEach(element => element.style.display = '');
|
||
}
|
||
|
||
func("/system/getLocalDisk").then(result => {
|
||
const html = document.querySelector("html");
|
||
const lang = html.getAttribute("data-bs-language");
|
||
result.data.forEach(item => {
|
||
const option = document.createElement('option');
|
||
option.value = item.name;
|
||
if(item.name === "/dev/mmcblk0p6") {
|
||
if(lang === "cn")
|
||
item.name = "内部存储";
|
||
else
|
||
item.name = "device storage";
|
||
}
|
||
option.text = item.name+"( "+item.size+" )";
|
||
document.querySelector('#local_devices').add(option);
|
||
})
|
||
})
|
||
|
||
document.querySelector('#mount_device').value = diskConf.used;
|
||
document.querySelector('#local_devices').value = diskConf.local.device;
|
||
document.querySelector('#shared_protocol').value = diskConf.shared.type;
|
||
document.querySelector('#shared_uname').value = diskConf.shared.auth.uname;
|
||
document.querySelector('#shared_passwd').value = diskConf.shared.auth.passwd;
|
||
document.querySelector('#shared_ip').value = diskConf.shared.ip;
|
||
document.querySelector('#shared_path').value = diskConf.shared.path;
|
||
display(diskConf.used,diskConf.shared.type);
|
||
document.querySelector('#mount_device').addEventListener('change', () => {
|
||
const type = document.querySelector('#mount_device').value;
|
||
display(type,"cifs");
|
||
});
|
||
document.querySelector('#shared_protocol').addEventListener('change', () => {
|
||
const protocol = document.querySelector('#shared_protocol').value;
|
||
display("shared",protocol);
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
onMounted(checkMountDisk);
|
||
return { hadMountInfo,hadMountDisk, diskConf,unInstallDisk,formatDisk,turnMountDisk }
|
||
}
|
||
}
|