lixiaobang
/
qiuwang
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: lixiaobang:7bc3e7edc50a3e394d2c8e4eb8b71f182eb9be6b
Branches Tags
lixiaobang:master
...
compare: lixiaobang:9c6188d561dc9e484583c6936cd13f6f74896eea
Branches Tags
lixiaobang:master

No commits in common. "7bc3e7edc50a3e394d2c8e4eb8b71f182eb9be6b" and "9c6188d561dc9e484583c6936cd13f6f74896eea" have entirely different histories.
7bc3e7edc5 ... 9c6188d561

60 changed files with 7987 additions and 5933 deletions
Show Stats Expand all files Collapse all files

3
build/webpack.base.conf.js
View File

@ -36,8 +36,7 @@ module.exports = {
extensions: [".js", ".vue", ".json"],
alias: {
vue$: "vue/dist/vue.esm.js",
"@": resolve("src"),
"#": resolve("config") //新增用#代替config文件夹
"@": resolve("src")
}
},
module: {

15
config/index.js
View File

@ -34,31 +34,22 @@ module.exports = {
'/api': {
// target: 'http://10.6.0.26:81',
// target: 'http://175.27.191.156:11000/api/',
target: 'http://175.27.191.156:8181/',
// target: 'http://192.168.131.101:12345/', //现场
// target: 'http://175.27.191.156:8181/',
target: 'http://192.168.1.102:81/', //现场
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
// '/live':{
// target: 'http://192.168.131.101:8080/live', //现场
// changeOrigin: true,
// pathRewrite: {
// '^/live': ''
// }
// },
'/v3': { //代理的名字
// target: 'http://221.226.177.198:14023/v3/',
target: 'https://restapi.amap.com/v3/',
target: 'http://221.226.177.198:14023/v3/',
changeOrigin: true,
pathRewrite:{
'^/v3':'',
}
}
// '/api': { //代理的名字
// target: 'http://220.163.114.158:5001/',
// changeOrigin: true,
// pathRewrite:{

20
npminstall-debug.log
View File

@ -1,13 +1,21 @@
{
root: 'F:\\lixiaobang\\qiuwang_10_28',
root: 'F:\\lixiaobang\\qiuwang_9_19\\qiuwang_9_19',
registry: 'https://registry.npmmirror.com',
pkgs: [],
pkgs: [
{
name: '',
version: 'uuid/v4',
type: 'git',
alias: undefined,
arg: [Result]
}
],
production: false,
cacheStrict: false,
cacheDir: 'C:\\Users\\Administrator\\.npminstall_tarball',
env: {
npm_config_registry: 'https://registry.npmmirror.com',
npm_config_argv: '{"remain":[],"cooked":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\Administrator\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com"],"original":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\Administrator\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com"]}',
npm_config_argv: '{"remain":[],"cooked":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\Administrator\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","--save","uuid/v4"],"original":["--fix-bug-versions","--china","--userconfig=C:\\\\Users\\\\Administrator\\\\.cnpmrc","--disturl=https://cdn.npmmirror.com/binaries/node","--registry=https://registry.npmmirror.com","--save","uuid/v4"]}',
npm_config_user_agent: 'npminstall/7.10.0 npm/? node/v16.16.0 win32 x64',
npm_config_cache: 'C:\\Users\\Administrator\\.npminstall_tarball',
NODE: 'D:\\node\\node.exe',
@ -41,8 +49,8 @@
npm_config_sharp_binary_host: 'https://cdn.npmmirror.com/binaries/sharp',
npm_config_sharp_libvips_binary_host: 'https://cdn.npmmirror.com/binaries/sharp-libvips',
npm_config_robotjs_binary_host: 'https://cdn.npmmirror.com/binaries/robotjs',
npm_rootpath: 'F:\\lixiaobang\\qiuwang_10_28',
INIT_CWD: 'F:\\lixiaobang\\qiuwang_10_28'
npm_rootpath: 'F:\\lixiaobang\\qiuwang_9_19\\qiuwang_9_19',
INIT_CWD: 'F:\\lixiaobang\\qiuwang_9_19\\qiuwang_9_19'
},
binaryMirrors: {
ENVS: {
@ -177,7 +185,7 @@
disableFallbackStore: false,
workspacesMap: Map(0) {},
enableWorkspace: false,
workspaceRoot: 'F:\\lixiaobang\\qiuwang_10_28',
workspaceRoot: 'F:\\lixiaobang\\qiuwang_9_19\\qiuwang_9_19',
isWorkspaceRoot: true,
isWorkspacePackage: false,
offline: false,

69
src/api/api.js
View File

@ -45,8 +45,6 @@ export const getProjectInfo = (params) => {
};
//人员信息监控接口
export const getUserMonitorInfo = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/user/monitor',{
params,
}
@ -54,176 +52,132 @@ export const getUserMonitorInfo = (params) => {
};
//项目人员分组信息接口
export const getUserGroup = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/user/group',
{params},
)
};
//项目进度接口
export const getProjectStatus = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/projectStatus',
{params},
)
};
//安全检查统计
export const getProjectCheckCensus = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/checkCensus',
{params},
)
};
//安全检查跟踪
export const getProjectCheckInfo = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/checkInfo',
{params},
)
};
//工程工期
export const getProjectDuration = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/projectDuration',
{params},
)
};
//投资进度
export const getProjectInvestment = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/projectInvestment',
{params},
)
};
//计划进度
export const getPlanProgress = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/planProgress',
{params},
)
};
//实时进度
export const getActualProgress = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/actualProgress',
{params},
)
};
//本月任务完成情况
export const getCompleteMonthStatus = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/completeMonthStatus',
{params},
)
};
//视频监控
export const getIsImportant = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/camera/isImportant',
{params},
)
};
//获取所有监控接口
export const getAllCamera = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/camera/all/get',
{params},
)
};
//获取所有监控接口列表
export const getAllCameraList = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/camera/all/get',
{params},
)
};
//获取摄像头数量接口
export const getCameraCount = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/camera/count',
{params},
)
};
//获取摄像头历史监控
export const getCameraHistory = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/camera/history',
{params},
)
};
//安全检查统计
export const getCheckTotalCensus = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/checkTotalCensus',
{params},
)
};
//检查次数统计
export const getCheckTimesCensus = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/checkTimesCensus',
{params},
)
};
//隐患检查统计
export const getResolveTroubleCensus = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/resolveTroubleCensus',
{params},
)
};
// //高频问题项
export const getMostTroubleCensus = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/mostTroubleCensus',
{params},
)
};
//安全告警统计
export const getWarnSurveillance = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/warnSurveillance',
{params},
)
};
//隐患整改记录
export const getResolveTroublePage = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/project/resolveTroublePage',
{params},
)
};
//告警详情
export const getAlarmDetails = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/ems-third-party-service/warn/list',
{params},
)
};
//当日现场人员
export const getAttendanceHistory = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/3d-modeling/attendanceHistory',
{params},
)
@ -231,16 +185,12 @@ export const getAlarmDetails = (params) => {
//当日环境传感器监测
export const getSensorHistory = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/3d-modeling/sensor-history',
{params},
)
};
//当日环境告警事件
export const getEnvironmentWarnHistory = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/3d-modeling/warn-history',
{params},
)
@ -248,32 +198,13 @@ export const getAlarmDetails = (params) => {
//当地工地安全事件
export const getwarnHistorySite = (params) => {
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/3d-modeling/warn-history-site',
{params},
)
};
// 获取常规巡检信息
export const getInspectionDetails = (params) =>{
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/inspection/getInspectionDetails',
{params},
)
}
//获取环境监测的上下阈值
export const getDeviceInfo = (params) =>{
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/device/sensor/deviceInfo',
{params},
)
}
//调用现场播报接口
export const getPlayStatus = () =>{
let access_token = JSON.parse(sessionStorage.getItem("token"))
axios.defaults.headers.common['Blade-Auth'] = access_token;
return axios.get('api/ems-third-party-service/3d-modeling/playStatus'
)
}

BIN
src/assets/pic/alarmPic.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.3 KiB

BIN
src/assets/pic/online.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/pic/outline.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/pic/videoPic.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 999 KiB

342
src/components/common/LineChartBottomMiddel.vue
View File

@ -11,13 +11,13 @@
</div>
</template>
<script>
import Chart from "../chart.vue";
const MAX_LABEL = 8;
import Chart from '../chart.vue'
const MAX_LABEL = 8
export default {
props: {
className: {
type: String,
default: "",
default: ''
},
// 父组件传递过来的图表数据
// chartData: {
@ -27,55 +27,47 @@ export default {
colorArray: {
type: Array,
default: () => {
return ["#84F5DE", "#56E8F2", "#4CC5F8"];
},
return ['#84F5DE', '#56E8F2', '#4CC5F8']
}
},
yAxisName: {
type: String,
default: "",
default: ''
},
// x轴数据
xAxisData: {
type: Array,
default: () => {
return [];
},
return []
}
},
tooltipFormatter: {
type: Function | String,
default: null,
default: null
},
yAxisPosition: {
type: String,
default: "left",
default: 'left'
},
yAxisPadding: {
type: Array,
default: null,
},
checkCountList: {
type: Array,
default: null,
},
upData: {
type: String,
default: "100",
},
downData: {
type: String,
default: "0",
default: null
},
checkCountList:{
type:Array,
default:null
}
},
components: {
Chart,
Chart
},
data() {
data () {
return {
tipStyle: { visibility: "hidden", position: "absolute", top: 0, left: 0 },
tipContent: "",
};
tipStyle: { visibility: 'hidden', position: 'absolute', top: 0, left: 0 },
tipContent: ''
}
},
watch: {
@ -86,119 +78,109 @@ export default {
// this.resetOption()
// }
// },
checkCountList: {
checkCountList:{
deep: true,
handler(newVal) {
this.resetOption();
},
},
upData: {
handler(old, newVla) {},
},
downData: {
handler(oldVla, newVla) {},
},
handler (newVal) {
this.resetOption()
}
}
},
computed: {
colorStops() {
colorStops () {
if (!this.colorArray || this.colorArray.length < 2) {
return [
{ offset: 0, color: "#84F5DE" },
{ offset: 0.5, color: "#56E8F2" },
{ offset: 1, color: "#4CC5F8" },
];
{ offset: 0, color: '#84F5DE' },
{ offset: 0.5, color: '#56E8F2' },
{ offset: 1, color: '#4CC5F8' }
]
} else {
const colorNum = this.colorArray.length;
const step = (1 / (colorNum - 1)).toFixed(2);
const colors = [];
const colorNum = this.colorArray.length
const step = (1 / (colorNum - 1)).toFixed(2)
const colors = []
this.colorArray.forEach((color, index) => {
if (index < colorNum - 1) {
colors.push({ offset: step * index, color: color });
colors.push({ offset: step * index, color: color })
} else {
colors.push({ offset: 1, color: color });
colors.push({ offset: 1, color: color })
}
});
return colors;
})
return colors
}
},
option() {
let dataX = []; //X轴
let dataY = []; //Y轴
this.checkCountList.forEach((item, index) => {
dataX.push(item.time);
dataY.push(item.value);
option () {
let dataX = [] //X轴
let dataY = [] //Y轴
this.checkCountList.forEach((item,index) => {
dataX.push(item.time)
dataY.push(item.value)
});
// dataY = dataY.slice(-100)
var dataLength = dataY.length;
const self = this;
const self = this
return {
tooltip: {
trigger: "axis",
backgroundColor: "rgba(30, 97, 94, 0.9)",
backgroundColor:'rgba(30, 97, 94, 0.9)',
axisPointer: {
type: "shadow",
label: {
show: false,
},
show: false
}
},
position: function (point, params, dom, rect, size) {
return [point[0] - 50, "10%"]; //返回x、y（横向、纵向）两个点的位置
},
return [point[0] - 50, '10%'] //返回x、y（横向、纵向）两个点的位置
}
},
grid: {
top: "20",
left: "35",
right: "25",
bottom: "34",
// containLabel: true,
top: '54',
left: '26',
right: '25',
bottom: '34',
containLabel: true
},
xAxis: {
axisLine: {
// x轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffff",
height: 0,
},
color: '#ffff',
height: 0
}
},
axisTick: {
show: false,
show: false
},
axisLabel: {
show: false,
// interval: 0, // 横轴信息全部显示
//interval: 0, // 横轴信息全部显示
margin: 6, // 刻度标签与轴线之间的距离
align: "center",
align: 'center',
fontSize: 12, // 横轴字体大小
color: "#D5FFFC", // 颜色
color: '#D5FFFC', // 颜色
formatter: function (params) {
if (params.length > MAX_LABEL) {
return params.substr(0, MAX_LABEL - 1) + "...";
return params.substr(0, MAX_LABEL - 1) + '...'
} else {
return params;
return params
}
}
},
},
triggerEvent: true,
type: "category",
data: dataX,
type: 'category',
data: dataX
},
yAxis: {
name: "",
type: "value",
// position: this.yAxisPosition || null,
name: '',
type: 'value',
position: this.yAxisPosition || null,
nameTextStyle: {
color: "#64D5CD",
color: '#64D5CD',
padding: this.yAxisPadding || [0, 38, -1, 0],
fontSize: 12,
opacity: 0.5,
opacity: 0.5
},
minInterval: 10,
min: this.downData / 3,
max: this.upData * 1.8, // 根据你的需求设置最大值
position: "50%", // 将 y 轴放在中间位置
minInterval:10,
axisLine: {
show: true,
@ -206,23 +188,23 @@ export default {
// color: 'white'
// color:'#76E679',
// color:'#00e8e3',
color: "rgba(255, 255, 255, 0.4)",
},
color:'rgba(96, 213, 205, 0.4)',
}
},
splitLine: {
// 分割线配置
show: false,
lineStyle: {
color: "#078DF0",
opacity: 0.3,
},
color: '#078DF0',
opacity: 0.3
}
},
axisTick: {
show: false,
show: false
},
axisLabel: {
color: "#D5FFFC",
color: '#D5FFFC',
fontSize: 14,
opacity: 0.5,
show: false,
@ -230,158 +212,72 @@ export default {
},
series: [
{
name: "监测值",
name:'监测值',
data: dataY,
// label: {
// // 在更新数据时显示最后一个值的标签
// show: true,
// position: 'top', // 标签位置，可以根据需要调整
// formatter: '{c}'
// },
// color:'#76E679',
color: "rgb(25,198,52)",
color:'#00e8e3',
// color:'rgba(96, 213, 205, 0.4)',
type: "line",
// smooth: true,
// symbol: "circle",
// showSymbol: true,
// symbolSize: 20,
// symbol: ["circle", "circle"],
// symbolSize: function (dataIndex, params) {
// // 判断是否为最后一个值，是则设置较大的大小，否则默认大小
// return params.dataIndex == dataY.length-1 ? 15 : 8;
// },
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
}
},
},
markPoint: {
name: "最大值",
type: "max",
label: {
show: true,
formatter: function (params) {
// 自定义标签内容为数组中的最后一个值
return dataY[dataLength - 1];
},
},
data: [
{
coord: [dataLength - 1, dataY[dataLength - 1]],
},
],
},
// effect: {
// show: true,
// period: 6, // 控制动画的速度，单位为帧
// trailLength: 0.7, // 尾迹的长度，取值范围[0,1]
// symbol: "circle", // 特效图形的形状
// symbolSize: 20, // 结束时的大小
// },
// label: {
// show: true,
// position: 'start',
// fontSize: 12,
// },
markLine: {
silent: true,
symbol: "none",
data: [
{
yAxis: this.upData,
symbol: 'none',
label: {
show: true,
position: 'start',
formatter: '{c}',
fontSize: 14,
fontWeight: 'bold',
// padding: [-13, -20, 15, -45],
},
lineStyle: {
color: "rgba(255, 255, 255, 0.4)",
type: 'dotted'
},
data: [{
yAxis: 18.5,
lineStyle: {
// color: "#00e8e3"
color:'rgba(96, 213, 205, 0.4)'
},
label: {
color: "red",
fontWeight: "200",
position: "start",
formatter: "{c}",
},
},
{
yAxis: this.downData,
lineStyle: {
color: "rgba(96, 213, 205, 0.4)",
},
label: {
color: "white",
fontWeight: "200",
position: "start",
formatter: "{c}",
},
},
],
lineStyle: {
normal: {
type: "dotted",
},
},
// color: "#00e8e3"
color: 'white',
fontWeight: '200',
}
},
// markLine: {
// symbol: "none",
// silent: true,
// label: {
// show: true,
// position: "start",
// formatter: "{c}",
// fontSize: 14,
// fontWeight: "bold",
// // padding: [-13, -20, 15, -45],
// },
// lineStyle: {
// type: "dotted",
// },
// data: [
// {
// yAxis: 40,
// lineStyle: {
// // color: "#00e8e3"
// // color: "rgba(96, 213, 205, 0.4)",
// color:"rgba(255, 255, 255, 0.4)"
// },
// label: {
// show:true,
// position:'middle',
// // color: "#00e8e3"
// color: "red",
// fontWeight: "200",
// },
// },
// {
// yAxis: 10,
// lineStyle: {
// // color: "#00e8e3"
// color: "rgba(96, 213, 205, 0.4)",
// // color:"rgba(255, 255, 255, 0.4)"
// },
// label: {
// // color: "#00e8e3"
// color: "white",
// fontWeight: "200",
// show:true,
// },
// },
// ],
// },
]
},
],
};
},
]
}
}
},
methods: {
resetOption() {
this.$refs.chart.setOption(this.option);
resetOption () {
this.$refs.chart.setOption(this.option)
},
},
};
}
}
</script>
<style scoped>
.lineBox {
.lineBox{
height: 17px;
position: absolute;
top: 38px;

6
src/components/common/carousel.vue
View File

@ -3,9 +3,11 @@
<swiper @slideChange="slideChange" :options="swiperOption" ref="mySwiper">
<!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
<swiper-slide v-for="(slide, key) in swiperList" :key="key">
<div>
<div class="item_container">
<img :src="slide.picture" alt="" class="apparatus_logo">
</div>
</div>
</swiper-slide>
<!-- <div class="swiper-button-next" slot="button-next"></div> -->
</swiper>
@ -71,6 +73,7 @@ export default {
// "apparatusImg": require("@/assets/pic/23.png"),
// },
],
peopleList:[],
//轮播图配置项
swiperOption: {
initialSlide: 0,
@ -81,7 +84,7 @@ export default {
//active图片居中
centeredSlides: true,
//开启loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
loop: false,
loop: true,
//在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。
//轮播设置
autoplay: {
@ -137,7 +140,6 @@ export default {
peopleList: {
deep: true,
handler (val) {
console.log(val,'人员考勤图片数据');
this.$nextTick(() => {
console.log("val",val)
// this.peopleList = val

109
src/components/common/controlPage.vue
View File

@ -1,17 +1,11 @@
<template>
<div class="controlPage">
<div
class="closeBtn"
@click="closeHandle"
>
<div class="closeBtn" @click="closeHandle">
</div>
<div class="pageBox">
<div
class="control-title"
style="margin-top: 0;"
>
<div class="control-title" style="margin-top: 0;">
巡视记录
</div>
<div class="inspection-records">
@ -21,30 +15,17 @@
巡视图片
</div>
<div class="inspection-img">
<img
v-for="(item, index) in inspectionList.imagesUrl"
:src="item"
alt=""
:key="index"
/>
<img v-for="(item, index) in inspectionList.imagesUrl" :src="item" alt="" :key="index"/>
</div>
<div class="control-title">
巡视视频
</div>
<div class="inspection-video">
<video
autoplay
controls
:src="inspectionList.videoUrl"
style="width:100%;height:100%"
></video>
<video autoplay controls :src="inspectionList.videoUrl"></video>
<!-- <iframe ref="videoFlv" src="/static/flv/demo.html" frameborder="0"></iframe> -->
</div>
<div
class="inspection-problems"
:key="'problem' + index"
v-for="(item, index) in inspectionList.inspectionProblems"
>
<div class="inspection-problems" :key="'problem' + index"
v-for="(item, index) in inspectionList.inspectionProblems">
<div class="control-title">
问题{{ index + 1 }}描述
</div>
@ -58,83 +39,86 @@
巡视图片
</div>
<div class="inspection-img">
<img
v-for="(n, k) in item.pictures"
:src="n"
alt=""
:key="k"
/>
<img v-for="(n, k) in item.pictures" :src="n" alt="" :key="k"/>
</div>
</div>
</div>
</div>
</template>
<script>
import { getInspectionDetails } from "@/api/api";
export default {
name: "",
name: '',
data() {
return {
controlImgList: [
{
pic: require("../../assets/controlImg.png"),
pic: require("../../assets/controlImg.png")
},
{
pic: require("../../assets/controlImg.png"),
pic: require("../../assets/controlImg.png")
},
{
pic: require("../../assets/controlImg.png"),
pic: require("../../assets/controlImg.png")
},
{
pic: require("../../assets/controlImg.png"),
},
pic: require("../../assets/controlImg.png")
}
],
question: "电缆线暴露在外",
inspectionList: {},
};
},
mounted() {},
computed: {},
methods: {
//请求数据接口
getInspectionData(data) {
getInspectionDetails({ id: data }).then((res) => {
if (res.data.code == 200) {
this.inspectionList = res.data.data;
inspectionList: {}
}
});
},
mounted() {
},
computed: {
},
methods: {
getInspectionData(data) {
getInspectionDetails({ id: data }).then(res => {
if (res.data.code == 200) {
console.log(res, '巡更详情shuju');
this.inspectionList = res.data.data
}
})
},
closeHandle() {
// 关闭弹窗事件
this.$emit("closeDialog", false);
this.$emit('closeDialog', false)
}
},
},
};
}
</script>
<style scoped lang="less">
.controlPage {
.pageBox {
.pageBox{
width: 100%;
height: 100%;
overflow-y: scroll;
}
// 滚动条宽度
.pageBox::-webkit-scrollbar {
.pageBox::-webkit-scrollbar{
width: 8px;
}
// 背景色
.pageBox::-webkit-scrollbar-track {
.pageBox::-webkit-scrollbar-track{
background-color: #f5f5f5;
border-radius: 4px;
}
// 滑块颜色
.pageBox::-webkit-scrollbar-thumb {
.pageBox::-webkit-scrollbar-thumb{
background-color: #7ffffc;
border-radius: 4px;
}
.closeBtn {
width: 16px;
background: url("~@/assets/pic/close.png") no-repeat;
background: url('~@/assets/pic/close.png') no-repeat;
background-size: 100% 100%;
height: 16px;
color: #90f2eb;
@ -149,8 +133,8 @@ export default {
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
bottom:0;
margin:auto;
width: 1072px;
height: 789px;
background-image: url("../../assets/controlBg.png");
@ -162,10 +146,7 @@ export default {
color: #7ffffc;
margin: 15px 0;
}
.inspection-video {
height: 20%;
width: 35%;
}
.inspection-records {
color: #3f7f7e;
}
@ -185,7 +166,7 @@ export default {
.question-icon {
width: 18px;
height: 18px;
background-image: url("../../assets/question-icon.png");
background-image: url('../../assets/question-icon.png');
background-size: 100% 100%;
display: inline-block;
vertical-align: middle;

186
src/components/common/tourLogPage.vue
View File

@ -1,186 +0,0 @@
<template>
<div class="tourLogPage">
<div class="closeBtn" @click="closeHandle">
</div>
<div class="pageBox">
<div class="control-title" style="margin-top: 0;">
巡视记录
</div>
<div class="inspection-records">
{{ inspectionList.record }}
</div>
<div class="control-title">
巡视图片
</div>
<div class="inspection-img">
<img v-for="(item, index) in inspectionList.imagesUrl" :src="item" alt="" :key="index"/>
</div>
<div class="control-title">
巡视视频
</div>
<div class="inspection-video">
<video autoplay controls :src="inspectionList.videoUrl" style="width:100%;height:100%"></video>
<!-- <iframe ref="videoFlv" src="/static/flv/demo.html" frameborder="0"></iframe> -->
</div>
<div class="inspection-problems" :key="'problem' + index"
v-for="(item, index) in inspectionList.inspectionProblems">
<div class="control-title">
问题{{ index + 1 }}描述
</div>
<div class="control-quesition">
<div class="describe">
<span class="question-icon"></span><span>{{ item.type }}</span>
<span>{{ item.describe }}</span>
</div>
</div>
<div class="control-title">
巡视图片
</div>
<div class="inspection-img">
<img v-for="(n, k) in item.pictures" :src="n" alt="" :key="k"/>
</div>
</div>
</div>
</div>
</template>
<script>
import { getInspectionDetails } from "@/api/api";
export default {
name: '',
data() {
return {
controlImgList: [
{
pic: require("../../assets/controlImg.png")
},
{
pic: require("../../assets/controlImg.png")
},
{
pic: require("../../assets/controlImg.png")
},
{
pic: require("../../assets/controlImg.png")
}
],
question: "电缆线暴露在外",
inspectionList: {}
}
},
mounted() {
},
computed: {
},
methods: {
//请求数据接口
getInspectionData(data) {
console.log(data,'调用智能巡检');
getInspectionDetails({ id: data }).then(res => {
if (res.data.code == 200) {
this.inspectionList = res.data.data
}
})
},
closeHandle() {
// 关闭弹窗事件
this.$emit('closeDialog', false)
}
},
}
</script>
<style scoped lang="less">
.tourLogPage {
z-index:9999;
.pageBox{
width: 100%;
height: 100%;
overflow-y: scroll;
}
// 滚动条宽度
.pageBox::-webkit-scrollbar{
width: 8px;
}
// 背景色
.pageBox::-webkit-scrollbar-track{
background-color: #f5f5f5;
border-radius: 4px;
}
// 滑块颜色
.pageBox::-webkit-scrollbar-thumb{
background-color: #7ffffc;
border-radius: 4px;
}
.closeBtn {
width: 16px;
background: url('~@/assets/pic/close.png') no-repeat;
background-size: 100% 100%;
height: 16px;
color: #90f2eb;
float: right;
font-size: 50px;
cursor: pointer;
margin-right: 16px;
margin-top: 16px;
}
position: fixed;
top: 0;
right: 0;
left: 4%;
bottom:0;
margin:auto;
width: 1072px;
height: 789px;
background-image: url("../../assets/controlBg.png");
padding: 40px;
box-sizing: border-box;
padding-bottom: 50px;
.control-title {
color: #7ffffc;
margin: 15px 0;
}
.inspection-video{
height:20%;
width:35%
}
.inspection-records {
color: #3f7f7e;
}
.inspection-img {
display: flex;
flex-wrap: wrap;
img {
margin-right: 25px;
width: 179px;
height: 117px;
}
}
.control-quesition {
.question-icon {
width: 18px;
height: 18px;
background-image: url('../../assets/question-icon.png');
background-size: 100% 100%;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.describe {
color: #ff6c00;
}
}
}
</style>

54
src/main.js
View File

@ -38,7 +38,7 @@ Object.keys(filters).forEach(key => {
import moment from 'moment'
//定义一个全局过滤器实现日期格式化
Vue.filter('datefmt', function (input, fmtstring) {//当input为时间戳时，需转为Number类型
Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
// 使用momentjs这个日期格式化类库实现日期的格式化功能
return moment(input).format(fmtstring);
});
@ -52,56 +52,6 @@ Vue.config.productionTip = false
import videojs from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$video = videojs;
//自适应
import { detectZoom } from '@/utils/detectZoom.js';
const m = detectZoom();
//判断屏幕是否为4k
// window.screen.width * window.devicePixelRatio >=3840
console.log(window.screen.width, 'window.screen.width');
if (window.screen.width >= 3840) {
// switch (m) {
// // 4k屏时屏幕缩放比为100%
// case 100:
// document.body.style.zoom = 100 / 50;
// break;
// // 4k屏时屏幕缩放比为125%
// case 125:
// document.body.style.zoom = 100 / 62.5;
// break;
// // 4k屏时屏幕缩放比为150%
// case 150:
// document.body.style.zoom = 100 / 75;
// break;
// // 4k屏时屏幕缩放比为175%
// case 175:
// document.body.style.zoom = 100 / 87.4715;
// break;
// // 4k屏时屏幕缩放比为200%
// case 200:
// document.body.style.zoom = 100 / 100;
// break;
// // 4k屏时屏幕缩放比为225%
// case 225:
// document.body.style.zoom = 100 / 112.485;
// break;
// default:
// break;
// }
// document.body.style.zoom = 100 / (Number(m)/2);
var userAgent = navigator.userAgent
if (userAgent.indexOf("Chrome") > -1) {
// 当前浏览器为 Chrome
document.body.style.zoom = 100 / (Number(m) / 2);
} else if (userAgent.indexOf("Firefox") > -1) {
// 当前浏览器为 Firefox
document.body.style.transformOrigin = "center center";
document.body.style.transform = "scale(2)";
document.body.style.overflow = 'hidden'
}
} else {
document.body.style.zoom = 1;
}
//MQTT订阅
var currentTopics = null;
var client = null;
@ -138,7 +88,7 @@ window.PubScribe = function (topic, _callback,) {
});
} else {
if (topic != null) {
console.log("topic", topic)
console.log("topic",topic)
currentTopics = topic;
client.subscribe(currentTopics, {
qos: 0

56
src/router/index.js
View File

@ -76,33 +76,33 @@ const router = new Router({
]
});
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
// 获取存储localStorage的token
let token = sessionStorage.getItem("token")
// 获取存储token的开始时间
const tokenStartTime = sessionStorage.getItem("tokenStartTime")
// 后台给出的token有效时间，一个星期 单位 是秒
// 我们自己定义6天过期，让用户重新登录一下， 用户总不可能在一个页面挂机一天吧
const timeOver = 1 * 24 * 3600 * 1000
// 当前时间
let date = new Date().getTime()
// 如果大于说明是token过期了
if (date - tokenStartTime > timeOver) {
token = null
}
// 如果token过期了
if (!token) {
if (to.path == '/login') return next()
// 注意要import element的Message组件
// this.$message.error("登录状态过期，请重新登录")
Message.error("登录状态过期，请重新登录")
sessionStorage.clear();
return next('/login')
// 如果token没有过期，又是选择了登录页面就直接重定向到首页，不需要重新输入账户密码
} else if (to.path == '/login') {
return next('/index')
}
next()
// router.beforeEach((to, from, next) => {
// // 获取存储localStorage的token
// let token = sessionStorage.getItem("token")
// // 获取存储token的开始时间
// const tokenStartTime = sessionStorage.getItem("tokenStartTime")
// // 后台给出的token有效时间，一个星期 单位 是秒
// // 我们自己定义6天过期，让用户重新登录一下， 用户总不可能在一个页面挂机一天吧
// const timeOver = 1 * 24 * 3600 * 1000
// // 当前时间
// let date = new Date().getTime()
// // 如果大于说明是token过期了
// if (date - tokenStartTime > timeOver) {
// token = null
// }
// // 如果token过期了
// if (!token) {
// if (to.path == '/login') return next()
// // 注意要import element的Message组件
// // this.$message.error("登录状态过期，请重新登录")
// Message.error("登录状态过期，请重新登录")
// sessionStorage.clear();
// return next('/login')
// // 如果token没有过期，又是选择了登录页面就直接重定向到首页，不需要重新输入账户密码
// } else if (to.path == '/login') {
// return next('/index')
// }
// next()
})
// })
export default router;

46
src/utils/Resize.vue
View File

@ -4,21 +4,21 @@
<slot></slot>
</template>
</div>
</template>
<style>
#resize {
</template>
<style>
#resize {
position: fixed;
top: 0px;
left: 0px;
overflow: hidden;
transform-origin: left top;
z-index: 999;
}
</style>
<script>
import autoResize from "./autoResize";
}
</style>
<script>
import autoResize from "./autoResize";
export default {
export default {
name: "DvFullScreenContainer",
mixins: [autoResize],
data() {
@ -27,7 +27,7 @@ export default {
allWidth: 0,
scale: 0,
datavRoot: "",
ready: false
ready: false,
};
},
methods: {
@ -46,35 +46,21 @@ export default {
this.allWidth = width;
// dom.style.width = `${width}px`;
// dom.style.height = `${height}px`;
dom.style.width = `1920px`;
dom.style.height = `1080px`;
dom.style.width = `${width}px`;
dom.style.height = `${height}px`;
},
setAppScale() {
const { allWidth, dom } = this;
const currentWidth = document.body.clientWidth;
if (currentWidth == 1920) {
dom.style.transform = `scale(1)`;
} else {
dom.style.transform = `scale(${currentWidth / allWidth})`;
if (window.screen.width >= 3840) {
var userAgent = navigator.userAgent;
// 当前浏览器为 Chrome
if (userAgent.indexOf("Firefox") > -1) {
// 当前浏览器为 Firefox
dom.style.left = "25%";
}
}
}
// dom.style.transform = `scale(${currentWidth / allWidth})`;
},
onResize() {
const { setAppScale } = this;
setAppScale();
}
}
};
</script>
},
},
};
</script>

21
src/utils/detectZoom.js
View File

@ -1,21 +0,0 @@
export const detectZoom = () => {
let ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
} else if (~ua.indexOf('msie')) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
} else if (
window.outerWidth !== undefined &&
window.innerWidth !== undefined
) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio) {
ratio = Math.round(ratio * 100);
}
return ratio;
};

18
src/utils/mqttConfig.js
View File

@ -21,17 +21,14 @@ class mqttHandle {
cleanSession: true,
connectTimeout: 7000, // 超时时间
reconnectPeriod: 7000, // 重连时间间隔
host:'175.27.191.156',
// host:'192.168.131.101', //现场
// host:'127.0.0.1',
port: '10083',//现场
// host:'175.27.191.156',
host:'192.168.1.102',
port: '10083',
// 认证信息
// clientId:'mqttjs_23dda38f34',
clientId: randomName(16),
// username: 'admin',
// password: '1qaz0OKM',
username:' site_01',
password:' site_01',
username: 'site',
password: 'site',
}
// this.connect.clientId = randomName(16);
this.mqttClient = null;
@ -44,9 +41,8 @@ class mqttHandle {
//配置链接
const { host, port, endpoint, ...options } = this.connect;
console.log("this.connect.host",this.connect.host)
const connectUrl = 'ws://175.27.191.156:10083/mqtt';
// const connectUrl = 'ws://192.168.131.101:8083/mqtt';
// const connectUrl = 'ws://127.0.0.1:8083/mqtt';
// const connectUrl = 'ws://175.27.191.156:10083/mqtt';
const connectUrl = 'ws://192.168.1.102:8083/mqtt';
// if (!client.connected) {
// client.on('connect', function () {
// console.log('连接成功')

652
src/views/bottomCharts.vue
View File

File diff suppressed because it is too large Load Diff

862
src/views/index.vue
View File

File diff suppressed because it is too large Load Diff

51
src/views/login.vue
View File

@ -5,14 +5,14 @@
<div class="bgPicture" style="height:100%">
<!-- 标题 -->
<div class="title">
<div class="font" @click="toggleFullScreen"></div>
<!-- <div class="title-font"></div> -->
</div>
<div class="titTop">
<div>
</div>
<div class="titRight">
<span>{{ dateNew }}&nbsp;{{ getWeek }}&nbsp;{{ time }}</span>
<!-- <span
<span
><img
:src="weatherImg"
alt=""
@ -27,7 +27,7 @@
>{{ weatherItem.weather }} &nbsp;{{
weatherItem.temperature
}}℃</span
> -->
>
</div>
</div>
</div>
@ -114,41 +114,14 @@ export default {
created() {
let h = document.documentElement.clientHeight || document.body.clientHeight;
this.vdaH = h - 0 + "px";
// this.createMqtt()
// this.getWeather()
this.createMqtt()
this.getWeather()
window.setInterval(() => {
this.getTime();
}, 1000);
},
methods: {
toggleFullScreen() {
const elem = document.documentElement; // 获取文档根元素
if (!document.fullscreenElement) {
// 如果当前不是全屏状态
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
// 如果当前是全屏状态
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
},
getType() {
let datas = {
account:this.param.username,
@ -221,6 +194,7 @@ export default {
});
},
createMqtt() {
this.topicSends = ['webdata'];
console.log("this.topicSends",this.topicSends)
window.PubScribe(this.topicSends, this.realInfo);
@ -366,8 +340,7 @@ getWeather () {
},
mounted() {
// this.switchDiv();
window.onresize = () => {
this.switchDiv(); window.onresize = () => {
return (() => {
let h = document.documentElement.clientHeight || document.body.clientHeight;
this.vdaH = h - 0 + "px";
@ -440,19 +413,11 @@ getWeather () {
.title {
width: 100%;
height: 168px;
background: url("~@/assets/pic/title1 (2).png") no-repeat;
background: url("~@/assets/pic/titl.png") no-repeat;
background-size: 100% 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
.font{
background: url("~@/assets/pic/titin (2).png") no-repeat;
background-size: 100% 100%;
height:47px;
width:584px;
margin-bottom: 35px
}
}
.title>.title-font{
width: 584px;

428
src/views/managementComponents.vue
View File

@ -25,7 +25,7 @@
'background-image': boxNone
? `url(${require(`../assets/pic/exitFull.png`)}`
: `url(${require(`../assets/pic/fullScreen.png`)}`,
right: boxNone ? '483px' : '10px'
right: boxNone ? '483px' : '10px',
}"
></div>
<div :class="[boxNone ? 'centerBottom' : 'centerBottom2']">
@ -117,7 +117,7 @@
grid-bottom="1%"
:color-array="['#021C9F', '#01B1FF']"
:chart-data="qyList"
:x-axis-data="qyList.map(item => item.name)"
:x-axis-data="qyList.map((item) => item.name)"
:checkCountList="checkCountList"
/>
</div>
@ -157,7 +157,7 @@
:chart-data3="aq3List"
:chart-data2="aq2List"
:chart-data="aqList"
:x-axis-data="aqList.map(item => item.name)"
:x-axis-data="aqList.map((item) => item.name)"
:safeList="safeList"
/>
</div>
@ -287,11 +287,11 @@ export default {
},
data() {
return {
highIssues: [], //高频问题项
safeList: [], //安全告警
resolve: 0, //已处理
highIssues:[], //高频问题项
safeList:[], //安全告警
resolve:0,//已处理
total: 0, //整改项
unresolve: 0, //待处理
unresolve:0, //待处理
checkCountList: [], //检查次数统计
checkNum: 0, //检查项
questionNum: 0, //问题项
@ -306,233 +306,233 @@ export default {
icon: "wendu",
name: "温度",
val: "19.8",
tem: "℃"
tem: "℃",
},
{
icon: "shidu",
name: "湿度",
val: "19.8",
tem: "%"
tem: "%",
},
{
icon: "yangqi",
name: "氧气值",
val: "19.8",
tem: "%VOL"
tem: "%VOL",
},
{
icon: "co2",
name: "二氧化碳",
val: "19.8",
tem: "%VOL"
tem: "%VOL",
},
{
icon: "ch4",
name: "甲烷",
val: "19.8",
tem: "ppm"
tem: "ppm",
},
{
icon: "h2s",
name: "硫化氢",
val: "19.8",
tem: "ppm"
}
tem: "ppm",
},
],
tableData: [
{
entName: "我打打死"
entName: "我打打死",
},
{
entName: "我打打死"
entName: "我打打死",
},
{
entName: "我打打死"
entName: "我打打死",
},
{
entName: "我打打死"
entName: "我打打死",
},
{
entName: "我打打死"
entName: "我打打死",
},
{
entName: "我打打死"
entName: "我打打死",
},
{
entName: "我打打死"
entName: "我打打死",
},
{
entName: "我打打死"
}
entName: "我打打死",
},
],
aq3List: [
{
name: "2月",
value: 1
value: 1,
},
{
name: "3月",
value: 2
value: 2,
},
{
name: "4月",
value: 13
value: 13,
},
{
name: "5月",
value: 24
value: 24,
},
{
name: "6月",
value: 24
value: 24,
},
{
name: "7月",
value: 31
}
value: 31,
},
],
aq2List: [
{
name: "2月",
value: 10
value: 10,
},
{
name: "3月",
value: 6
value: 6,
},
{
name: "4月",
value: 3
value: 3,
},
{
name: "5月",
value: 14
value: 14,
},
{
name: "6月",
value: 4
value: 4,
},
{
name: "7月",
value: 3
}
value: 3,
},
],
aqList: [
{
name: "2月",
value: 12,
value2: 10
value2: 10,
},
{
name: "3月",
value: 13,
value2: 6
value2: 6,
},
{
name: "4月",
value: 12,
value2: 3
value2: 3,
},
{
name: "5月",
value: 10,
value2: 14
value2: 14,
},
{
name: "6月",
value: 7,
value2: 4
value2: 4,
},
{
name: "7月",
value: 11,
value2: 3
}
value2: 3,
},
],
qyList: [
{
name: "1月",
value: 12
value: 12,
},
{
name: "2月",
value: 112
value: 112,
},
{
name: "3月",
value: 132
value: 132,
},
{
name: "4月",
value: 12
value: 12,
},
{
name: "5月",
value: 132
value: 132,
},
{
name: "6月",
value: 132
value: 132,
},
{
name: "7月",
value: 132
value: 132,
},
{
name: "8月",
value: 32
value: 32,
},
{
name: "9月",
value: 22
value: 22,
},
{
name: "10月",
value: 152
value: 152,
},
{
name: "11月",
value: 132
value: 132,
},
{
name: "12月",
value: 132
}
value: 132,
},
],
xArry: [],
chartData: [],
peopleList: [
{
name: "姓名",
value: "：王刚"
value: "：王刚",
},
{
name: "岗位",
value: "：项目经理"
value: "：项目经理",
},
{
name: "体温",
value: "：36.5℃"
value: "：36.5℃",
},
{
name: "入场时间",
value: "：2022-11-26"
value: "：2022-11-26",
},
{
name: "考勤类型",
value: "：进场"
value: "：进场",
},
{
name: "打卡设备",
value: "：1号打卡机"
}
value: "：1号打卡机",
},
],
vdaH: 0,
type: false,
menuType: 4,
numberList: [5, 5],
boxNone: true,
disBoxShow: true
disBoxShow:true,
};
},
created() {
@ -545,8 +545,8 @@ export default {
let projectId = sessionStorage.getItem("projectId");
//获取安全检查统计
getCheckTotalCensus({
projectId: projectId
}).then(res => {
projectId: projectId,
}).then((res) => {
this.checkNum = res.data.data.checkNum; //检查项
this.questionNum = res.data.data.questionNum; //问题项
this.resolvedNum = res.data.data.resolvedNum; //已处理
@ -554,33 +554,31 @@ export default {
});
//隐患检查统计
getResolveTroubleCensus({
projectId: projectId
}).then(res => {
projectId: projectId,
}).then((res) => {
this.resolve = res.data.data.resolve;
this.total = res.data.data.total;
this.unresolve = res.data.data.unresolve;
});
//高频问题项
getMostTroubleCensus({
projectId: projectId
})
.then(res => {
this.highIssues = res.data.data;
})
.catch(err => {
projectId: projectId,
}).then((res)=>{
this.highIssues = res.data.data
}).catch((err)=>{
console.log(err);
});
})
},
disBox() {
this.boxNone = !this.boxNone;
if (this.boxNone == true) {
console.log("closeBig");
if(this.boxNone == true){
console.log("closeBig")
window.parent.closeBig();
this.disBoxShow = true;
} else if (this.boxNone == false) {
console.log("openBig");
this.disBoxShow=true
}else if(this.boxNone == false){
console.log("openBig")
window.parent.openBig("openBig");
this.disBoxShow = false;
this.disBoxShow=false
}
this.$refs.screenBox.style.animationPlayState = "running";
},
@ -596,8 +594,8 @@ export default {
//检查次数统计
getCheckTimesCensus({
projectId: sessionStorage.getItem("projectId"),
type: val
}).then(res => {
type: val,
}).then((res) => {
this.checkCountList = res.data.data;
this.$refs.lineRef.resetOption();
});
@ -607,11 +605,11 @@ export default {
this.time2Type = val + 1;
getWarnSurveillance({
projectId: sessionStorage.getItem("projectId"),
type: val
}).then(res => {
type: val,
}).then((res)=>{
// this.$refs.lineRef.resetOption();
this.safeList = res.data.data;
});
this.safeList = res.data.data
})
},
//查看甘特图
gantDialog() {
@ -647,7 +645,7 @@ export default {
this.$refs.switchBtn.style.display = "block";
}, 800);
}
}
},
},
mounted() {
//获取数据
@ -656,7 +654,7 @@ export default {
this.chooseType(0);
//默认获取年的安全告警统计
this.choose2Type(0);
// this.switchDiv();
this.switchDiv();
window.onresize = () => {
return (() => {
let h =
@ -664,23 +662,21 @@ export default {
this.vdaH = h - 0 + "px";
})();
};
}
},
};
</script>
<style scoped lang="less">
@screen-xs: 1000px;
@screen-lg: 2100px;
.fathe {
width: 100%;
height: 144px;
}
.centerBottom2 {
width: calc(100% - 968px);
// height: 166px;
// height: 166px;
height: 200px;
position: absolute;
bottom: -144px;
bottom: -205px;
left: 50%;
transform: translateX(-50%);
background: url("~@/assets/pic/jdin.png") no-repeat;
@ -694,22 +690,16 @@ export default {
::-webkit-scrollbar {
display: none;
}
// @media only screen and (max-height: 1000px) {
// bottom: -64px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
bottom: -205px;
}
@media only screen and (min-height: @screen-lg) {
bottom: -205px;
@media only screen and (max-height: 1000px) {
bottom: -64px;
}
}
.centerBottom {
width: calc(100% - 968px);
// height: 246px;
height: 246px;
// height: 246px;
height: 298px;
position: absolute;
bottom: 160px;
bottom: 35px;
left: 25%;
// transform: translateX(-50%);
background: url("~@/assets/pic/jdin.png") no-repeat;
@ -721,56 +711,39 @@ export default {
transition: bottom 0.6s;
// overflow-y: hidden; //重点
// z-index: 999;
// padding: 0px 70px 0 70px;
// padding: 0px 70px 0 70px;
padding: 0px 10px 0 10px;
overflow-y: hidden;
box-sizing: border-box;
::-webkit-scrollbar {
display: none;
}
// @media only screen and (max-height: 1000px) {
// bottom: 160px;
// height: 246px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
bottom: 35px;
height: 298px;
}
@media only screen and (min-height: @screen-lg) {
bottom: 35px;
@media only screen and (max-height: 1000px) {
bottom: 160px;
height: 298px;
height: 246px;
}
}
.centerBottom3 {
height: 181px;
height: 239px;
position: absolute;
top: 54px;
overflow: auto;
width: 99%;
// @media only screen and (max-height: 1000px) {
// height: 181px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
height: 239px;
}
@media only screen and (min-height: @screen-lg) {
height: 239px;
@media only screen and (max-height: 1000px) {
height: 181px;
}
}
.yhBox {
width: 95%;
height: 60%;
position: absolute;
top: 60px;
top: 83px;
// @media only screen and (max-height: 1000px) {
// top: 60px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 83px;
}
@media only screen and (min-height: @screen-lg) {
top: 83px;
@media only screen and (max-height: 1000px) {
top: 60px;
}
}
@ -950,28 +923,22 @@ export default {
background: url("~@/assets/pic/fullScreen.png") no-repeat;
background-size: 100% 100%;
position: absolute;
// bottom: 34px;
// bottom: 210px;
// bottom: 250px;
// bottom: 289px;
bottom: 417px;
// bottom: 34px;
// bottom: 210px;
// bottom: 250px;
// bottom: 289px;
bottom: 335px;
right: 480px;
overflow-x: hidden;
transition: right 0.8s, height 1s;
overflow-y: hidden; //重点
cursor: pointer;
// @media only screen and (max-height: 1000px) {
// // bottom: 157px;
// // bottom: 339px;
// // bottom: 371px;
// // bottom: 461px;
// bottom: 417px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
bottom: 335px;
}
@media only screen and (min-height: @screen-lg) {
bottom: 335px;
@media only screen and (max-height: 1000px) {
// bottom: 157px;
// bottom: 339px;
// bottom: 371px;
// bottom: 461px;
bottom: 417px;
}
}
@ -1072,34 +1039,20 @@ export default {
height: 90%;
position: absolute;
bottom: 0;
@media only screen and (max-height: 1000px) {
top: 50px;
// @media only screen and (max-height: 1000px) {
// top: 50px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 0;
}
@media only screen and (min-height: @screen-lg) {
top: 0;
}
}
.pieBox {
width: 100%;
height: 262px;
height: 90%;
position: absolute;
bottom: 0;
// @media only screen and (max-height: 1000px) {
// height: 262px;
// top: 38px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
height: 90%;
top: 38px;
}
@media only screen and (min-height: @screen-lg) {
height: 90%;
@media only screen and (max-height: 1000px) {
height: 262px;
top: 38px;
}
}
@ -1143,18 +1096,13 @@ export default {
.ftahBox {
text-align: center;
padding-top: 7px;
padding-top: 17px;
width: 89px;
// @media only screen and (max-height: 1000px) {
// padding-top: 7px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
padding-top: 17px;
}
@media only screen and (min-height: @screen-lg) {
padding-top: 17px;
@media only screen and (max-height: 1000px) {
padding-top: 7px;
}
.iconBox1 {
background: url("~@/assets/pic/check.png") no-repeat;
}
@ -1202,19 +1150,13 @@ export default {
}
.ftahBox1 {
// text-align: center;
padding-top: 7px;
padding-top: 17px;
width: 89px;
height: 100px;
display: flex;
flex-direction: column;
// @media only screen and (max-height: 1000px) {
// padding-top: 7px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
padding-top: 17px;
}
@media only screen and (min-height: @screen-lg) {
padding-top: 17px;
@media only screen and (max-height: 1000px) {
padding-top: 7px;
}
div:nth-child(1) {
display: inline-block;
@ -1339,102 +1281,70 @@ export default {
.leftOneBox {
width: 444px;
height: 222px;
height: 242px;
background: url("~@/assets/pic/boxOneCz.png") no-repeat;
background-size: 100% 100%;
position: absolute;
overflow-x: hidden;
transition: left 0.8s, height 1s;
overflow-y: hidden; //重点
top: 76px;
top: 96px;
left: 27px;
// @media only screen and (max-height: 1000px) {
// top: 76px;
// height: 222px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 96px;
height: 242px;
}
@media only screen and (min-height: @screen-lg) {
top: 96px;
height: 242px;
@media only screen and (max-height: 1000px) {
top: 76px;
height: 222px;
}
}
.rightTwoBox {
width: 444px;
height: 342px;
height: 362px;
background: url("~@/assets/pic/second.png") no-repeat;
background-size: 100% 100%;
position: absolute;
overflow-x: hidden;
transition: right 0.8s, height 1s;
overflow-y: hidden; //重点
top: 317px;
top: 360px;
right: 27px;
// @media only screen and (max-height: 1000px) {
// top: 317px;
// height: 342px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 360px;
height: 362px;
}
@media only screen and (min-height: @screen-lg) {
top: 360px;
height: 362px;
@media only screen and (max-height: 1000px) {
top: 317px;
height: 342px;
}
}
.leftTwoBox {
width: 444px;
height: 302px;
height: 322px;
background: url("~@/assets/pic/second.png") no-repeat;
background-size: 100% 100%;
position: absolute;
overflow-x: hidden;
transition: left 0.8s, height 1s;
overflow-y: hidden; //重点
top: 317px;
top: 361px;
left: 27px;
// @media only screen and (max-height: 1000px) {
// height: 302px;
// top: 317px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 361px;
height: 322px;
}
@media only screen and (min-height: @screen-lg) {
top: 361px;
height: 322px;
@media only screen and (max-height: 1000px) {
height: 302px;
top: 317px;
}
}
.leftThreeBox {
width: 444px;
height: 279px;
height: 342px;
background: url("~@/assets/pic/second.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 638px;
top: 707px;
left: 27px;
overflow-x: hidden;
transition: left 0.8s, height 1s;
overflow-y: hidden; //重点
// @media only screen and (max-height: 1000px) {
// height: 279px;
// top: 638px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 707px;
height: 342px;
}
@media only screen and (min-height: @screen-lg) {
top: 707px;
height: 342px;
@media only screen and (max-height: 1000px) {
height: 279px;
top: 638px;
}
}
@ -1443,24 +1353,16 @@ export default {
transition: right 0.8s, height 1s;
overflow-y: hidden; //重点
width: 444px;
height: 222px;
height: 240px;
background: url("~@/assets/pic/boxOneCz.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 76px;
top: 96px;
right: 27px;
// @media only screen and (max-height: 1000px) {
// top: 76px;
// height: 222px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 96px;
height: 240px;
}
@media only screen and (min-height: @screen-lg) {
top: 96px;
height: 240px;
@media only screen and (max-height: 1000px) {
top: 76px;
height: 222px;
}
}
@ -1473,27 +1375,19 @@ export default {
.rightThreeBox {
width: 442px;
height: 240px;
height: 300px;
background: url("~@/assets/pic/boxOneCz.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 678px;
top: 746px;
overflow-x: hidden;
transition: right 0.8s, height 1s;
overflow-y: hidden; //重点
right: 27px;
// @media only screen and (max-height: 1000px) {
// top: 678px;
// height: 240px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 746px;
height: 300px;
}
@media only screen and (min-height: @screen-lg) {
top: 746px;
height: 300px;
@media only screen and (max-height: 1000px) {
top: 678px;
height: 240px;
}
}

781
src/views/modelScreenComponents.vue
View File

File diff suppressed because it is too large Load Diff

359
src/views/personnelComponents.vue
View File

@ -8,7 +8,7 @@
'background-image': !boxNone
? `url(${require(`../assets/pic/exitFull.png`)}`
: `url(${require(`../assets/pic/fullScreen.png`)}`,
right: boxNone ? '483px' : '10px'
right: boxNone ? '483px' : '10px',
}"
></div>
<!-- 左侧模块1 -->
@ -68,25 +68,20 @@
<span style="color: #ffffff">{{ item.temperature }}</span>
</div>
<div style="margin-top:10px">
<span style="color: #7ffffc;white-space: nowrap"
>入场时间：</span
>
<span style="color: #7ffffc;white-space: nowrap">入场时间：</span>
<span style="color: #ffffff">{{ item.time }}</span>
</div>
<div style="margin-top:10px">
<span style="color: #7ffffc;white-space: nowrap"
>考勤类型：</span
>
<span style="color: #7ffffc;white-space: nowrap">考勤类型：</span>
<span style="color: #ffffff;">{{ item.type }}</span>
</div>
<div style="margin-top:10px">
<span style="color: #7ffffc;white-space: nowrap"
>打卡设备：</span
>
<span style="color: #7ffffc;white-space: nowrap">打卡设备：</span>
<span style="color: #ffffff">{{ item.equipment }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
@ -106,15 +101,15 @@
<div class="mesBox">
<div>
<span style="color: #82dddb">会议时间：</span>
<span style="color: #ffffff">{{ meeting.date }}</span>
<span style="color: #ffffff">{{meeting.date}}</span>
</div>
<div>
<span style="color: #82dddb">会议类型：</span>
<span style="color: #ffffff">{{ meeting.type }}</span>
<span style="color: #ffffff">{{meeting.type}}</span>
</div>
<div>
<span style="color: #82dddb">会议主持：</span>
<span style="color: #ffffff">{{ meeting.host }}</span>
<span style="color: #ffffff">{{meeting.host}}</span>
</div>
<div>
<span style="color: #82dddb">参会人员：</span>
@ -125,7 +120,7 @@
display: inline-block;
white-space: pre-wrap;
"
>{{ meeting.participants }}</span
>{{meeting.participants}}</span
>
</div>
</div>
@ -133,8 +128,7 @@
<div class="meeting">会议内容</div>
<div class="mettiogBox">
<div class="meetContent">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ meeting.content }}
</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{meeting.content}}</div>
<div style="height:10%;width:100%">
<div class="lookFor" @click="gantDialog"></div>
</div>
@ -153,7 +147,7 @@
grid-bottom="1%"
:color-array="['#021C9F', '#01B1FF']"
:chart-data="qyList"
:x-axis-data="qyList.map(item => item.name)"
:x-axis-data="qyList.map((item) => item.name)"
:radarList="radarList"
/>
</div>
@ -207,15 +201,15 @@
<div class="mesBox">
<div>
<span style="color: #82dddb">会议时间：</span>
<span style="color: #ffffff">{{ meeting.date }}</span>
<span style="color: #ffffff">{{meeting.date}}</span>
</div>
<div>
<span style="color: #82dddb">会议类型：</span>
<span style="color: #ffffff">{{ meeting.type }}</span>
<span style="color: #ffffff">{{meeting.type}}</span>
</div>
<div>
<span style="color: #82dddb">会议主持：</span>
<span style="color: #ffffff">{{ meeting.host }}</span>
<span style="color: #ffffff">{{meeting.host}}</span>
</div>
<div>
<span style="color: #82dddb">参会人员：</span>
@ -226,7 +220,7 @@
display: inline-block;
white-space: pre-wrap;
"
>{{ meeting.participants }}</span
>{{meeting.participants}}</span
>
</div>
</div>
@ -234,7 +228,7 @@
<div class="meet2ing">会议内容</div>
<div class="mettiog2Box">
<div class="meetContent">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ meeting.content }}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{meeting.content}}
</div>
</div>
</div>
@ -253,13 +247,7 @@ import pieDateChart from "@/components/common/pieDateChart";
import Resize from "../utils/Resize.vue";
import swiperPersonnel from "./swiperPersonnel.vue";
import swiperPersonnelIndex from "./swiperPersonnelIndex.vue";
import {
getUserGroup,
getGroupCensus,
getAttend,
getRecentMeeting,
getMonthCensus
} from "@/api/personnel";
import { getUserGroup, getGroupCensus, getAttend,getRecentMeeting,getMonthCensus } from "@/api/personnel";
export default {
name: "report",
components: {
@ -272,86 +260,86 @@ export default {
},
data() {
return {
radarList: [], //站班会统计
meeting: {}, //站班会记录
radarList:[], //站班会统计
meeting:{}, //站班会记录
boxNone: true,
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
tableData: [
{
entName: ""
entName: "我打打死",
},
{
entName: ""
entName: "我打打死",
},
{
entName: ""
entName: "我打打死",
},
{
entName: ""
}
entName: "我打打死",
},
],
qyList: [
{
name: "1月",
value: 12
value: 12,
},
{
name: "2月",
value: 21
value: 21,
},
{
name: "3月",
value: 22
value: 22,
},
{
name: "4月",
value: 12
value: 12,
},
{
name: "5月",
value: 10
value: 10,
},
{
name: "6月",
value: 3
value: 3,
},
{
name: "7月",
value: 4
value: 4,
},
{
name: "8月",
value: 76
value: 76,
},
{
name: "9月",
value: 22
value: 22,
},
{
name: "10月",
value: 1
value: 1,
},
{
name: "11月",
value: 32
value: 32,
},
{
name: "12月",
value: 12
}
value: 12,
},
],
xArry: [],
chartData: [],
peopleList: [
{
name: "",
post: "",
temperature: "36.7",
time: "2023-2-1",
type: "lala",
equipment: "一号打卡机",
picture: require("../assets/pic/23.png")
name:'史蒂芬库里',
post:'经理',
temperature:'36.7',
time:'2023-2-1',
type:'lala',
equipment:'一号打卡机',
picture:require('../assets/pic/23.png')
}
],
vdaH: 0,
@ -363,7 +351,7 @@ export default {
topicSends: [],
pieData: [], //人员统计,
constructionPersonnel: [], //施工人员组成
disBoxShow: true
disBoxShow:true,
};
},
created() {
@ -388,49 +376,41 @@ export default {
console.log("projectId", projectId);
//获取人员统计
getUserGroup({
projectId: projectId
}).then(res => {
projectId: projectId,
}).then((res) => {
// this.projectUser = res.data.data
this.pieData = res.data.data;
});
// 施工人员组成
getGroupCensus({
projectId: projectId
}).then(res => {
projectId: projectId,
}).then((res) => {
this.constructionPersonnel = res.data.data;
console.log("this.constructionPersonnel", this.constructionPersonnel);
console.log("this.constructionPersonnel",this.constructionPersonnel)
});
//考勤监控
getAttend({
projectId: projectId
}).then(res => {
this.peopleList = Object.keys(res.data.data).map((item, index) => {
return {
name: res.data.data[item].name,
post: res.data.data[item].post,
type: res.data.data[item].type,
time: res.data.data[item].time,
picture: res.data.data[item].picture,
equipment: res.data.data[item].equipment,
temperature: res.data.data[item].temperature
};
});
projectId: projectId,
}).then((res) => {
this.peopleList = Object.keys(res.data.data).map((item,index)=>{
return {name:res.data.data[item].name,post:res.data.data[item].post,type:res.data.data[item].type,time:res.data.data[item].time,picture:res.data.data[item].picture,equipment:res.data.data[item].equipment,temperature:res.data.data[item].temperature}
})
});
//站班会记录
getRecentMeeting({
projectId: projectId
}).then(res => {
this.meeting = res.data.data;
projectId: projectId,
}).then((res)=>{
this.meeting = res.data.data
var arr = [];
arr = res.data.data.picture.split(",");
console.log("arr", arr);
});
arr = res.data.data.picture.split(',');
console.log("arr",arr)
})
//站班会统计
getMonthCensus({
projectId: projectId
}).then(res => {
this.radarList = res.data.data;
});
projectId: projectId,
}).then((res)=>{
this.radarList = res.data.data
})
},
createMqtt() {
@ -457,12 +437,13 @@ export default {
},
disBox() {
this.boxNone = !this.boxNone;
if (this.boxNone == true) {
if(this.boxNone == true){
window.parent.closeBig();
this.disBoxShow = true;
} else if (this.boxNone == false) {
this.disBoxShow=true
}else if(this.boxNone == false){
window.parent.openBig("openBig");
this.disBoxShow = false;
this.disBoxShow=false
}
this.$refs.screenBox.style.animationPlayState = "running";
},
@ -506,14 +487,12 @@ export default {
this.$refs.switchBtn.style.display = "block";
}, 800);
}
}
}
},
},
};
</script>
<style scoped lang="less">
@screen-xs: 1000px;
@screen-lg: 2100px;
.zzc {
background: rgba(0, 0, 0, 0.4);
width: 100%;
@ -655,21 +634,15 @@ export default {
background: url("~@/assets/pic/fullScreen.png") no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 157px;
bottom: 30px;
right: 480px;
overflow-x: hidden;
transition: right 0.8s, height 1s;
overflow-y: hidden; //重点
// animation-play-state:paused;
cursor: pointer;
// @media only screen and (max-height: 1000px) {
// bottom: 157px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
bottom: 30px;
}
@media only screen and (min-height: @screen-lg) {
bottom: 30px;
@media only screen and (max-height: 1000px) {
bottom: 157px;
}
}
@ -677,16 +650,16 @@ export default {
font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
// margin-top: 10px;
// margin-left: 18px;
// margin-top: 10px;
// margin-left: 18px;
width: 100%;
display: flex;
// span:nth-child(1) {
// display: inline-block;
// width: 56px;
// text-align-last: justify;
// }
.textRight {
// span:nth-child(1) {
// display: inline-block;
// width: 56px;
// text-align-last: justify;
// }
.textRight{
width: 50%;
}
}
@ -735,7 +708,7 @@ export default {
text-align: center;
line-height: 29px;
position: absolute;
top: 296px;
top: 316px;
left: 29px;
font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
@ -743,14 +716,8 @@ export default {
color: #ffffff;
padding-right: 6px;
// @media only screen and (max-height: 1000px) {
// top: 296px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 316px;
}
@media only screen and (min-height: @screen-lg) {
top: 316px;
@media only screen and (max-height: 1000px) {
top: 296px;
}
}
@ -767,19 +734,20 @@ export default {
::-webkit-scrollbar {
display: none;
}
.meetContent {
.meetContent{
overflow: auto;
height: 90%;
width: 100%;
word-wrap: break-word;
word-break: break-all;
}
}
.mettiogBox {
line-height: 29px;
position: absolute;
top: 330px;
top: 353px;
font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
@ -791,25 +759,20 @@ export default {
display: flex;
flex-direction: column;
justify-content: center;
// @media only screen and (max-height: 1000px) {
// top: 330px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 353px;
}
@media only screen and (min-height: @screen-lg) {
top: 353px;
@media only screen and (max-height: 1000px) {
top: 330px;
}
::-webkit-scrollbar {
display: none;
}
.meetContent {
.meetContent{
overflow: auto;
// height: 90%;
height: 84%;
width: 100%;
word-wrap: break-word;
word-break: break-all;
}
}
@ -819,13 +782,13 @@ export default {
background: url("~@/assets/pic/view.png") no-repeat;
background-size: 100% 100%;
float: right;
// margin-top: 13px;
// margin-top: 13px;
margin-right: 2px;
cursor: pointer;
margin-top: -5px;
// @media only screen and (max-height: 1000px) {
// margin-top: -22px;
// }
margin-top: -5px;
// @media only screen and (max-height: 1000px) {
// margin-top: -22px;
// }
}
.videoBox {
@ -860,15 +823,7 @@ export default {
height: 100%;
position: absolute;
// @media only screen and (max-height: 1000px) {
// height: 299px;
// top: -10px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
height: 299px;
top: -10px;
}
@media only screen and (min-height: @screen-lg) {
@media only screen and (max-height: 1000px) {
height: 299px;
top: -10px;
}
@ -877,19 +832,13 @@ export default {
.kqjk {
width: 100%;
position: absolute;
top: 24px;
top: 48px;
display: flex;
::-webkit-scrollbar {
display: none;
display: none ;
}
// @media only screen and (max-height: 1000px) {
// top: 24px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 48px;
}
@media only screen and (min-height: @screen-lg) {
top: 48px;
@media only screen and (max-height: 1000px) {
top: 24px;
}
.oneKqjk {
@ -920,18 +869,12 @@ export default {
width: 194px;
height: 194px;
position: absolute;
top: 58px;
top: 78px;
left: 50%;
transform: translateX(-50%);
// @media only screen and (max-height: 1000px) {
// top: 58px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 78px;
}
@media only screen and (min-height: @screen-lg) {
top: 78px;
@media only screen and (max-height: 1000px) {
top: 58px;
}
}
@ -984,51 +927,35 @@ export default {
.leftOneBox {
width: 442.38px;
height: 269px;
height: 299px;
background: url("~@/assets/pic/rightBox.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 76px;
top: 97px;
left: 27px;
overflow-x: hidden;
transition: left 0.8s, height 1s;
overflow-y: hidden; //重点
// @media only screen and (max-height: 1000px) {
// height: 269px;
// top: 76px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 97px;
height: 299px;
}
@media only screen and (min-height: @screen-lg) {
top: 97px;
height: 299px;
@media only screen and (max-height: 1000px) {
height: 269px;
top: 76px;
}
}
.leftTwoBox {
width: 442.38px;
height: 269px;
height: 299px;
background: url("~@/assets/pic/rightBox.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 364px;
top: 421px;
left: 27px;
overflow-x: hidden;
transition: left 0.8s, height 1s;
overflow-y: hidden; //重点
// @media only screen and (max-height: 1000px) {
// height: 269px;
// top: 364px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 421px;
height: 299px;
}
@media only screen and (min-height: @screen-lg) {
top: 421px;
height: 299px;
@media only screen and (max-height: 1000px) {
height: 269px;
top: 364px;
}
}
@ -1037,24 +964,16 @@ export default {
transition: left 0.8s, height 1s;
overflow-y: hidden; //重点
width: 444px;
height: 269px;
height: 299px;
background: url("~@/assets/pic/rightBox.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 653px;
top: 746px;
left: 27px;
// @media only screen and (max-height: 1000px) {
// top: 653px;
// height: 269px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 746px;
height: 299px;
}
@media only screen and (min-height: @screen-lg) {
top: 746px;
height: 299px;
@media only screen and (max-height: 1000px) {
top: 653px;
height: 269px;
}
}
@ -1063,24 +982,16 @@ export default {
transition: right 0.8s, height 1s;
overflow-y: hidden; //重点
width: 444px;
height: 558px;
height: 629px;
background: url("~@/assets/pic/rightBoxsc.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 76px;
top: 96px;
right: 27px;
// @media only screen and (max-height: 1000px) {
// top: 76px;
// height: 558px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 96px;
height: 629px;
}
@media only screen and (min-height: @screen-lg) {
top: 96px;
height: 629px;
@media only screen and (max-height: 1000px) {
top: 76px;
height: 558px;
}
}
@ -1096,24 +1007,16 @@ export default {
transition: right 0.8s, height 1s;
overflow-y: hidden; //重点
width: 442.38px;
height: 269px;
height: 299px;
background: url("~@/assets/pic/rightBox.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 653px;
top: 749px;
right: 27px;
// @media only screen and (max-height: 1000px) {
// height: 269px;
// top: 269px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 749px;
height: 299px;
}
@media only screen and (min-height: @screen-lg) {
top: 749px;
height: 299px;
@media only screen and (max-height: 1000px) {
height: 269px;
top: 653px;
}
}

508
src/views/progressComponents.vue
View File

@ -1,18 +1,9 @@
<template>
<!-- <Resize> -->
<div>
<div
@click="disBox"
class="screenBox"
v-if="disBoxShow"
:style="{
'background-image': !boxNone
? `url(${require(`../assets/pic/exitFull.png`)}`
: `url(${require(`../assets/pic/fullScreen.png`)}`,
right: boxNone ? '483px' : '10px'
}"
></div>
<!-- 左侧模块1 -->
<div >
<div @click="disBox" class="screenBox" v-if="disBoxShow"
:style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` ,right: boxNone ? '483px' : '10px'}">
</div> <!-- 左侧模块1 -->
<!-- 左侧模块1 -->
<!-- 左侧模块1 -->
<div class="leftOneBox" :style="{ left: boxNone ? '27px' : '-444px' }">
@ -22,16 +13,12 @@
<span></span>
</div>
<div class="concet">
<div
class="ftahBox topBox"
v-for="(item, index) in projectDuration"
:key="index"
>
<span class="ysg">{{ item.label }}</span>
<div class="ftahBox topBox" v-for="(item,index) in projectDuration" :key="index">
<span class="ysg">{{item.label}}</span>
<div style="display: flex;">
<!-- <span class="iconBox3 dayIcon"></span> -->
<img :src="item.icon" style="width: 20px;height: 20px;" />
<span class="numb">{{ item.value }}</span>
<img :src="item.icon" style="width: 20px;height: 20px;"/>
<span class="numb">{{item.value}}</span>
</div>
</div>
<!-- <div class="ftahBox topBox">
@ -64,6 +51,9 @@
<span class="day">天</span>
</div>
</div> -->
</div>
</div>
<!-- 左侧模块2 -->
@ -74,14 +64,8 @@
<span></span>
</div>
<div class="pieBox">
<lineBar
style="width: 100%; height: 100%"
grid-bottom="1%"
:color-array="['#021C9F', '#01B1FF']"
:chart-data="qyList"
:x-axis-data="qyList.map(item => item.name)"
:projectInvestment="projectInvestment"
/>
<lineBar style="width: 100%; height: 100%" grid-bottom="1%" :color-array="['#021C9F', '#01B1FF']"
:chart-data="qyList" :x-axis-data="qyList.map(item => item.name)" :projectInvestment="projectInvestment"/>
</div>
</div>
<!-- 左侧模块3 -->
@ -93,21 +77,10 @@
</div>
<div class="btnIcon" @click="gantDialog"></div>
<div class="tableBox">
<el-table
height="100%"
:row-style="{ height: '0' }"
:cell-style="{ padding: '8px' }"
:row-class-name="tableRowClassName"
:data="tableData"
style="width: 100%"
>
<el-table-column
header-align="center"
align="center"
show-overflow-tooltip
prop="name"
label="任务名称"
>
<el-table height="100%" :row-style="{ height: '0' }" :cell-style="{ padding: '8px' }"
:row-class-name="tableRowClassName" :data="tableData" style="width: 100%">
<el-table-column header-align="center" align="center" show-overflow-tooltip prop="name"
label="任务名称">
</el-table-column>
<el-table-column prop="startDate" align="center" label="开始日期">
</el-table-column>
@ -124,47 +97,22 @@
<span style="width:160px;"></span>
</div>
<div class="videoBox">
<pieChartUnImg
:colorList="colorList"
:picIsShow="false"
style="width: 100%; height: 100%"
color="#1ffdfa"
chart-title="扫描数量分析"
:chart-data="chartData"
:x-axis-data="xArry"
:executionInfo="executionInfo"
/>
<pieChartUnImg :colorList="colorList" :picIsShow="false" style="width: 100%; height: 100%" color="#1ffdfa"
chart-title="扫描数量分析" :chart-data="chartData" :x-axis-data="xArry" :executionInfo="executionInfo"/>
</div>
<div class="fxBox">
<div
class="fxBoxChild"
v-for="(item, index) in executionList"
:key="index"
>
<span style="color:#7FFFFC;display: block;width: 100%;"
>任务名称：<span style="color:#fff;">{{ item.name }}</span></span
>
<div class="fxBoxChild" v-for="(item,index) in executionList" :key="index">
<span style="color:#7FFFFC;display: block;width: 100%;">任务名称：<span
style="color:#fff;">{{item.name}}</span></span>
<span style="color:#7FFFFC;display: block;text-align:left;width: 50%;margin:8px 0">开始时间：<span
style="color:#fff;">{{item.startTime}}</span></span>
<span
style="color:#7FFFFC;display: block;text-align:left;width: 50%;margin:8px 0"
>开始时间：<span style="color:#fff;">{{
item.startTime
}}</span></span
>
<span
style="color:#7FFFFC;display: block;margin: 8px -6px;text-align:center;width: 50%;margin:8px -6px"
>计划工期：<span style="color:#fff;">{{
item.planTime
}}</span></span
>
<span style="color:#7FFFFC;display: block;text-align:left;width: 50%;"
>结束时间：<span style="color:#fff;">{{ item.endTime }}</span></span
>
<span
style="color:#7FFFFC;display: block;text-align:center;width: 50%;margin-bottom: 10px;"
>当前状态：<span style="color:#00CD69;">{{
item.status
}}</span></span
>
style="color:#7FFFFC;display: block;margin: 8px -6px;text-align:center;width: 50%;margin:8px -6px">计划工期：<span
style="color:#fff;">{{item.planTime}}</span></span>
<span style="color:#7FFFFC;display: block;text-align:left;width: 50%;">结束时间：<span
style="color:#fff;">{{item.endTime}}</span></span>
<span style="color:#7FFFFC;display: block;text-align:center;width: 50%;margin-bottom: 10px;">当前状态：<span
style="color:#00CD69;">{{item.status}}</span></span>
</div>
<!-- <div class="fxBoxChild" style="border-bottom:0;">
<span style="color:#7FFFFC;display: block;width: 100%;">任务名称：<span
@ -189,51 +137,34 @@
<span></span>
</div>
<div class="table2Box">
<el-table
height="100%"
:row-class-name="tableRowClassName"
:data="table2Data"
style="width: 100%"
:cell-style="{ padding: '8px' }"
>
<el-table-column
align="left"
show-overflow-tooltip
prop="name"
label="任务名称"
style="left:20px"
>
<el-table height="100%" :row-class-name="tableRowClassName" :data="table2Data" style="width: 100%" :cell-style="{ padding: '8px' }">
<el-table-column align="left" show-overflow-tooltip prop="name" label="任务名称" style="left:20px">
</el-table-column>
<el-table-column align="center" prop="startDate" label="开始时间">
<el-table-column align="center" prop="startDate" label="开始时间" >
</el-table-column>
<el-table-column align="center" prop="endDate" label="结束时间">
</el-table-column>
<el-table-column align="center" prop="status" label="状态">
<template slot-scope="{ row }">
<span
class=""
:style="{
color:
row.status == '逾期中' || row.status == '逾期完成'
? '#d09610'
: '#ADFFFE'
}"
>{{ row.status }}</span
>
<span class=""
:style="{ color: row.status == '逾期中' || row.status == '逾期完成' ? '#d09610' : '#ADFFFE' }">{{ row.status
}}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 甘特图弹框 -->
<div class="gttBox" v-if="dialogShow">
<div class="closeIcon" @click="dialogShow = false"></div>
<div class="closeIcon" @click="dialogShow = false">
</div>
<div class="titName" style="width:60%;">
<span></span>
<span>计划进度</span>
</div>
<div class="tabGtBox">
<TabGtt :tableData="tableData"></TabGtt>
<TabGtt :tableData="tableData" ></TabGtt>
<!-- <div class="ggtHeader">
<div style="margin-left: 18px;">
任务名称
@ -328,10 +259,15 @@
</div>
</div> -->
</div>
</div>
<!-- 遮罩层 -->
<div class="zzc" v-if="dialogShow"></div>
<div class="zzc" v-if="dialogShow">
</div>
</div>
<!-- </Resize> -->
</template>
@ -340,16 +276,9 @@
import lineBar from "@/components/common/lineBarChart";
import pieChartUnImg from "@/components/common/pieChartUnImg";
import pieDateChart from "@/components/common/pieDateChart";
import Resize from "../utils/Resize.vue";
import TabGtt from "@/components/common/tableGantt";
import {
getProjectInfo,
getProjectDuration,
getProjectInvestment,
getPlanProgress,
getActualProgress,
getCompleteMonthStatus
} from "@/api/api";
import Resize from '../utils/Resize.vue'
import TabGtt from '@/components/common/tableGantt'
import {getProjectInfo,getProjectDuration,getProjectInvestment,getPlanProgress,getActualProgress,getCompleteMonthStatus} from "@/api/api";
export default {
name: "report",
@ -362,34 +291,34 @@ export default {
},
data() {
return {
executionList: [], //本月任务
executionInfo: [], //本月完成情况
projectDuration: [
executionList:[], //本月任务
executionInfo:[], //本月完成情况
projectDuration:[
{
label: "计划开始时间",
icon: require("../assets/pic/icontime.png"),
value: ""
label:'计划开始时间',
icon: require('../assets/pic/icontime.png'),
value:''
},
{
label: "计划结束时间",
icon: require("../assets/pic/icontime.png"),
value: ""
label:'计划结束时间',
icon: require('../assets/pic/icontime.png'),
value:''
},
{
label: "计划总工期",
icon: require("../assets/pic/iconpre.png"),
value: ""
label:'计划总工期',
icon: require('../assets/pic/iconpre.png'),
value:''
},
{
label: "实际已施工",
icon: require("../assets/pic/iconsj.png"),
value: ""
}
], //工程工期
projectId: "", //项目Id
projectInvestment: [], //投资进度
label:'实际已施工',
icon: require('../assets/pic/iconsj.png'),
value:''
},
],//工程工期
projectId:'',//项目Id
projectInvestment:[],//投资进度
dialogShow: false,
colorList: ["#00A572", "#007EC1", "#DA9300", "#878787"],
colorList: ['#00A572', '#007EC1', '#DA9300', '#878787'],
table2Data: [],
tableData: [],
qyList: [
@ -420,7 +349,7 @@ export default {
{
name: "2023-8",
value: 60
}
},
],
xArry: [],
chartData: [],
@ -448,14 +377,14 @@ export default {
{
name: "打卡设备",
value: "：1号打卡机"
}
},
],
vdaH: 0,
type: false,
menuType: 3,
numberList: [5, 5],
boxNone: true,
disBoxShow: true
boxNone:true,
disBoxShow:true,
};
},
created() {
@ -464,43 +393,46 @@ export default {
},
methods: {
disBox() {
this.boxNone = !this.boxNone;
if (this.boxNone == true) {
this.boxNone = !this.boxNone
if(this.boxNone == true){
window.parent.closeBig();
this.disBoxShow = true;
} else if (this.boxNone == false) {
this.disBoxShow=true
}else if(this.boxNone == false){
window.parent.openBig("openBig");
this.disBoxShow = false;
this.disBoxShow=false
}
this.$refs.screenBox.style.animationPlayState = "running";
this.$refs.screenBox.style.animationPlayState='running'
},
goBack(val) {
if (val === 1) {
this.$router.push("/");
this.$router.push('/')
} else {
this.$router.go(0);
this.$router.go(0)
}
},
//查看甘特图
gantDialog() {
this.dialogShow = true;
this.dialogShow = true
},
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 === 0) {
return "success-row";
} else {
return "warning-row";
}
},
// 菜单点击
childBoxClick(val) {
this.menuType = val;
if (val === 1) {
this.$router.push("/personnel");
this.$router.push('/personnel')
} else if (val === 2) {
this.$router.push("/videoSurveillance");
this.$router.push('/videoSurveillance')
} else if (val === 4) {
this.$router.push("/management");
this.$router.push('/management')
}
},
switchDiv() {
@ -512,81 +444,67 @@ export default {
setTimeout(() => {
// 俩秒之后让模块消失
this.$refs.switchBtn.style.display = "block";
}, 800);
}, 800)
}
}
},
mounted() {
//查询项目Id
getProjectInfo().then(res => {
getProjectInfo().then((res)=>{
this.projectId = res.data.data[0].id;
//工成工期
getProjectDuration({
projectId: this.projectId
}).then(res => {
this.projectDuration[0].value = res.data.data.planStartDate;
this.projectDuration[1].value = res.data.data.planEndDate;
this.projectDuration[2].value = res.data.data.planTotalDay + " 天";
this.projectDuration[3].value = res.data.data.actualDay + " 天";
});
projectId:this.projectId
}).then((res)=>{
this.projectDuration[0].value = res.data.data.planStartDate
this.projectDuration[1].value = res.data.data.planEndDate
this.projectDuration[2].value = res.data.data.planTotalDay + ' 天'
this.projectDuration[3].value = res.data.data.actualDay + ' 天'
})
//投资进度
getProjectInvestment({
projectId: this.projectId,
size: 10
}).then(res => {
this.projectInvestment = res.data.data;
});
projectId:this.projectId,
size:10,
}).then((res)=>{
this.projectInvestment = res.data.data
})
//计划进度
getPlanProgress({
projectId: this.projectId
}).then(res => {
this.tableData = res.data.data;
});
projectId:this.projectId,
}).then((res)=>{
this.tableData = res.data.data
})
//实施进度
getActualProgress({
projectId: this.projectId
}).then(res => {
this.table2Data = res.data.data;
});
projectId:this.projectId,
}).then((res)=>{
this.table2Data = res.data.data
})
//本月任务完成情况
getCompleteMonthStatus({
projectId: this.projectId
}).then(res => {
if (res.data.data.list != undefined) {
this.executionInfo = res.data.data.list;
}
if (res.data.data.progress != undefined) {
this.executionList = Object.keys(res.data.data.progress).map(
(item, index) => {
return {
name: res.data.data.progress[item].name,
status: res.data.data.progress[item].status,
startTime: res.data.data.progress[item].startDate,
endTime: res.data.data.progress[item].endDate,
planTime: res.data.data.progress[item].planDay
};
}
);
}
});
});
// this.switchDiv();
projectId:this.projectId,
}).then((res)=>{
this.executionInfo = res.data.data.list
this.executionList = Object.keys(res.data.data.progress).map((item,index)=>{
return {name:res.data.data.progress[item].name,status:res.data.data.progress[item].status,startTime:res.data.data.progress[item].startDate,endTime:res.data.data.progress[item].endDate,planTime:res.data.data.progress[item].planDay}
})
})
})
this.switchDiv();
window.onresize = () => {
return (() => {
let h =
document.documentElement.clientHeight || document.body.clientHeight;
let h = document.documentElement.clientHeight || document.body.clientHeight;
this.vdaH = h - 0 + "px";
})();
};
})()
}
}
};
</script>
<style scoped lang="less">
@screen-xs: 1000px;
@screen-lg: 2100px;
.zzc {
background: rgba(0, 0, 0, 0.4);
.zzc{
background: rgba(0, 0 ,0, 0.4);
width: 100%;
height: 100%;
position: absolute;
@ -603,14 +521,14 @@ export default {
.titLeft {
width: 138px;
height: 40px;
background: #025a5f;
background: #025A5F;
line-height: 40px;
text-align: center;
span:nth-child(1),
span:nth-child(2) {
font-size: 14px;
color: #3cfff9;
color: #3CFFF9;
letter-spacing: 1px;
font-weight: 400;
cursor: pointer;
@ -630,7 +548,7 @@ export default {
padding-right: 25px;
font-size: 14px;
font-weight: 400;
color: #d1fffe;
color: #D1FFFE;
span:nth-child(2) {
display: inline-block;
@ -642,13 +560,14 @@ export default {
background-size: 100% 100%;
}
}
}
.bodyGt {
width: 100%;
height: 46px;
font-weight: 500;
color: #adfffe;
color: #ADFFFE;
font-size: 14px;
position: relative;
span {
@ -670,7 +589,7 @@ export default {
span:nth-child(4) {
width: 27px;
height: 15px;
background: #0dffff;
background: #0DFFFF;
position: absolute;
left: 363px;
top: 5px;
@ -684,14 +603,15 @@ export default {
.ggtHeader {
width: 820px;
height: 60px;
background: #307e7b;
background: #307E7B;
margin-top: 20px;
margin-left: 22px;
display: flex;
font-size: 16px;
font-weight: 500;
color: #ffffff;
color: #FFFFFF;
align-items: center;
}
}
@ -700,27 +620,22 @@ export default {
height: 751px;
position: absolute;
z-index: 999;
top: 522px;
top: 582px;
left: 50%;
background: url("~@/assets/pic/ggt.png") no-repeat;
background-size: 100% 100%;
transform: translate(-50%, -50%);
// @media only screen and (max-height: 1000px) {
// top: 522px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 582px;
}
@media only screen and (min-height: @screen-lg) {
top: 582px;
@media only screen and (max-height: 1000px) {
top: 522px;
}
.closeIcon {
width: 16px;
background: url("~@/assets/pic/close.png") no-repeat;
background-size: 100% 100%;
height: 16px;
color: #90f2eb;
color: #90F2EB;
float: right;
font-size: 50px;
cursor: pointer;
@ -743,15 +658,9 @@ export default {
top: 70px;
left: 16px;
position: absolute;
height: 286px;
@media only screen and (max-height: 1000px) {
height: 237px;
// @media only screen and (max-height: 1000px) {
// height: 237px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
height: 286px;
}
@media only screen and (min-height: @screen-lg) {
height: 286px;
}
}
.dh1 {
@ -852,6 +761,7 @@ export default {
.dh2 {
animation-fill-mode: forwards;
animation: myt2est 0.5s linear;
}
.screenBox {
width: 46px;
@ -859,20 +769,14 @@ export default {
background: url("~@/assets/pic/fullScreen.png") no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 157px;
bottom: 29px;
right: 480px;
cursor: pointer;
overflow-x: hidden;
transition: right 0.8s, height 1s;
overflow-y: hidden; //重点
// @media only screen and (max-height: 1000px) {
// bottom: 157px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
bottom: 29px;
}
@media only screen and (min-height: @screen-lg) {
bottom: 29px;
@media only screen and (max-height: 1000px) {
bottom: 157px;
}
}
@ -893,8 +797,7 @@ export default {
.meeting {
width: 76px;
height: 29px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=)
no-repeat;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=) no-repeat;
background-size: 100% 100%;
text-align: center;
line-height: 29px;
@ -904,7 +807,7 @@ export default {
font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #ffffff;
color: #FFFFFF;
padding-right: 6px;
}
@ -916,7 +819,7 @@ export default {
font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #ffffff;
color: #FFFFFF;
padding: 0 22px 0 33px;
height: 260px;
}
@ -980,7 +883,7 @@ export default {
width: 135px;
height: 140px;
padding: 5px;
border: 1px solid #00ebeb;
border: 1px solid #00EBEB;
margin-top: 52px;
margin-left: 13px;
margin-right: 14px;
@ -1001,20 +904,14 @@ export default {
.concet {
position: absolute;
top: 42px;
top: 62px;
left: 70px;
display: flex;
flex-wrap: wrap;
width: 73%;
justify-content: space-between;
// @media only screen and (max-height: 1000px) {
// top: 42px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 62px;
}
@media only screen and (min-height: @screen-lg) {
top: 62px;
@media only screen and (max-height: 1000px) {
top: 42px;
}
}
@ -1042,7 +939,7 @@ export default {
width: 20px;
height: 20px;
background-size: 100% 100%;
margin-top: 2px;
margin-top: 2px
}
.numb {
@ -1066,7 +963,7 @@ export default {
display: block;
font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
color: #60d5cd;
color: #60D5CD;
margin-bottom: 4px;
}
}
@ -1123,24 +1020,16 @@ export default {
transition: left 0.8s, height 1s;
overflow-y: hidden; //重点
width: 444px;
height: 242px;
height: 262px;
background: url("~@/assets/pic/rightBox.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 77px;
top: 97px;
left: 27px;
// @media only screen and (max-height: 1000px) {
// top: 77px;
// height: 242px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 97px;
height: 262px;
}
@media only screen and (min-height: @screen-lg) {
top: 97px;
height: 262px;
@media only screen and (max-height: 1000px) {
top: 77px;
height: 242px;
}
}
@ -1149,51 +1038,33 @@ export default {
overflow-x: hidden;
transition: left 0.8s, height 1s;
overflow-y: hidden; //重点
height: 240px;
height: 260px;
background: url("~@/assets/pic/rightBox.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 338px;
top: 384px;
left: 27px;
// @media only screen and (max-height: 1000px) {
// height: 240px;
// top: 338px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 384px;
height: 260px;
}
@media only screen and (min-height: @screen-lg) {
top: 384px;
height: 260px;
@media only screen and (max-height: 1000px) {
height: 240px;
top: 338px;
}
}
.leftThreeBox {
width: 442px;
height: 320px;
height: 383px;
background: url("~@/assets/pic/rightBox.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 597px;
top: 669px;
left: 27px;
overflow-x: hidden;
transition: left 0.8s, height 1s;
overflow-y: hidden; //重点
// @media only screen and (max-height: 1000px) {
// top: 597px;
// height: 320px;
// overflow: hidden;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 669px;
height: 383px;
overflow: hidden;
}
@media only screen and (min-height: @screen-lg) {
top: 669px;
height: 383px;
@media only screen and (max-height: 1000px) {
top: 597px;
height: 320px;
overflow: hidden;
}
@ -1215,19 +1086,13 @@ export default {
background: url("~@/assets/pic/rightBoxsc.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 76px;
top: 96px;
right: 27px;
overflow-x: hidden;
transition: right 0.8s, height 1s;
overflow-y: hidden; //重点
// @media only screen and (max-height: 1000px) {
// top: 76px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 96px;
}
@media only screen and (min-height: @screen-lg) {
top: 96px;
@media only screen and (max-height: 1000px) {
top: 76px;
}
}
@ -1243,26 +1108,16 @@ export default {
transition: right 0.8s, height 1s;
overflow-y: hidden; //重点
width: 444px;
height: 357px;
height: 467px;
background: url("~@/assets/pic/rightBoxsc.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 560px;
top: 584px;
right: 27px;
// @media only screen and (max-height: 1000px) {
// top: 560px;
// height: 357px;
// overflow: hidden;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 584px;
height: 467px;
overflow: hidden;
}
@media only screen and (min-height: @screen-lg) {
top: 584px;
height: 467px;
@media only screen and (max-height: 1000px) {
top: 560px;
height: 357px;
overflow: hidden;
}
}
@ -1425,13 +1280,13 @@ export default {
/deep/ .el-table--enable-row-transition .el-table__body td,
/deep/ .el-table .cell {
// background-color: transparent !important;
color: #adfffe !important;
color: #ADFFFE !important;
border: none !important;
padding-left: 7 !important;
padding-right: 0 !important;
}
/deep/ .el-table th > .cell {
/deep/ .el-table th>.cell {
color: rgba(254, 254, 254, 1) !important;
font-weight: 700 !important;
}
@ -1446,6 +1301,7 @@ export default {
/deep/ .el-table .el-table__cell.gutter {
display: none !important;
;
}
/deep/ .el-form-item__label {
@ -1460,14 +1316,14 @@ export default {
border-radius: 6px;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: transparent !important;
/* color: #f19944; */
/* 设置文字颜色，可以选择不设置 */
}
/deep/ .el-table .warning-row {
background: #1a5856 !important;
background: #1A5856 !important;
}
/deep/ .el-table .success-row {

2
src/views/swiper.vue
View File

@ -314,7 +314,7 @@ export default {
.el-carousel__container {
position: relative;
/* height: 180px !important; */
height: 200px ;
height: 200px !important;
}
.el-carousel__indicators--horizontal{
width:73%

6
src/views/swiperManagement.vue
View File

@ -1,14 +1,18 @@
<template>
<div class="home1">
<!-- :row-class-name="tableRowClassName" :class="dateTypeClass" :cell-style="cellStyle" @cell-click="cellClick"-->
<el-table
height="600"
:data="list"
class="tableListValue"
:row-class-name="tableRowClassName"
style="width: 100%"
:class="dateTypeClass"
row-key="id"
@cell-click="cellClick"
:cell-style="cellStyle"
ref="table"
>
<el-table-column
prop="warnTime"

2
src/views/swiperPersonnel.vue
View File

@ -256,7 +256,7 @@ export default {
.el-carousel__container {
position: relative;
/* height: 180px !important; */
height: 200px ;
height: 200px !important;
}
.el-carousel__indicators--horizontal{
width:73%

322
src/views/videoSurveillanceComponents.vue
View File

@ -29,47 +29,15 @@
@click="openChangebtn(item)"
>
<!-- <img :src="item.thumbnail" alt="" style="width: 100%; height: 100%" /> -->
<img
v-show="item.status == false"
:src="item.thumbnail"
alt=""
style="width: 100%; height: 100%"
/>
<div
class="openChange"
@click="
tzSp(
item.equipmentName,
item.id,
item.thumbnail,
item.videoUrl,
item.onLineStatus
)
"
v-show="item.status == false"
>
<img
src="../assets/pic/play.png"
alt=""
style="width:100%;height:100%"
/>
<img v-show="item.status==false" :src="item.thumbnail" alt="" style="width: 100%; height: 100%"/>
<div class="openChange" @click="tzSp(item.equipmentName, item.id,item.thumbnail)" v-show="item.status==false">
<img src="../assets/pic/play.png" alt="" style="width:100%;height:100%">
</div>
<iframe
ref="iframe"
id="iframeid"
:src="src + '?videoUrl=' + item.videoUrl"
frameborder="0"
class="iframe"
scrolling="auto"
width="100%"
height="100%"
v-if="item.status"
>
<iframe ref="iframe" id="iframeid" :src="src" frameborder="0" class="iframe" scrolling="auto" width="100%"
height="100%" v-show="item.status">
</iframe>
<div class="childrenBox">
<img src="../assets/pic/online.png" v-show="item.onLineStatus" />
<img src="../assets/pic/outline.png" v-show="!item.onLineStatus" />
<div>{{ item.equipmentName }}</div>
{{ item.equipmentName }}
</div>
</div>
</div>
@ -92,7 +60,7 @@
class="process-one"
:text-inside="true"
:stroke-width="25"
:percentage="parseFloat(lockPer.toFixed(2))"
:percentage="lockPer"
></el-progress>
<!-- </div> -->
</div>
@ -119,7 +87,7 @@
class="process-one"
:text-inside="true"
:stroke-width="25"
:percentage="parseFloat(movePer.toFixed(2))"
:percentage="movePer"
></el-progress>
</div>
<div style="margin-top: 10px">
@ -156,15 +124,7 @@
<!-- <span class="playBox" @click="tzSp"></span> -->
<img
:src="item.icon"
@click="
tzSp(
item.name,
item.id,
item.thumbnail,
item.videoUrl,
item.onLineStatus
)
"
@click="tzSp(item.name, item.id,item.thumbnail)"
style="
width: 16px;
height: 16px;
@ -264,14 +224,13 @@ import pieChart from "@/components/common/pieChart";
import pieDateChart from "@/components/common/pieDateChart";
import Resize from "../utils/Resize.vue";
import { getAllCamera, getAllCameraList, getCameraCount } from "@/api/api";
export default {
name: "report",
components: {
pieChart,
RadarChart,
pieDateChart,
Resize
Resize,
},
data() {
return {
@ -286,59 +245,59 @@ export default {
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
tableData: [
{
entName: "我打打死"
entName: "我打打死",
},
{
entName: "我打打死"
entName: "我打打死",
},
{
entName: "我打打死"
entName: "我打打死",
},
{
entName: "我打打死"
}
entName: "我打打死",
},
],
qyList: [
{
name: "我的",
value: 12
value: 12,
},
{
name: "我的",
value: 112
value: 112,
},
{
name: "我的",
value: 132
}
value: 132,
},
],
xArry: [],
chartData: [],
peopleList: [
{
name: "姓名",
value: "：王刚"
value: "：王刚",
},
{
name: "岗位",
value: "：项目经理"
value: "：项目经理",
},
{
name: "体温",
value: "：36.5℃"
value: "：36.5℃",
},
{
name: "入场时间",
value: "：2022-11-26"
value: "：2022-11-26",
},
{
name: "考勤类型",
value: "：进场"
value: "：进场",
},
{
name: "打卡设备",
value: "：1号打卡机"
}
value: "：1号打卡机",
},
],
vdaH: 0,
type: false,
@ -346,8 +305,8 @@ export default {
numberList: [5, 5],
rightThreeHeightBox: 0,
leftOneBox: 0,
src: "../static/flv/video1.html",
iframeShow: false
src:"",
iframeShow:false,
};
},
created() {
@ -362,17 +321,14 @@ export default {
this.$router.go(0);
}
},
tzSp(name, id, thumbnail, videoUrl, videoStatus) {
tzSp(name, id,thumbnail) {
// this.$router.push('/videoViewing')
let videoObj = {
videoName: name,
videoId: id,
thumbnail: thumbnail,
videoUrl: videoUrl,
videoStatus: videoStatus
thumbnail:thumbnail
};
console.log("videoObj", videoObj);
console.log("videoObj",videoObj)
this.$emit("transfer", videoObj);
},
getDivHeight() {
@ -415,134 +371,69 @@ export default {
}
},
// vue获取iframe传递过来的信息
getiframeMsg(event) {
getiframeMsg(event){
const res = event.data;
if (res.cmd == "myIframe") {
console.log(event)
if(res.cmd == 'myIframe'){
console.log(res)
}
},
// vue向iframe传递信息
vueSendMsg() {
this.iframeMethods();
vueSendMsg(){
this.iframeMethods()
// const iframeWindow = this.$refs.iframe.contentWindow;
const iframeWindow = document.getElementById("iframeid").contentWindow;
iframeWindow.postMessage(
{
cmd: "myVue",
params: {
info: "Vue向iframe传递的消息"
// url:API_CONFIG.dev.proxyTable["/live"].target,
const iframeWindow =document.getElementById('iframeid').contentWindow;
iframeWindow.postMessage({
cmd:'myVue',
params : {
info: 'Vue向iframe传递的消息',
}
},
"*"
);
},'*')
},
// 触发iframe中的方法
iframeMethods() {
document
.getElementById("iframeid")
.contentWindow.triggerByVue("通过Vue触发iframe中的方法");
iframeMethods(){
document.getElementById('iframeid').contentWindow.triggerByVue('通过Vue触发iframe中的方法');
},
openChangebtn(item) {
item.status = true;
openChangebtn(item){
item.status = true
// this.iframeShow = true
this.vueSendMsg();
},
//mqtt订阅
createMqtt() {
this.topicSends = ["third/equipmentStatus"];
window.PubScribe(this.topicSends, this.realInfo);
// this.$emit('mqttList', this.topicSends)
},
/** 实时数据分类 */
realInfo(topic, message) {
let that = this;
// console.log("topic",topic)
switch (topic) {
// 接收托片
case "third/equipmentStatus":
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("设备状态", msg);
this.mqttUpVideoStatus(msg);
} catch (error) {}
break;
}
},
//接收mqtt数据修改摄像头状态
mqttUpVideoStatus(val) {
const upVideoStatus = this.videoAllList.filter(
item => item.id == val.equipmentId
);
if (upVideoStatus) {
if (val.equipmentStatus == 0) {
upVideoStatus[0].onLineStatus = true;
} else {
upVideoStatus[0].onLineStatus = false;
}
} else {
return false;
}
this.vueSendMsg()
}
},
mounted() {
window.createMqtt = this.createMqtt;
this.createMqtt();
this.vueSendMsg();
// this.switchDiv();
this.switchDiv();
this.getDivHeight();
window.addEventListener("resize", this.getDivHeight);
//获取所有监控
getAllCamera().then(res => {
getAllCamera().then((res) => {
this.videoAllList = Object.keys(res.data.data).map((item, index) => {
let videoPic = "";
if (res.data.data[item].thumbnail != "") {
videoPic = res.data.data[item].thumbnail;
} else {
videoPic = require("@/assets/pic/videoPic.png");
}
if (res.data.data[item].equipmentStatus == "在用") {
res.data.data[item].onLine = true;
} else {
res.data.data[item].onLine = false;
}
return {
thumbnail: videoPic,
thumbnail: res.data.data[item].thumbnail,
// thumbnail:require('@/assets/cscs2.png'),
equipmentName: res.data.data[item].equipmentName,
// equipmentName:'隧道入口监控',
id: res.data.data[item].id,
videoUrl: res.data.data[item].url,
onLineStatus: res.data.data[item].onLine,
status: true
status:false
};
});
});
//获取所有接口列表
getAllCameraList().then(res => {
getAllCameraList().then((res) => {
this.videoList = Object.keys(res.data.data).map((item, index) => {
if (res.data.data[item].equipmentStatus == "在用") {
res.data.data[item].onLine = true;
} else {
res.data.data[item].onLine = false;
}
return {
name: res.data.data[item].equipmentName,
icon: require("../assets/pic/play.png"),
lookOver: "查看",
id: res.data.data[item].id,
thumbnail: res.data.data[item].thumbnail,
videoUrl: res.data.data[item].url,
onLineStatus: res.data.data[item].onLine
};
});
// this.src = '../static/flv/video1.html';
window.addEventListener("message", this.getiframeMsg);
this.src = '../static/flv/video1.html';
window.addEventListener('message',this.getiframeMsg)
});
//获取摄像头数量接口
getCameraCount().then(res => {
getCameraCount().then((res) => {
this.allLock = res.data.data.allLock;
this.onlineLock = res.data.data.onlineLock;
this.allMove = res.data.data.allMove;
@ -554,14 +445,12 @@ export default {
this.movePer = (this.onlineMove / this.allMove) * 100;
}
});
}
},
};
</script>
<style scoped lang="less">
@screen-xs: 1000px;
@screen-lg: 2100px;
.bg {
.bg{
width: 100%;
height: 100%;
background: url("~@/assets/videobg.png") no-repeat;
@ -594,35 +483,27 @@ export default {
.scFathBox {
width: 1375px;
height: 790px;
height: 864px;
overflow: auto;
position: absolute;
top: 135px;
top: 180px;
left: 48px;
display: flex;
flex-wrap: wrap;
// justify-content: space-around;
justify-content: flex-start;
justify-content: space-around;
// @media only screen and (max-height: 1000px) {
// top: 135px;
// height: 790px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 180px;
height: 864px;
}
@media only screen and (min-height: @screen-lg) {
top: 180px;
height: 864px;
@media only screen and (max-height: 1000px) {
top: 135px;
height: 790px;
}
.scFathChild:hover {
transform: scale(1.1);
}
.scFathChild {
// width: 311px;
width: 23%;
width:23%;
height: 251px;
margin-bottom: 43px;
border: 1px solid rgba(0, 235, 235, 0.2);
@ -644,13 +525,8 @@ export default {
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #ffffff;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 10px;
box-sizing: border-box;
}
.openChange {
.openChange{
position: absolute;
width: 9%;
height: 10%;
@ -832,19 +708,14 @@ export default {
background: url("~@/assets/pic/rightBox.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 76px;
top: 96px;
right: 27px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
// @media only screen and (max-height: 1000px) {
// top: 76px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 96px;
}
@media only screen and (min-height: @screen-lg) {
top: 96px;
@media only screen and (max-height: 1000px) {
top: 76px;
}
.tjBox {
position: absolute;
top: 92px;
@ -891,7 +762,7 @@ export default {
/deep/ .el-progress-bar__inner {
background-color: unset;
// background-image: linear-gradient(89deg, #105752, #25e8b3);
background-image: linear-gradient(89deg, #e2c869, #eed78e);
background-image: linear-gradient(89deg, #E2C869, #EED78E);
border-radius: 0;
}
/deep/ .el-progress-bar__outer {
@ -911,24 +782,17 @@ export default {
width: 100%;
height: 80%;
position: absolute;
top: 66px;
top: 86px;
overflow-y: auto;
::-webkit-scrollbar {
display: none;
}
// @media only screen and (max-height: 1000px) {
// top: 66px;
// // overflow: hidden;
// overflow: auto;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 86px;
overflow: auto;
}
@media only screen and (min-height: @screen-lg) {
top: 86px;
@media only screen and (max-height: 1000px) {
top: 66px;
// overflow: hidden;
overflow: auto;
}
.vidBox {
width: 354px;
height: 46px;
@ -940,8 +804,8 @@ export default {
display: flex;
align-items: center;
margin-left: 30px;
justify-content: space-between;
padding: 0 20px;
justify-content: space-around;
.playBox {
display: inline-block;
width: 16px;
@ -965,33 +829,19 @@ export default {
.rightThreeBox {
width: 424px;
height: 510px;
height: 629px;
background: url("~@/assets/pic/rightTwoBox.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 401px;
top: 421px;
right: 27px;
::-webkit-scrollbar {
display: none;
}
// @media only screen and (max-height: 1000px) {
// top: 401px;
// height: 510px;
// // overflow: hidden;
// ::-webkit-scrollbar {
// display: none;
// }
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 421px;
height: 629px;
::-webkit-scrollbar {
display: none;
}
}
@media only screen and (min-height: @screen-lg) {
top: 421px;
height: 629px;
@media only screen and (max-height: 1000px) {
top: 401px;
height: 510px;
// overflow: hidden;
::-webkit-scrollbar {
display: none;
}

438
src/views/videoViewingComponents.vue
View File

@ -26,74 +26,18 @@
alt=""
style="width: 100%; height: 100%"
/> -->
<!-- <img
<img
v-if="closeVideoShow"
:src="thumbnail"
alt=""
style="width: 100%; height: 100%"
/>
<Video :videoitemUrl="videoitemUrl" :videoUrllist="videoUrllist" v-if="openVideoShow"></Video> -->
<div style="width: 100%; height: 100%" v-show="carouselShow">
<img
v-if="!videoOnlineStatus"
:src="thumbnail"
alt=""
style="width: 100%; height: 100%"
/>
<iframe
ref="iframe"
id="iframeid"
:src="'../static/flv/videoIndex5.html?videoUrl=' + videoOnlineUrl"
frameborder="0"
class="iframe"
scrolling="auto"
width="100%"
height="100%"
v-else
>
</iframe>
</div>
<div
style="width: 100%; height: 100%"
v-show="!carouselShow"
class="carouselVideo"
>
<el-carousel
trigger="click"
height="100%"
width="100%"
:autoplay="false"
@change="carouselChange"
>
<el-carousel-item
v-for="(item, index) in videoitemUrl"
:key="index"
>
<div class="outLiveTime">
<div>开始时间:{{ item.startTime }}</div>
<div>结束时间:{{ item.endTime }}</div>
</div>
<video
ref="myVideo"
:id="'videoPlayer' + index"
width="100%"
height="95%"
:src="item.path"
controls
></video>
</el-carousel-item>
</el-carousel>
</div>
<Video :videoitemUrl="videoitemUrl" :videoUrllist="videoUrllist" v-if="openVideoShow"></Video>
<div class="childrenBox">
{{ videoName }}
</div>
</div>
</div>
<!-- 实时视频按钮切换 -->
<div class="liveBetton" v-show="isShowLookFor">
<el-button type="primary" round @click="liveChange">实时视频</el-button>
</div>
<!-- 右侧模块1 -->
<div class="rightOneBox">
<div class="titName">
@ -112,7 +56,7 @@
class="process-one"
:text-inside="true"
:stroke-width="25"
:percentage="parseFloat(lockPer.toFixed(2))"
:percentage="lockPer"
></el-progress>
</div>
<div style="margin-top: 10px">
@ -138,7 +82,7 @@
class="process-one"
:text-inside="true"
:stroke-width="25"
:percentage="parseFloat(movePer.toFixed(2))"
:percentage="movePer"
></el-progress>
</div>
<div style="margin-top: 10px">
@ -171,7 +115,7 @@
popper-class="elDatePicker"
style="width: 100%"
v-model="timeForm.start"
value-format="yyyy-MM-dd HH:mm:ss"
value-format= 'yyyy-MM-dd HH:mm:ss'
type="datetime"
placeholder="选择日期时间"
default-time="00:00:00"
@ -184,7 +128,7 @@
style="width: 100%"
v-model="timeForm.end"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
value-format= 'yyyy-MM-dd HH:mm:ss'
placeholder="选择日期时间"
:picker-options="pickerOptions"
default-time="23:59:59"
@ -205,24 +149,17 @@
<span></span>
</div>
<div class="kzBtn">
<div
:class="[isShowLookFor ? 'viedoOne' : 'viedo2One']"
@click="playBackVidoe"
></div>
<div :class="[isShowLookFor ? 'viedoOne' : 'viedo2One']"></div>
<div
@click="bfClick"
:class="[
isShowLookFor ? 'ciedo2One' : 'ciedoOne',
bfkzBtn ? 'xsbfOne' : 'ciedoOne'
bfkzBtn ? 'xsbfOne' : 'ciedoOne',
]"
></div>
<div
:class="[isShowLookFor ? 'diedo2One' : 'diedoOne']"
@mousedown="downPlay"
@mouseup="upPlay"
></div>
<div :class="[isShowLookFor ? 'diedo2One' : 'diedoOne']"></div>
</div>
<div class="bottomTitle">{{ videoName }}</div>
<div class="bottomTitle"> {{ videoName }}</div>
</div>
</div>
@ -235,31 +172,23 @@ import pieChart from "@/components/common/pieChart";
import pieDateChart from "@/components/common/pieDateChart";
import Resize from "../utils/Resize.vue";
import { getCameraCount, getCameraHistory } from "@/api/api";
import flvjs from "flv.js";
import flvjs from 'flv.js'
import Video from "./video";
export default {
name: "report",
props: {
videoName: {
type: String,
default: ""
default: "",
},
videoId: {
type: String,
default: ""
default: "",
},
thumbnail: {
type: String,
default: ""
default: "",
},
videoOnlineStatus: {
type: Boolean,
default: true
},
videoOnlineUrl: {
type: String,
default: ""
}
},
components: {
pieChart,
@ -270,7 +199,6 @@ export default {
},
data() {
return {
carouselShow: true, //轮播图视频
allLock: 0, //所有固定摄像头
allMove: 0, //所有移动摄像头
onlineLock: 0, //在线固定摄像头
@ -279,77 +207,74 @@ export default {
movePer: 0, //移动摄像头占比
timeForm: {
start: "",
end: ""
end: "",
},
pickerOptions: {
disabledDate: time => {
　　disabledDate: (time) => {
const date = new Date(this.timeForm.start);
const day = 1 * 24 * 3600 * 1000 - 1;
const day = 1 * 24 * 3600 * 1000-1;
const dateRegion = date.getTime() + day;
return (
new Date(time).getTime() > dateRegion ||
new Date(time).getTime() < date.getTime()
);
}
},
closeVideoShow: true,
openVideoShow: false,
　　　return new Date(time).getTime() > dateRegion || new Date(time).getTime() < date.getTime()
}
　},
closeVideoShow:true,
openVideoShow:false,
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
tableData: [
{
entName: "我打打死"
entName: "我打打死",
},
{
entName: "我打打死"
entName: "我打打死",
},
{
entName: "我打打死"
entName: "我打打死",
},
{
entName: "我打打死"
}
entName: "我打打死",
},
],
qyList: [
{
name: "我的",
value: 12
value: 12,
},
{
name: "我的",
value: 112
value: 112,
},
{
name: "我的",
value: 132
}
value: 132,
},
],
xArry: [],
chartData: [],
peopleList: [
{
name: "姓名",
value: "：王刚"
value: "：王刚",
},
{
name: "岗位",
value: "：项目经理"
value: "：项目经理",
},
{
name: "体温",
value: "：36.5℃"
value: "：36.5℃",
},
{
name: "入场时间",
value: "：2022-11-26"
value: "：2022-11-26",
},
{
name: "考勤类型",
value: "：进场"
value: "：进场",
},
{
name: "打卡设备",
value: "：1号打卡机"
}
value: "：1号打卡机",
},
],
vdaH: 0,
type: false,
@ -359,115 +284,58 @@ export default {
leftOneBox: 0,
isShowLookFor: false,
bfkzBtn: false,
videoUrllist: [
{ id: "001", path: require("../assets/map4/5.mp4") },
{ id: "002", path: require("../assets/map4/6.mp4") }
videoUrllist:[
{id:"001",path:require('../assets/map4/5.mp4')},
{id:"002",path:require('../assets/map4/6.mp4')}
],
// videoitemUrl: require("../assets/map4/5.mp4"),
videoitemUrl: "",
carouselIndex: 0, //轮播图当前索引
timePlay: null, //长按视频定时器
rewindTimeout: null //后退视频定时器
videoitemUrl:require('../assets/map4/5.mp4')
};
},
created() {
let h = document.documentElement.clientHeight || document.body.clientHeight;
this.vdaH = h - 0 + "px";
console.log("thumbnail",thumbnail)
},
methods: {
//后退视频
playBackVidoe() {
let video = document.getElementById("videoPlayer" + this.carouselIndex);
const rewindStep = 10; // 后退步长（秒）
video.currentTime -= rewindStep;
// this.rewindTimeout = setInterval(this.startRewind, 1000);
},
//停止后退
stopBack() {
// clearTimeout(this.rewindTimeout);
// this.rewindTimeout = null
},
//快进视频
downPlay() {
let video = document.getElementById("videoPlayer" + this.carouselIndex);
this.timePlay = setTimeout(() => {
console.log("长按时间");
video.playbackRate = 2.0;
}, 1000);
},
upPlay() {
console.log("停止快进");
let video = document.getElementById("videoPlayer" + this.carouselIndex);
video.playbackRate = 1.0;
clearTimeout(this.timePlay);
this.timePlay = null;
},
playBack() {
let video = document.getElementById("videoPlayer" + this.carouselIndex);
video.playBackRate = 1;
},
//切换播放实时视频
liveChange() {
(this.carouselShow = true), (this.timeForm.start = "");
this.timeForm.end = "";
this.isShowLookFor = false;
this.bfkzBtn = false;
},
//轮播视频选择事件
carouselChange(val) {
this.carouselIndex = val;
let video = document.getElementById("videoPlayer" + this.carouselIndex);
if (video.paused) {
this.bfkzBtn = false;
} else {
this.bfkzBtn = true;
}
},
//点击播放按
bfClick() {
console.log("this.isShowLookFor", this.isShowLookFor);
let video = document.getElementById("videoPlayer" + this.carouselIndex);
console.log("this.isShowLookFor",this.isShowLookFor)
if (this.isShowLookFor) {
this.bfkzBtn = !this.bfkzBtn;
if (this.bfkzBtn == false) {
console.log("this.bfkzBtn11", this.bfkzBtn);
this.closeVideoShow = true;
this.openVideoShow = false;
video.pause();
} else if (this.bfkzBtn == true) {
console.log("this.bfkzBtn222", this.bfkzBtn);
this.closeVideoShow = false;
this.openVideoShow = true;
video.play();
if(this.bfkzBtn==false){
console.log("this.bfkzBtn11",this.bfkzBtn)
this.closeVideoShow =true
this.openVideoShow=false
}else if(this.bfkzBtn==true){
console.log("this.bfkzBtn222",this.bfkzBtn)
this.closeVideoShow =false
this.openVideoShow=true
}
}
},
//点击开始查看按钮
lookForVideo() {
if (this.timeForm.start == "" && this.timeForm.end == "") {
this.isShowLookFor = false;
} else {
console.log("this.timeForm.start", this.timeForm.start);
console.log("this.timeForm.end", this.timeForm.end);
console.log("this.timeForm.start",this.timeForm.start)
console.log("this.timeForm.end",this.timeForm.end)
let data = {
equipmentId: this.videoId,
// startTime: this.$moment(this.timeForm.start).format("YYYY-MM-DD hh:mm:ss"),
// endTime: this.$moment(this.timeForm.end).format("YYYY-MM-DD hh:mm:ss"),
startTime: this.timeForm.start,
endTime: this.timeForm.end
endTime: this.timeForm.end,
};
getCameraHistory(data).then(res => {
if (res.data.code == 200) {
if (res.data.data.lenght != 0) {
this.carouselShow = false;
this.videoitemUrl = res.data.data;
} else {
this.$message.warning("暂无历史视频");
getCameraHistory(data).then((res) => {
console.log(res.data,'qqqqqqqqqqqqqqqqqqqqqqqqqqq');
if(res.data.code==200){
if(res.data.data.length==1){
this.videoitemUrl =res.data.data[0].path
}
// if (res.data.data.length == 1) {
// this.videoitemUrl = res.data.data[0].path;
// }
}
});
this.isShowLookFor = true;
@ -521,19 +389,14 @@ export default {
this.$refs.switchBtn.style.display = "block";
}, 800);
}
}
},
},
mounted() {
console.log(
this.videoOnlineUrl,
this.videoOnlineStatus,
"videoOnlineUrl,videoOnlineStatus"
);
// this.switchDiv();
this.switchDiv();
this.getDivHeight();
window.addEventListener("resize", this.getDivHeight);
//获取摄像头数量接口
getCameraCount().then(res => {
getCameraCount().then((res) => {
this.allLock = res.data.data.allLock;
this.onlineLock = res.data.data.onlineLock;
this.allMove = res.data.data.allMove;
@ -545,13 +408,11 @@ export default {
this.movePer = (this.onlineMove / this.allMove) * 100;
}
});
}
},
};
</script>
<style scoped lang="less">
@screen-xs: 969px;
@screen-lg: 2100px;
.titTop {
width: 100%;
position: absolute;
@ -612,16 +473,9 @@ export default {
display: none;
}
}
.outLiveTime {
width: 30%;
height: 30px;
color: #fff;
z-index: 999;
position: absolute;
}
.scFathBox {
width: 1375px;
height:100%;
position: absolute;
top: 152px;
left: 48px;
@ -631,17 +485,11 @@ export default {
.scFathChild {
width: 100%;
height: 745px;
height: 100%;
border: 1px solid rgba(0, 235, 235, 0.2);
padding: 3px;
position: relative;
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
height: 863px;
}
@media only screen and (min-height: @screen-lg) {
height: 863px;
}
.childrenBox {
// width: 123px;
height: 30px;
@ -655,7 +503,6 @@ export default {
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #ffffff;
z-index: 999;
}
}
}
@ -773,62 +620,35 @@ export default {
background-size: 100% 100%;
}
}
.liveBetton {
// width:30px;
// height:20px;
position: absolute;
top: 110px;
right: 25%;
.el-button--primary {
background: rgb(23, 210, 200);
border-color: rgb(23, 210, 200);
}
}
.rightOneBox {
width: 422px;
height: 270px;
height: 300px;
background: url("~@/assets/pic/rightBox.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 77px;
top: 97px;
right: 27px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
// @media only screen and (max-height: 969px) {
// height: 270px;
// top: 77px;
@media only screen and (max-height: 969px) {
height: 270px;
top: 77px;
// .tjBox {
// top: 64px;
// }
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
height: 300px;
top: 97px;
.tjBox {
top: 84px;
}
}
@media only screen and (min-height: @screen-lg) {
height: 300px;
top: 97px;
.tjBox {
top: 84px;
top: 64px;
}
}
.tjBox {
position: absolute;
top: 64px;
top: 92px;
left: 56px;
// @media only screen and (max-height: 969px) {
// top: 64px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 92px;
}
@media only screen and (min-height: @screen-lg) {
top: 92px;
@media only screen and (max-height: 969px) {
top: 64px;
}
.tt1 {
background: url("~@/assets/pic/guding.png") no-repeat;
background-size: 100% 100%;
@ -872,7 +692,7 @@ export default {
/deep/ .el-progress-bar__inner {
background-color: unset;
// background-image: linear-gradient(89deg, #105752, #25e8b3);
background-image: linear-gradient(89deg, #e2c869, #eed78e);
background-image: linear-gradient(89deg, #E2C869, #EED78E);
border-radius: 0;
}
/deep/ .el-progress-bar__outer {
@ -891,21 +711,16 @@ export default {
.kzBtn {
display: flex;
position: absolute;
top: 97px;
top: 107px;
display: flex;
align-items: center;
left: 50%;
transform: translateX(-50%);
// @media only screen and (max-height: 969px) {
// top: 97px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 107px;
}
@media only screen and (min-height: @screen-lg) {
top: 107px;
@media only screen and (max-height: 969px) {
top: 97px;
}
.viedoOne {
width: 60px;
height: 60px;
@ -963,6 +778,7 @@ export default {
background: url("~@/assets/pic/notbf.png") no-repeat;
background-size: 100% 100%;
margin: 0 28px;
cursor: pointer;
}
.ciedo2One {
@ -1013,19 +829,13 @@ export default {
background: url("~@/assets/pic/monitor.png") no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 20px;
bottom: 37px;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
// @media only screen and (max-height: 969px) {
// bottom: 20px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
bottom: 37px;
}
@media only screen and (min-height: @screen-lg) {
bottom: 37px;
@media only screen and (max-height: 969px) {
bottom: 20px;
}
}
@ -1094,53 +904,37 @@ export default {
.rightTwoBox {
width: 422px;
height: 270px;
height: 299px;
background: url("~@/assets/pic/rightBox.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 366px;
top: 422px;
right: 27px;
// @media only screen and (max-height: 969px) {
// top: 366px;
// height: 270px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 422px;
height: 299px;
}
@media only screen and (min-height: @screen-lg) {
top: 422px;
height: 299px;
@media only screen and (max-height: 969px) {
top: 366px;
height: 270px;
}
}
.rightThreeBox {
width: 422px;
height: 270px;
height: 299px;
background: url("~@/assets/pic/rightBox.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 654px;
top: 746px;
right: 27px;
// @media only screen and (max-height: 969px) {
// height: 270px;
// top: 654px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
top: 746px;
height: 299px;
}
@media only screen and (min-height: @screen-lg) {
top: 746px;
height: 299px;
@media only screen and (max-height: 969px) {
height: 270px;
top: 654px;
}
.bottomTitle {
width: 100%;
height: 36px;
background: rgba(0, 37, 35, 0.5);
position: absolute;
bottom: 15px;
bottom: 31px;
// left: 142px;
font-size: 16px;
text-align: center;
@ -1149,14 +943,8 @@ export default {
font-weight: 500;
color: #ffffff;
// @media only screen and (max-height: 969px) {
// bottom: 15px;
// }
@media only screen and (min-height: @screen-xs) and (max-height: 1200px) {
bottom: 31px;
}
@media only screen and (min-height: @screen-lg) {
bottom: 31px;
@media only screen and (max-height: 969px) {
bottom: 15px;
}
}
}
@ -1292,20 +1080,8 @@ export default {
background-size: 100% 100%;
cursor: pointer;
}
/deep/ .el-carousel--horizontal {
overflow-x: hidden;
height: 100% !important;
}
/deep/ .el-carousel__container {
height: 100% !important;
}
/deep/ .el-carousel__indicators--horizontal {
width: 100%;
display: flex;
justify-content: center;
}
</style>
<style lang="less">
<style lang="less" >
.securityCheck {
.el-form-item__label {
color: #fff;
@ -1325,7 +1101,8 @@ export default {
}
</style>
<!-- <style lang="less">
<!-- <style lang="less">
.el-picker-panel {
background: #0f0472a9 !important;
color: #ffffff;
@ -1375,3 +1152,4 @@ export default {
color: #ffffff;
}
</style> -->

29
static/flv/demo1.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" style="height: 100%!important;">
<html lang="en">
<head>
<meta charset="UTF-8">
@ -44,7 +44,7 @@
}
.videojs-flvjs-player-dimensions {
width: 100%!important;
height: 100%!important;
height: 217px!important;
overflow-x: hidden;
overflow-y: hidden;
}
@ -61,7 +61,7 @@
<body>
<div id="videoContainer" width="100%"
style="height: 100%!important;" >
height="100%" >
<video
id="videojs-flvjs-player"
class="video-js vjs-default-skin vjs-big-play-centered"
@ -70,7 +70,7 @@
autoplay=true
width="100%"
height="100%"
muted="muted"
data-setup="{}"
>
@ -81,16 +81,8 @@
</body>
<script>
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
var flvUrl = ""
var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
var player = null;
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
console.log(getQueryString('videoUrl'),'shipin');
// iframe向vue传递信息
function iframeSendMsg(){
window.parent.postMessage({
@ -115,7 +107,7 @@ console.log(getQueryString('videoUrl'),'shipin');
function getVueMsg(event){
const res = event.data;
if(res.cmd == 'myVue'){
// console.log("获取vue传来的数据",res.params.info)
console.log("获取vue传来的数据",res.params.info)
flvUrl = res.params.info
// console.log("flvUrl",flvUrl)
// initPlayer(res.params.info)
@ -123,7 +115,7 @@ console.log(getQueryString('videoUrl'),'shipin');
}
};
function triggerByVue(msg){
// console.log(msg)
console.log(msg)
// flvUrl = msg
// initPlayer(msg);
// player.play();
@ -138,7 +130,7 @@ function initPlayer(){
videoContainer.removeChild(pObjs[i]);
}
videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls muted='muted' preload='auto' autoplay='true' width='100%' height='100%' data-setup='{}'><source src="+ getQueryString('videoUrl') +" type='video/x-flv'></video>";
videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls preload='auto' autoplay=true width='100%' height='100%' data-setup='{}'><source src="+ flvUrl +" type='video/x-flv'></video>";
player = videojs('videojs-flvjs-player', {
techOrder: ['html5', 'flvjs'],
@ -153,9 +145,10 @@ function initPlayer(){
autoCleanupMinBackwardDuration:60,
stashInitialSize:128
},
},
sources: [{
src: getQueryString('videoUrl'),
src: flvUrl,
type: 'video/x-flv'
}],
controls: true,
@ -168,7 +161,7 @@ function initPlayer(){
console.log('first source load fail',e)
player.src({
src: getQueryString('videoUrl'),
src: flvUrl,
type: 'video/x-flv'
});
player.ready(function() {

210
static/flv/demo11.html
View File

@ -1,210 +0,0 @@
<!DOCTYPE html>
<html lang="en" style="height: 100%!important;">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频播放软件</title>
<link href="video-js.css" rel="stylesheet" />
<style>
body{
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
height: 100%;
}
.video-js .vjs-big-play-button{
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115,133,159,.5);
border-width: 0.15em;
margin-top: -1.25em;
margin-left: -1.75em;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
.videojs-flvjs-player-dimensions {
width: 100%!important;
height: 100%!important;
overflow-x: hidden;
overflow-y: hidden;
}
/* #videojs-flvjs-player{
width: 100%!important;
height: 100%!important;
} */
</style>
<script src="video.min.js"></script>
<script src="flv.min.js"></script>
<script src="videojs-flvjs.min.js"></script>
</head>
<body>
<div id="videoContainer" width="100%"
style="height: 100%!important;">
<video
id="videojs-flvjs-player"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
autoplay=true
width="100%"
height="100%"
muted="muted"
data-setup="{}"
>
<source src="" type='video/x-flv' />
</video>
<!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
</div>
</body>
<script>
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
var flvUrl = ""
var player = null;
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
console.log(getQueryString('videoUrl'),'shipin');
// iframe向vue传递信息
function iframeSendMsg(){
window.parent.postMessage({
cmd:'myIframe',
params : {
info: 'iframe向Vue传递的消息',
}
},'*');
};
// iframe获取Vue传递过来的信息
window.addEventListener("message", getVueMsg);
// function getVueMsg(event){
// const res = event.data;
// if(res.cmd == 'myVue'){
// console.log(res)
// }
// };
// function triggerByVue(msg){
// console.log(msg)
// player.play();
// }
function getVueMsg(event){
const res = event.data;
if(res.cmd == 'myVue'){
// console.log("获取vue传来的数据",res.params.info)
flvUrl = res.params.info
// console.log("flvUrl",flvUrl)
// initPlayer(res.params.info)
}
};
function triggerByVue(msg){
// console.log(msg)
// flvUrl = msg
// initPlayer(msg);
// player.play();
}
function initPlayer(){
// console.log("val",val)
var videoContainer = document.getElementById("videoContainer");
var pObjs = videoContainer.childNodes;
for (var i = pObjs.length - 1; i >= 0; i--) {
videoContainer.removeChild(pObjs[i]);
}
videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls muted='muted' preload='auto' autoplay='true' width='100%' height='100%' data-setup='{}'><source src="+ getQueryString('videoUrl') +" type='video/x-flv'></video>";
player = videojs('videojs-flvjs-player', {
techOrder: ['html5', 'flvjs'],
flvjs: {
mediaDataSource: {
isLive: true,
cors: true,
withCredentials: false,
enableStashBuffer: false,
autoCleanupSourceBuffer:true,
autoCleanupMaxBackwardDuration:12,
autoCleanupMinBackwardDuration:60,
stashInitialSize:128
},
},
sources: [{
src: getQueryString('videoUrl'),
type: 'video/x-flv'
}],
controls: true,
preload: "none"
},
function onPlayerReady() {
console.log('first source load fail',player)
player.on('error',function(e){
console.log('first source load fail',e)
player.src({
src: getQueryString('videoUrl'),
type: 'video/x-flv'
});
player.ready(function() {
console.log('player ready')
player.load();
player.play();
});
});
player.on('waiting',function(){
console.log('stream wainting....');
window.parent.postMessage({
cmd:'myIframe',
params : {
info: 'iframe向Vue传递的消息',
}
},'*');
//player.pause();
//player.dispose();
//player = null;
//initPlayer();
});
player.on('ended',function(){
console.log('stream ended....');
player.pause();
player.dispose();
player = null;
initPlayer();
});
});
}
initPlayer();
</script>
</html>

70
static/flv/flv.min.js vendored
View File

File diff suppressed because one or more lines are too long

26
static/flv/video1.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" style="height: 100%!important;">
<html lang="en">
<head>
<meta charset="UTF-8">
@ -44,7 +44,7 @@
}
.videojs-flvjs-player-dimensions {
width: 100%!important;
height: 100%!important;
height: 240px!important;
overflow-x: hidden;
overflow-y: hidden;
}
@ -61,7 +61,7 @@
<body>
<div id="videoContainer" width="100%"
style="height: 100%!important;">
height="100%" >
<video
id="videojs-flvjs-player"
class="video-js vjs-default-skin vjs-big-play-centered"
@ -79,21 +79,10 @@
<!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
</div>
</body>
<script
>
<script>
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
var flvUrl = null
var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
var player = null;
var playUrl = null
flvUrl = getQueryString('videoUrl');
// iframe向vue传递信息
function iframeSendMsg(){
window.parent.postMessage({
@ -108,12 +97,11 @@ flvUrl = getQueryString('videoUrl');
function getVueMsg(event){
const res = event.data;
if(res.cmd == 'myVue'){
// playUrl= res.params.url
// console.log(playUrl,'playUrl',flvUrl,'flvUrl');
console.log(res)
}
};
function triggerByVue(msg){
// console.log(msg)
console.log(msg)
player.play();
}
function initPlayer(){

9
static/flv/videoIndex.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" style="height: 100%!important;">
<html lang="en">
<head>
<meta charset="UTF-8">
@ -45,7 +45,7 @@
}
.videojs-flvjs-player-dimensions {
width: 100%!important;
height: 100%!important;
height: 286px!important;
overflow-x: hidden;
overflow-y: hidden;
}
@ -62,7 +62,7 @@
<body>
<div id="videoContainer" width="100%"
style="height: 100%!important;" >
height="100%" >
<video
id="videojs-flvjs-player"
class="video-js vjs-default-skin vjs-big-play-centered"
@ -82,8 +82,7 @@
</body>
<script>
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
var flvUrl = "";
var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
var player = null;
// iframe向vue传递信息
function iframeSendMsg(){

21
static/flv/videoIndex1.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" style="height: 100%!important;">
<html lang="en">
<head>
<meta charset="UTF-8">
@ -45,7 +45,7 @@
}
.videojs-flvjs-player-dimensions {
width: 100%!important;
height: 100%!important;
height: 750px!important;
overflow-x: hidden;
overflow-y: hidden;
}
@ -62,7 +62,7 @@
<body>
<div id="videoContainer" width="100%"
style="height: 100%!important;" >
height="100%" >
<video
id="videojs-flvjs-player"
class="video-js vjs-default-skin vjs-big-play-centered"
@ -82,15 +82,8 @@
</body>
<script>
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
var flvUrl = "";
var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
var player = null;
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
// iframe向vue传递信息
function iframeSendMsg(){
window.parent.postMessage({
@ -119,7 +112,7 @@ function initPlayer(){
videoContainer.removeChild(pObjs[i]);
}
videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls preload='auto' autoplay=true width='100%' height='100%' data-setup='{}'><source src="+ getQueryString('videoUrl') +" type='video/x-flv'></video>";
videoContainer.innerHTML = "<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' controls preload='auto' autoplay=true width='100%' height='100%' data-setup='{}'><source src="+ flvUrl +" type='video/x-flv'></video>";
player = videojs('videojs-flvjs-player', {
techOrder: ['html5', 'flvjs'],
@ -137,7 +130,7 @@ function initPlayer(){
},
sources: [{
src: getQueryString('videoUrl'),
src: flvUrl,
type: 'video/x-flv'
}],
controls: true,
@ -148,7 +141,7 @@ function initPlayer(){
player.on('error',function(){
console.log('first source load fail')
player.src({
src: getQueryString('videoUrl'),
src: flvUrl,
type: 'video/x-flv'
});
player.ready(function() {

17
static/flv/videoIndex2.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" style="height: 100%!important;">
<html lang="en">
<head>
<meta charset="UTF-8">
@ -47,8 +47,8 @@
}
.videojs-flvjs-player-dimensions {
width: 100% !important;
height: 100% !important;
width: 330px !important;
height: 197px !important;
overflow-x: hidden;
overflow-y: hidden;
}
@ -66,7 +66,7 @@
</head>
<body>
<div id="videoContainer" width="100%" style="height: 100%!important;">
<div id="videoContainer" width="100%" height="100%">
<video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
autoplay=true width="100%" height="100%" data-setup="{}">
@ -77,15 +77,8 @@
</body>
<script>
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
var player = null;
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
var flvUrl = getQueryString('videoUrl');
// iframe向vue传递信息
function iframeSendMsg() {
window.parent.postMessage({

187
static/flv/videoIndex3.html
View File

@ -1,187 +0,0 @@
<!DOCTYPE html>
<html lang="en" style="height: 100%!important;">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频播放软件</title>
<link href="video-js.css" rel="stylesheet" />
<style>
body {
overflow-x: hidden;
overflow-y: hidden;
width: 97%;
height: 100%;
}
.video-js .vjs-big-play-button {
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115, 133, 159, .5);
border-width: 0.15em;
margin-top: -1.25em;
margin-left: -1.75em;
border-radius: 5%;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
.videojs-flvjs-player-dimensions {
width: 100% !important;
height: 100% !important;
overflow-x: hidden;
overflow-y: hidden;
}
/* #videojs-flvjs-player{
width: 100%!important;
height: 100%!important;
} */
</style>
<script src="video.min.js"></script>
<script src="flv.min.js"></script>
<script src="videojs-flvjs.min.js"></script>
</head>
<body>
<div id="videoContainer" width="100%" style="height: 100%!important;">
<video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
autoplay=true muted="muted" width="100%" height="100%" data-setup="{}">
<source src="" type='video/x-flv' />
</video>
<!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
</div>
</body>
<script>
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
var flvUrl = "";
var player = null;
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
// iframe向vue传递信息
function iframeSendMsg() {
window.parent.postMessage({
cmd: 'myIframe',
params: {
info: 'iframe向Vue传递的消息',
}
}, '*');
};
// iframe获取Vue传递过来的信息
window.addEventListener("message", getVueMsg);
function getVueMsg(event) {
const res = event.data;
if (res.cmd == 'myVue') {
console.log(res)
}
};
function triggerByVue(msg) {
console.log(msg)
player.play();
}
function initPlayer() {
var videoContainer = document.getElementById("videoContainer");
var pObjs = videoContainer.childNodes;
for (var i = pObjs.length - 1; i >= 0; i--) {
videoContainer.removeChild(pObjs[i]);
}
videoContainer.innerHTML =
"<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' muted='muted' controls preload='auto' autoplay=true width='100%' height='100%' data-setup='{}'><source src=" +
getQueryString('videoUrl') + " type='video/x-flv'></video>";
player = videojs('videojs-flvjs-player', {
techOrder: ['html5', 'flvjs'],
flvjs: {
mediaDataSource: {
isLive: true,
cors: true,
withCredentials: false,
enableStashBuffer: false,
autoCleanupSourceBuffer: true,
autoCleanupMaxBackwardDuration: 12,
autoCleanupMinBackwardDuration: 60,
stashInitialSize: 128
},
},
sources: [{
src: getQueryString('videoUrl'),
type: 'video/x-flv'
}],
controls: true,
preload: "none"
},
function onPlayerReady() {
player.on('error', function () {
console.log('first source load fail')
player.src({
src: getQueryString('videoUrl'),
type: 'video/x-flv'
});
player.ready(function () {
console.log('player ready')
player.load();
player.play();
});
});
player.on('waiting', function () {
// console.log('stream wainting....');
window.parent.postMessage({
cmd: 'myIframe',
params: {
info: 'iframe向Vue传递的消息',
}
}, '*');
//player.pause();
//player.dispose();
//player = null;
//initPlayer();
});
player.on('ended', function () {
console.log('stream ended....');
player.pause();
player.dispose();
player = null;
initPlayer();
});
});
}
initPlayer();
</script>
</html>

187
static/flv/videoIndex4.html
View File

@ -1,187 +0,0 @@
<!DOCTYPE html>
<html lang="en" style="height: 100%!important;">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频播放软件</title>
<link href="video-js.css" rel="stylesheet" />
<style>
body {
overflow-x: hidden;
overflow-y: hidden;
width: 97%;
height: 100%;
}
.video-js .vjs-big-play-button {
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115, 133, 159, .5);
border-width: 0.15em;
margin-top: -1.25em;
margin-left: -1.75em;
border-radius: 5%;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
.videojs-flvjs-player-dimensions {
width: 100% !important;
height: 100% !important;
overflow-x: hidden;
overflow-y: hidden;
}
/* #videojs-flvjs-player{
width: 100%!important;
height: 100%!important;
} */
</style>
<script src="video.min.js"></script>
<script src="flv.min.js"></script>
<script src="videojs-flvjs.min.js"></script>
</head>
<body>
<div id="videoContainer" width="100%" style="height: 100%!important;">
<video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
autoplay=true muted="muted" width="100%" height="100%" data-setup="{}">
<source src="" type='video/x-flv' />
</video>
<!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
</div>
</body>
<script>
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
var flvUrl = "";
var player = null;
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
// iframe向vue传递信息
function iframeSendMsg() {
window.parent.postMessage({
cmd: 'myIframe',
params: {
info: 'iframe向Vue传递的消息',
}
}, '*');
};
// iframe获取Vue传递过来的信息
window.addEventListener("message", getVueMsg);
function getVueMsg(event) {
const res = event.data;
if (res.cmd == 'myVue') {
console.log(res)
}
};
function triggerByVue(msg) {
console.log(msg)
player.play();
}
function initPlayer() {
var videoContainer = document.getElementById("videoContainer");
var pObjs = videoContainer.childNodes;
for (var i = pObjs.length - 1; i >= 0; i--) {
videoContainer.removeChild(pObjs[i]);
}
videoContainer.innerHTML =
"<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' muted='muted' controls preload='auto' autoplay=true width='100%' height='100%' data-setup='{}'><source src=" +
getQueryString('videoUrl') + " type='video/x-flv'></video>";
player = videojs('videojs-flvjs-player', {
techOrder: ['html5', 'flvjs'],
flvjs: {
mediaDataSource: {
isLive: true,
cors: true,
withCredentials: false,
enableStashBuffer: false,
autoCleanupSourceBuffer: true,
autoCleanupMaxBackwardDuration: 12,
autoCleanupMinBackwardDuration: 60,
stashInitialSize: 128
},
},
sources: [{
src: getQueryString('videoUrl'),
type: 'video/x-flv'
}],
controls: true,
preload: "none"
},
function onPlayerReady() {
player.on('error', function () {
console.log('first source load fail')
player.src({
src: getQueryString('videoUrl'),
type: 'video/x-flv'
});
player.ready(function () {
console.log('player ready')
player.load();
player.play();
});
});
player.on('waiting', function () {
console.log('stream wainting....');
window.parent.postMessage({
cmd: 'myIframe',
params: {
info: 'iframe向Vue传递的消息',
}
}, '*');
//player.pause();
//player.dispose();
//player = null;
//initPlayer();
});
player.on('ended', function () {
console.log('stream ended....');
player.pause();
player.dispose();
player = null;
initPlayer();
});
});
}
initPlayer();
</script>
</html>

193
static/flv/videoIndex5.html
View File

@ -1,193 +0,0 @@
<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频播放软件</title>
<link href="video-js.css" rel="stylesheet" />
<style>
body {
overflow-x: hidden;
overflow-y: hidden;
width: 97%;
height: 100%;
}
#videoContainer{
width: 97%;
height: 100%;
}
.video-js{
height:100%
}
.video-js .vjs-big-play-button {
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115, 133, 159, .5);
border-width: 0.15em;
margin-top: -1.25em;
margin-left: -1.75em;
border-radius: 5%;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
.videojs-flvjs-player-dimensions {
width: 100% !important;
height: 100% !important;
overflow-x: hidden;
overflow-y: hidden;
}
/* #videojs-flvjs-player{
width: 100%!important;
height: 100%!important;
} */
</style>
<script src="video.min.js"></script>
<script src="flv.min.js"></script>
<script src="videojs-flvjs.min.js"></script>
</head>
<body>
<div id="videoContainer" style="height: 100%!important;">
<video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
autoplay=true muted="muted" width="100%" height="100%" data-setup="{}">
<source src="" type='video/x-flv' />
</video>
<!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
</div>
</body>
<script>
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
var flvUrl = "";
var player = null;
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
// iframe向vue传递信息
function iframeSendMsg() {
window.parent.postMessage({
cmd: 'myIframe',
params: {
info: 'iframe向Vue传递的消息',
}
}, '*');
};
// iframe获取Vue传递过来的信息
window.addEventListener("message", getVueMsg);
function getVueMsg(event) {
const res = event.data;
if (res.cmd == 'myVue') {
console.log(res)
}
};
function triggerByVue(msg) {
console.log(msg)
player.play();
}
function initPlayer() {
var videoContainer = document.getElementById("videoContainer");
var pObjs = videoContainer.childNodes;
for (var i = pObjs.length - 1; i >= 0; i--) {
videoContainer.removeChild(pObjs[i]);
}
videoContainer.innerHTML =
"<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' muted='muted' controls preload='auto' autoplay=true width='100%' height='100%' data-setup='{}'><source src=" +
getQueryString('videoUrl') + " type='video/x-flv'></video>";
player = videojs('videojs-flvjs-player', {
techOrder: ['html5', 'flvjs'],
flvjs: {
mediaDataSource: {
isLive: true,
cors: true,
withCredentials: false,
enableStashBuffer: false,
autoCleanupSourceBuffer: true,
autoCleanupMaxBackwardDuration: 12,
autoCleanupMinBackwardDuration: 60,
stashInitialSize: 128
},
},
sources: [{
src: getQueryString('videoUrl'),
type: 'video/x-flv'
}],
controls: true,
preload: "none"
},
function onPlayerReady() {
player.on('error', function () {
console.log('first source load fail')
player.src({
src: getQueryString('videoUrl'),
type: 'video/x-flv'
});
player.ready(function () {
console.log('player ready')
player.load();
player.play();
});
});
player.on('waiting', function () {
console.log('stream wainting....');
window.parent.postMessage({
cmd: 'myIframe',
params: {
info: 'iframe向Vue传递的消息',
}
}, '*');
//player.pause();
//player.dispose();
//player = null;
//initPlayer();
});
player.on('ended', function () {
console.log('stream ended....');
player.pause();
player.dispose();
player = null;
initPlayer();
});
});
}
initPlayer();
</script>
</html>

BIN
static/unity/Build/YtzeWeb.data.unityweb
View File

Binary file not shown.

BIN
static/unity/Build/YtzeWeb.framework.js.unityweb
View File

Binary file not shown.

3
static/unity/Build/YtzeWeb.loader.js
View File

File diff suppressed because one or more lines are too long

BIN
static/unity/Build/YtzeWeb.wasm.unityweb
View File

Binary file not shown.

43
static/unity/StreamingAssets/AddDate.txt Normal file
View File

@ -0,0 +1,43 @@
{
"status": "Success",
"message": "Success",
"data": [{
"DeviceId": "5d0fd080557840308c4f2b8a7972232c",
"Name": "001",
"LeftAndRightTunnel": "Left",
"RelativeDistance": "K3+450",
"Time": "2022-10-27 16:45:51",
"PointData": [ {
"RelativeDistance": "K3+440",
"Time": "2022-10-27 16:38:51"
},
{
"RelativeDistance": "K3+430",
"Time": "2022-10-27 16:40:51"
},{
"RelativeDistance": "K3+420",
"Time": "2022-10-27 16:43:51"
}
]
},
{
"DeviceId": "00a730aa6d37491bb05cd21a0d79b398",
"Name": "002",
"LeftAndRightTunnel": "Right",
"RelativeDistance": "K3+410",
"Time": "2022-10-27 16:45:51",
"PointData": [{
"RelativeDistance": "K3+420",
"Time": "2022-10-27 16:43:51"
},
{
"RelativeDistance": "K3+430",
"Time": "2022-10-27 16:40:51"
}, {
"RelativeDistance": "K3+440",
"Time": "2022-10-27 16:38:51"
}
]
}
]
}

4268
static/unity/StreamingAssets/Config/ComponentDatas.txt Normal file
View File

File diff suppressed because it is too large Load Diff

3
static/unity/StreamingAssets/Config/DateConfig.txt Normal file
View File

@ -0,0 +1,3 @@
startTime=2023/01/01
phaseCount=4
totalDuration=90

66
static/unity/StreamingAssets/Config/GeneralConstructionPlan.txt Normal file
View File

@ -0,0 +1,66 @@
{
"commencement_date":"2023/2/1",
"completion_date":"2023/7/25",
"total_days":"174",
"time_nodes":[
{
"node":"2023/2/01",
"info":"土建_0"
},
{
"node":"2023/2/8",
"info":"土建_1"
},
{
"node":"2023/2/16",
"info":"土建_2"
},
{
"node":"2023/2/24",
"info":"土建_3"
},
{
"node":"2023/3/01",
"info":"土建_4"
},
{
"node":"2023/3/9",
"info":"土建_5"
},
{
"node":"2023/3/17",
"info":"土建_6"
},
{
"node":"2023/3/24",
"info":"土建_7"
},
{
"node":"2023/4/01",
"info":"土建_8"
},
{
"node":"2023/4/09",
"info":"土建_9"
},
{
"node":"2023/4/17",
"info":"土建_10"
},
{
"node":"2023/4/24",
"info":"土建_11"
},
{
"node":"2023/5/01",
"info":"电缆敷设_0"
},
{
"node":"2023/5/08",
"info":"电缆敷设_1"
},
{
"node":"2023/7/25",
"info":"竣工"
}
]}

646
static/unity/StreamingAssets/Config/MyComponentData.txt Normal file
View File

@ -0,0 +1,646 @@
[
{
"id": "1644225456757981186",
"workContent": "土建_0",
"completeStatus": "完成",
"detail": [
{
"componentId": "17e62d0b164e42a396b2aaee817170ba",
"componentType": "拆除护栏",
"componentName": "拆除护栏_0",
"componentTypeCode": "cchl",
"plannedStartDate": "2023-02-01",
"plannedEndDate": "2023-02-07",
"actualCompletionTime": "2023-02-01",
"workStatus": "完成",
"workStatusCode": "ACCOMPLISH",
"positionInfo": "L_0_100",
"isLastProcess": 0
},
{
"componentId": "0fe56a5e85674b4fb276b228a1e5f405",
"componentType": "预制硂",
"componentName": "预制硂_0",
"componentTypeCode": "yzt",
"plannedStartDate": "2023-02-01",
"plannedEndDate": "2023-02-07",
"actualCompletionTime": "2023-02-02",
"workStatus": "完成",
"workStatusCode": "ACCOMPLISH",
"positionInfo": "L_0_100",
"isLastProcess": 0
},
{
"componentId": "636c42fe8f0d4998bd6b511d3513a198",
"componentType": "电缆架桥",
"componentName": "电缆架桥_0",
"componentTypeCode": "dljq",
"plannedStartDate": "2023-02-01",
"plannedEndDate": "2023-02-07",
"actualCompletionTime": "2023-02-06",
"workStatus": "完成",
"workStatusCode": "ACCOMPLISH",
"positionInfo": "L_0_100",
"isLastProcess": 1
}
]
},
{
"id": "1644225456825090049",
"workContent": "土建_1",
"completeStatus": "完成",
"detail": [
{
"componentId": "6ed83243d6524f7b9be6f46163066963",
"componentType": "拆除护栏",
"componentName": "拆除护栏_1",
"componentTypeCode": "cchl",
"plannedStartDate": "2023-02-08",
"plannedEndDate": "2023-02-15",
"actualCompletionTime": "2023-02-09",
"workStatus": "完成",
"workStatusCode": "ACCOMPLISH",
"positionInfo": "L_1_100",
"isLastProcess": 0
},
{
"componentId": "1751611703ee4d3da598309cd6c612ca",
"componentType": "预制硂",
"componentName": "预制硂_1",
"componentTypeCode": "yzt",
"plannedStartDate": "2023-02-08",
"plannedEndDate": "2023-02-15",
"actualCompletionTime": "2023-02-10",
"workStatus": "完成",
"workStatusCode": "ACCOMPLISH",
"positionInfo": "L_1_100",
"isLastProcess": 0
},
{
"componentId": "579c9a90503f4ac3a88328190b7825c9",
"componentType": "电缆架桥",
"componentName": "电缆架桥_1",
"componentTypeCode": "dljq",
"plannedStartDate": "2023-02-08",
"plannedEndDate": "2023-02-15",
"actualCompletionTime": "2023-02-15",
"workStatus": "完成",
"workStatusCode": "ACCOMPLISH",
"positionInfo": "L_1_100",
"isLastProcess": 1
}
]
},
{
"id": "1644225456888004609",
"workContent": "土建_2",
"completeStatus": "延期完成",
"detail": [
{
"componentId": "5b311eac10494e60a0c8e17669a9b535",
"componentType": "拆除护栏",
"componentName": "拆除护栏_2",
"componentTypeCode": "cchl",
"plannedStartDate": "2023-02-16",
"plannedEndDate": "2023-02-23",
"actualCompletionTime": "2023-02-16",
"workStatus": "完成",
"workStatusCode": "ACCOMPLISH",
"positionInfo": "L_2_100",
"isLastProcess": 0
},
{
"componentId": "2a32b299250a44d9b5c989fea0a2e4db",
"componentType": "预制硂",
"componentName": "预制硂_2",
"componentTypeCode": "yzt",
"plannedStartDate": "2023-02-16",
"plannedEndDate": "2023-02-23",
"actualCompletionTime": "2023-02-20",
"workStatus": "完成",
"workStatusCode": "ACCOMPLISH",
"positionInfo": "L_2_100",
"isLastProcess": 0
},
{
"componentId": "0a75583dff6d494393c5af0558a5fd44",
"componentType": "电缆架桥",
"componentName": "电缆架桥_2",
"componentTypeCode": "dljq",
"plannedStartDate": "2023-02-16",
"plannedEndDate": "2023-02-23",
"actualCompletionTime": "2023-02-25",
"workStatus": "延期完成",
"workStatusCode": "COMPLETE_DELAY",
"positionInfo": "L_2_100",
"isLastProcess": 1
}
]
},
{
"id": "1644225456959307778",
"workContent": "土建_3",
"completeStatus": "进行中",
"detail": [
{
"componentId": "e16cbdd80bc34d299c9cc9b59332af3a",
"componentType": "拆除护栏",
"componentName": "拆除护栏_3",
"componentTypeCode": "cchl",
"plannedStartDate": "2023-02-24",
"plannedEndDate": "2023-02-28",
"actualCompletionTime": "2023-02-18",
"workStatus": "提前完成",
"workStatusCode": "COMPLETE_AHEAD",
"positionInfo": "L_3_100",
"isLastProcess": 0
},
{
"componentId": "24d16c360f324c0bbac89503fcf4435b",
"componentType": "预制硂",
"componentName": "预制硂_3",
"componentTypeCode": "yzt",
"plannedStartDate": "2023-02-24",
"plannedEndDate": "2023-02-28",
"actualCompletionTime": "2023-02-25",
"workStatus": "完成",
"workStatusCode": "ACCOMPLISH",
"positionInfo": "L_3_100",
"isLastProcess": 0
},
{
"componentId": "5d7c56a5b6cf462e9a117ba7970016ed",
"componentType": "电缆架桥",
"componentName": "电缆架桥_3",
"componentTypeCode": "dljq",
"plannedStartDate": "2023-02-24",
"plannedEndDate": "2023-02-28",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_3_100",
"isLastProcess": 1
}
]
},
{
"id": "1644225457034805250",
"workContent": "土建_4",
"completeStatus": "进行中",
"detail": [
{
"componentId": "a97c2d358d69457c90f67efc2aa0d12f",
"componentType": "拆除护栏",
"componentName": "拆除护栏_4",
"componentTypeCode": "cchl",
"plannedStartDate": "2023-03-01",
"plannedEndDate": "2023-03-08",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_4_100",
"isLastProcess": 0
},
{
"componentId": "41cefeccf0ca47ec8e4a552c910ab2ef",
"componentType": "预制硂",
"componentName": "预制硂_4",
"componentTypeCode": "yzt",
"plannedStartDate": "2023-03-01",
"plannedEndDate": "2023-03-08",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_4_100",
"isLastProcess": 0
},
{
"componentId": "c617a3b8fa6443d0aeb2490c576db72a",
"componentType": "电缆架桥",
"componentName": "电缆架桥_4",
"componentTypeCode": "dljq",
"plannedStartDate": "2023-03-01",
"plannedEndDate": "2023-03-08",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_4_100",
"isLastProcess": 1
}
]
},
{
"id": "1644225457127079937",
"workContent": "土建_5",
"completeStatus": "进行中",
"detail": [
{
"componentId": "3bb814d6495c493784d21fbc13266b2f",
"componentType": "拆除护栏",
"componentName": "拆除护栏_5",
"componentTypeCode": "cchl",
"plannedStartDate": "2023-03-09",
"plannedEndDate": "2023-03-16",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_5_100",
"isLastProcess": 0
},
{
"componentId": "2b553b260f3c4158bdaee4f66eaf2d96",
"componentType": "预制硂",
"componentName": "预制硂_5",
"componentTypeCode": "yzt",
"plannedStartDate": "2023-03-09",
"plannedEndDate": "2023-03-16",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_5_100",
"isLastProcess": 0
},
{
"componentId": "d1626986b656443a83b9030b275c6dac",
"componentType": "电缆架桥",
"componentName": "电缆架桥_5",
"componentTypeCode": "dljq",
"plannedStartDate": "2023-03-09",
"plannedEndDate": "2023-03-16",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_5_100",
"isLastProcess": 1
}
]
},
{
"id": "1644225457210966017",
"workContent": "土建_6",
"completeStatus": "进行中",
"detail": [
{
"componentId": "88c143c5ba3043cba6ae433f27f4d57f",
"componentType": "拆除护栏",
"componentName": "拆除护栏_6",
"componentTypeCode": "cchl",
"plannedStartDate": "2023-03-17",
"plannedEndDate": "2023-03-23",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_6_100",
"isLastProcess": 0
},
{
"componentId": "b58d3002322c43ed83151c5cdd15996c",
"componentType": "预制硂",
"componentName": "预制硂_6",
"componentTypeCode": "yzt",
"plannedStartDate": "2023-03-17",
"plannedEndDate": "2023-03-23",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_6_100",
"isLastProcess": 0
},
{
"componentId": "4a551c80472d4b0daa4016c7573013e5",
"componentType": "电缆架桥",
"componentName": "电缆架桥_6",
"componentTypeCode": "dljq",
"plannedStartDate": "2023-03-17",
"plannedEndDate": "2023-03-23",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_6_100",
"isLastProcess": 1
}
]
},
{
"id": "1644225457286463489",
"workContent": "土建_7",
"completeStatus": "进行中",
"detail": [
{
"componentId": "6b984e092d2448c5a9993ca487793921",
"componentType": "拆除护栏",
"componentName": "拆除护栏_7",
"componentTypeCode": "cchl",
"plannedStartDate": "2023-03-24",
"plannedEndDate": "2023-03-30",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_7_100",
"isLastProcess": 0
},
{
"componentId": "c076599492c840bb872b6b814b0fd004",
"componentType": "预制硂",
"componentName": "预制硂_7",
"componentTypeCode": "yzt",
"plannedStartDate": "2023-03-24",
"plannedEndDate": "2023-03-30",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_7_100",
"isLastProcess": 0
},
{
"componentId": "9dcdc45b218b4d8098d98914c6630391",
"componentType": "电缆架桥",
"componentName": "电缆架桥_7",
"componentTypeCode": "dljq",
"plannedStartDate": "2023-03-24",
"plannedEndDate": "2023-03-30",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_7_100",
"isLastProcess": 1
}
]
},
{
"id": "1644225457357766658",
"workContent": "土建_8",
"completeStatus": "进行中",
"detail": [
{
"componentId": "95d59d46c154417187cb4434079c1c7f",
"componentType": "拆除护栏",
"componentName": "拆除护栏_8",
"componentTypeCode": "cchl",
"plannedStartDate": "2023-04-01",
"plannedEndDate": "2023-04-08",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_8_100",
"isLastProcess": 0
},
{
"componentId": "7609a56e5bd84cbfafe0b6026523a806",
"componentType": "预制硂",
"componentName": "预制硂_8",
"componentTypeCode": "yzt",
"plannedStartDate": "2023-04-01",
"plannedEndDate": "2023-04-08",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_8_100",
"isLastProcess": 0
},
{
"componentId": "22da43d9fc8044bbb4cab9d35f109292",
"componentType": "电缆架桥",
"componentName": "电缆架桥_8",
"componentTypeCode": "dljq",
"plannedStartDate": "2023-04-01",
"plannedEndDate": "2023-04-08",
"actualCompletionTime": "",
"workStatus": "进行中",
"workStatusCode": "PROGRESS",
"positionInfo": "L_8_100",
"isLastProcess": 1
}
]
},
{
"id": "1644225457420681218",
"workContent": "土建_9",
"completeStatus": "未开始",
"detail": [
{
"componentId": "c0fcbc96eabf4018a64593af07f8e421",
"componentType": "拆除护栏",
"componentName": "拆除护栏_9",
"componentTypeCode": "cchl",
"plannedStartDate": "2023-04-09",
"plannedEndDate": "2023-04-16",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_9_100",
"isLastProcess": 0
},
{
"componentId": "396dced933bf4a41a76256f1677b72f1",
"componentType": "预制硂",
"componentName": "预制硂_9",
"componentTypeCode": "yzt",
"plannedStartDate": "2023-04-09",
"plannedEndDate": "2023-04-16",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_9_100",
"isLastProcess": 0
},
{
"componentId": "ca90c040fdbd4a9dad7a196d762f56cc",
"componentType": "电缆架桥",
"componentName": "电缆架桥_9",
"componentTypeCode": "dljq",
"plannedStartDate": "2023-04-09",
"plannedEndDate": "2023-04-16",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_9_100",
"isLastProcess": 1
}
]
},
{
"id": "1644225457487790081",
"workContent": "土建_10",
"completeStatus": "未开始",
"detail": [
{
"componentId": "485dfbf53a4b4ad19cc51d7ed7cb5687",
"componentType": "拆除护栏",
"componentName": "拆除护栏_10",
"componentTypeCode": "cchl",
"plannedStartDate": "2023-04-17",
"plannedEndDate": "2023-04-23",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_10_100",
"isLastProcess": 0
},
{
"componentId": "ff51914e5e9243d59144747a723b2410",
"componentType": "预制硂",
"componentName": "预制硂_10",
"componentTypeCode": "yzt",
"plannedStartDate": "2023-04-17",
"plannedEndDate": "2023-04-23",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_10_100",
"isLastProcess": 0
},
{
"componentId": "2be6428dbc7442b9a7f032a369f15314",
"componentType": "电缆架桥",
"componentName": "电缆架桥_10",
"componentTypeCode": "dljq",
"plannedStartDate": "2023-04-17",
"plannedEndDate": "2023-04-23",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_10_100",
"isLastProcess": 1
}
]
},
{
"id": "1644225457571676161",
"workContent": "土建_11",
"completeStatus": "未开始",
"detail": [
{
"componentId": "5135fa666dad422d9cc14c7838f22919",
"componentType": "拆除护栏",
"componentName": "拆除护栏_11",
"componentTypeCode": "cchl",
"plannedStartDate": "2023-04-24",
"plannedEndDate": "2023-04-30",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_11_100",
"isLastProcess": 0
},
{
"componentId": "0362257709504d769875e93cf500dd07",
"componentType": "预制硂",
"componentName": "预制硂_11",
"componentTypeCode": "yzt",
"plannedStartDate": "2023-04-24",
"plannedEndDate": "2023-04-30",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_11_100",
"isLastProcess": 0
},
{
"componentId": "499567d5dd9d4bedaff32e77c44c0737",
"componentType": "电缆架桥",
"componentName": "电缆架桥_11",
"componentTypeCode": "dljq",
"plannedStartDate": "2023-04-24",
"plannedEndDate": "2023-04-30",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_11_100",
"isLastProcess": 1
}
]
},
{
"id": "1644225457642979329",
"workContent": "电缆敷设_0",
"completeStatus": "未开始",
"detail": [
{
"componentId": "724dbab057f14b378ccf4433701bdd88",
"componentType": "电缆敷设",
"componentName": "电缆敷设_0",
"componentTypeCode": "dlfs",
"plannedStartDate": "2023-05-01",
"plannedEndDate": "2023-05-07",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_0_900",
"isLastProcess": 0
},
{
"componentId": "1b5ea1049ee545e68dcee28f484ae4c8",
"componentType": "电缆盖板",
"componentName": "电缆盖板_0",
"componentTypeCode": "dlgb",
"plannedStartDate": "2023-05-01",
"plannedEndDate": "2023-05-07",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_0_900",
"isLastProcess": 0
},
{
"componentId": "6b51c8f5b5834b0887074f54ddd6767f",
"componentType": "恢复护栏",
"componentName": "恢复护栏_0",
"componentTypeCode": "hfhl",
"plannedStartDate": "2023-05-01",
"plannedEndDate": "2023-05-07",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_0_900",
"isLastProcess": 1
}
]
},
{
"id": "1644225457705893889",
"workContent": "电缆敷设_1",
"completeStatus": "未开始",
"detail": [
{
"componentId": "bee0f074d11d476d907f55dc9ce93e68",
"componentType": "电缆敷设",
"componentName": "电缆敷设_1",
"componentTypeCode": "dlfs",
"plannedStartDate": "2023-05-08",
"plannedEndDate": "2023-05-15",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_1_900",
"isLastProcess": 0
},
{
"componentId": "73b87f88ce494fdfbc9ef86298a9ebb9",
"componentType": "电缆盖板",
"componentName": "电缆盖板_1",
"componentTypeCode": "dlgb",
"plannedStartDate": "2023-05-08",
"plannedEndDate": "2023-05-15",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_1_900",
"isLastProcess": 0
},
{
"componentId": "e167458070dd420f99e73442ccbf3741",
"componentType": "恢复护栏",
"componentName": "恢复护栏_1",
"componentTypeCode": "hfhl",
"plannedStartDate": "2023-05-08",
"plannedEndDate": "2023-05-15",
"actualCompletionTime": "",
"workStatus": "未开始",
"workStatusCode": "NOT_START",
"positionInfo": "L_1_900",
"isLastProcess": 1
}
]
}
]

32
static/unity/StreamingAssets/Config/PersonnelData.txt Normal file
View File

@ -0,0 +1,32 @@
[
{
"id":"role001",
"name":"赵一",
"job":"项目经理",
"present":true
},
{
"id":"role002",
"name":"钱二",
"job":"土建施工",
"present":true
},
{
"id":"role003",
"name":"孙三",
"job":"土建施工",
"present":true
},
{
"id":"role004",
"name":"李四",
"job":"电路施工",
"present":false
},
{
"id":"role005",
"name":"周五",
"job":"电路施工",
"present":true
}
]

107
static/unity/StreamingAssets/Config/可视化初始化接口数据.json Normal file
View File

@ -0,0 +1,107 @@
{
"code": 200,
"data": [
{
"wareHouseCode": "HA1",
"materialCategoryMedium": "G1003",
"materialCategorySmall": "G1003001",
"containerList": [{
"materialList": [{
"materialCode": "500000012"
},
{
"materialCode": "500000013"
},
{
"materialCode": "500000013"
}
],
"containerCode": "HA1-C00004"
}],
"position": "B01-010202",
"materialCategory": "G10"
},
{
"wareHouseCode": "HA1",
"materialCategoryMedium": "G1003",
"materialCategorySmall": "G1003001",
"pallet": {
"containerList": [{
"materialList": [{
"materialCode": "500000001"
},
{
"materialCode": "500000013"
},
{
"materialCode": "500000050"
}
],
"containerCode": "HA1-C00004"
},
{
"materialList": [{
"materialCode": "500000012"
},
{
"materialCode": "500000012"
},
{
"materialCode": "500000012"
},
{
"materialCode": "500000013"
},
{
"materialCode": "500000013"
},
{
"materialCode": "500000013"
}
],
"containerCode": "HA1-Z00001"
},
{
"materialList": [{
"materialCode": "500000012"
}],
"containerCode": "HA1-C00004"
}
],
"materialList": [{
"materialCode": "500000035"
}],
"palletNumber": "HA1-T00002"
},
"position": "B01-080103",
"materialCategory": "G10"
},
{
"wareHouseCode": "HA1",
"materialCategoryMedium": "G1504",
"materialCategorySmall": "G1504001",
"pallet": {
"materialList": [{
"materialCode": "500000001"
},
{
"materialCode": "550000002"
}
],
"palletNumber": "HA1-T00001"
},
"position": "C01-080101",
"materialCategory": "G15"
},
{
"wareHouseCode": "HA1",
"materialCategoryMedium": "G1504",
"materialCategorySmall": "G1504001",
"materialList": [{
"materialCode": "500000001"
}],
"position": "F01-010101",
"materialCategory": "G15"
}
]
}

50
static/unity/StreamingAssets/GetNormalInspection.txt Normal file
View File

@ -0,0 +1,50 @@
{
"code": 200,
"success": true,
"data": [{
"id": "1696424468583342081 ",
"user": "张三",
"startTime": "2023-08-29 15:28:06",
"endTime": "2023-08-30 09:59:42",
"locationHistoryTos": [{
"id": "1643796779071094785",
"posx": "15.23",
"posy": "0",
"posz": "0",
"locationId": "1633761781324627974",
"time": "2023-04-11 14:04:03",
"inspectionProblemsId": "7934540476122288021"
}]
},
{
"id": "1696424468583342873 ",
"user": "李四",
"startTime": "2023-08-29 15:28:06",
"endTime": "2023-08-30 09:59:42",
"locationHistoryTos": [{
"id": "1643796779071094785",
"posx": "15.23",
"posy": "0",
"posz": "0",
"locationId": "1633761781324627974",
"time": "2023-04-11 14:04:03",
"inspectionProblemsId": "7934540476122288021"
}]
},
{
"id": "1696424468583342666 ",
"user": "王五",
"startTime": "2023-08-29 15:28:06",
"endTime": "2023-08-30 09:59:42",
"locationHistoryTos": [{
"id": "1643796779071094785",
"posx": "15.23",
"posy": "0",
"posz": "0",
"locationId": "1633761781324627974",
"time": "2023-04-11 14:04:03",
"inspectionProblemsId": "7934540476122288021"
}]
}
]
}

BIN
static/unity/StreamingAssets/R-C.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

1
static/unity/StreamingAssets/UnityServicesProjectConfiguration.json Normal file
View File

@ -0,0 +1 @@
{"Keys":["com.unity.services.core.version"],"Values":[{"m_Value":"1.3.1","m_IsReadOnly":true}]}

BIN
static/unity/TemplateData/block.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/unity/TemplateData/block1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

BIN
static/unity/TemplateData/block2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 199 KiB

BIN
static/unity/TemplateData/leng.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 MiB

BIN
static/unity/TemplateData/webgl-logo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

68
static/unity/index.html
View File

@ -190,12 +190,9 @@
function getMaxVideoUrl(data) {
var name = ''
var url = ''
var noticeId = ''
name = data.split(",")[0]
url = data.split(",")[1]
noticeId = data.split(",")[2]
videoStatus = data.split(",")[3]
window.parent.gantDialog1(name, url,noticeId,videoStatus);
window.parent.gantDialog1(name,url);
}
function closeMaxVideo(data) {
window.parent.closeMaxVideo();
@ -239,23 +236,15 @@
}
// 关闭质量管控的常规巡检
function closeRoutineTourLog() {
window.parent.closeRoutineTourLog()
}
//报警视频弹窗打开
function SiteSafetyAlarm(val) {
console.log(val,'报警弹窗');
var data01 = ''
var data02 = ''
data01 = val.split(",")[0]
data02 = val.split(",")[1]
window.parent.SiteSafetyAlarm(data01.split("(")[1], data02.split(")")[0], val.split(",")[2],val.split(",")[3],val.split(",")[4])
}
//报警视频弹窗关闭
function clearSecurityAlarm(params) {
console.log(params,'报警视频关闭');
if (unity != null) {
unity.SendMessage("GameManager", 'ClearSecurityAlarm', params);
}
window.parent.SiteSafetyAlarm(data01.split("(")[1], data02.split(")")[0], val.split(",")[2])
}
//报警视频弹窗关闭
function CloseSiteSafetyAlarm() {
@ -263,74 +252,39 @@
}
//环境传感器环境监测数据实时推送
function webSocketEnvironmentData(val) {
// console.log(val, '环境监测数据');
console.log(val,'环境监测数据');
if (unity != null) {
unity.SendMessage("GameManager", 'WebSocketEnvironmentData', val);
}
}
//人员定位数据实时推送
function webSocketLocationData(val) {
console.log(val, '人员定位数据');
function WebSocketLocationData(val) {
console.log(val,'人员定位数据');
if (unity != null) {
unity.SendMessage("GameManager", 'WebSocketLocationData', val);
}
}
//人员考勤实时推送
function webSocketAttendanceView(val) {
console.log(val, '人员考勤数据');
console.log(val,'人员考勤数据');
if (unity != null) {
unity.SendMessage("GameManager", 'WebSocketAttendanceView', val);
}
}
//安全帽定位数据实时推送
function webSocketEquipmentStatus(val) {
console.log(val, '安全帽数据');
console.log(val,'安全帽数据');
if (unity != null) {
unity.SendMessage("GameManager", 'WebSocketEquipmentStatus', val);
}
}
//当工地安全告警事件实时推送
function webSocketMonitoringAlarm(val) {
console.log(val, '工地安全告警数据');
if (unity != null) {
unity.SendMessage("GameManager", 'WebSocketMonitoringAlarm', val);
}
}
//安全帽定位推送
function webSocketSafetyHat(val) {
console.log(val, '安全帽定位推送');
if (unity != null) {
unity.SendMessage("GameManager", 'WebSocketSafetyHat', val);
}
}
//当日环境告警事件实时推送
function webSocketEnvironmentAlarm(val) {
console.log(val, '当日环境告警数据');
function webSocketEenvironmentAlarm(val) {
console.log(val,'当日环境告警数据');
if (unity != null) {
unity.SendMessage("GameManager", 'WebSocketEnvironmentAlarm', val);
unity.SendMessage("GameManager", 'WebSocketEenvironmentAlarm', val);
}
}
//安全帽视频
function getSmartHelmetVideoUrl(val) {
var data01 = ''
var data02 = ''
data01 = val.split(",")[0]
data02 = val.split(",")[1]
window.parent.getSmartHelmetVideoUrl(data01.split("(")[1], data02.split(")")[0], val.split(",")[2], val.split(",")[3])
}
function closeSmartHelmetVideoUrl() {
window.parent.closeSmartHelmetVideoUrl()
}
function successfulBroadcast(params) {
console.log(params,'现场播报数据');
if (unity != null) {
unity.SendMessage("GameManager", 'SuccessfulBroadcast', params);
}
}
//点击点位播放对应视频进度
function getVideoProgress(params) {
window.parent.getVideoProgress(params)
}
//设备状态实时推送
document.body.appendChild(script);
</script>

2
vue.config.js
View File

@ -51,7 +51,7 @@ module.exports = {
proxy: {
'/api': { //代理的名字
// target: 'http://175.27.191.156:11000/api/',
target: 'http://192.168.131.101/12345/',
target: 'http://175.27.191.156:8181/',
// target: 'http://172.16.1.178:5001/',
// target: 'http://ht.api.umayle.com:2022',
ws: true,