Merge branch 'hi-ucs-dev' of http://192.168.124.50:3000/wuhongjian/hi-ucs into hi-ucs-dev
|
@ -1,11 +1,13 @@
|
||||||
back/dist-西海岸-后台管理.zip
|
back/dist-西海岸-后台管理.zip
|
||||||
back/public/index.html
|
back/public/index.html
|
||||||
|
back/node_modules
|
||||||
back/dist-西海岸-后台管理-带配置文件.zip
|
back/dist-西海岸-后台管理-带配置文件.zip
|
||||||
back/dist-市局-后台管理-带配置文件.zip
|
back/dist-市局-后台管理-带配置文件.zip
|
||||||
back/dist-包头-后台管理.zip
|
back/dist-包头-后台管理.zip
|
||||||
back/dist-市局-后台管理.zip
|
back/dist-市局-后台管理.zip
|
||||||
back/dist-市局-后台管理-v0.8.2.1.zip
|
back/dist-市局-后台管理-v0.8.2.1.zip
|
||||||
front/public/index.html
|
front/public/index.html
|
||||||
|
front/node_modules
|
||||||
back/dist-西海岸-后台管理-v0.8.2.1.zip
|
back/dist-西海岸-后台管理-v0.8.2.1.zip
|
||||||
back/dist-市局-后台管理-v0.8.2.3.zip
|
back/dist-市局-后台管理-v0.8.2.3.zip
|
||||||
back/dist-西海岸-后台管理-v0.8.2.4.d.zip
|
back/dist-西海岸-后台管理-v0.8.2.4.d.zip
|
||||||
|
|
|
@ -4,7 +4,7 @@ dist
|
||||||
package-lock.json
|
package-lock.json
|
||||||
yarn.lock
|
yarn.lock
|
||||||
*.zip
|
*.zip
|
||||||
|
/node_modules
|
||||||
# local env files
|
# local env files
|
||||||
.env.local
|
.env.local
|
||||||
.env.*.local
|
.env.*.local
|
||||||
|
|
After Width: | Height: | Size: 536 KiB |
After Width: | Height: | Size: 176 KiB |
After Width: | Height: | Size: 2.0 KiB |
|
@ -2,7 +2,7 @@
|
||||||
* @Author: hisense.wuhongjian
|
* @Author: hisense.wuhongjian
|
||||||
* @Date: 2020-07-07 16:03:23
|
* @Date: 2020-07-07 16:03:23
|
||||||
* @LastEditors: hisense.wuhongjian
|
* @LastEditors: hisense.wuhongjian
|
||||||
* @LastEditTime: 2022-11-24 19:38:36
|
* @LastEditTime: 2022-11-27 23:42:04
|
||||||
* @Description: 系统静态参数配置
|
* @Description: 系统静态参数配置
|
||||||
*/
|
*/
|
||||||
var _global = {}
|
var _global = {}
|
||||||
|
|
|
@ -2,490 +2,536 @@
|
||||||
* @Author: hisense.wuhongjian
|
* @Author: hisense.wuhongjian
|
||||||
* @Date: 2020-07-07 16:03:23
|
* @Date: 2020-07-07 16:03:23
|
||||||
* @LastEditors: hisense.wuhongjian
|
* @LastEditors: hisense.wuhongjian
|
||||||
* @LastEditTime: 2022-10-13 20:53:24
|
* @LastEditTime: 2022-11-26 18:40:08
|
||||||
* @Description: 数据资源参数配置
|
* @Description: 数据资源参数配置
|
||||||
*/
|
*/
|
||||||
// eslint-disable-next-line no-undef
|
// eslint-disable-next-line no-undef
|
||||||
const newLocation = CONFIGITEM.version
|
const newLocation = CONFIGITEM.version
|
||||||
// const newLocation = 'baotou'
|
// const newLocation = 'baotou'
|
||||||
// const newLocation = 'xihaian'
|
// const newLocation = 'xihaian'
|
||||||
|
|
||||||
// 数据资源数据
|
// 数据资源数据
|
||||||
const whoShow = {}
|
const whoShow = {}
|
||||||
const launchedDataNumObject = {}
|
const launchedDataNumObject = {}
|
||||||
// 导航数据
|
// 导航数据
|
||||||
const navListManagement = {}
|
const navListManagement = {}
|
||||||
// 无人机单兵数据
|
// 无人机单兵数据
|
||||||
const uavAndIndividualSoldier = {}
|
const uavAndIndividualSoldier = {}
|
||||||
// 基础设施
|
// 基础设施
|
||||||
const infrastructure = {}
|
const infrastructure = {}
|
||||||
// 区市站点数据
|
// 区市站点数据
|
||||||
const mapTestNum = {}
|
const mapTestNum = {}
|
||||||
// 底部数据
|
// 底部数据
|
||||||
const footerDataList = {}
|
const footerDataList = {}
|
||||||
// 西海岸--特殊用户
|
// 西海岸--特殊用户
|
||||||
const xhaHasPermissionUser = {}
|
const xhaHasPermissionUser = {}
|
||||||
// qingdao
|
// qingdao
|
||||||
if (newLocation !== 'baotou' && newLocation !== 'xihaian') {
|
if (newLocation !== 'baotou' && newLocation !== 'xihaian') {
|
||||||
whoShow.itShowQingDao = true
|
whoShow.itShowQingDao = true
|
||||||
infrastructure.deptName = '青岛市大数据发展管理局'
|
infrastructure.deptName = '青岛市大数据发展管理局'
|
||||||
infrastructure.deptId = '1067246875800000066'
|
infrastructure.deptId = '1067246875800000066'
|
||||||
navListManagement.navList = [
|
navListManagement.navList = [
|
||||||
{ name: '共享门户', key: 'home' },
|
{ name: '共享门户', key: 'home' },
|
||||||
{ name: '能力集市', key: 'DetailsPageconetent', innerKey: 'algorithmCompare' },
|
{
|
||||||
// { name: '能力云图', key: 'capabilityCloud' },
|
name: '能力集市',
|
||||||
{ name: '能力统计', key: 'abilityStatistics' },
|
key: 'DetailsPageconetent',
|
||||||
// { name: '开发指南', key: 'developmentGuide' },
|
innerKey: 'algorithmCompare',
|
||||||
{ name: '新手指南', key: 'instructionManual' },
|
},
|
||||||
{ name: '需求中心', key: 'demandCenter' },
|
{ name: '能力云图', key: 'capabilityCloud' },
|
||||||
// { name: '个人中心', key: 'personalCenter' },
|
{ name: '能力统计', key: 'abilityStatistics' },
|
||||||
// { name: '区市站点', key: 'mapTest' },
|
// { name: '开发指南', key: 'developmentGuide' },
|
||||||
// { name: '后台管理', key: 'houtaiguanli' },
|
{ name: '新手指南', key: 'instructionManual' },
|
||||||
// { name: '典型赋能案例', key: 'assignCase' },
|
{ name: '需求中心', key: 'demandCenter' },
|
||||||
{ name: '融合服务', key: 'integrationServices' },
|
// { name: '个人中心', key: 'personalCenter' },
|
||||||
{ name: 'CIM专区', key: 'cimSpecialArea' },
|
// { name: '区市站点', key: 'mapTest' },
|
||||||
]
|
// { name: '后台管理', key: 'houtaiguanli' },
|
||||||
footerDataList.footerList = {
|
// { name: '典型赋能案例', key: 'assignCase' },
|
||||||
company: {
|
{ name: '融合服务', key: 'integrationServices' },
|
||||||
left: '青岛市大数据发展管理局',
|
{ name: 'CIM专区', key: 'cimSpecialArea' },
|
||||||
right: '政府标识码3702000106',
|
]
|
||||||
},
|
footerDataList.footerList = {
|
||||||
address: [{
|
company: {
|
||||||
name: '邮编: 266071',
|
left: '青岛市大数据发展管理局',
|
||||||
value: 'Email: QDDSJJ@qingdao.shandong.cn',
|
right: '政府标识码3702000106',
|
||||||
},
|
},
|
||||||
{
|
address: [
|
||||||
name: '版权所有:青岛市大数据发展管理局',
|
{
|
||||||
value: '地址:山东省青岛市香港中路17号市级机关三号办公楼',
|
name: '邮编: 266071',
|
||||||
},
|
value: 'Email: QDDSJJ@qingdao.shandong.cn',
|
||||||
{
|
},
|
||||||
name: '电话:0532-85912587',
|
{
|
||||||
value: '传真:0532-85912181',
|
name: '版权所有:青岛市大数据发展管理局',
|
||||||
},
|
value: '地址:山东省青岛市香港中路17号市级机关三号办公楼',
|
||||||
],
|
},
|
||||||
}
|
{
|
||||||
mapTestNum.lsNum = [{
|
name: '电话:0532-85912587',
|
||||||
name: '基础设施',
|
value: '传真:0532-85912181',
|
||||||
key: 'lsjcss',
|
},
|
||||||
num: '20135个',
|
],
|
||||||
},
|
}
|
||||||
{
|
mapTestNum.lsNum = [
|
||||||
name: '数据资源',
|
{
|
||||||
key: 'lsjcss',
|
name: '基础设施',
|
||||||
num: '857项',
|
key: 'lsjcss',
|
||||||
},
|
num: '20135个',
|
||||||
{
|
},
|
||||||
name: '应用资源',
|
{
|
||||||
key: 'lsjcss',
|
name: '数据资源',
|
||||||
num: '28个',
|
key: 'lsjcss',
|
||||||
},
|
num: '857项',
|
||||||
]
|
},
|
||||||
mapTestNum.xhaNum = [{
|
{
|
||||||
name: '基础设施',
|
name: '应用资源',
|
||||||
key: 'xhajcss',
|
key: 'lsjcss',
|
||||||
num: '35282个',
|
num: '28个',
|
||||||
},
|
},
|
||||||
{
|
]
|
||||||
name: '数据资源',
|
mapTestNum.xhaNum = [
|
||||||
key: 'xhajcss',
|
{
|
||||||
num: '11项',
|
name: '基础设施',
|
||||||
},
|
key: 'xhajcss',
|
||||||
{
|
num: '35282个',
|
||||||
name: '应用资源',
|
},
|
||||||
key: 'xhajcss',
|
{
|
||||||
num: '23个',
|
name: '数据资源',
|
||||||
},
|
key: 'xhajcss',
|
||||||
{
|
num: '11项',
|
||||||
name: '组件服务',
|
},
|
||||||
key: 'xhazjfw',
|
{
|
||||||
num: '8个',
|
name: '应用资源',
|
||||||
},
|
key: 'xhajcss',
|
||||||
]
|
num: '23个',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '组件服务',
|
||||||
|
key: 'xhazjfw',
|
||||||
|
num: '8个',
|
||||||
|
},
|
||||||
|
]
|
||||||
}
|
}
|
||||||
// baotou
|
// baotou
|
||||||
else if (newLocation === 'baotou') {
|
else if (newLocation === 'baotou') {
|
||||||
whoShow.itShowBaoTou = true
|
whoShow.itShowBaoTou = true
|
||||||
launchedDataNumObject.launchedDataNum = [{
|
launchedDataNumObject.launchedDataNum = [
|
||||||
num: 10372,
|
{
|
||||||
},
|
num: 10372,
|
||||||
{
|
},
|
||||||
num: 1080,
|
{
|
||||||
},
|
num: 1080,
|
||||||
{
|
},
|
||||||
num: 976,
|
{
|
||||||
},
|
num: 976,
|
||||||
]
|
},
|
||||||
navListManagement.navList = [
|
]
|
||||||
{ name: '共享门户', key: 'home' },
|
navListManagement.navList = [
|
||||||
{ name: '能力集市', key: 'DetailsPageconetent' },
|
{ name: '共享门户', key: 'home' },
|
||||||
{ name: '能力云图', key: 'capabilityCloud' },
|
{ name: '能力集市', key: 'DetailsPageconetent' },
|
||||||
{ name: '能力统计', key: 'abilityStatistics' },
|
{ name: '能力云图', key: 'capabilityCloud' },
|
||||||
// { name: '开发指南', key: 'developmentGuide' },
|
{ name: '能力统计', key: 'abilityStatistics' },
|
||||||
{ name: '需求中心', key: 'demandCenter' },
|
// { name: '开发指南', key: 'developmentGuide' },
|
||||||
// { name: '个人中心', key: 'personalCenter' },
|
{ name: '需求中心', key: 'demandCenter' },
|
||||||
// { name: '区市站点', key: 'mapTest' },
|
// { name: '个人中心', key: 'personalCenter' },
|
||||||
// { name: '后台管理', key: 'houtaiguanli' },
|
// { name: '区市站点', key: 'mapTest' },
|
||||||
{ name: '赋能案例', key: 'assignCase' },
|
// { name: '后台管理', key: 'houtaiguanli' },
|
||||||
]
|
{ name: '赋能案例', key: 'assignCase' },
|
||||||
footerDataList.footerList = {
|
]
|
||||||
company: {
|
footerDataList.footerList = {
|
||||||
left: '包头市工业和信息化局大数据中心建设',
|
company: {
|
||||||
right: '海信网络科技股份有限公司',
|
left: '包头市工业和信息化局大数据中心建设',
|
||||||
},
|
right: '海信网络科技股份有限公司',
|
||||||
address: [{
|
},
|
||||||
name: '蒙ICP备05003330-1号',
|
address: [
|
||||||
value: '政府标识码1502000040',
|
{
|
||||||
},
|
name: '蒙ICP备05003330-1号',
|
||||||
{
|
value: '政府标识码1502000040',
|
||||||
name: '版权所有:包头市工业和信息化局大数据中心',
|
},
|
||||||
value: '地址:内蒙古自治区包头市九原区开元大街1号',
|
{
|
||||||
},
|
name: '版权所有:包头市工业和信息化局大数据中心',
|
||||||
{
|
value: '地址:内蒙古自治区包头市九原区开元大街1号',
|
||||||
name: '电话:0472-5618235',
|
},
|
||||||
value: '传真:0472-5618235',
|
{
|
||||||
},
|
name: '电话:0472-5618235',
|
||||||
],
|
value: '传真:0472-5618235',
|
||||||
}
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// xihaian
|
// xihaian
|
||||||
else if (newLocation === 'xihaian') {
|
else if (newLocation === 'xihaian') {
|
||||||
whoShow.itShowXiHaiAn = true
|
whoShow.itShowXiHaiAn = true
|
||||||
infrastructure.deptName = '西海岸新区大数据发展'
|
infrastructure.deptName = '西海岸新区大数据发展'
|
||||||
// infrastructure.deptId = '1067246875800000066'
|
// infrastructure.deptId = '1067246875800000066'
|
||||||
uavAndIndividualSoldier.num = 4
|
uavAndIndividualSoldier.num = 4
|
||||||
uavAndIndividualSoldier.uavList = [{
|
uavAndIndividualSoldier.uavList = [
|
||||||
name: '经纬 M300 RTK-1',
|
{
|
||||||
url: '',
|
name: '经纬 M300 RTK-1',
|
||||||
details: [{
|
url: '',
|
||||||
name: '飞行器',
|
details: [
|
||||||
attribute: {
|
{
|
||||||
尺寸: '尺寸(展开,不包含桨叶):810×670×430 mm(长×宽×高);尺寸(折叠,包含桨叶):430×420×430 mm(长×宽×高)',
|
name: '飞行器',
|
||||||
对称电机轴距: '895 mm',
|
attribute: {
|
||||||
'重量(含下置单云台支架):空机重量(不含电池)': '3.6 kg;空机重量(含双电池):6.3 kg',
|
尺寸: '尺寸(展开,不包含桨叶):810×670×430 mm(长×宽×高);尺寸(折叠,包含桨叶):430×420×430 mm(长×宽×高)',
|
||||||
单云台减震球最大负重: '930g',
|
对称电机轴距: '895 mm',
|
||||||
最大起飞重量: '9 kg',
|
'重量(含下置单云台支架):空机重量(不含电池)':
|
||||||
工作频率: '2.4000-2.4835 GHz;5.725-5.850 GHz',
|
'3.6 kg;空机重量(含双电池):6.3 kg',
|
||||||
'发射功率(EIRP)': '2.4000-2.4835 GHz:29.5 dBm(FCC)、18.5dBm(CE)、18.5 dBm(SRRC)、18.5dBm(MIC);5.725-5.850 GHz:28.5 dBm(FCC)、12.5dBm(CE)、28.5 dBm(SRRC)',
|
单云台减震球最大负重: '930g',
|
||||||
'悬停精度(P-GPS)': '垂直:±0.1 m(视觉定位正常工作时)、±0.5 m(GPS 正常工作时)、±0.1 m(RTK 定位正常工作时);水平:±0.3 m(视觉定位正常工作时)、±1.5 m(GPS 正常工作时)、±0.1 m(RTK 定位正常工作时)',
|
最大起飞重量: '9 kg',
|
||||||
'RTK 位置精度': '在 RTK FIX 时:1 cm+1 ppm(水平)、1.5 cm + 1 ppm(垂直)',
|
工作频率: '2.4000-2.4835 GHz;5.725-5.850 GHz',
|
||||||
最大旋转角速度: '俯仰轴:300°/s、航向轴:100°/s',
|
'发射功率(EIRP)':
|
||||||
最大俯仰角度: '30° (P模式且前视视觉系统启用:25°)',
|
'2.4000-2.4835 GHz:29.5 dBm(FCC)、18.5dBm(CE)、18.5 dBm(SRRC)、18.5dBm(MIC);5.725-5.850 GHz:28.5 dBm(FCC)、12.5dBm(CE)、28.5 dBm(SRRC)',
|
||||||
最大上升速度: 'S 模式:6 m/s、P 模式:5 m/s',
|
'悬停精度(P-GPS)':
|
||||||
'最大下降速度(垂直)': 'S 模式:5 m/s、P 模式:4 m/s',
|
'垂直:±0.1 m(视觉定位正常工作时)、±0.5 m(GPS 正常工作时)、±0.1 m(RTK 定位正常工作时);水平:±0.3 m(视觉定位正常工作时)、±1.5 m(GPS 正常工作时)、±0.1 m(RTK 定位正常工作时)',
|
||||||
最大倾斜下降速度: 'S 模式:7 m/s',
|
'RTK 位置精度':
|
||||||
最大水平飞行速度: 'S 模式:23 m/s、P 模式:17 m/s',
|
'在 RTK FIX 时:1 cm+1 ppm(水平)、1.5 cm + 1 ppm(垂直)',
|
||||||
最大飞行海拔高度: '5000 m(2110 桨叶,起飞重量≤7 kg)/ 7000 m(2195 高原静音桨叶,起飞重量≤7 kg)',
|
最大旋转角速度: '俯仰轴:300°/s、航向轴:100°/s',
|
||||||
最大可承受风速: '15m/s(起飞及降落阶段为12m/s)',
|
最大俯仰角度: '30° (P模式且前视视觉系统启用:25°)',
|
||||||
最大飞行时间: '55 min',
|
最大上升速度: 'S 模式:6 m/s、P 模式:5 m/s',
|
||||||
'适配 DJI 云台': '禅思 XT2、禅思 XT S、禅思 Z30、禅思 H20、禅思 H20T、DJI P1、DJI L1',
|
'最大下降速度(垂直)': 'S 模式:5 m/s、P 模式:4 m/s',
|
||||||
支持云台安装方式: '下置单云台、上置单云台、下置双云台、下置单云台+上置单云台、下置双云台+上置单云台',
|
最大倾斜下降速度: 'S 模式:7 m/s',
|
||||||
'IP 防护等级': 'IP45',
|
最大水平飞行速度: 'S 模式:23 m/s、P 模式:17 m/s',
|
||||||
GNSS: 'GPS+GLONASS+BeiDou+Galileo',
|
最大飞行海拔高度:
|
||||||
工作环境温度: '-20°C 至 50°C',
|
'5000 m(2110 桨叶,起飞重量≤7 kg)/ 7000 m(2195 高原静音桨叶,起飞重量≤7 kg)',
|
||||||
},
|
最大可承受风速: '15m/s(起飞及降落阶段为12m/s)',
|
||||||
},
|
最大飞行时间: '55 min',
|
||||||
{
|
'适配 DJI 云台':
|
||||||
name: '遥控器',
|
'禅思 XT2、禅思 XT S、禅思 Z30、禅思 H20、禅思 H20T、DJI P1、DJI L1',
|
||||||
attribute: {
|
支持云台安装方式:
|
||||||
工作频率: '2.4000-2.4835 GHz、5.725-5.850 GHz',
|
'下置单云台、上置单云台、下置双云台、下置单云台+上置单云台、下置双云台+上置单云台',
|
||||||
'最大信号有效距离(无干扰、无遮挡)': 'NCC/FCC:15 km、CE/MIC:8 km、SRRC:8 km',
|
'IP 防护等级': 'IP45',
|
||||||
'等效全向辐射功率(EIRP)': '2.4000-2.4835 GHz:29.5 dBm(FCC);18.5dBm(CE)、18.5 dBm(SRRC);18.5dBm(MIC);5.725-5.850 GHz:28.5 dBm(FCC);12.5dBm(CE)、20.5 dBm(SRRC)',
|
GNSS: 'GPS+GLONASS+BeiDou+Galileo',
|
||||||
外置电池: '名称:WB37 智能电池;容量:4920 mAh;电压:7.6 V;电池类型:LiPo;能量:37.39 Wh;充电时间(使用 BS60 智能电池箱):70 分钟(15°C 至 45°C);130 分钟(0°C 至 15°C)',
|
工作环境温度: '-20°C 至 50°C',
|
||||||
内置电池: '类型:18650 锂离子电池 (5000 mAh @ 7.2 V);充电方式:使用规格为 12V/2A 的 USB 充电器;额定功率:17 W;充电时间:2 小时 15 分钟(使用规格为12V/2A 的 USB 充电器)',
|
},
|
||||||
续航时间: '内置电池:约 2.5 小时内置电池+外置电池:约 4.5 小时',
|
|
||||||
'USB-A 接口供电电压/电流': '5 V / 1.5 A',
|
|
||||||
工作环境温度: '-20° 至 40° C',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '视觉系统',
|
|
||||||
attribute: {
|
|
||||||
障碍物感知范围: '前后左右:0.7-40 m、上下:0.6-30 m',
|
|
||||||
FOV: '前后下:65°(H),50°(V)、左右上:75°(H),60°(V)',
|
|
||||||
使用环境: '表面有丰富纹理,光照条件充足(>15 lux,室内日光灯正常照射环境)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '红外感知系统',
|
|
||||||
attribute: {
|
|
||||||
障碍物感知范围: '0.1-8 m',
|
|
||||||
FOV: '30°(±15°)',
|
|
||||||
使用环境: '漫反射,大尺寸,高反射率(反射率>10%)障碍物',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '上下补光灯',
|
|
||||||
attribute: {
|
|
||||||
有效照明距离: '5 m',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'FPV摄像头',
|
|
||||||
attribute: {
|
|
||||||
分辨率: '960p',
|
|
||||||
FOV: '145°',
|
|
||||||
帧率: '30 fps',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '智能飞行电池',
|
|
||||||
attribute: {
|
|
||||||
型号: 'TB60',
|
|
||||||
容量: '5935 mAh',
|
|
||||||
电压: '52.8 V',
|
|
||||||
电池类型: 'LiPo 12S',
|
|
||||||
能量: '274 Wh',
|
|
||||||
电池整体重量: '约 1.35 kg',
|
|
||||||
工作环境温度: '-20℃ 至 50℃',
|
|
||||||
理想存放环境温度: '22℃ 至 30℃',
|
|
||||||
充电环境温度: '-20°C 至 40°C(当环境温度低于 5°C时,电池会启动自加热功能,在低温环境下充电有可能会降低电池使用寿命)',
|
|
||||||
充电时间: '使用 BS60 智能电池箱时,使用 220 V 电源:完全充满两块 TB60 智能飞行电池约需 60 分钟,从 20% 充到 90% 约需 30 分钟;使用 110 V 电源:完全充满两块 TB60 智能飞行电池约需 70 分钟,从 20% 充到 90% 约需 40 分钟',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'BS60智能电池箱',
|
|
||||||
attribute: {
|
|
||||||
外形尺寸: '501×403×252 mm',
|
|
||||||
空箱重量: '8.37 kg',
|
|
||||||
可放置物品: 'TB60 智能飞行电池 8 块、WB37 智能电池 4 块',
|
|
||||||
输入电压: '100-120 VAC,50-60 Hz / 220-240 VAC,50-60 Hz',
|
|
||||||
最大输入功率: '1070 W',
|
|
||||||
输出功率: '100-120 V:750 W、220-240 V:992 W',
|
|
||||||
工作环境温度: '-20℃ 至 40℃',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '经纬 M300 RTK-2',
|
name: '遥控器',
|
||||||
url: '',
|
attribute: {
|
||||||
details: [{
|
工作频率: '2.4000-2.4835 GHz、5.725-5.850 GHz',
|
||||||
name: '飞行器',
|
'最大信号有效距离(无干扰、无遮挡)':
|
||||||
attribute: {
|
'NCC/FCC:15 km、CE/MIC:8 km、SRRC:8 km',
|
||||||
尺寸: '尺寸(展开,不包含桨叶):810×670×430 mm(长×宽×高);尺寸(折叠,包含桨叶):430×420×430 mm(长×宽×高)',
|
'等效全向辐射功率(EIRP)':
|
||||||
对称电机轴距: '895 mm',
|
'2.4000-2.4835 GHz:29.5 dBm(FCC);18.5dBm(CE)、18.5 dBm(SRRC);18.5dBm(MIC);5.725-5.850 GHz:28.5 dBm(FCC);12.5dBm(CE)、20.5 dBm(SRRC)',
|
||||||
'重量(含下置单云台支架):空机重量(不含电池)': '3.6 kg;空机重量(含双电池):6.3 kg',
|
外置电池:
|
||||||
单云台减震球最大负重: '930g',
|
'名称:WB37 智能电池;容量:4920 mAh;电压:7.6 V;电池类型:LiPo;能量:37.39 Wh;充电时间(使用 BS60 智能电池箱):70 分钟(15°C 至 45°C);130 分钟(0°C 至 15°C)',
|
||||||
最大起飞重量: '9 kg',
|
内置电池:
|
||||||
工作频率: '2.4000-2.4835 GHz;5.725-5.850 GHz',
|
'类型:18650 锂离子电池 (5000 mAh @ 7.2 V);充电方式:使用规格为 12V/2A 的 USB 充电器;额定功率:17 W;充电时间:2 小时 15 分钟(使用规格为12V/2A 的 USB 充电器)',
|
||||||
'发射功率(EIRP)': '2.4000-2.4835 GHz:29.5 dBm(FCC)、18.5dBm(CE)、18.5 dBm(SRRC)、18.5dBm(MIC);5.725-5.850 GHz:28.5 dBm(FCC)、12.5dBm(CE)、28.5 dBm(SRRC)',
|
续航时间: '内置电池:约 2.5 小时内置电池+外置电池:约 4.5 小时',
|
||||||
'悬停精度(P-GPS)': '垂直:±0.1 m(视觉定位正常工作时)、±0.5 m(GPS 正常工作时)、±0.1 m(RTK 定位正常工作时);水平:±0.3 m(视觉定位正常工作时)、±1.5 m(GPS 正常工作时)、±0.1 m(RTK 定位正常工作时)',
|
'USB-A 接口供电电压/电流': '5 V / 1.5 A',
|
||||||
'RTK 位置精度': '在 RTK FIX 时:1 cm+1 ppm(水平)、1.5 cm + 1 ppm(垂直)',
|
工作环境温度: '-20° 至 40° C',
|
||||||
最大旋转角速度: '俯仰轴:300°/s、航向轴:100°/s',
|
},
|
||||||
最大俯仰角度: '30° (P模式且前视视觉系统启用:25°)',
|
|
||||||
最大上升速度: 'S 模式:6 m/s、P 模式:5 m/s',
|
|
||||||
'最大下降速度(垂直)': 'S 模式:5 m/s、P 模式:4 m/s',
|
|
||||||
最大倾斜下降速度: 'S 模式:7 m/s',
|
|
||||||
最大水平飞行速度: 'S 模式:23 m/s、P 模式:17 m/s',
|
|
||||||
最大飞行海拔高度: '5000 m(2110 桨叶,起飞重量≤7 kg)/ 7000 m(2195 高原静音桨叶,起飞重量≤7 kg)',
|
|
||||||
最大可承受风速: '15m/s(起飞及降落阶段为12m/s)',
|
|
||||||
最大飞行时间: '55 min',
|
|
||||||
'适配 DJI 云台': '禅思 XT2、禅思 XT S、禅思 Z30、禅思 H20、禅思 H20T、DJI P1、DJI L1',
|
|
||||||
支持云台安装方式: '下置单云台、上置单云台、下置双云台、下置单云台+上置单云台、下置双云台+上置单云台',
|
|
||||||
'IP 防护等级': 'IP45',
|
|
||||||
GNSS: 'GPS+GLONASS+BeiDou+Galileo',
|
|
||||||
工作环境温度: '-20°C 至 50°C',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '遥控器',
|
|
||||||
attribute: {
|
|
||||||
工作频率: '2.4000-2.4835 GHz、5.725-5.850 GHz',
|
|
||||||
'最大信号有效距离(无干扰、无遮挡)': 'NCC/FCC:15 km、CE/MIC:8 km、SRRC:8 km',
|
|
||||||
'等效全向辐射功率(EIRP)': '2.4000-2.4835 GHz:29.5 dBm(FCC);18.5dBm(CE)、18.5 dBm(SRRC);18.5dBm(MIC);5.725-5.850 GHz:28.5 dBm(FCC);12.5dBm(CE)、20.5 dBm(SRRC)',
|
|
||||||
外置电池: '名称:WB37 智能电池;容量:4920 mAh;电压:7.6 V;电池类型:LiPo;能量:37.39 Wh;充电时间(使用 BS60 智能电池箱):70 分钟(15°C 至 45°C);130 分钟(0°C 至 15°C)',
|
|
||||||
内置电池: '类型:18650 锂离子电池 (5000 mAh @ 7.2 V);充电方式:使用规格为 12V/2A 的 USB 充电器;额定功率:17 W;充电时间:2 小时 15 分钟(使用规格为12V/2A 的 USB 充电器)',
|
|
||||||
续航时间: '内置电池:约 2.5 小时内置电池+外置电池:约 4.5 小时',
|
|
||||||
'USB-A 接口供电电压/电流': '5 V / 1.5 A',
|
|
||||||
工作环境温度: '-20° 至 40° C',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '视觉系统',
|
|
||||||
attribute: {
|
|
||||||
障碍物感知范围: '前后左右:0.7-40 m、上下:0.6-30 m',
|
|
||||||
FOV: '前后下:65°(H),50°(V)、左右上:75°(H),60°(V)',
|
|
||||||
使用环境: '表面有丰富纹理,光照条件充足(>15 lux,室内日光灯正常照射环境)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '红外感知系统',
|
|
||||||
attribute: {
|
|
||||||
障碍物感知范围: '0.1-8 m',
|
|
||||||
FOV: '30°(±15°)',
|
|
||||||
使用环境: '漫反射,大尺寸,高反射率(反射率>10%)障碍物',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '上下补光灯',
|
|
||||||
attribute: {
|
|
||||||
有效照明距离: '5 m',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'FPV摄像头',
|
|
||||||
attribute: {
|
|
||||||
分辨率: '960p',
|
|
||||||
FOV: '145°',
|
|
||||||
帧率: '30 fps',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '智能飞行电池',
|
|
||||||
attribute: {
|
|
||||||
型号: 'TB60',
|
|
||||||
容量: '5935 mAh',
|
|
||||||
电压: '52.8 V',
|
|
||||||
电池类型: 'LiPo 12S',
|
|
||||||
能量: '274 Wh',
|
|
||||||
电池整体重量: '约 1.35 kg',
|
|
||||||
工作环境温度: '-20℃ 至 50℃',
|
|
||||||
理想存放环境温度: '22℃ 至 30℃',
|
|
||||||
充电环境温度: '-20°C 至 40°C(当环境温度低于 5°C时,电池会启动自加热功能,在低温环境下充电有可能会降低电池使用寿命)',
|
|
||||||
充电时间: '使用 BS60 智能电池箱时,使用 220 V 电源:完全充满两块 TB60 智能飞行电池约需 60 分钟,从 20% 充到 90% 约需 30 分钟;使用 110 V 电源:完全充满两块 TB60 智能飞行电池约需 70 分钟,从 20% 充到 90% 约需 40 分钟',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'BS60智能电池箱',
|
|
||||||
attribute: {
|
|
||||||
外形尺寸: '501×403×252 mm',
|
|
||||||
空箱重量: '8.37 kg',
|
|
||||||
可放置物品: 'TB60 智能飞行电池 8 块、WB37 智能电池 4 块',
|
|
||||||
输入电压: '100-120 VAC,50-60 Hz / 220-240 VAC,50-60 Hz',
|
|
||||||
最大输入功率: '1070 W',
|
|
||||||
输出功率: '100-120 V:750 W、220-240 V:992 W',
|
|
||||||
工作环境温度: '-20℃ 至 40℃',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]
|
|
||||||
uavAndIndividualSoldier.individualSoldier = [{
|
|
||||||
name: 'T950天通-1',
|
|
||||||
type: '单兵设备',
|
|
||||||
details: {
|
|
||||||
基本信息: {
|
|
||||||
外观设计: '172X81X15.7(不含天线),336g',
|
|
||||||
操作系统: 'Android P',
|
|
||||||
CPU: '展锐 Makalu T7510;虎贲T710+春藤IVY510',
|
|
||||||
存储: '标配:6GB ROM +128G RAM',
|
|
||||||
显示屏: '6.52吋水滴屏;HD+,1600*720(20:9)',
|
|
||||||
后置摄像头: '后置为4800万主摄+200万微距+200万红外三摄组合,支持闪光灯',
|
|
||||||
前置摄像头: '1600万',
|
|
||||||
传感器相关: '指纹|光线传感器|距离传感器|加速度传感器|地磁传感器|陀螺仪|气压传感器',
|
|
||||||
WLAN: '802.11a/b/g/n/AC 支持MIMO',
|
|
||||||
电池: '6000mAh@3.8V,内置不可拆卸,支持18W快充',
|
|
||||||
工作时间: '待机时长180h,卫星通话时长16h',
|
|
||||||
},
|
|
||||||
制式频段: {
|
|
||||||
卫星频段: '天通一号卫星',
|
|
||||||
频段: '2G:GSM 850/900/1800/1900;3G:WCDMA850/900/1900/2100;4G:TD-LTE B38/39/40/41;4G:FDD-LTE B1/3/5/7/8;5G: N1,N28,N41, N78,N79',
|
|
||||||
双卡: '双nano卡(卫星卡+运营商全网通卡)',
|
|
||||||
CA: 'B1+B3 下行 2CA(电信);B40/41带内上下行 2CA',
|
|
||||||
VOLTE: '支持',
|
|
||||||
},
|
|
||||||
IO接口: {
|
|
||||||
USB接口类型: 'TYPE-C USB3.0,支持OTG功能',
|
|
||||||
耳机接口: '3.5mm,美标',
|
|
||||||
存储卡: '支持TF卡扩展',
|
|
||||||
},
|
|
||||||
其它功能: {
|
|
||||||
蓝牙: 'V5.0',
|
|
||||||
定位: 'GPS、北斗混合定位、单北斗模式',
|
|
||||||
NFC: '支持',
|
|
||||||
充电方式: '三种充电方式(线充、座充、磁吸充电)',
|
|
||||||
按键: '开机键、音量+/-、 SOS(侧面)、PTT按键',
|
|
||||||
},
|
|
||||||
环境适应性: {
|
|
||||||
工作温度: '-20°~ 60°',
|
|
||||||
存储温度: '-40°~ 80°',
|
|
||||||
高温高湿: '(95±3)%(≧40°),24小时',
|
|
||||||
防护等级: 'IP68',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'T950天通-2',
|
name: '视觉系统',
|
||||||
type: '单兵设备',
|
attribute: {
|
||||||
details: {
|
障碍物感知范围: '前后左右:0.7-40 m、上下:0.6-30 m',
|
||||||
基本信息: {
|
FOV: '前后下:65°(H),50°(V)、左右上:75°(H),60°(V)',
|
||||||
外观设计: '172X81X15.7(不含天线),336g',
|
使用环境:
|
||||||
操作系统: 'Android P',
|
'表面有丰富纹理,光照条件充足(>15 lux,室内日光灯正常照射环境)',
|
||||||
CPU: '展锐 Makalu T7510;虎贲T710+春藤IVY510',
|
},
|
||||||
存储: '标配:6GB ROM +128G RAM',
|
|
||||||
显示屏: '6.52吋水滴屏;HD+,1600*720(20:9)',
|
|
||||||
后置摄像头: '后置为4800万主摄+200万微距+200万红外三摄组合,支持闪光灯',
|
|
||||||
前置摄像头: '1600万',
|
|
||||||
传感器相关: '指纹|光线传感器|距离传感器|加速度传感器|地磁传感器|陀螺仪|气压传感器',
|
|
||||||
WLAN: '802.11a/b/g/n/AC 支持MIMO',
|
|
||||||
电池: '6000mAh@3.8V,内置不可拆卸,支持18W快充',
|
|
||||||
工作时间: '待机时长180h,卫星通话时长16h',
|
|
||||||
},
|
|
||||||
制式频段: {
|
|
||||||
卫星频段: '天通一号卫星',
|
|
||||||
频段: '2G:GSM 850/900/1800/1900;3G:WCDMA850/900/1900/2100;4G:TD-LTE B38/39/40/41;4G:FDD-LTE B1/3/5/7/8;5G: N1,N28,N41, N78,N79',
|
|
||||||
双卡: '双nano卡(卫星卡+运营商全网通卡)',
|
|
||||||
CA: 'B1+B3 下行 2CA(电信);B40/41带内上下行 2CA',
|
|
||||||
VOLTE: '支持',
|
|
||||||
},
|
|
||||||
IO接口: {
|
|
||||||
USB接口类型: 'TYPE-C USB3.0,支持OTG功能',
|
|
||||||
耳机接口: '3.5mm,美标',
|
|
||||||
存储卡: '支持TF卡扩展',
|
|
||||||
},
|
|
||||||
其它功能: {
|
|
||||||
蓝牙: 'V5.0',
|
|
||||||
定位: 'GPS、北斗混合定位、单北斗模式',
|
|
||||||
NFC: '支持',
|
|
||||||
充电方式: '三种充电方式(线充、座充、磁吸充电)',
|
|
||||||
按键: '开机键、音量+/-、 SOS(侧面)、PTT按键',
|
|
||||||
},
|
|
||||||
环境适应性: {
|
|
||||||
工作温度: '-20°~ 60°',
|
|
||||||
存储温度: '-40°~ 80°',
|
|
||||||
高温高湿: '(95±3)%(≧40°),24小时',
|
|
||||||
防护等级: 'IP68',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
]
|
{
|
||||||
navListManagement.navList = [
|
name: '红外感知系统',
|
||||||
{ name: '共享门户', key: 'home' },
|
attribute: {
|
||||||
{ name: '能力集市', key: 'DetailsPageconetent' },
|
障碍物感知范围: '0.1-8 m',
|
||||||
{ name: '能力云图', key: 'capabilityCloud' },
|
FOV: '30°(±15°)',
|
||||||
{ name: '能力统计', key: 'abilityStatistics' },
|
使用环境: '漫反射,大尺寸,高反射率(反射率>10%)障碍物',
|
||||||
// { name: '开发指南', key: 'developmentGuide' },
|
},
|
||||||
{ name: '需求中心', key: 'demandCenter' },
|
|
||||||
// { name: '个人中心', key: 'personalCenter' },
|
|
||||||
// { name: '区市站点', key: 'mapTest' },
|
|
||||||
// { name: '后台管理', key: 'houtaiguanli' },
|
|
||||||
{ name: '赋能案例', key: 'assignCase' },
|
|
||||||
]
|
|
||||||
footerDataList.footerList = {
|
|
||||||
company: {
|
|
||||||
left: '青岛西海岸新区大数据发展促进局建设',
|
|
||||||
// eslint-disable-next-line no-undef
|
|
||||||
right: CONFIGITEM.vNum,
|
|
||||||
},
|
},
|
||||||
address: [{
|
{
|
||||||
name: '鲁IC备00000000号',
|
name: '上下补光灯',
|
||||||
value: '政府标识码3702000106',
|
attribute: {
|
||||||
},
|
有效照明距离: '5 m',
|
||||||
{
|
},
|
||||||
name: '版权所有:青岛西海岸新区大数据发展促进局',
|
},
|
||||||
value: '地址:青岛市西海岸新区长江中路369号',
|
{
|
||||||
},
|
name: 'FPV摄像头',
|
||||||
{
|
attribute: {
|
||||||
name: '电话:0532-86986596',
|
分辨率: '960p',
|
||||||
value: '传真:0532-86986596',
|
FOV: '145°',
|
||||||
},
|
帧率: '30 fps',
|
||||||
],
|
},
|
||||||
}
|
},
|
||||||
xhaHasPermissionUser.list = [
|
{
|
||||||
'xihaian01',
|
name: '智能飞行电池',
|
||||||
'xihaian02',
|
attribute: {
|
||||||
'xihaian03',
|
型号: 'TB60',
|
||||||
'xihaian04',
|
容量: '5935 mAh',
|
||||||
'admin',
|
电压: '52.8 V',
|
||||||
]
|
电池类型: 'LiPo 12S',
|
||||||
}
|
能量: '274 Wh',
|
||||||
|
电池整体重量: '约 1.35 kg',
|
||||||
|
工作环境温度: '-20℃ 至 50℃',
|
||||||
|
理想存放环境温度: '22℃ 至 30℃',
|
||||||
|
充电环境温度:
|
||||||
|
'-20°C 至 40°C(当环境温度低于 5°C时,电池会启动自加热功能,在低温环境下充电有可能会降低电池使用寿命)',
|
||||||
|
充电时间:
|
||||||
|
'使用 BS60 智能电池箱时,使用 220 V 电源:完全充满两块 TB60 智能飞行电池约需 60 分钟,从 20% 充到 90% 约需 30 分钟;使用 110 V 电源:完全充满两块 TB60 智能飞行电池约需 70 分钟,从 20% 充到 90% 约需 40 分钟',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'BS60智能电池箱',
|
||||||
|
attribute: {
|
||||||
|
外形尺寸: '501×403×252 mm',
|
||||||
|
空箱重量: '8.37 kg',
|
||||||
|
可放置物品: 'TB60 智能飞行电池 8 块、WB37 智能电池 4 块',
|
||||||
|
输入电压: '100-120 VAC,50-60 Hz / 220-240 VAC,50-60 Hz',
|
||||||
|
最大输入功率: '1070 W',
|
||||||
|
输出功率: '100-120 V:750 W、220-240 V:992 W',
|
||||||
|
工作环境温度: '-20℃ 至 40℃',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '经纬 M300 RTK-2',
|
||||||
|
url: '',
|
||||||
|
details: [
|
||||||
|
{
|
||||||
|
name: '飞行器',
|
||||||
|
attribute: {
|
||||||
|
尺寸: '尺寸(展开,不包含桨叶):810×670×430 mm(长×宽×高);尺寸(折叠,包含桨叶):430×420×430 mm(长×宽×高)',
|
||||||
|
对称电机轴距: '895 mm',
|
||||||
|
'重量(含下置单云台支架):空机重量(不含电池)':
|
||||||
|
'3.6 kg;空机重量(含双电池):6.3 kg',
|
||||||
|
单云台减震球最大负重: '930g',
|
||||||
|
最大起飞重量: '9 kg',
|
||||||
|
工作频率: '2.4000-2.4835 GHz;5.725-5.850 GHz',
|
||||||
|
'发射功率(EIRP)':
|
||||||
|
'2.4000-2.4835 GHz:29.5 dBm(FCC)、18.5dBm(CE)、18.5 dBm(SRRC)、18.5dBm(MIC);5.725-5.850 GHz:28.5 dBm(FCC)、12.5dBm(CE)、28.5 dBm(SRRC)',
|
||||||
|
'悬停精度(P-GPS)':
|
||||||
|
'垂直:±0.1 m(视觉定位正常工作时)、±0.5 m(GPS 正常工作时)、±0.1 m(RTK 定位正常工作时);水平:±0.3 m(视觉定位正常工作时)、±1.5 m(GPS 正常工作时)、±0.1 m(RTK 定位正常工作时)',
|
||||||
|
'RTK 位置精度':
|
||||||
|
'在 RTK FIX 时:1 cm+1 ppm(水平)、1.5 cm + 1 ppm(垂直)',
|
||||||
|
最大旋转角速度: '俯仰轴:300°/s、航向轴:100°/s',
|
||||||
|
最大俯仰角度: '30° (P模式且前视视觉系统启用:25°)',
|
||||||
|
最大上升速度: 'S 模式:6 m/s、P 模式:5 m/s',
|
||||||
|
'最大下降速度(垂直)': 'S 模式:5 m/s、P 模式:4 m/s',
|
||||||
|
最大倾斜下降速度: 'S 模式:7 m/s',
|
||||||
|
最大水平飞行速度: 'S 模式:23 m/s、P 模式:17 m/s',
|
||||||
|
最大飞行海拔高度:
|
||||||
|
'5000 m(2110 桨叶,起飞重量≤7 kg)/ 7000 m(2195 高原静音桨叶,起飞重量≤7 kg)',
|
||||||
|
最大可承受风速: '15m/s(起飞及降落阶段为12m/s)',
|
||||||
|
最大飞行时间: '55 min',
|
||||||
|
'适配 DJI 云台':
|
||||||
|
'禅思 XT2、禅思 XT S、禅思 Z30、禅思 H20、禅思 H20T、DJI P1、DJI L1',
|
||||||
|
支持云台安装方式:
|
||||||
|
'下置单云台、上置单云台、下置双云台、下置单云台+上置单云台、下置双云台+上置单云台',
|
||||||
|
'IP 防护等级': 'IP45',
|
||||||
|
GNSS: 'GPS+GLONASS+BeiDou+Galileo',
|
||||||
|
工作环境温度: '-20°C 至 50°C',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '遥控器',
|
||||||
|
attribute: {
|
||||||
|
工作频率: '2.4000-2.4835 GHz、5.725-5.850 GHz',
|
||||||
|
'最大信号有效距离(无干扰、无遮挡)':
|
||||||
|
'NCC/FCC:15 km、CE/MIC:8 km、SRRC:8 km',
|
||||||
|
'等效全向辐射功率(EIRP)':
|
||||||
|
'2.4000-2.4835 GHz:29.5 dBm(FCC);18.5dBm(CE)、18.5 dBm(SRRC);18.5dBm(MIC);5.725-5.850 GHz:28.5 dBm(FCC);12.5dBm(CE)、20.5 dBm(SRRC)',
|
||||||
|
外置电池:
|
||||||
|
'名称:WB37 智能电池;容量:4920 mAh;电压:7.6 V;电池类型:LiPo;能量:37.39 Wh;充电时间(使用 BS60 智能电池箱):70 分钟(15°C 至 45°C);130 分钟(0°C 至 15°C)',
|
||||||
|
内置电池:
|
||||||
|
'类型:18650 锂离子电池 (5000 mAh @ 7.2 V);充电方式:使用规格为 12V/2A 的 USB 充电器;额定功率:17 W;充电时间:2 小时 15 分钟(使用规格为12V/2A 的 USB 充电器)',
|
||||||
|
续航时间: '内置电池:约 2.5 小时内置电池+外置电池:约 4.5 小时',
|
||||||
|
'USB-A 接口供电电压/电流': '5 V / 1.5 A',
|
||||||
|
工作环境温度: '-20° 至 40° C',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '视觉系统',
|
||||||
|
attribute: {
|
||||||
|
障碍物感知范围: '前后左右:0.7-40 m、上下:0.6-30 m',
|
||||||
|
FOV: '前后下:65°(H),50°(V)、左右上:75°(H),60°(V)',
|
||||||
|
使用环境:
|
||||||
|
'表面有丰富纹理,光照条件充足(>15 lux,室内日光灯正常照射环境)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '红外感知系统',
|
||||||
|
attribute: {
|
||||||
|
障碍物感知范围: '0.1-8 m',
|
||||||
|
FOV: '30°(±15°)',
|
||||||
|
使用环境: '漫反射,大尺寸,高反射率(反射率>10%)障碍物',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '上下补光灯',
|
||||||
|
attribute: {
|
||||||
|
有效照明距离: '5 m',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'FPV摄像头',
|
||||||
|
attribute: {
|
||||||
|
分辨率: '960p',
|
||||||
|
FOV: '145°',
|
||||||
|
帧率: '30 fps',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '智能飞行电池',
|
||||||
|
attribute: {
|
||||||
|
型号: 'TB60',
|
||||||
|
容量: '5935 mAh',
|
||||||
|
电压: '52.8 V',
|
||||||
|
电池类型: 'LiPo 12S',
|
||||||
|
能量: '274 Wh',
|
||||||
|
电池整体重量: '约 1.35 kg',
|
||||||
|
工作环境温度: '-20℃ 至 50℃',
|
||||||
|
理想存放环境温度: '22℃ 至 30℃',
|
||||||
|
充电环境温度:
|
||||||
|
'-20°C 至 40°C(当环境温度低于 5°C时,电池会启动自加热功能,在低温环境下充电有可能会降低电池使用寿命)',
|
||||||
|
充电时间:
|
||||||
|
'使用 BS60 智能电池箱时,使用 220 V 电源:完全充满两块 TB60 智能飞行电池约需 60 分钟,从 20% 充到 90% 约需 30 分钟;使用 110 V 电源:完全充满两块 TB60 智能飞行电池约需 70 分钟,从 20% 充到 90% 约需 40 分钟',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'BS60智能电池箱',
|
||||||
|
attribute: {
|
||||||
|
外形尺寸: '501×403×252 mm',
|
||||||
|
空箱重量: '8.37 kg',
|
||||||
|
可放置物品: 'TB60 智能飞行电池 8 块、WB37 智能电池 4 块',
|
||||||
|
输入电压: '100-120 VAC,50-60 Hz / 220-240 VAC,50-60 Hz',
|
||||||
|
最大输入功率: '1070 W',
|
||||||
|
输出功率: '100-120 V:750 W、220-240 V:992 W',
|
||||||
|
工作环境温度: '-20℃ 至 40℃',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
uavAndIndividualSoldier.individualSoldier = [
|
||||||
|
{
|
||||||
|
name: 'T950天通-1',
|
||||||
|
type: '单兵设备',
|
||||||
|
details: {
|
||||||
|
基本信息: {
|
||||||
|
外观设计: '172X81X15.7(不含天线),336g',
|
||||||
|
操作系统: 'Android P',
|
||||||
|
CPU: '展锐 Makalu T7510;虎贲T710+春藤IVY510',
|
||||||
|
存储: '标配:6GB ROM +128G RAM',
|
||||||
|
显示屏: '6.52吋水滴屏;HD+,1600*720(20:9)',
|
||||||
|
后置摄像头:
|
||||||
|
'后置为4800万主摄+200万微距+200万红外三摄组合,支持闪光灯',
|
||||||
|
前置摄像头: '1600万',
|
||||||
|
传感器相关:
|
||||||
|
'指纹|光线传感器|距离传感器|加速度传感器|地磁传感器|陀螺仪|气压传感器',
|
||||||
|
WLAN: '802.11a/b/g/n/AC 支持MIMO',
|
||||||
|
电池: '6000mAh@3.8V,内置不可拆卸,支持18W快充',
|
||||||
|
工作时间: '待机时长180h,卫星通话时长16h',
|
||||||
|
},
|
||||||
|
制式频段: {
|
||||||
|
卫星频段: '天通一号卫星',
|
||||||
|
频段: '2G:GSM 850/900/1800/1900;3G:WCDMA850/900/1900/2100;4G:TD-LTE B38/39/40/41;4G:FDD-LTE B1/3/5/7/8;5G: N1,N28,N41, N78,N79',
|
||||||
|
双卡: '双nano卡(卫星卡+运营商全网通卡)',
|
||||||
|
CA: 'B1+B3 下行 2CA(电信);B40/41带内上下行 2CA',
|
||||||
|
VOLTE: '支持',
|
||||||
|
},
|
||||||
|
IO接口: {
|
||||||
|
USB接口类型: 'TYPE-C USB3.0,支持OTG功能',
|
||||||
|
耳机接口: '3.5mm,美标',
|
||||||
|
存储卡: '支持TF卡扩展',
|
||||||
|
},
|
||||||
|
其它功能: {
|
||||||
|
蓝牙: 'V5.0',
|
||||||
|
定位: 'GPS、北斗混合定位、单北斗模式',
|
||||||
|
NFC: '支持',
|
||||||
|
充电方式: '三种充电方式(线充、座充、磁吸充电)',
|
||||||
|
按键: '开机键、音量+/-、 SOS(侧面)、PTT按键',
|
||||||
|
},
|
||||||
|
环境适应性: {
|
||||||
|
工作温度: '-20°~ 60°',
|
||||||
|
存储温度: '-40°~ 80°',
|
||||||
|
高温高湿: '(95±3)%(≧40°),24小时',
|
||||||
|
防护等级: 'IP68',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'T950天通-2',
|
||||||
|
type: '单兵设备',
|
||||||
|
details: {
|
||||||
|
基本信息: {
|
||||||
|
外观设计: '172X81X15.7(不含天线),336g',
|
||||||
|
操作系统: 'Android P',
|
||||||
|
CPU: '展锐 Makalu T7510;虎贲T710+春藤IVY510',
|
||||||
|
存储: '标配:6GB ROM +128G RAM',
|
||||||
|
显示屏: '6.52吋水滴屏;HD+,1600*720(20:9)',
|
||||||
|
后置摄像头:
|
||||||
|
'后置为4800万主摄+200万微距+200万红外三摄组合,支持闪光灯',
|
||||||
|
前置摄像头: '1600万',
|
||||||
|
传感器相关:
|
||||||
|
'指纹|光线传感器|距离传感器|加速度传感器|地磁传感器|陀螺仪|气压传感器',
|
||||||
|
WLAN: '802.11a/b/g/n/AC 支持MIMO',
|
||||||
|
电池: '6000mAh@3.8V,内置不可拆卸,支持18W快充',
|
||||||
|
工作时间: '待机时长180h,卫星通话时长16h',
|
||||||
|
},
|
||||||
|
制式频段: {
|
||||||
|
卫星频段: '天通一号卫星',
|
||||||
|
频段: '2G:GSM 850/900/1800/1900;3G:WCDMA850/900/1900/2100;4G:TD-LTE B38/39/40/41;4G:FDD-LTE B1/3/5/7/8;5G: N1,N28,N41, N78,N79',
|
||||||
|
双卡: '双nano卡(卫星卡+运营商全网通卡)',
|
||||||
|
CA: 'B1+B3 下行 2CA(电信);B40/41带内上下行 2CA',
|
||||||
|
VOLTE: '支持',
|
||||||
|
},
|
||||||
|
IO接口: {
|
||||||
|
USB接口类型: 'TYPE-C USB3.0,支持OTG功能',
|
||||||
|
耳机接口: '3.5mm,美标',
|
||||||
|
存储卡: '支持TF卡扩展',
|
||||||
|
},
|
||||||
|
其它功能: {
|
||||||
|
蓝牙: 'V5.0',
|
||||||
|
定位: 'GPS、北斗混合定位、单北斗模式',
|
||||||
|
NFC: '支持',
|
||||||
|
充电方式: '三种充电方式(线充、座充、磁吸充电)',
|
||||||
|
按键: '开机键、音量+/-、 SOS(侧面)、PTT按键',
|
||||||
|
},
|
||||||
|
环境适应性: {
|
||||||
|
工作温度: '-20°~ 60°',
|
||||||
|
存储温度: '-40°~ 80°',
|
||||||
|
高温高湿: '(95±3)%(≧40°),24小时',
|
||||||
|
防护等级: 'IP68',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
navListManagement.navList = [
|
||||||
|
{ name: '共享门户', key: 'home' },
|
||||||
|
{ name: '能力集市', key: 'DetailsPageconetent' },
|
||||||
|
{ name: '能力云图', key: 'capabilityCloud' },
|
||||||
|
{ name: '能力统计', key: 'abilityStatistics' },
|
||||||
|
// { name: '开发指南', key: 'developmentGuide' },
|
||||||
|
{ name: '需求中心', key: 'demandCenter' },
|
||||||
|
// { name: '个人中心', key: 'personalCenter' },
|
||||||
|
// { name: '区市站点', key: 'mapTest' },
|
||||||
|
// { name: '后台管理', key: 'houtaiguanli' },
|
||||||
|
{ name: '赋能案例', key: 'assignCase' },
|
||||||
|
]
|
||||||
|
footerDataList.footerList = {
|
||||||
|
company: {
|
||||||
|
left: '青岛西海岸新区大数据发展促进局建设',
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
right: CONFIGITEM.vNum,
|
||||||
|
},
|
||||||
|
address: [
|
||||||
|
{
|
||||||
|
name: '鲁IC备00000000号',
|
||||||
|
value: '政府标识码3702000106',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '版权所有:青岛西海岸新区大数据发展促进局',
|
||||||
|
value: '地址:青岛市西海岸新区长江中路369号',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '电话:0532-86986596',
|
||||||
|
value: '传真:0532-86986596',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
xhaHasPermissionUser.list = [
|
||||||
|
'xihaian01',
|
||||||
|
'xihaian02',
|
||||||
|
'xihaian03',
|
||||||
|
'xihaian04',
|
||||||
|
'admin',
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
After Width: | Height: | Size: 29 KiB |
After Width: | Height: | Size: 27 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 19 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 44 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 474 B |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 38 KiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 6.2 KiB |
|
@ -425,6 +425,16 @@ export const constantRoutes = [
|
||||||
icon: 'error-warning-line',
|
icon: 'error-warning-line',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
// 资金报表
|
||||||
|
{
|
||||||
|
path: '/assertReport',
|
||||||
|
name: 'assertReport',
|
||||||
|
component: () => import('@/views/assertReport'),
|
||||||
|
meta: {
|
||||||
|
title: '能力云图',
|
||||||
|
icon: 'error-warning-line',
|
||||||
|
},
|
||||||
|
},
|
||||||
// 赋能案例详情
|
// 赋能案例详情
|
||||||
{
|
{
|
||||||
path: '/AssignCaseDetailPage',
|
path: '/AssignCaseDetailPage',
|
||||||
|
|
|
@ -66,15 +66,6 @@ function createMarkerClusterLayer(layerClassName, mapObj) {
|
||||||
} else {
|
} else {
|
||||||
// 使用默认图标
|
// 使用默认图标
|
||||||
markerClusterLayer = L.markerClusterGroup({
|
markerClusterLayer = L.markerClusterGroup({
|
||||||
// iconCreateFunction(cluster) {
|
|
||||||
// const markers = cluster.getAllChildMarkers()
|
|
||||||
// let n = 0
|
|
||||||
// for (let i = 0; i < markers.length; i++) {
|
|
||||||
// n += markers[i].number
|
|
||||||
// }
|
|
||||||
// return L.divIcon({ html: markers.length, className: "topic-marker-cluster-video" })
|
|
||||||
// },
|
|
||||||
// 是否允许指定 PolylineOptions 样式 spider
|
|
||||||
spiderfyOnMaxZoom: false,
|
spiderfyOnMaxZoom: false,
|
||||||
// 是否显示标记的边界
|
// 是否显示标记的边界
|
||||||
showCoverageOnHover: true,
|
showCoverageOnHover: true,
|
||||||
|
|
|
@ -92,9 +92,9 @@ instance.interceptors.request.use(
|
||||||
*/
|
*/
|
||||||
instance.interceptors.response.use(
|
instance.interceptors.response.use(
|
||||||
(response) => {
|
(response) => {
|
||||||
console.log('接口返回', response)
|
// console.log('接口返回', response)
|
||||||
console.log('接口返回headers', response.headers)
|
// console.log('接口返回headers', response.headers)
|
||||||
console.log('接口返回REDIRECT', response.headers.redirect)
|
// console.log('接口返回REDIRECT', response.headers.redirect)
|
||||||
response['Access-Control-Expose-Headers'] = 'redirect'
|
response['Access-Control-Expose-Headers'] = 'redirect'
|
||||||
const { code, message } = response.data
|
const { code, message } = response.data
|
||||||
|
|
||||||
|
@ -154,14 +154,14 @@ instance.interceptors.response.use(
|
||||||
// }
|
// }
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
console.log('接口error', error)
|
// console.log('接口error', error)
|
||||||
if (loadingInstance) loadingInstance.close()
|
if (loadingInstance) loadingInstance.close()
|
||||||
|
|
||||||
const { response, myMessage } = error
|
const { response, myMessage } = error
|
||||||
if (error.response) {
|
if (error.response) {
|
||||||
console.log('接口返回', response)
|
// console.log('接口返回', response)
|
||||||
console.log('接口返回headers', response.headers)
|
// console.log('接口返回headers', response.headers)
|
||||||
console.log('接口返回REDIRECT', response.headers.redirect)
|
// console.log('接口返回REDIRECT', response.headers.redirect)
|
||||||
const { status, data } = response
|
const { status, data } = response
|
||||||
|
|
||||||
handleCode(status, data.msg || myMessage, response.headers.redirect)
|
handleCode(status, data.msg || myMessage, response.headers.redirect)
|
||||||
|
|
|
@ -0,0 +1,426 @@
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="reservoir-survey">
|
||||||
|
|
||||||
|
<!-- 最上面 组件资源 -->
|
||||||
|
<div class="platform-overview-top">
|
||||||
|
<div class="top"><span class="title">组件资源</span></div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省XX万元 </span><img src="../image/xing1.png" /></div>
|
||||||
|
<div class="left">
|
||||||
|
<div class="item">
|
||||||
|
<div class="content1">
|
||||||
|
<div class="img"> </div>
|
||||||
|
<div class="num">智能算法</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">节省</div>
|
||||||
|
<div claSS="num">123万元</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">数量</div>
|
||||||
|
<div claSS="num">123个</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">共申请</div>
|
||||||
|
<div claSS="num">123次</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="content1">
|
||||||
|
<div class="img"> </div>
|
||||||
|
<div class="num">图层服务</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">节省</div>
|
||||||
|
<div claSS="num">123万元</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">数量</div>
|
||||||
|
<div claSS="num">123个</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">共申请</div>
|
||||||
|
<div claSS="num">123次</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="content1">
|
||||||
|
<div class="img"> </div>
|
||||||
|
<div class="num">开发组件</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">节省</div>
|
||||||
|
<div claSS="num">123万元</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">数量</div>
|
||||||
|
<div claSS="num">123个</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">共申请</div>
|
||||||
|
<div claSS="num">123次</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="content1">
|
||||||
|
<div class="img"> </div>
|
||||||
|
<div class="num">业务组件</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">节省</div>
|
||||||
|
<div claSS="num">123万元</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">数量</div>
|
||||||
|
<div claSS="num">123个</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="name">共申请</div>
|
||||||
|
<div claSS="num">123次</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 中间 应用资源-->
|
||||||
|
<div class="platform-overview-mid">
|
||||||
|
<div class="top"><span class="title">应用资源</span></div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省XX万元 </span><img src="../image/xing1.png" /></div>
|
||||||
|
<div class="component-services-content-right-right-bottom-right">
|
||||||
|
<div>
|
||||||
|
<span>排行</span>
|
||||||
|
<span>资源名称</span>
|
||||||
|
<span >提供部门</span>
|
||||||
|
<span >次数</span>
|
||||||
|
<span >贡献金额</span>
|
||||||
|
</div>
|
||||||
|
<div v-for="(item, index) in dataList" :key="index">
|
||||||
|
<span>{{ index + 1 }}</span>
|
||||||
|
<a-tooltip>
|
||||||
|
<template #title>{{ item.name }}</template>
|
||||||
|
<span>{{ item.name }}</span>
|
||||||
|
</a-tooltip>
|
||||||
|
<span>{{ item.count || 0 }}</span>
|
||||||
|
<span>{{ item.count || 0 }}</span>
|
||||||
|
<span>{{ item.count || 0 }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 最下方 基础设施 -->
|
||||||
|
<div class="platform-overview-bottom">
|
||||||
|
<div class="top"><span class="title">基础设施</span></div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省XX万元 </span><img src="../image/xing1.png" /></div>
|
||||||
|
<div class="huiketing">
|
||||||
|
<div style="float:left;width:30%">
|
||||||
|
<img :src="leftImg" alt="" />
|
||||||
|
</div>
|
||||||
|
<div style="float:left;width:70%;margin-top: 30px;">
|
||||||
|
<span style="font-size:22x">会客厅</span>
|
||||||
|
<span style="font-size:22px">节省 </span>
|
||||||
|
<span style="margin-right:10px;font-size:24px; color: #1ef6f5;"> 453</span>
|
||||||
|
<span style="font-size:20px"> 万元</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
|
||||||
|
//例如:import 《组件名称》 from '《组件路径》';
|
||||||
|
|
||||||
|
import ResourceOverviewAnimation from "@/views/assertReport/components/ResourceOverviewAnimation.vue";
|
||||||
|
export default {
|
||||||
|
//import引入的组件需要注入到对象中才能使用
|
||||||
|
components: {
|
||||||
|
ResourceOverviewAnimation
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
|
||||||
|
return {
|
||||||
|
leftImg:require('@/assets/capabilityCloud/resources-left.png'),
|
||||||
|
dataList:[{name:'第一个',count:43},{name:'第二个',count:43},
|
||||||
|
{name:'第三个',count:43},{name:'第四个',count:43},{name:'第五个',count:43}]
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang='less' scoped>
|
||||||
|
|
||||||
|
@keyframes topup50 {
|
||||||
|
from {
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
top: -100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.jiesheng{
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
color: #f4fcfe; border-color: #107bb0;
|
||||||
|
box-shadow: 1px 1px 5px 1px RGB(16, 123, 176, 0.8) inset
|
||||||
|
}
|
||||||
|
.reservoir-survey {
|
||||||
|
|
||||||
|
|
||||||
|
width: 520px;
|
||||||
|
height: 100%;
|
||||||
|
color: #f0fafa;
|
||||||
|
font-size: 18px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
|
||||||
|
.platform-overview-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 3.8rem;
|
||||||
|
background: rgba(0, 108, 188, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
-webkit-transition: all 100ms ease-out;
|
||||||
|
-moz-transition: all 100ms ease-out;
|
||||||
|
transition: all 100ms ease-out;
|
||||||
|
.top {
|
||||||
|
font-size: 24px;
|
||||||
|
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
|
||||||
|
|
||||||
|
padding: 0.1rem;
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.item {
|
||||||
|
width: 100%;
|
||||||
|
height: 0.6rem;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(33, 54, 88, 0.5),
|
||||||
|
rgba(33, 54, 88, 0)
|
||||||
|
);
|
||||||
|
margin-top: 0.14rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.content1 {
|
||||||
|
width: 1.8rem;
|
||||||
|
.img {
|
||||||
|
width: 0.36rem;
|
||||||
|
height: 0.36rem;
|
||||||
|
margin-left: 0.2rem;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
-webkit-transition: all 800ms ease-out;
|
||||||
|
-moz-transition: all 800ms ease-out;
|
||||||
|
transition: all 800ms ease-out;
|
||||||
|
}
|
||||||
|
.img:hover {
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
-webkit-transform: rotateY(180deg);
|
||||||
|
-moz-transform: rotateY(180deg);
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
-webkit-transition-delay: 0.2s;
|
||||||
|
-moz-transition-delay: 0.2s;
|
||||||
|
transition-delay: 0.2s;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #1ef6f5;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 1.5rem;
|
||||||
|
.name {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #1ef6f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item:nth-of-type(1) {
|
||||||
|
margin-top: 10px;
|
||||||
|
.img {
|
||||||
|
background: url('~@/assets/capabilityCloud/zyys.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item:nth-of-type(2) .img {
|
||||||
|
background: url('~@/assets/capabilityCloud/jszyys.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(3) .img {
|
||||||
|
background: url('~@/assets/capabilityCloud/tyyys.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(4) .img {
|
||||||
|
background: url('~@/assets/capabilityCloud/jszyys.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.platform-overview-mid {
|
||||||
|
margin-top:20px;
|
||||||
|
width: 100%;
|
||||||
|
height: 2.8rem;
|
||||||
|
background: rgba(0, 108, 188, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
-webkit-transition: all 100ms ease-out;
|
||||||
|
-moz-transition: all 100ms ease-out;
|
||||||
|
transition: all 100ms ease-out;
|
||||||
|
.top {
|
||||||
|
font-size: 24px;
|
||||||
|
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
padding: 0rem 0.1rem;
|
||||||
|
.component-services-content-right-right-bottom-right {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 0.16rem;
|
||||||
|
border: 0.01rem rgba(0, 108, 188, 0.7) solid;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
& > div {
|
||||||
|
height: 0.32rem;
|
||||||
|
& > span {
|
||||||
|
display: inline-block;
|
||||||
|
height: 0.32rem;
|
||||||
|
line-height: 0.32rem;
|
||||||
|
border-right: 0.01rem rgba(0, 108, 188, 0.7) solid;
|
||||||
|
border-bottom: 0.01rem rgba(0, 108, 188, 0.7) solid;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
& > span:first-child {
|
||||||
|
width: 0.47rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
& > span:nth-child(2) {
|
||||||
|
width: 1.47rem;
|
||||||
|
padding-left: 0.05rem;
|
||||||
|
}
|
||||||
|
& > span:nth-child(3) {
|
||||||
|
width: 0.8rem;
|
||||||
|
padding-left: 0.05rem;
|
||||||
|
}
|
||||||
|
& > span:nth-child(4) {
|
||||||
|
width: 1rem;
|
||||||
|
padding-left: 0.05rem;
|
||||||
|
}
|
||||||
|
& > span:last-child {
|
||||||
|
width: 0.8rem;
|
||||||
|
color: #1ffefd;
|
||||||
|
text-align: center;
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > div:first-child {
|
||||||
|
color: #1ffefd;
|
||||||
|
background: #27528c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform-overview-bottom {
|
||||||
|
margin-top:20px;
|
||||||
|
width: 100%;
|
||||||
|
height: 1.8rem;
|
||||||
|
background: rgba(0, 108, 188, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
-webkit-transition: all 100ms ease-out;
|
||||||
|
-moz-transition: all 100ms ease-out;
|
||||||
|
transition: all 100ms ease-out;
|
||||||
|
.top {
|
||||||
|
font-size: 24px;
|
||||||
|
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.1rem;
|
||||||
|
.huiketing{
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 90px;
|
||||||
|
width: 90px;
|
||||||
|
position: absolute;
|
||||||
|
// left: 50%;
|
||||||
|
// bottom: -1.38rem;
|
||||||
|
// margin-left: -45%;
|
||||||
|
animation: move 5s linear 0s infinite;
|
||||||
|
@keyframes move {
|
||||||
|
from {
|
||||||
|
transform: rotateY(360deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotateY(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
|
@ -0,0 +1,356 @@
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="right-survey">
|
||||||
|
<!--最上面 部门排行榜-->
|
||||||
|
<div class="platform-overview-top">
|
||||||
|
<div class="top"><span class="title">部门排行榜</span></div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="bottom-item">
|
||||||
|
<div class="inner-title">
|
||||||
|
<p style="width: 220px">市级部门共享贡献资金排行</p>
|
||||||
|
</div>
|
||||||
|
<div class="left-list">
|
||||||
|
<div class="left-list1">排行</div>
|
||||||
|
<div class="left-list2">部门名称</div>
|
||||||
|
<div class="left-list1">提供资源</div>
|
||||||
|
<div class="left-list1">贡献总量</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-list" v-for="item in top5AreaList">
|
||||||
|
<div class="left-list1" v-if="item.img">
|
||||||
|
<img :src="item.img" />
|
||||||
|
</div>
|
||||||
|
<div class="left-list1" v-else>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
:class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
|
||||||
|
@click="chooseSelectArea(item)"
|
||||||
|
>
|
||||||
|
{{ item.areaName }}
|
||||||
|
</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-item">
|
||||||
|
<div class="inner-title">
|
||||||
|
<p style="width: 220px">市级部门审评节省资金排行</p>
|
||||||
|
</div>
|
||||||
|
<div class="left-list">
|
||||||
|
<div class="left-list1">排行</div>
|
||||||
|
<div class="left-list2">部门名称</div>
|
||||||
|
<div class="left-list1">提供资源</div>
|
||||||
|
<div class="left-list1">贡献总量</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-list" v-for="item in top5AreaList">
|
||||||
|
<div class="left-list1" v-if="item.img">
|
||||||
|
<img :src="item.img" />
|
||||||
|
</div>
|
||||||
|
<div class="left-list1" v-else>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
:class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
|
||||||
|
@click="chooseSelectArea(item)"
|
||||||
|
>
|
||||||
|
{{ item.areaName }}
|
||||||
|
</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="bottom-item">
|
||||||
|
<div class="inner-title">
|
||||||
|
<p style="width: 220px">区市部门共享贡献资金排行</p>
|
||||||
|
</div>
|
||||||
|
<div class="left-list">
|
||||||
|
<div class="left-list1">排行</div>
|
||||||
|
<div class="left-list2">部门名称</div>
|
||||||
|
<div class="left-list1">提供资源</div>
|
||||||
|
<div class="left-list1">贡献总量</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-list" v-for="item in top5AreaList">
|
||||||
|
<div class="left-list1" v-if="item.img">
|
||||||
|
<img :src="item.img" />
|
||||||
|
</div>
|
||||||
|
<div class="left-list1" v-else>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
:class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
|
||||||
|
@click="chooseSelectArea(item)"
|
||||||
|
>
|
||||||
|
{{ item.areaName }}
|
||||||
|
</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-item">
|
||||||
|
<div class="inner-title">
|
||||||
|
<p style="width: 220px">区市部门申请节省资金排行</p>
|
||||||
|
</div>
|
||||||
|
<div class="left-list">
|
||||||
|
<div class="left-list1">排行</div>
|
||||||
|
<div class="left-list2">部门名称</div>
|
||||||
|
<div class="left-list1">提供资源</div>
|
||||||
|
<div class="left-list1">贡献总量</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-list" v-for="item in top5AreaList">
|
||||||
|
<div class="left-list1" v-if="item.img">
|
||||||
|
<img :src="item.img" />
|
||||||
|
</div>
|
||||||
|
<div class="left-list1" v-else>{{ item.name }}</div>
|
||||||
|
<div
|
||||||
|
:class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
|
||||||
|
@click="chooseSelectArea(item)"
|
||||||
|
>
|
||||||
|
{{ item.areaName }}
|
||||||
|
</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
<div class="left-list1">{{ item.num }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="platform-overview-bottom">
|
||||||
|
<div class="top"><span class="title">资源汇聚总量</span></div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in servicesSnum"
|
||||||
|
:key="index"
|
||||||
|
class="component-services-content-right-left-content-son"
|
||||||
|
>
|
||||||
|
<p>{{ item.type }}</p>
|
||||||
|
<p class="num">{{ item.amount }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
//import引入的组件需要注入到对象中才能使用
|
||||||
|
components: {},
|
||||||
|
created() {},
|
||||||
|
destroyed() {},
|
||||||
|
|
||||||
|
mounted() {},
|
||||||
|
data() {
|
||||||
|
//这里存放数据
|
||||||
|
return {
|
||||||
|
top5AreaList: [
|
||||||
|
{
|
||||||
|
title: 'TOP1',
|
||||||
|
img: require('../image/one.png'),
|
||||||
|
areaName: '台东商圈',
|
||||||
|
areaId: '1',
|
||||||
|
num: '12',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'TOP2',
|
||||||
|
img: require('../image/two.png'),
|
||||||
|
areaName: '李村商圈',
|
||||||
|
areaId: '2',
|
||||||
|
num: '8',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'TOP3',
|
||||||
|
img: require('../image/three.png'),
|
||||||
|
areaName: '五四广场',
|
||||||
|
areaId: '3',
|
||||||
|
num: '7',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '4',
|
||||||
|
img: require('../image/four.png'),
|
||||||
|
areaName: '第一海水浴场',
|
||||||
|
areaId: '4',
|
||||||
|
num: '5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '5',
|
||||||
|
img: require('../image/five.png'),
|
||||||
|
areaName: '石老人海水浴场',
|
||||||
|
areaId: '5',
|
||||||
|
num: '4',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
servicesSnum: [
|
||||||
|
{ type: '组件服务', amount: 124 },
|
||||||
|
{ type: '应用资源', amount: 34244 },
|
||||||
|
{ type: '基础设施', amount: 125555 },
|
||||||
|
{ type: '数据资源', amount: 5555 },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang='less' scoped>
|
||||||
|
.top5-content::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
/*height: 4px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.top5-content::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #00deff;
|
||||||
|
}
|
||||||
|
.map-search-result::-webkit-scrollbar-track,
|
||||||
|
.top5-content::-webkit-scrollbar-track {
|
||||||
|
background-color: #424748;
|
||||||
|
}
|
||||||
|
@keyframes topup50 {
|
||||||
|
from {
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
top: -100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right-survey {
|
||||||
|
width: 620px;
|
||||||
|
height: 100%;
|
||||||
|
color: #f0fafa;
|
||||||
|
font-size: 18px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.platform-overview-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 6.8rem;
|
||||||
|
background: rgba(0, 108, 188, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
-webkit-transition: all 100ms ease-out;
|
||||||
|
-moz-transition: all 100ms ease-out;
|
||||||
|
transition: all 100ms ease-out;
|
||||||
|
.top {
|
||||||
|
font-size: 24px;
|
||||||
|
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
margin-top: 4px;
|
||||||
|
// margin-top:10px;
|
||||||
|
width: 100%;
|
||||||
|
display: table;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
:hover.bottom-item{
|
||||||
|
background: rgba(0, 108, 188, 0.5);
|
||||||
|
}
|
||||||
|
.bottom-item {
|
||||||
|
background: rgba(0, 108, 188, 0.4);
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: 4px 5px;
|
||||||
|
.inner-title {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 5px;
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 27px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#041d2f 0,
|
||||||
|
rgba(8, 115, 193, 0) 90%
|
||||||
|
);
|
||||||
|
color: #1ffefd;
|
||||||
|
width: auto;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
display: inline-table;
|
||||||
|
width: 48%;
|
||||||
|
height: 3rem;
|
||||||
|
.left-list {
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
height: 24px;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
.left-list1 {
|
||||||
|
font-size: 14x;
|
||||||
|
float: left;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
.left-list2 {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
float: left;
|
||||||
|
width: 40%;
|
||||||
|
&:hover {
|
||||||
|
color: rgb(0 255 255);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active-item {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
float: left;
|
||||||
|
width: 40%;
|
||||||
|
color: rgb(0 255 255);
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.platform-overview-bottom {
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 100%;
|
||||||
|
height: 1.8rem;
|
||||||
|
background: rgba(0, 108, 188, 0.2);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid rgba(0, 108, 188, 0.7);
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
-webkit-transition: all 100ms ease-out;
|
||||||
|
-moz-transition: all 100ms ease-out;
|
||||||
|
transition: all 100ms ease-out;
|
||||||
|
.top {
|
||||||
|
font-size: 24px;
|
||||||
|
background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.2rem;
|
||||||
|
.component-services-content-right-left-content-son {
|
||||||
|
background: url('~@/assets/capabilityCloud/Component_services_snum.png')
|
||||||
|
no-repeat;
|
||||||
|
background-size: 1.1rem 0.59rem;
|
||||||
|
background-position: center;
|
||||||
|
text-align: center;
|
||||||
|
& > p:first-child {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.16rem;
|
||||||
|
line-height: 0.16rem;
|
||||||
|
margin-bottom: 0.12rem;
|
||||||
|
}
|
||||||
|
& > p:last-child {
|
||||||
|
color: #1ef6f5;
|
||||||
|
font-size: 0.28rem;
|
||||||
|
line-height: 0.28rem;
|
||||||
|
padding-bottom: 0.24rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,548 @@
|
||||||
|
<!--
|
||||||
|
* @Author: hisense.xiaoshangqing
|
||||||
|
* @Date: 2022-7-26 10:00:48
|
||||||
|
* @LastEditors: xiaoshangqing
|
||||||
|
* @LastEditTime: 2022-07-27 16:56:55
|
||||||
|
* @Description: 水库专题首页缩略图 -->
|
||||||
|
<template>
|
||||||
|
<div class="river-course-view">
|
||||||
|
<div ref="qdCityMap" class="city-map-content-echarts"></div>
|
||||||
|
<div class="topic-animation1 display-animation1"></div>
|
||||||
|
<div class="topic-animation2 display-animation2"></div>
|
||||||
|
<div class="topic-animation3 display-animation3"></div>
|
||||||
|
<div class="topic-animation4 display-animation4"></div>
|
||||||
|
<div class="topic-animation5 display-animation5"></div>
|
||||||
|
<div class="topic-animation6 display-animation6"></div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
|
||||||
|
//例如:import 《组件名称》 from '《组件路径》';
|
||||||
|
import axios from 'axios'
|
||||||
|
const echarts = require("echarts");
|
||||||
|
export default {
|
||||||
|
//import引入的组件需要注入到对象中才能使用
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
//这里存放数据
|
||||||
|
return {
|
||||||
|
|
||||||
|
districtData: [
|
||||||
|
{
|
||||||
|
name: "市南区",
|
||||||
|
value: [120.395966, 36.070892],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "市北区",
|
||||||
|
value: [120.355026, 36.083819],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "李沧区",
|
||||||
|
value: [120.421236, 36.160023],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "崂山区",
|
||||||
|
value: [120.467393, 36.102569],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "城阳区",
|
||||||
|
value: [120.389135, 36.306833],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "即墨区",
|
||||||
|
value: [120.447352, 36.390847],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "莱西市",
|
||||||
|
value: [120.526226, 36.86509],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "胶州市",
|
||||||
|
value: [120.006202, 36.285878],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "平度市",
|
||||||
|
value: [119.959012, 36.788828],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "西海岸",
|
||||||
|
value: [119.995518, 35.875138],
|
||||||
|
num:232,
|
||||||
|
},
|
||||||
|
],//青岛市区划坐标数据
|
||||||
|
reservoirTypeArr:[
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
type: "warning",
|
||||||
|
name: "超汛限",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
type: "normal",
|
||||||
|
name: "正常",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
// 1、菜单切换功能
|
||||||
|
tabs: [
|
||||||
|
{ name: "降雨量图" },
|
||||||
|
{ name: "人口热力图" },
|
||||||
|
{ name: "水库等级图" },
|
||||||
|
{ name: "水库告警分布" },
|
||||||
|
],
|
||||||
|
selectedTabIndex: 3,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//监听属性 类似于data概念
|
||||||
|
computed: {},
|
||||||
|
//监控data中的数据变化
|
||||||
|
watch: {},
|
||||||
|
//生命周期 - 创建完成(可以访问当前this实例)
|
||||||
|
created() {},
|
||||||
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
||||||
|
mounted() {
|
||||||
|
this.findAllInfo();
|
||||||
|
// this.initMap();
|
||||||
|
},
|
||||||
|
//方法集合
|
||||||
|
methods: {
|
||||||
|
findAllInfo(){
|
||||||
|
let data=this.districtData
|
||||||
|
// let result=[]
|
||||||
|
// for(let i=0;i<data.length;i++){
|
||||||
|
// let value=[]
|
||||||
|
// let d=res.data.data[i]
|
||||||
|
// value.push(d["longitude"])
|
||||||
|
// value.push(d["latitude"])
|
||||||
|
// d["value"]=value
|
||||||
|
// }
|
||||||
|
this.initMap(data)
|
||||||
|
|
||||||
|
},
|
||||||
|
initMap(data) {
|
||||||
|
this.loadedDataUrl = "./static/qingdao.json";
|
||||||
|
let _this=this
|
||||||
|
axios.get(_this.loadedDataUrl, {}) .then(geoJson =>{
|
||||||
|
|
||||||
|
_this.myChart = echarts.init(_this.$refs.qdCityMap);
|
||||||
|
echarts.registerMap("qingdao", geoJson.data);
|
||||||
|
const imgBack = new Image();
|
||||||
|
imgBack.src = "./static/assets/map-back.png";
|
||||||
|
const img = new Image();
|
||||||
|
img.src = "./static/assets/echarts-map-bak.png";
|
||||||
|
const typeImg = new Image();
|
||||||
|
typeImg.src = "./static/assets/reservoir-type-bak.png";
|
||||||
|
|
||||||
|
_this.option = {
|
||||||
|
visualMap: {
|
||||||
|
show: false,
|
||||||
|
max: 100,
|
||||||
|
seriesIndex: 1,
|
||||||
|
inRange: {
|
||||||
|
color: ["#000000", "yellow", "pink"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
geo: [
|
||||||
|
{
|
||||||
|
map: "qingdao",
|
||||||
|
roam: true, // 是否允许缩放
|
||||||
|
aspectScale: 0.8,
|
||||||
|
zoom: 1.1, // 默认显示级别
|
||||||
|
top: 100,
|
||||||
|
z: 6,
|
||||||
|
label: {
|
||||||
|
show: true, //是否显示市
|
||||||
|
textStyle: {
|
||||||
|
color: "#ffffff", //文字颜色
|
||||||
|
fontSize: 16, //文字大小
|
||||||
|
fontFamily: "微软雅黑",
|
||||||
|
backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderColor: "#25e8ff",
|
||||||
|
borderWidth: 2,
|
||||||
|
/* areaColor: "#004d8e", //rgba设置透明度0
|
||||||
|
shadowColor: "#10daff",
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 10,
|
||||||
|
opacity: 0.53, */
|
||||||
|
areaColor: {
|
||||||
|
image: img,
|
||||||
|
repeat: "repeat",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
disabled: false,
|
||||||
|
focus: "none",
|
||||||
|
itemStyle: {
|
||||||
|
color: null,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
//color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
map: "qingdao",
|
||||||
|
aspectScale: 0.8,
|
||||||
|
roam: true, // 是否允许缩放
|
||||||
|
zoom: 1.1, // 默认显示级别
|
||||||
|
top: 105,
|
||||||
|
z: 4,
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: "#1864a5",
|
||||||
|
borderColor: "transparent",
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
map: "qingdao",
|
||||||
|
aspectScale: 0.8,
|
||||||
|
roam: true, // 是否允许缩放
|
||||||
|
zoom: 1.1, // 默认显示级别
|
||||||
|
top: 110,
|
||||||
|
z: 3,
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: "#1864a5",
|
||||||
|
borderColor: "transparent",
|
||||||
|
borderWidth: 2,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
map: "qingdao",
|
||||||
|
aspectScale: 0.8,
|
||||||
|
roam: true, // 是否允许缩放
|
||||||
|
zoom: 1.1, // 默认显示级别
|
||||||
|
top: 115,
|
||||||
|
z: 2,
|
||||||
|
itemStyle: {
|
||||||
|
areaColor: "#1864a5",
|
||||||
|
//borderColor: "#0f3866",
|
||||||
|
borderColor: "transparent",
|
||||||
|
borderWidth: 1,
|
||||||
|
shadowColor: "#808080", // 外部阴影
|
||||||
|
shadowBlur: "10",
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
// {
|
||||||
|
// tooltip: {
|
||||||
|
// show: false,
|
||||||
|
// },
|
||||||
|
// type: "effectScatter",
|
||||||
|
// coordinateSystem: "geo",
|
||||||
|
// rippleEffect: {
|
||||||
|
// scale: 3,
|
||||||
|
// brushType: "stroke",
|
||||||
|
// },
|
||||||
|
// showEffectOn: "render",
|
||||||
|
// itemStyle: {
|
||||||
|
// normal: {
|
||||||
|
// shadowColor: "#ffffff",
|
||||||
|
// shadowBlur: 10,
|
||||||
|
// shadowOffsetX: 0,
|
||||||
|
// shadowOffsetY: 0,
|
||||||
|
// color: "#df1818",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// label: {
|
||||||
|
// normal: {
|
||||||
|
// color: "#fff",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// symbol: "circle",
|
||||||
|
// symbolSize: [10, 5],
|
||||||
|
// data:data, //地标闪烁小圆点
|
||||||
|
// zlevel: 1,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// type: "scatter",
|
||||||
|
// coordinateSystem: "geo",
|
||||||
|
// symbol: function (value, params) {
|
||||||
|
// return 'image://static/assets/warning-reservoir.png';
|
||||||
|
// },
|
||||||
|
// symbolSize: [25, 35],
|
||||||
|
// symbolOffset: [0, -20],
|
||||||
|
// z: 9999,
|
||||||
|
// data:data, //企业图片
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
type: 'scatter',
|
||||||
|
coordinateSystem: 'geo',
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
formatter: function (params) {
|
||||||
|
var name = params.data.num;
|
||||||
|
var text = `{fline|${name}}`;
|
||||||
|
return text;
|
||||||
|
},
|
||||||
|
color: '#fff',
|
||||||
|
rich: {
|
||||||
|
fline: {
|
||||||
|
padding: [0, 25],
|
||||||
|
color: '#dcc52f',
|
||||||
|
textShadowColor: '#030615',
|
||||||
|
textShadowBlur: '0',
|
||||||
|
textShadowOffsetX: 1,
|
||||||
|
textShadowOffsetY: 1,
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 400,
|
||||||
|
},
|
||||||
|
tline: {
|
||||||
|
padding: [0, 27],
|
||||||
|
color: '#afd31d',
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#e3e00a',
|
||||||
|
},
|
||||||
|
symbol: "image://static/assets/reservoir-type-bak.png",
|
||||||
|
symbolSize: [84, 28],
|
||||||
|
symbolOffset: [0, -20],
|
||||||
|
z: 999,
|
||||||
|
data: data, //企业名称
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
],
|
||||||
|
};
|
||||||
|
_this.myChart.setOption(_this.option);
|
||||||
|
_this.myChart.on("click", (params) => {
|
||||||
|
// console.log("点的是什么", params);
|
||||||
|
// //进入对应区的三维地图
|
||||||
|
// //跟右下角菜单切换触发调用方法一样,但是要传递区划参数,区划name
|
||||||
|
// const index = _this.districtData.findIndex((item) => {
|
||||||
|
// return item.name === params.name ;
|
||||||
|
// });
|
||||||
|
// //console.log('rrrrrrrr5555',index);
|
||||||
|
// let districtObject = {
|
||||||
|
// name:params.name,
|
||||||
|
// longitude:_this.districtData[index].value[0],
|
||||||
|
// latitude:_this.districtData[index].value[1],
|
||||||
|
// };
|
||||||
|
// _this.$emit('jumpIntoMap',districtObject);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeCreate() {}, //生命周期 - 创建之前
|
||||||
|
beforeMount() {}, //生命周期 - 挂载之前
|
||||||
|
beforeUpdate() {}, //生命周期 - 更新之前
|
||||||
|
updated() {}, //生命周期 - 更新之后
|
||||||
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
||||||
|
destroyed() {}, //生命周期 - 销毁完成
|
||||||
|
activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang='less' scoped>
|
||||||
|
//@import url(); 引入公共css类
|
||||||
|
|
||||||
|
.river-course-view {
|
||||||
|
position: relative;
|
||||||
|
width:100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("~@/assets/common/homePage/big-bak.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.city-map-content-echarts {
|
||||||
|
width: 11rem;
|
||||||
|
height: 9rem;
|
||||||
|
top: 80px;
|
||||||
|
left: 400px;
|
||||||
|
bottom: 60px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.map-menu {
|
||||||
|
position: absolute;
|
||||||
|
right: 486px;
|
||||||
|
bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items:flex-end;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index:99999;
|
||||||
|
.map-tab {
|
||||||
|
// 1、菜单切换功能
|
||||||
|
display: flex;
|
||||||
|
pointer-events: auto;
|
||||||
|
.tab-item {
|
||||||
|
flex: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
min-width: 1.4rem;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #2ab1e9;
|
||||||
|
border-left: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 0px 20px;
|
||||||
|
background-color: #0d284f;
|
||||||
|
color: #35cffc;
|
||||||
|
&.active {
|
||||||
|
color: #fefefe;
|
||||||
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #1eafda);
|
||||||
|
}
|
||||||
|
&:first-child {
|
||||||
|
border-left: 1px solid #2ab1e9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.reservoirType-list{
|
||||||
|
position: absolute;
|
||||||
|
right: 486px;
|
||||||
|
width: 122px;
|
||||||
|
height: 100px;
|
||||||
|
top: 164px;
|
||||||
|
padding: 10px 0 0 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: rgba(13,40,79,0.5);
|
||||||
|
border:1px solid #0d284f;
|
||||||
|
padding-top:22px;
|
||||||
|
.type-legend{
|
||||||
|
margin-bottom:20px;
|
||||||
|
margin-left: 10px;
|
||||||
|
display:flex;
|
||||||
|
flex-direction:row;
|
||||||
|
.legend-color{
|
||||||
|
width:12px;
|
||||||
|
height:12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
|
.color-normal{
|
||||||
|
background-color:#00ebac ;
|
||||||
|
}
|
||||||
|
.color-warning{
|
||||||
|
background-color:#ff3537 ;
|
||||||
|
}
|
||||||
|
.legend-text{
|
||||||
|
margin-left: 10px;
|
||||||
|
span{
|
||||||
|
color:#ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.topic-animation1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
margin: 0px auto;
|
||||||
|
background-image: url("~@/assets/common/homePage/animation1.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.display-animation1 {
|
||||||
|
animation: topup1 5s linear 1s infinite;
|
||||||
|
}
|
||||||
|
.topic-animation2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
margin: 0px auto;
|
||||||
|
background-image: url("~@/assets/common/homePage/animation2.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.display-animation2 {
|
||||||
|
animation: topup1 5s linear 2s infinite;
|
||||||
|
}
|
||||||
|
.topic-animation3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
margin: 0px auto;
|
||||||
|
background-image: url("~@/assets/common/homePage/animation3.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.display-animation3 {
|
||||||
|
animation: topup1 5s linear 3s infinite;
|
||||||
|
}
|
||||||
|
.topic-animation4 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
margin: 0px auto;
|
||||||
|
background-image: url("~@/assets/common/homePage/animation4.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.display-animation4 {
|
||||||
|
animation: topup1 5s linear infinite;
|
||||||
|
}
|
||||||
|
.topic-animation5 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
margin: 0px auto;
|
||||||
|
background-image: url("~@/assets/common/homePage/animation5.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.display-animation5 {
|
||||||
|
animation: topup1 5s linear 4s infinite;
|
||||||
|
}
|
||||||
|
.topic-animation6 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
margin: 0px auto;
|
||||||
|
background-image: url("~@/assets/common/homePage/animation6.png");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.display-animation6 {
|
||||||
|
animation: topup1 5s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes topup1 {
|
||||||
|
from {
|
||||||
|
top: 0%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
top: -100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,675 @@
|
||||||
|
<!--
|
||||||
|
* @Author: hisense.fanchunxiang
|
||||||
|
* @Date: 2021-10-26 15:16:59
|
||||||
|
* @LastEditors: hisense.fanchunxiang
|
||||||
|
* @LastEditTime: 2021-10-29 17:38:29
|
||||||
|
* @Description: file mountainData
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="team-distribution-ball">
|
||||||
|
<div class="bg-ball" />
|
||||||
|
<div class="rotating-ring" />
|
||||||
|
<div class="sum-ball">
|
||||||
|
<div class="top">
|
||||||
|
</div>
|
||||||
|
<div class="bottom">企业</div>
|
||||||
|
</div>
|
||||||
|
<div class="num-wrap">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in resourceTypeData"
|
||||||
|
:key="index"
|
||||||
|
@click="handleClick(item, index)"
|
||||||
|
>
|
||||||
|
<p>{{item.typeNum}}个</p>
|
||||||
|
<p class="num-wrap-bottom">{{item.typeName}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
// 选择查询的时间段
|
||||||
|
selectedPeriod: {
|
||||||
|
type: Number,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
nums: 0,
|
||||||
|
stationList: [],
|
||||||
|
// startTime: moment().subtract(12, "h").format("YYYY-MM-DD HH:mm:ss"),
|
||||||
|
// endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
|
||||||
|
resourceType: ["石油化工", "有机化工", "精细化工", "化肥农药"],
|
||||||
|
detailTimer: null,
|
||||||
|
arr: [],
|
||||||
|
animationLock: true,
|
||||||
|
resourceTypeData: [
|
||||||
|
{
|
||||||
|
typeName: "石油化工",
|
||||||
|
typeNum: "17",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
typeName: "有机化工",
|
||||||
|
typeNum: "329",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
typeName: "精细化工",
|
||||||
|
typeNum: "432",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
typeName: "化肥农药",
|
||||||
|
typeNum: "20",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
resourceData:{}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.arr.push(document.querySelectorAll(".num-wrap div"));
|
||||||
|
console.log("===============>", this.arr);
|
||||||
|
this.setTimer();
|
||||||
|
this.setRotateTimer();
|
||||||
|
this.getResourceTypeData();
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
// 每次离开当前界面时,清除定时器
|
||||||
|
clearInterval(this.detailTimer);
|
||||||
|
this.detailTimer = null;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(item, index) {
|
||||||
|
if (this.animationLock) {
|
||||||
|
// console.log(item);
|
||||||
|
if(item.typeName == "应急专家"){
|
||||||
|
bus.$emit('refreshChartData', 'expert', this.resourceData.expertData.expertDistribution);
|
||||||
|
}
|
||||||
|
else if(item.typeName == "物资储备库"){
|
||||||
|
bus.$emit('refreshChartData', 'storage', this.resourceData.storageData.storageDistribution);
|
||||||
|
}
|
||||||
|
else if(item.typeName == "应急预案") {
|
||||||
|
bus.$emit('refreshChartData', 'plan', this.resourceData.planData);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
bus.$emit('refreshChartData', 'resource', this.resourceData.planData);
|
||||||
|
}
|
||||||
|
if (index > 0 && this.resourceTypeData.length - index >= 1) {
|
||||||
|
let i = 1;
|
||||||
|
clearInterval(this.rotateTimer);
|
||||||
|
this.animationFun2();
|
||||||
|
if (this.resourceTypeData.length - index === 1) {
|
||||||
|
this.setRotateTimer();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.rotateTimer2 = setInterval(() => {
|
||||||
|
this.animationFun2();
|
||||||
|
i++;
|
||||||
|
// console.log(i, this.mountainData.length - index)
|
||||||
|
if (i === (this.resourceTypeData.length - index)) {
|
||||||
|
clearInterval(this.rotateTimer2);
|
||||||
|
this.setRotateTimer();
|
||||||
|
}
|
||||||
|
}, 1050);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//进入页面获取资源类别各自的总数,得到所有的统计数据,应急物资选中之后下面的图表显示什么???
|
||||||
|
getResourceTypeData(){
|
||||||
|
// Promise.all([
|
||||||
|
// this.getExpertStatisticsData(),
|
||||||
|
// this.getResourceStatisticsData(),
|
||||||
|
// this.getStorageStatisticsData(),
|
||||||
|
// this.getPlanStatisticsData(),
|
||||||
|
// ]).then((result)=>{
|
||||||
|
// //给球赋值、给图表赋值//调用父页面显示某一个图表数据
|
||||||
|
// //console.log('this.resourceData',this.resourceData);
|
||||||
|
// this.resourceTypeData.forEach(item => {
|
||||||
|
// if(item.typeName == "应急专家")
|
||||||
|
// {item.typeNum = this.resourceData.expertData.expertNum
|
||||||
|
// }
|
||||||
|
// else if(item.typeName=="物资储备库"){
|
||||||
|
// item.typeNum = this.resourceData.storageData.storageNum
|
||||||
|
// }
|
||||||
|
// else if(item.typeName=="应急预案"){
|
||||||
|
// item.typeNum = this.resourceData.planData.city.length + this.resourceData.planData.country.length + this.resourceData.planData.province.length;
|
||||||
|
// }
|
||||||
|
// else {
|
||||||
|
// item.typeNum = 540;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// });
|
||||||
|
// bus.$emit('refreshChartData', 'expert', this.resourceData.expertData.expertDistribution);
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 每五分钟获取一次资源数据
|
||||||
|
setTimer() {
|
||||||
|
this.clearTimer();
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
this.getResourceTypeData();
|
||||||
|
}, 5 * 60 * 1000);
|
||||||
|
},
|
||||||
|
animationFun() {
|
||||||
|
// console.log(this.arr[0][0].classList)
|
||||||
|
if (this.animationLock) {
|
||||||
|
this.animationLock = !this.animationLock;
|
||||||
|
this.arr[0][0].classList.add("animation1");
|
||||||
|
this.arr[0][1].classList.add("animation2");
|
||||||
|
this.arr[0][2].classList.add("animation3");
|
||||||
|
this.arr[0][3].classList.add("animation4");
|
||||||
|
setTimeout(() => {
|
||||||
|
for (var i = 0; i < this.resourceTypeData.length - 1; i++) {
|
||||||
|
// 改变展示点击的山体
|
||||||
|
this.resourceTypeData.push(this.resourceTypeData.shift());
|
||||||
|
this.resourceTypeData.push(this.resourceTypeData.shift());
|
||||||
|
}
|
||||||
|
this.arr[0][0].classList.remove("animation1");
|
||||||
|
this.arr[0][1].classList.remove("animation2");
|
||||||
|
this.arr[0][2].classList.remove("animation3");
|
||||||
|
this.arr[0][3].classList.remove("animation4");
|
||||||
|
//更新图表数据 bus.$emit('refreshChartData', val);
|
||||||
|
// if(this.resourceTypeData[0].typeName == '应急专家'){
|
||||||
|
// bus.$emit('refreshChartData', 'expert', this.resourceData.expertData.expertDistribution);
|
||||||
|
// }else if(this.resourceTypeData[0].typeName == '物资储备库'){
|
||||||
|
// bus.$emit('refreshChartData', 'storage', this.resourceData.storageData.storageDistribution);
|
||||||
|
//
|
||||||
|
// }else if(this.resourceTypeData[0].typeName == '应急预案'){
|
||||||
|
// bus.$emit('refreshChartData', 'plan', this.resourceData.planData);
|
||||||
|
// }else{
|
||||||
|
// }
|
||||||
|
this.animationLock = !this.animationLock;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animationFun2() {
|
||||||
|
// console.log(this.arr[0][0].classList)
|
||||||
|
this.animationLock = !this.animationLock;
|
||||||
|
this.arr[0][0].classList.add("animation2-1");
|
||||||
|
this.arr[0][1].classList.add("animation2-2");
|
||||||
|
this.arr[0][2].classList.add("animation2-3");
|
||||||
|
this.arr[0][3].classList.add("animation2-4");
|
||||||
|
setTimeout(() => {
|
||||||
|
for (var i = 0; i < this.resourceTypeData.length - 1; i++) {
|
||||||
|
// 改变展示点击的山体
|
||||||
|
let selectedData={};
|
||||||
|
bus.$emit('refreshChartData',selectedData);
|
||||||
|
this.resourceTypeData.push(this.resourceTypeData.shift());
|
||||||
|
}
|
||||||
|
this.arr[0][0].classList.remove("animation2-1");
|
||||||
|
this.arr[0][1].classList.remove("animation2-2");
|
||||||
|
this.arr[0][2].classList.remove("animation2-3");
|
||||||
|
this.arr[0][3].classList.remove("animation2-4");
|
||||||
|
this.animationLock = !this.animationLock;
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
//每8秒旋转一次
|
||||||
|
setRotateTimer() {
|
||||||
|
this.clearTimer();
|
||||||
|
// this.animationFun();
|
||||||
|
this.rotateTimer = setInterval(() => {
|
||||||
|
this.animationFun();
|
||||||
|
},8*1000);
|
||||||
|
},
|
||||||
|
clearTimer() {
|
||||||
|
clearInterval(this.timer);
|
||||||
|
clearInterval(this.rotateTimer);
|
||||||
|
this.timer = null;
|
||||||
|
this.rotateTimer = null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.team-distribution-ball {
|
||||||
|
width: 466px;
|
||||||
|
height: 230px;
|
||||||
|
position: relative;
|
||||||
|
left: -10px;
|
||||||
|
.bg-ball {
|
||||||
|
width: 466px;
|
||||||
|
height: 230px;
|
||||||
|
position: absolute;
|
||||||
|
left: 60%;
|
||||||
|
margin-left: -210px;
|
||||||
|
margin-top: 30px;
|
||||||
|
background: url("~@/assets/common/homePage/bg_ball.png")
|
||||||
|
no-repeat;
|
||||||
|
background-size: 70%;
|
||||||
|
}
|
||||||
|
.rotating-ring {
|
||||||
|
width: 230px;
|
||||||
|
height: 230px;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: url("~@/assets/common/homePage/rotating-ring2.png");
|
||||||
|
background-size: 100%;
|
||||||
|
transform: rotateX(30deg);
|
||||||
|
animation: spin1 3s linear infinite;
|
||||||
|
top: -5%;
|
||||||
|
left: 25%;
|
||||||
|
}
|
||||||
|
.sum-ball {
|
||||||
|
width: 150px;
|
||||||
|
height: 75px;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -70px;
|
||||||
|
top: 50px;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.top {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background-image: url("~@/assets/common/homePage/ball-bak.png");
|
||||||
|
margin-left: 55px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
span {
|
||||||
|
font-size: 60px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes spin1 {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(65deg) rotateZ(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: rotateX(65deg) rotateZ(180deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotateX(65deg) rotateZ(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.num-wrap {
|
||||||
|
z-index: 1002;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
& > div:nth-child(1) {
|
||||||
|
background: url("~@/assets/common/homePage/ball-active.png");
|
||||||
|
background-size: 99%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
position: absolute;
|
||||||
|
width: 125px;
|
||||||
|
height: 190px;
|
||||||
|
right: 96px;
|
||||||
|
bottom: -23px;
|
||||||
|
p:nth-child(1) {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #fff;
|
||||||
|
margin: 60px 0px 12px 0px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
margin: 5px 0px 12px 0px;
|
||||||
|
padding-top: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > div:nth-child(2) {
|
||||||
|
background: url("~@/assets/common/homePage/ball-front.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 106px;
|
||||||
|
height: 132px;
|
||||||
|
left: 55px;
|
||||||
|
bottom: 45%;
|
||||||
|
margin-bottom: -80px;
|
||||||
|
p:nth-child(1) {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
margin: 32px 0px 0px 0px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
margin: 15px 0px 0px 0px;
|
||||||
|
padding-top: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > div:nth-child(3) {
|
||||||
|
background: url("~@/assets/common/homePage/ball-back.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 76px;
|
||||||
|
color: #53ceff;
|
||||||
|
height: 96px;
|
||||||
|
left: 95px;
|
||||||
|
top: 15px;
|
||||||
|
p:nth-child(1) {
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 32px 0px 0px 0px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 12px 0px 0px 0px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > div:nth-child(4) {
|
||||||
|
background: url("~@/assets/common/homePage/ball-back.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 76px;
|
||||||
|
color: #53ceff;
|
||||||
|
height: 96px;
|
||||||
|
right: 70px;
|
||||||
|
top: 20px;
|
||||||
|
p:nth-child(1) {
|
||||||
|
margin: 32px 0px 0px 0px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
margin: 12px 0px 0px 0px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > div:nth-child(5) {
|
||||||
|
background: url("~@/assets/common/homePage/ball-front.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 106px;
|
||||||
|
height: 132px;
|
||||||
|
right: 120px;
|
||||||
|
bottom: 43%;
|
||||||
|
margin-bottom: -80px;
|
||||||
|
p:nth-child(1) {
|
||||||
|
margin: 32px 0px 0px 0px;
|
||||||
|
padding-top: 12px;
|
||||||
|
color: #d9eeff;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
margin: 12px 0px 0px 0px;
|
||||||
|
padding-top: 12px;
|
||||||
|
color: #d9eeff;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*依次设置图像盒子中每个图像旋转后位置*/
|
||||||
|
.animation1 {
|
||||||
|
animation: run1 2s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test1 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run1-test 2s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation2 {
|
||||||
|
animation: run2 2s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test2 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run2-test 2s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation3 {
|
||||||
|
animation: run3 2s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test3 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run3-test 2s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation4 {
|
||||||
|
animation: run4 2s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test4 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run4-test 2s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation5 {
|
||||||
|
animation: run5 2s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test5 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run5-test 2s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation2-1 {
|
||||||
|
animation: run1 1s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test1 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run1-test 1s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation2-2 {
|
||||||
|
animation: run2 1s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test2 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run2-test 1s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation2-3 {
|
||||||
|
animation: run3 1s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test3 2s linear both;
|
||||||
|
}
|
||||||
|
p :nth-child(2) {
|
||||||
|
animation: run3-test 1s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation2-4 {
|
||||||
|
animation: run4 1s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test4 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run4-test 1s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animation2-5 {
|
||||||
|
animation: run5 1s linear both;
|
||||||
|
p:nth-child(1) {
|
||||||
|
animation: run1-test5 2s linear both;
|
||||||
|
}
|
||||||
|
p:nth-child(2) {
|
||||||
|
animation: run5-test 1s linear both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*采用@keyframes 规则创建run动画。*/
|
||||||
|
@keyframes run1 {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0px) translateY(0px);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(-37px) translateY(-4px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(-93px) translateY(-21px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(-120px) translateY(-34px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-150px) translateY(-52px);
|
||||||
|
background: url("~@/assets/common/homePage/ball-front.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 106px;
|
||||||
|
height: 132px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run1-test1 {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 37px 0px 0px 0px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run1-test {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
margin: 10px 0px 0px 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run2 {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0px) translateY(0px);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(-15px) translateY(-8px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(-30px) translateY(-36px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(-15px) translateY(-64px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(5px) translateY(-102px);
|
||||||
|
background: url("~@/assets/common/homePage/ball-back.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 76px;
|
||||||
|
height: 96px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run1-test2 {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 17px 0px 0px 0px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run2-test {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 12px 0px 0px 0px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run3 {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-100px) translateY(0px);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(-20px) translateY(-15px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(60.5px) translateY(-30px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(240.75px) translateY(-15px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(200px) translateY(5px);
|
||||||
|
background: url("~@/assets/common/homePage/ball-back.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run1-test3 {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 17px 0px 0px 0px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run3-test {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
margin: 12px 0px 0px 0px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #53ceff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run4 {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0px) translateY(0px);
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(5px) translateY(18px);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(0px) translateY(36px);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(-5px) translateY(54px);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-10px) translateY(78px);
|
||||||
|
background: url("~@/assets/common/homePage/ball-front.png");
|
||||||
|
background-size: 70%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 106px;
|
||||||
|
height: 132px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run1-test4 {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 37px 0px 0px 0px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes run4-test {
|
||||||
|
0% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
margin: 22px 0px 0px 0px;
|
||||||
|
padding-top: 12px;
|
||||||
|
color: #d9eeff;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
After Width: | Height: | Size: 317 B |
After Width: | Height: | Size: 272 B |
After Width: | Height: | Size: 325 B |
After Width: | Height: | Size: 525 B |
After Width: | Height: | Size: 747 B |
After Width: | Height: | Size: 836 B |
After Width: | Height: | Size: 766 B |
After Width: | Height: | Size: 594 B |
After Width: | Height: | Size: 449 B |
|
@ -0,0 +1,306 @@
|
||||||
|
<!-- -->
|
||||||
|
<template>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="capability-cloud">
|
||||||
|
|
||||||
|
<div class="header">
|
||||||
|
<span class="title" @click="goHome">城市云脑通用能力服务平台</span>
|
||||||
|
</div>
|
||||||
|
<div class="header1">
|
||||||
|
<div style=" color:#fff; font-size: 24px">累计节省财政资金</div>
|
||||||
|
<div style=" color:#fff; font-size: 24px">2451.0万元</div>
|
||||||
|
<div style=" color:#fff; font-size: 18px">注:资源参考价格由部门提供或参考市场价格设定</div>
|
||||||
|
</div>
|
||||||
|
<!--左侧-->
|
||||||
|
<div class="reservoir-left">
|
||||||
|
<!-- 左侧内容 -->
|
||||||
|
<reservoir-left />
|
||||||
|
</div>
|
||||||
|
<!--右侧-->
|
||||||
|
<div class="reservoir-right">
|
||||||
|
<reservoir-right />
|
||||||
|
</div>
|
||||||
|
<div class="reservoir-map">
|
||||||
|
<!-- 中间地图 -->
|
||||||
|
<reservoir-thumbnail
|
||||||
|
@changeThumbnailMap="changeThumbnailMap"
|
||||||
|
@jumpIntoMap="jumpIntoMap"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
import ReservoirThumbnail from "./components/ReservoirThumbnail.vue";
|
||||||
|
|
||||||
|
import ReservoirLeft from "./components/ReservoirLeft";
|
||||||
|
import ReservoirRight from "./components/ReservoirRight";
|
||||||
|
export default {
|
||||||
|
//import引入的组件需要注入到对象中才能使用
|
||||||
|
components: {
|
||||||
|
ReservoirThumbnail,
|
||||||
|
ReservoirLeft,
|
||||||
|
ReservoirRight
|
||||||
|
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
//这里存放数据
|
||||||
|
return {
|
||||||
|
model: "common",
|
||||||
|
dialogTitle: "周边视频",
|
||||||
|
videoAnalysisDialogVisible: false, //视频分析弹窗显示标志位
|
||||||
|
riverCourseHistoryDialogVisible: false, //河道历史弹窗
|
||||||
|
riverDetailInfo: {}, //河道具体信息用于历史弹窗显示数据
|
||||||
|
dialogType: "add",
|
||||||
|
dialogData: {},
|
||||||
|
dangerReportDialogVisible: false,
|
||||||
|
positionInfo: null,
|
||||||
|
reservoirDialogVisible: false, //新增修改积水点弹窗显示标志位
|
||||||
|
districtOptions: [], //区划数组
|
||||||
|
isThumbnail:true, //是否为地图缩略图
|
||||||
|
tabindex:0, //3d地图选中的tab。
|
||||||
|
listType:"",//水库列表的类型,普通列表 “”,预警列表 warnig
|
||||||
|
basicInfo: {}, //水库详情信息
|
||||||
|
type: '',
|
||||||
|
callSource:"indexPage",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//监听属性 类似于data概念
|
||||||
|
computed: {},
|
||||||
|
//监控data中的数据变化
|
||||||
|
watch: {},
|
||||||
|
//方法集合
|
||||||
|
methods: {
|
||||||
|
changeModel(model, waterPointInfo) {
|
||||||
|
this.model = model;
|
||||||
|
if(model == 'common') {
|
||||||
|
this.basicInfo = {};
|
||||||
|
}
|
||||||
|
this.listType ="";
|
||||||
|
// if (this.model == "common") {
|
||||||
|
// this.$refs.riverCourseMap.isMapMenu = true;
|
||||||
|
// this.$refs.riverCourseMap.choseTab(1);
|
||||||
|
// }
|
||||||
|
//点击水库险情时
|
||||||
|
if(this.model == "dangerlist") {
|
||||||
|
this.isThumbnail=false;
|
||||||
|
//水库险情上图。
|
||||||
|
this.$nextTick(() => {
|
||||||
|
bus.$emit('reservoirMapDangerList');
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//点击水库险情时
|
||||||
|
// if(this.model == "dangerlist") {
|
||||||
|
// this.isThumbnail=false;
|
||||||
|
// //水库险情上图。
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// bus.$emit('reservoirMapDangerList');
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
//从缩略图下沉跳转至三维地图
|
||||||
|
jumpIntoMap(data) {
|
||||||
|
this.isThumbnail = false;
|
||||||
|
//地图到具体的区划
|
||||||
|
this.$nextTick(() => {
|
||||||
|
bus.$emit('reservoirMapLonLat',data);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//点击所有水库上图。
|
||||||
|
listOnMap(data){
|
||||||
|
this.isThumbnail = false;
|
||||||
|
console.log("所有水库列表",data);
|
||||||
|
//地图到具体的区划
|
||||||
|
this.$nextTick(() => {
|
||||||
|
bus.$emit('reservoirMapList',data);
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
// 获取区市单位数据
|
||||||
|
async getDistrict() {
|
||||||
|
const res = await selectByType("districtType");
|
||||||
|
this.districtOptions = res.data;
|
||||||
|
},
|
||||||
|
//视频弹窗显示。
|
||||||
|
openVideoAnalysisAndData(item, isShow) {
|
||||||
|
console.log("为啥不显示", item);
|
||||||
|
this.positionInfo = item;
|
||||||
|
this.videoAnalysisDialogVisible = isShow;
|
||||||
|
},
|
||||||
|
//新增险情
|
||||||
|
addNewDanger(type, data){
|
||||||
|
console.log("type",type);
|
||||||
|
if (type == "add") {
|
||||||
|
this.dialogData = {};
|
||||||
|
this.dialogType = "add";
|
||||||
|
} else {
|
||||||
|
this.dialogData = data;
|
||||||
|
this.dialogType = "edit";
|
||||||
|
}
|
||||||
|
this.reservoirDialogVisible = true;
|
||||||
|
},
|
||||||
|
//3d 跳转缩略图
|
||||||
|
changeMap(isshow){
|
||||||
|
this.isThumbnail=isshow;
|
||||||
|
},
|
||||||
|
// 缩略图跳转3d
|
||||||
|
changeThumbnailMap(isshow,index){
|
||||||
|
console.log('isshow',isshow);
|
||||||
|
console.log('index',index);
|
||||||
|
this.isThumbnail=isshow;
|
||||||
|
this.tabindex=index;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//生命周期 - 创建完成(可以访问当前this实例)
|
||||||
|
created() {},
|
||||||
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
beforeCreate() {}, //生命周期 - 创建之前
|
||||||
|
beforeMount() {}, //生命周期 - 挂载之前
|
||||||
|
beforeUpdate() {}, //生命周期 - 更新之前
|
||||||
|
updated() {}, //生命周期 - 更新之后
|
||||||
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
||||||
|
destroyed() {}, //生命周期 - 销毁完成
|
||||||
|
activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
@font-face {
|
||||||
|
font-family: 'SourceHanSansCN-Regular';
|
||||||
|
src: url('~@/assets/capabilityCloud/font/SourceHanSansCN-Regular.otf');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'DIN-Bold';
|
||||||
|
src: url('~@/assets/capabilityCloud/font/DIN-Bold.otf');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'ZhiheiJ-W5.ttf';
|
||||||
|
src: url('~@/assets/capabilityCloud/font/ZhiheiJ-W5.ttf');
|
||||||
|
}
|
||||||
|
.capability-cloud {
|
||||||
|
font-family: SourceHanSansCN-Regular;
|
||||||
|
.title {
|
||||||
|
font-family: ZhiheiJ-W5;
|
||||||
|
background: -webkit-linear-gradient(90deg, #99a8d0, #fff);
|
||||||
|
font-weight: 600;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
font-family: DIN-Bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang='less' scoped>
|
||||||
|
// 此处去掉scoped为修改date-picker背景色,所以业务样式都应放在reservoir层级中,避免影响
|
||||||
|
//@import url(); 引入公共css类
|
||||||
|
.module-header-container {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
top: 0px;
|
||||||
|
width: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.capability-cloud {
|
||||||
|
height: 10.8rem;
|
||||||
|
background: url('~@/assets/capabilityCloud/bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
& > .header {
|
||||||
|
height: 1.04rem;
|
||||||
|
text-align: center;
|
||||||
|
background: url('~@/assets/capabilityCloud/header.png') no-repeat;
|
||||||
|
font-size: 0.46rem;
|
||||||
|
}
|
||||||
|
.header1 {
|
||||||
|
top: 78px;
|
||||||
|
position: absolute;
|
||||||
|
left: 795px;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1004;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
//position: relative;
|
||||||
|
.reservoir-left {
|
||||||
|
position: absolute;
|
||||||
|
left: 0.1rem;
|
||||||
|
z-index: 1300;
|
||||||
|
top: 0.8rem;
|
||||||
|
height: calc(100% - 0.8rem);
|
||||||
|
}
|
||||||
|
.reservoir-right {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1001;
|
||||||
|
right: 0.1rem;
|
||||||
|
top: 0.8rem;
|
||||||
|
height: calc(100% - 0.8rem);
|
||||||
|
}
|
||||||
|
.reservoir-map {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 日期时间组件
|
||||||
|
.phone-date-picker {
|
||||||
|
color: #fff;
|
||||||
|
//border: 1px solid #e4e7ed;
|
||||||
|
border: 1px solid #008fbb;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
//background: #000;
|
||||||
|
background: #123d68;
|
||||||
|
//background:rgba(0, 0, 0, 0);
|
||||||
|
line-height: 30px;
|
||||||
|
margin: 5px 0;
|
||||||
|
.el-date-table td.disabled div {
|
||||||
|
background: #305156 !important;
|
||||||
|
}
|
||||||
|
.el-picker-panel__footer {
|
||||||
|
//background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
background: #123d68;
|
||||||
|
color: #fff;
|
||||||
|
.el-picker-panel__link-btn:first-of-type {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-date-table td.in-range div {
|
||||||
|
background: #009ab3;
|
||||||
|
}
|
||||||
|
.el-input__inner {
|
||||||
|
//background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
background: #123d68;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-date-picker__header > button,
|
||||||
|
span {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-picker-panel__content > .el-date-table > tbody > tr > th {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-button.is-plain:hover,
|
||||||
|
.el-button.is-plain:focus {
|
||||||
|
background: #009ab3;
|
||||||
|
}
|
||||||
|
.el-button--default {
|
||||||
|
border-radius: 0;
|
||||||
|
background: #009ab3;
|
||||||
|
//border: 1px solid #dcdfe6;
|
||||||
|
border: 1px solid #008fbb;
|
||||||
|
border-color: #009ab3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
|
@ -1651,8 +1651,9 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const showFlag = ref(true)
|
const showFlag = ref(true)
|
||||||
mybus.on('getCameraByParentId', (ids) => {
|
mybus.on('getCameraByParentId', (val) => {
|
||||||
paramsGetResources2.value.regionId = ids
|
console.log('倒腾位置2')
|
||||||
|
paramsGetResources2.value.regionId = val.id
|
||||||
getAppResources()
|
getAppResources()
|
||||||
})
|
})
|
||||||
mybus.on('changeShowFlag', (flag) => {
|
mybus.on('changeShowFlag', (flag) => {
|
||||||
|
|
|
@ -296,17 +296,29 @@
|
||||||
const num = ref(0)
|
const num = ref(0)
|
||||||
// 过期时间
|
// 过期时间
|
||||||
const expireDateOptions = [
|
const expireDateOptions = [
|
||||||
|
{
|
||||||
|
value: moment().add(7, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
label: '7天',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
value: moment().add(30, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
value: moment().add(30, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
||||||
label: '30天',
|
label: '1个月',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: moment().add(60, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
value: moment().add(180, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
||||||
label: '60天',
|
label: '6个月',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value: moment().add(90, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
value: moment().add(365, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
||||||
label: '90天',
|
label: '1年',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: moment().add(730, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
label: '2年',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: moment().add(1095, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
||||||
|
label: '3年',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
const apiURL = window.SITE_CONFIG.apiURL
|
const apiURL = window.SITE_CONFIG.apiURL
|
||||||
|
|
|
@ -2,10 +2,10 @@
|
||||||
海康H5Player
|
海康H5Player
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div id="player" style="width: 800px; height: 600px; z-index: 9999"></div>
|
<div :id="videoId" style="width: 800px; height: 600px; z-index: 9999"></div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
|
// const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
|
||||||
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
|
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
import mybus from '@/myplugins/mybus'
|
import mybus from '@/myplugins/mybus'
|
||||||
|
@ -16,6 +16,10 @@
|
||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
|
videoId: {
|
||||||
|
type: String,
|
||||||
|
default: 'player',
|
||||||
|
},
|
||||||
index: {
|
index: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 0,
|
default: 0,
|
||||||
|
@ -24,11 +28,16 @@
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
unStopable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
player: null,
|
player: null,
|
||||||
splitNum: 1,
|
splitNum: 1,
|
||||||
|
realTime: true,
|
||||||
mseSupport: MSE_IS_SUPPORT,
|
mseSupport: MSE_IS_SUPPORT,
|
||||||
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
|
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
|
||||||
tabActive: 'decoder',
|
tabActive: 'decoder',
|
||||||
|
@ -65,8 +74,13 @@
|
||||||
mybus.emit('closeLoading', true)
|
mybus.emit('closeLoading', true)
|
||||||
this.createPlayer()
|
this.createPlayer()
|
||||||
this.arrangeWindow()
|
this.arrangeWindow()
|
||||||
|
if (this.unStopable) {
|
||||||
|
this.videoPlay(this.videoUrl, 0)
|
||||||
|
} else {
|
||||||
|
this.realplay(this.videoUrl, 0)
|
||||||
|
}
|
||||||
//videoUrl this.realplay(this.videoUrl,0);//循环传过来的数组进行播放,index根据选中的个数
|
//videoUrl this.realplay(this.videoUrl,0);//循环传过来的数组进行播放,index根据选中的个数
|
||||||
this.realplay(this.videoUrl, 0)
|
|
||||||
//this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
|
//this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -76,7 +90,16 @@
|
||||||
console.log('oldVal:', oldVal)
|
console.log('oldVal:', oldVal)
|
||||||
console.log('newVal:', newVal)
|
console.log('newVal:', newVal)
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
this.realplay(newVal, 0)
|
if (!this.player) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.init()
|
||||||
|
this.createPlayer()
|
||||||
|
this.arrangeWindow()
|
||||||
|
this.realplay(newVal, 0)
|
||||||
|
}, 1000)
|
||||||
|
} else {
|
||||||
|
this.realplay(newVal, 0)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 立即处理 进入页面就触发
|
// 立即处理 进入页面就触发
|
||||||
|
@ -92,12 +115,13 @@
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
createPlayer() {
|
createPlayer() {
|
||||||
//console.log('this.index',this.index);
|
console.log('初始化id', this.videoId)
|
||||||
this.player = new window.JSPlugin({
|
this.player = new window.JSPlugin({
|
||||||
//szId: 'player'+this.index,
|
//szId: 'player'+this.index,
|
||||||
szId: 'player',
|
szId: this.videoId,
|
||||||
szBasePath: '/util/', //引入静态资源地址,我这里静态资源在public/js文件存放,所以设置为js
|
szBasePath: '/util/', //引入静态资源地址,我这里静态资源在public/js文件存放,所以设置为js
|
||||||
iMaxSplit: 4,
|
iMaxSplit: 4,
|
||||||
|
iWidth: '800px',
|
||||||
iCurrentSplit: 4,
|
iCurrentSplit: 4,
|
||||||
openDebug: true,
|
openDebug: true,
|
||||||
oStyle: {
|
oStyle: {
|
||||||
|
@ -141,8 +165,10 @@
|
||||||
iWidth,
|
iWidth,
|
||||||
iHeight
|
iHeight
|
||||||
)
|
)
|
||||||
// 首帧绘制完成后停止
|
// 如果是录像播放,首帧绘制完成后停止
|
||||||
that.pausePlay(iWndIndex)
|
if (!that.realTime) {
|
||||||
|
that.pausePlay(iWndIndex)
|
||||||
|
}
|
||||||
mybus.emit('closeLoading', false)
|
mybus.emit('closeLoading', false)
|
||||||
},
|
},
|
||||||
performanceLack: function () {
|
performanceLack: function () {
|
||||||
|
@ -165,10 +191,13 @@
|
||||||
// 初始化结束
|
// 初始化结束
|
||||||
// 视频预览
|
// 视频预览
|
||||||
realplay(playURL, index1) {
|
realplay(playURL, index1) {
|
||||||
|
this.realTime = false
|
||||||
mybus.emit('closeLoading', true)
|
mybus.emit('closeLoading', true)
|
||||||
|
setTimeout(() => {
|
||||||
|
mybus.emit('closeLoading', false)
|
||||||
|
}, 3000)
|
||||||
this.mode = 0 //解码方式:0普通模式 1高级模式
|
this.mode = 0 //解码方式:0普通模式 1高级模式
|
||||||
const { player, mode, urls } = this,
|
const { player, mode, urls } = this
|
||||||
index = player.currentWindowIndex
|
|
||||||
// playURL = this.realplay
|
// playURL = this.realplay
|
||||||
console.log('视频播放地址', playURL)
|
console.log('视频播放地址', playURL)
|
||||||
// const startTime = {
|
// const startTime = {
|
||||||
|
@ -195,6 +224,41 @@
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
// 实时播放
|
||||||
|
videoPlay(playURL, index1) {
|
||||||
|
let that = this
|
||||||
|
this.realTime = true
|
||||||
|
mybus.emit('closeLoading', true)
|
||||||
|
setTimeout(() => {
|
||||||
|
mybus.emit('closeLoading', false)
|
||||||
|
}, 3000)
|
||||||
|
if (!that.unStopable) {
|
||||||
|
message.warning('预览将在约6s后停止')
|
||||||
|
setTimeout(() => {
|
||||||
|
that.stopAllPlay()
|
||||||
|
}, 6000)
|
||||||
|
}
|
||||||
|
this.mode = 0 //解码方式:0普通模式 1高级模式
|
||||||
|
const { player, mode, urls } = this
|
||||||
|
// playURL = this.realplay
|
||||||
|
console.log('视频播放地址', playURL)
|
||||||
|
// const startTime = {
|
||||||
|
// startTime: ,
|
||||||
|
// }
|
||||||
|
// const endTime = {
|
||||||
|
// endTime: ,
|
||||||
|
// }
|
||||||
|
player.JS_Play(playURL, { playURL, mode }, index1).then(
|
||||||
|
() => {
|
||||||
|
console.log('realplay success')
|
||||||
|
// 预览时6s停止播放
|
||||||
|
},
|
||||||
|
(e) => {
|
||||||
|
console.error(e)
|
||||||
|
// message.error('错误代码:' + e)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
},
|
||||||
// 关闭所有视频
|
// 关闭所有视频
|
||||||
stopAllPlay() {
|
stopAllPlay() {
|
||||||
this.player.JS_StopRealPlayAll().then(
|
this.player.JS_StopRealPlayAll().then(
|
||||||
|
@ -210,12 +274,15 @@
|
||||||
},
|
},
|
||||||
// 暂停单个视频
|
// 暂停单个视频
|
||||||
pausePlay(index) {
|
pausePlay(index) {
|
||||||
|
let that = this
|
||||||
this.player.JS_Pause(index).then(
|
this.player.JS_Pause(index).then(
|
||||||
() => {
|
() => {
|
||||||
console.log('暂停成功')
|
console.log('暂停成功')
|
||||||
},
|
},
|
||||||
(e) => {
|
(e) => {
|
||||||
console.error(e)
|
console.error(e)
|
||||||
|
// 暂停失败切换为实时播放
|
||||||
|
that.videoPlay(that.videoUrl, 0)
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
|
|
@ -2,7 +2,11 @@
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="wrapper-title-left-tree" :key="showKey">
|
<div class="wrapper-title-left-tree" :key="showKey">
|
||||||
<div v-for="item in treeData" :key="item.id" class="primaryNode">
|
<div v-for="item in treeData" :key="item.id" class="primaryNode">
|
||||||
<div class="top" @click="showBottom(item)" :class="item.show ? 'topSelect' : ''">
|
<div
|
||||||
|
class="top"
|
||||||
|
@click="showBottom(item)"
|
||||||
|
:class="item.show ? 'topSelect' : ''"
|
||||||
|
>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
({{ item.channelCount }})
|
({{ item.channelCount }})
|
||||||
<DownOutlined v-show="!item.show" />
|
<DownOutlined v-show="!item.show" />
|
||||||
|
@ -10,13 +14,28 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom" v-show="item.show">
|
<div class="bottom" v-show="item.show">
|
||||||
<div v-for="val in item.children" :key="val.id" class="item">
|
<div v-for="val in item.children" :key="val.id" class="item">
|
||||||
<div class="up" :class="selectId == val.id ? 'select' : ''"
|
<div
|
||||||
@click="showDown(item, val), onSelect(item, val)">
|
class="up"
|
||||||
|
:class="selectId == val.id ? 'select' : ''"
|
||||||
|
@click="showDown(item, val), onSelect(item, val)"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem"
|
t="1654068878091"
|
||||||
v-show="selectId == val.id">
|
class="icon"
|
||||||
<path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path>
|
viewBox="0 0 1024 1024"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="2156"
|
||||||
|
width="0.25rem"
|
||||||
|
height="0.25rem"
|
||||||
|
v-show="selectId == val.id"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
||||||
|
p-id="2157"
|
||||||
|
fill="#0058e1"
|
||||||
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="name">{{ val.name }}({{ val.channelCount }})</span>
|
<span class="name">{{ val.name }}({{ val.channelCount }})</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -27,13 +46,30 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="down" v-show="val.show">
|
<div class="down" v-show="val.show">
|
||||||
<div v-for="child in val.children" :key="child.id" class="child"
|
<div
|
||||||
:class="selectId == child.id ? 'select2' : ''" @click="onSelect(item, child, child)">
|
v-for="child in val.children"
|
||||||
|
:key="child.id"
|
||||||
|
class="child"
|
||||||
|
:class="selectId == child.id ? 'select2' : ''"
|
||||||
|
@click="onSelect(item, child, child)"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg" p-id="2156" width="0.25rem" height="0.25rem"
|
t="1654068878091"
|
||||||
v-show="selectId == child.id">
|
class="icon"
|
||||||
<path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157" fill="#0058e1"></path>
|
viewBox="0 0 1024 1024"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="2156"
|
||||||
|
width="0.25rem"
|
||||||
|
height="0.25rem"
|
||||||
|
v-show="selectId == child.id"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z"
|
||||||
|
p-id="2157"
|
||||||
|
fill="#0058e1"
|
||||||
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="name">
|
<span class="name">
|
||||||
{{ child.name }}
|
{{ child.name }}
|
||||||
|
@ -49,247 +85,198 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, ref, watch } from 'vue'
|
import { defineComponent, ref, watch } from 'vue'
|
||||||
import { getCameraAllOrgan } from '@/api/videoSurveillance'
|
import { getCameraAllOrgan } from '@/api/videoSurveillance'
|
||||||
import { getCameraInfoByAreaId } from '@/api/file'
|
import { getCameraInfoByAreaId } from '@/api/file'
|
||||||
import mybus from '@/myplugins/mybus'
|
import mybus from '@/myplugins/mybus'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
|
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
|
||||||
import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
|
import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
setup() {
|
setup() {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const whoShow1 = ref(whoShow)
|
const whoShow1 = ref(whoShow)
|
||||||
const showKey = ref(0)
|
const showKey = ref(0)
|
||||||
const treeData = ref([])
|
const treeData = ref([])
|
||||||
const selectId = ref('')
|
const selectId = ref('')
|
||||||
|
|
||||||
// 初始化
|
// 初始化
|
||||||
const init = async () => {
|
const init = async () => {
|
||||||
treeData.value = []
|
treeData.value = []
|
||||||
console.log(
|
console.log(
|
||||||
'router.currentRoute.value.query.select',
|
'router.currentRoute.value.query.select',
|
||||||
router.currentRoute.value.query.select
|
router.currentRoute.value.query.select
|
||||||
)
|
)
|
||||||
let select = router.currentRoute.value.query.select || DETAIL_PAGE_CONTENT_DEFAULT_TAB
|
let select =
|
||||||
if (select === '123') {
|
router.currentRoute.value.query.select ||
|
||||||
select = ''
|
DETAIL_PAGE_CONTENT_DEFAULT_TAB
|
||||||
|
if (select === '123') {
|
||||||
|
select = ''
|
||||||
|
}
|
||||||
|
console.log(
|
||||||
|
'获取url中的select=====================>',
|
||||||
|
router.currentRoute.value.query.select
|
||||||
|
)
|
||||||
|
if (select == '基础设施') {
|
||||||
|
let res = {}
|
||||||
|
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
|
||||||
|
res = await getCameraAllOrgan({
|
||||||
|
parentId: 'S4NbecfYB1DBH8HNULGS34',
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 西海岸
|
||||||
|
res = await getCameraInfoByAreaId({
|
||||||
|
areaId: '70be8c5b664f4bcf869d82f2e8335051',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
treeData.value = (res.data && res.data.data) || []
|
||||||
|
// 只有一个,默认展开到二级菜单
|
||||||
|
if (res.data && res.data.data.length == 1) {
|
||||||
|
showBottom(treeData.value[0])
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
console.log(
|
mybus.on('getDeptList', () => {
|
||||||
'获取url中的select=====================>',
|
init()
|
||||||
router.currentRoute.value.query.select
|
})
|
||||||
)
|
|
||||||
if (select == '基础设施') {
|
const onSelect = async (item, val, child) => {
|
||||||
let res = {};
|
console.log('item--------onSelect---->', item)
|
||||||
|
console.log('val------onSelect------>', val)
|
||||||
|
console.log('child-----onSelect------->', child)
|
||||||
|
mybus.emit('getCameraByParentId', {
|
||||||
|
id: val.id,
|
||||||
|
})
|
||||||
|
mybus.emit('getListByParentId', val.id)
|
||||||
|
let res = {}
|
||||||
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
|
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
|
||||||
res = await getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' })
|
res = await getCameraAllOrgan({ parentId: val.id })
|
||||||
} else {
|
} else {
|
||||||
// 西海岸
|
// 西海岸
|
||||||
res = await getCameraInfoByAreaId({
|
res = await getCameraInfoByAreaId({ areaId: val.id })
|
||||||
areaId: '70be8c5b664f4bcf869d82f2e8335051',
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
treeData.value = res.data && res.data.data || []
|
treeData.value.map((treeDataItem, index) => {
|
||||||
// 只有一个,默认展开到二级菜单
|
if (item.id == treeDataItem.id) {
|
||||||
if(res.data && res.data.data.length == 1) {
|
treeData.value[index].children.map((childItem, childIndex) => {
|
||||||
showBottom(treeData.value[0])
|
if (childItem.id == val.id) {
|
||||||
|
treeData.value[index].children[childIndex].children =
|
||||||
|
res.data.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (child) {
|
||||||
|
selectId.value = child.id
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
mybus.on('getDeptList', () => {
|
|
||||||
init()
|
|
||||||
})
|
|
||||||
|
|
||||||
const onSelect = async (item, val, child) => {
|
watch(selectId, (newVal) => {
|
||||||
console.log('item--------onSelect---->', item);
|
if (newVal == '') {
|
||||||
console.log('val------onSelect------>', val);
|
mybus.emit('getCameraByParentId', {
|
||||||
console.log('child-----onSelect------->', child);
|
id: '',
|
||||||
mybus.emit('getCameraByParentId', val.id)
|
|
||||||
mybus.emit('getListByParentId', val.id)
|
|
||||||
let res = {}
|
|
||||||
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
|
|
||||||
res = await getCameraAllOrgan({ parentId: val.id })
|
|
||||||
} else {
|
|
||||||
// 西海岸
|
|
||||||
res = await getCameraInfoByAreaId({ areaId: val.id })
|
|
||||||
}
|
|
||||||
treeData.value.map((treeDataItem, index) => {
|
|
||||||
if (item.id == treeDataItem.id) {
|
|
||||||
treeData.value[index].children.map((childItem, childIndex) => {
|
|
||||||
if (childItem.id == val.id) {
|
|
||||||
treeData.value[index].children[childIndex].children =
|
|
||||||
res.data.data
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
mybus.emit('getListByParentId', '')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
if (child) {
|
|
||||||
selectId.value = child.id
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(selectId, (newVal) => {
|
const showBottom = async (item) => {
|
||||||
if (newVal == '') {
|
item.show = !item.show
|
||||||
mybus.emit('getCameraByParentId', '')
|
let res = {}
|
||||||
mybus.emit('getListByParentId', '')
|
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
|
||||||
}
|
res = await getCameraAllOrgan({ parentId: item.id })
|
||||||
})
|
} else {
|
||||||
|
// 西海岸
|
||||||
const showBottom = async (item) => {
|
res = await getCameraInfoByAreaId({ areaId: item.id })
|
||||||
item.show = !item.show;
|
|
||||||
let res = {};
|
|
||||||
if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
|
|
||||||
res = await getCameraAllOrgan({ parentId: item.id })
|
|
||||||
} else {
|
|
||||||
// 西海岸
|
|
||||||
res = await getCameraInfoByAreaId({ areaId: item.id })
|
|
||||||
}
|
|
||||||
|
|
||||||
treeData.value.map((treeDataItem, index) => {
|
|
||||||
if (item.id == treeDataItem.id) {
|
|
||||||
treeData.value[index].children = res.data && res.data.data || []
|
|
||||||
console.log('treeData.value.[index]', treeData.value[index])
|
|
||||||
}
|
}
|
||||||
})
|
|
||||||
}
|
treeData.value.map((treeDataItem, index) => {
|
||||||
const showDown = (item, val) => {
|
if (item.id == treeDataItem.id) {
|
||||||
selectId.value = val.id
|
treeData.value[index].children = (res.data && res.data.data) || []
|
||||||
console.log('item---showDown--------->', item);
|
console.log('treeData.value.[index]', treeData.value[index])
|
||||||
console.log('val----showDown-------->', val);
|
}
|
||||||
if (item.children) {
|
})
|
||||||
val.show = !val.show;
|
}
|
||||||
// 取消选中
|
const showDown = (item, val) => {
|
||||||
if (!val.show) {
|
selectId.value = val.id
|
||||||
selectId.value = ''
|
console.log('item---showDown--------->', item)
|
||||||
|
console.log('val----showDown-------->', val)
|
||||||
|
if (item.children) {
|
||||||
|
val.show = !val.show
|
||||||
|
// 取消选中
|
||||||
|
if (!val.show) {
|
||||||
|
selectId.value = ''
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
return {
|
||||||
return {
|
treeData,
|
||||||
treeData,
|
showKey,
|
||||||
showKey,
|
onSelect,
|
||||||
onSelect,
|
showBottom,
|
||||||
showBottom,
|
showDown,
|
||||||
showDown,
|
selectId,
|
||||||
selectId,
|
}
|
||||||
}
|
},
|
||||||
},
|
beforeUnmount() {
|
||||||
beforeUnmount() {
|
mybus.off('getDeptList')
|
||||||
mybus.off('getDeptList')
|
console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~')
|
||||||
console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~')
|
},
|
||||||
},
|
components: {
|
||||||
components: {
|
UpOutlined,
|
||||||
UpOutlined,
|
DownOutlined,
|
||||||
DownOutlined,
|
},
|
||||||
},
|
})
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.primaryNode {
|
.primaryNode {
|
||||||
.top {
|
.top {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0.4rem;
|
|
||||||
background: rgba(0, 135, 225, 0.1);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 0.1rem;
|
|
||||||
margin-top: 0.08rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
// 0058e1 透明度 0.5
|
|
||||||
background: rgba(0, 88, 225, 0.8);
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
:deep(.anticon) {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.topSelect {
|
|
||||||
background: #0058e1;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
:deep(.anticon) {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(244, 245, 248, 0.8);
|
|
||||||
padding: 0 0.1rem;
|
|
||||||
|
|
||||||
// margin-bottom: .08rem;
|
|
||||||
.up {
|
|
||||||
cursor: pointer;
|
|
||||||
height: 0.4rem;
|
height: 0.4rem;
|
||||||
|
background: rgba(0, 135, 225, 0.1);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-top: 0.01rem solid #ccc;
|
padding: 0 0.1rem;
|
||||||
|
margin-top: 0.08rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
// 0058e1 透明度 0.5
|
||||||
|
background: rgba(0, 88, 225, 0.8);
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
:deep(.anticon) {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.topSelect {
|
||||||
|
background: #0058e1;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
:deep(.anticon) {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(244, 245, 248, 0.8);
|
||||||
padding: 0 0.1rem;
|
padding: 0 0.1rem;
|
||||||
|
|
||||||
&>div {
|
// margin-bottom: .08rem;
|
||||||
display: flex;
|
.up {
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 1;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.up:hover {
|
|
||||||
.name {
|
|
||||||
color: #0058e1;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: #0058e1;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.select {
|
|
||||||
padding: 0 0.1rem 0 0;
|
|
||||||
|
|
||||||
.name {
|
|
||||||
width: 1.7rem;
|
|
||||||
color: #0058e1 !important;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
color: #0058e1;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:nth-of-type(1) .up {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.down {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.child {
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 0.4rem;
|
height: 0.4rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
border-top: 0.01rem solid #ccc;
|
||||||
padding: 0 0.1rem;
|
padding: 0 0.1rem;
|
||||||
|
|
||||||
&>div {
|
& > div {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
@ -304,7 +291,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.child:hover {
|
.up:hover {
|
||||||
.name {
|
.name {
|
||||||
color: #0058e1;
|
color: #0058e1;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
@ -316,10 +303,12 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.select2 {
|
.select {
|
||||||
|
padding: 0 0.1rem 0 0;
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
width: 1.7rem;
|
width: 1.7rem;
|
||||||
color: #0058e1;
|
color: #0058e1 !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -327,10 +316,65 @@ export default defineComponent({
|
||||||
color: #0058e1;
|
color: #0058e1;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
padding: 0 0.1rem 0 0;
|
.item:nth-of-type(1) .up {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.down {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.child {
|
||||||
|
cursor: pointer;
|
||||||
|
height: 0.4rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 0.1rem;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.child:hover {
|
||||||
|
.name {
|
||||||
|
color: #0058e1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #0058e1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.select2 {
|
||||||
|
.name {
|
||||||
|
width: 1.7rem;
|
||||||
|
color: #0058e1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #0058e1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
padding: 0 0.1rem 0 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -157,7 +157,9 @@
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (selectId.value !== '') {
|
if (selectId.value !== '') {
|
||||||
mybus.emit('getCameraByParentId', selectId.value)
|
mybus.emit('getCameraByParentId', {
|
||||||
|
id: selectId.value,
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
mybus.emit('clearLeftSelect')
|
mybus.emit('clearLeftSelect')
|
||||||
}
|
}
|
||||||
|
@ -228,14 +230,21 @@
|
||||||
selectId.value = ''
|
selectId.value = ''
|
||||||
} else {
|
} else {
|
||||||
selectId.value = child.id
|
selectId.value = child.id
|
||||||
mybus.emit('getCameraByParentId', val.id)
|
// 查询数据并上图
|
||||||
|
const param = {
|
||||||
|
id: val.id,
|
||||||
|
reset: true,
|
||||||
|
}
|
||||||
|
mybus.emit('getCameraByParentId', param)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(selectId, (newVal) => {
|
watch(selectId, (newVal) => {
|
||||||
if (newVal == '') {
|
if (newVal == '') {
|
||||||
mybus.emit('getCameraByParentId', '70be8c5b664f4bcf869d82f2e8335051')
|
mybus.emit('getCameraByParentId', {
|
||||||
|
id: '70be8c5b664f4bcf869d82f2e8335051',
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -261,7 +270,9 @@
|
||||||
selectId.value = ''
|
selectId.value = ''
|
||||||
// mybus.emit('clearLeftSelect')
|
// mybus.emit('clearLeftSelect')
|
||||||
} else {
|
} else {
|
||||||
mybus.emit('getCameraByParentId', val.id)
|
mybus.emit('getCameraByParentId', {
|
||||||
|
id: val.id,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
<!--
|
<!--
|
||||||
* @Author: Light
|
* @Author: Light
|
||||||
* @Date: 2022-11-18 11:53:43
|
* @Date: 2022-11-18 11:53:43
|
||||||
* @LastEditors: Light
|
* @LastEditors: hisense.wuhongjian
|
||||||
* @LastEditTime: 2022-11-25 20:05:47
|
* @LastEditTime: 2022-11-26 16:30:51
|
||||||
* @Description: 告诉大家这是什么
|
* @Description: 告诉大家这是什么
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="infrastructureApplication" v-if="showFlag">
|
<div class="infrastructureApplication" v-show="showFlag">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<a-list size="small" bordered :data-source="dataList.toBeApplied">
|
<a-list size="small" bordered :data-source="dataList.toBeApplied">
|
||||||
<template #renderItem="{ item }">
|
<template #renderItem="{ item }">
|
||||||
|
@ -47,7 +47,7 @@
|
||||||
</div>
|
</div>
|
||||||
<a-tag
|
<a-tag
|
||||||
color="cyan"
|
color="cyan"
|
||||||
style="margin-right: 0"
|
style="margin-right: 0; cursor: pointer"
|
||||||
@click="selectItem(item)"
|
@click="selectItem(item)"
|
||||||
>
|
>
|
||||||
{{
|
{{
|
||||||
|
@ -88,6 +88,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a-modal
|
<a-modal
|
||||||
|
v-if="!dataList.selectItem.cameraInfo"
|
||||||
:width="800"
|
:width="800"
|
||||||
v-model:visible="visible"
|
v-model:visible="visible"
|
||||||
title="撤销申请"
|
title="撤销申请"
|
||||||
|
@ -110,28 +111,27 @@
|
||||||
</a-table>
|
</a-table>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
<a-modal
|
<a-modal
|
||||||
v-if="dataList.selectItem.cameraInfo"
|
v-else
|
||||||
v-model:visible="showVisible"
|
v-model:visible="showVisible"
|
||||||
:title="dataList.selectItem.cameraInfo.channelName"
|
:title="dataList.selectItem.cameraInfo.channelName"
|
||||||
:footer="null"
|
:footer="null"
|
||||||
|
:width="845"
|
||||||
|
destroyOnClose
|
||||||
@cancel="clear"
|
@cancel="clear"
|
||||||
>
|
>
|
||||||
<div style="width: 100%; display: flex; justify-content: center">
|
<div
|
||||||
<div style="width: 100%; height: 100%; position: relative">
|
style="
|
||||||
<div class="waterMark waterMark-left-top">
|
width: 800px;
|
||||||
{{ userInfo.usernameShow }}
|
height: 600px;
|
||||||
</div>
|
display: flex;
|
||||||
<div class="waterMark waterMark-right-top">
|
justify-content: center;
|
||||||
{{ userInfo.realNameShow }}
|
"
|
||||||
</div>
|
>
|
||||||
<div class="waterMark waterMark-left-bottom">
|
<h5-player
|
||||||
{{ userInfo.usernameShow }}
|
videoId="preview"
|
||||||
</div>
|
unStopable="true"
|
||||||
<div class="waterMark waterMark-right-bottom">
|
:video-url="videoUrl"
|
||||||
{{ userInfo.realNameShow }}
|
></h5-player>
|
||||||
</div>
|
|
||||||
<h5-player :video-url="videoUrl"></h5-player>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
</template>
|
</template>
|
||||||
|
@ -209,6 +209,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const apply = () => {
|
const apply = () => {
|
||||||
|
if (dataList.toBeApplied.length === 0) {
|
||||||
|
message.warning('待申请列表为空!')
|
||||||
|
return
|
||||||
|
}
|
||||||
let obj = {
|
let obj = {
|
||||||
arr: [
|
arr: [
|
||||||
{
|
{
|
||||||
|
@ -286,6 +290,7 @@
|
||||||
getVideoUrl(item.cameraInfo)
|
getVideoUrl(item.cameraInfo)
|
||||||
} else {
|
} else {
|
||||||
dataList.selectItem = {}
|
dataList.selectItem = {}
|
||||||
|
message.info('请耐心等待审核通过')
|
||||||
showVisible.value = false
|
showVisible.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -347,8 +352,10 @@
|
||||||
//console.log('555555rrrrr',res)
|
//console.log('555555rrrrr',res)
|
||||||
if (res.data.data) {
|
if (res.data.data) {
|
||||||
videoUrl.value = res.data.data.url
|
videoUrl.value = res.data.data.url
|
||||||
|
showVisible.value = true
|
||||||
|
} else {
|
||||||
|
message.warning('申请内容已失效,请撤销后重新进行申请!')
|
||||||
}
|
}
|
||||||
showVisible.value = true
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
mybus.on('selectCamera', (obj) => {
|
mybus.on('selectCamera', (obj) => {
|
||||||
|
|
|
@ -403,7 +403,14 @@
|
||||||
</div>
|
</div>
|
||||||
<div v-if="room">
|
<div v-if="room">
|
||||||
<!-- 地图 -->
|
<!-- 地图 -->
|
||||||
<div class="map-contain" v-if="showMap">
|
<div
|
||||||
|
class="map-contain"
|
||||||
|
v-if="showMap"
|
||||||
|
v-loading="spinningHome"
|
||||||
|
element-loading-text="Loading..."
|
||||||
|
element-loading-svg-view-box="-10, -10, 50, 50"
|
||||||
|
element-loading-background="rgba(122, 122, 122, 0.8)"
|
||||||
|
>
|
||||||
<video-surveillance></video-surveillance>
|
<video-surveillance></video-surveillance>
|
||||||
</div>
|
</div>
|
||||||
<!-- 表格 -->
|
<!-- 表格 -->
|
||||||
|
@ -691,6 +698,8 @@
|
||||||
import { Form } from 'ant-design-vue'
|
import { Form } from 'ant-design-vue'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import { useStore } from 'vuex'
|
import { useStore } from 'vuex'
|
||||||
|
import debounce from 'lodash/debounce'
|
||||||
|
import { stubFalse } from 'lodash'
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
const username = store.getters['user/username']
|
const username = store.getters['user/username']
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
@ -698,6 +707,7 @@
|
||||||
searchValue: { type: String, default: '' },
|
searchValue: { type: String, default: '' },
|
||||||
searchType: { type: String, default: '' },
|
searchType: { type: String, default: '' },
|
||||||
})
|
})
|
||||||
|
const spinningHome = ref(false)
|
||||||
const current = ref(1)
|
const current = ref(1)
|
||||||
const videoTotal = ref(0)
|
const videoTotal = ref(0)
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
@ -1971,22 +1981,76 @@
|
||||||
const wrjFlag = ref(false)
|
const wrjFlag = ref(false)
|
||||||
// 西海岸-视频资源loading
|
// 西海岸-视频资源loading
|
||||||
const loadingCamera = ref(false)
|
const loadingCamera = ref(false)
|
||||||
const getCamera = (flag, str) => {
|
const getCamera = debounce(
|
||||||
loadingCamera.value = true
|
function (flag, str) {
|
||||||
if (flag) {
|
loadingCamera.value = true
|
||||||
mapSearchParam.value.cameraName = str
|
if (flag) {
|
||||||
}
|
mapSearchParam.value.cameraName = str
|
||||||
console.log('初始化调用', flag)
|
}
|
||||||
console.log(
|
console.log('初始化调用', flag)
|
||||||
'不选左侧树的时候不调用接口',
|
console.log(
|
||||||
mapSearchParam.value,
|
'不选左侧树的时候不调用接口',
|
||||||
selectType.value
|
mapSearchParam.value,
|
||||||
)
|
selectType.value
|
||||||
if (!whoShow1.value.itShowXiHaiAn) {
|
)
|
||||||
if (selectType.value == '视频资源') {
|
if (!whoShow1.value.itShowXiHaiAn) {
|
||||||
getCameraByParentId(mapSearchParam.value)
|
if (selectType.value == '视频资源') {
|
||||||
|
getCameraByParentId(mapSearchParam.value)
|
||||||
|
.then((res) => {
|
||||||
|
console.log('res--查询摄像头---------->', res)
|
||||||
|
loadingCamera.value = false
|
||||||
|
dataSource.value = res.data.data
|
||||||
|
pagination.value.total = res.data.count
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
loadingCamera.value = false
|
||||||
|
message.error(err)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
loadingCamera.value = false
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
let params = {
|
||||||
|
regionId:
|
||||||
|
mapSearchParam.value.parentId || '70be8c5b664f4bcf869d82f2e8335051',
|
||||||
|
// pageNum: mapSearchParam.value.pageNum,
|
||||||
|
// pageSize: mapSearchParam.value.pageSize,
|
||||||
|
longitude: mapSearchParam.value.gpsX || '',
|
||||||
|
latitude: mapSearchParam.value.gpsY || '',
|
||||||
|
radius: mapSearchParam.value.radius || '',
|
||||||
|
name: mapSearchParam.value.cameraName,
|
||||||
|
type: mapSearchParam.value.type,
|
||||||
|
borderPolygonList: mapSearchParam.value.borderPolygonList || [],
|
||||||
|
}
|
||||||
|
// todo-临时放开
|
||||||
|
// if (
|
||||||
|
// params.regionId === '70be8c5b664f4bcf869d82f2e8335051' &&
|
||||||
|
// !params.name &&
|
||||||
|
// !params.longitude
|
||||||
|
// ) {
|
||||||
|
// params.status = ''
|
||||||
|
// }
|
||||||
|
let paramsFather = ''
|
||||||
|
let i = 1
|
||||||
|
for (var key in params) {
|
||||||
|
if (params[key] === '') {
|
||||||
|
delete params[key]
|
||||||
|
} else {
|
||||||
|
if (i != 1) {
|
||||||
|
paramsFather += `&${key}=` + params[key]
|
||||||
|
i += 1
|
||||||
|
} else if (i == 1) {
|
||||||
|
paramsFather += `${key}=` + params[key]
|
||||||
|
i += 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log('位置1')
|
||||||
|
spinningHome.value = true
|
||||||
|
getCameraByCondition(params)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log('res--查询摄像头---------->', res)
|
console.log('res--查询摄像头---------->', res)
|
||||||
|
spinningHome.value = false
|
||||||
loadingCamera.value = false
|
loadingCamera.value = false
|
||||||
dataSource.value = res.data.data
|
dataSource.value = res.data.data
|
||||||
pagination.value.total = res.data.count
|
pagination.value.total = res.data.count
|
||||||
|
@ -1995,58 +2059,11 @@
|
||||||
loadingCamera.value = false
|
loadingCamera.value = false
|
||||||
message.error(err)
|
message.error(err)
|
||||||
})
|
})
|
||||||
} else {
|
|
||||||
loadingCamera.value = false
|
|
||||||
}
|
}
|
||||||
} else {
|
},
|
||||||
let params = {
|
1000,
|
||||||
regionId:
|
{ leading: true, trailing: false }
|
||||||
mapSearchParam.value.parentId || '70be8c5b664f4bcf869d82f2e8335051',
|
)
|
||||||
// pageNum: mapSearchParam.value.pageNum,
|
|
||||||
// pageSize: mapSearchParam.value.pageSize,
|
|
||||||
longitude: mapSearchParam.value.gpsX || '',
|
|
||||||
latitude: mapSearchParam.value.gpsY || '',
|
|
||||||
radius: mapSearchParam.value.radius || '',
|
|
||||||
name: mapSearchParam.value.cameraName,
|
|
||||||
type: mapSearchParam.value.type,
|
|
||||||
borderPolygonList: mapSearchParam.value.borderPolygonList || [],
|
|
||||||
}
|
|
||||||
// todo-临时放开
|
|
||||||
// if (
|
|
||||||
// params.regionId === '70be8c5b664f4bcf869d82f2e8335051' &&
|
|
||||||
// !params.name &&
|
|
||||||
// !params.longitude
|
|
||||||
// ) {
|
|
||||||
// params.status = ''
|
|
||||||
// }
|
|
||||||
let paramsFather = ''
|
|
||||||
let i = 1
|
|
||||||
for (var key in params) {
|
|
||||||
if (params[key] === '') {
|
|
||||||
delete params[key]
|
|
||||||
} else {
|
|
||||||
if (i != 1) {
|
|
||||||
paramsFather += `&${key}=` + params[key]
|
|
||||||
i += 1
|
|
||||||
} else if (i == 1) {
|
|
||||||
paramsFather += `${key}=` + params[key]
|
|
||||||
i += 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
getCameraByCondition(params)
|
|
||||||
.then((res) => {
|
|
||||||
console.log('res--查询摄像头---------->', res)
|
|
||||||
loadingCamera.value = false
|
|
||||||
dataSource.value = res.data.data
|
|
||||||
pagination.value.total = res.data.count
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
loadingCamera.value = false
|
|
||||||
message.error(err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
getCamera,
|
getCamera,
|
||||||
reSetSearch,
|
reSetSearch,
|
||||||
|
|
|
@ -1,10 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="ucs-leaflet-map">
|
<div class="ucs-leaflet-map">
|
||||||
<div id="contain">
|
|
||||||
<div class="map-box">
|
<div id="contain" >
|
||||||
|
|
||||||
|
<div class="map-box" >
|
||||||
|
|
||||||
<div :id="mapId" class="normal-map-content">
|
<div :id="mapId" class="normal-map-content">
|
||||||
<tiled-map :hi-map="hiMap" :map-id="mapId" />
|
|
||||||
|
<tiled-map v-loading="spinning" element-loading-text="Loading..."
|
||||||
|
element-loading-svg-view-box="-10, -10, 50, 50"
|
||||||
|
element-loading-background="rgba(122, 122, 122, 0.8)"
|
||||||
|
:hi-map="hiMap" :map-id="mapId" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="searchPoint">
|
<div class="searchPoint">
|
||||||
|
@ -41,6 +50,7 @@
|
||||||
:fetch-suggestions="querySearch"
|
:fetch-suggestions="querySearch"
|
||||||
clearable
|
clearable
|
||||||
class="input-with-select"
|
class="input-with-select"
|
||||||
|
@change = "changeComplete"
|
||||||
placeholder="请输入关键字"
|
placeholder="请输入关键字"
|
||||||
@select="
|
@select="
|
||||||
(addressItem) => {
|
(addressItem) => {
|
||||||
|
@ -92,7 +102,7 @@
|
||||||
data-spm-anchor-id="a313x.7781069.0.i0"
|
data-spm-anchor-id="a313x.7781069.0.i0"
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
<img class="icon-poylon" @click="areaMode()" src="~@/supermap/image/icon-poylon.png">
|
<img class="icon-poylon" @click="areaMode()" src="~@/supermap/image/icon-poylon.png">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<video-play
|
<video-play
|
||||||
|
@ -104,7 +114,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage, ElLoading } from 'element-plus'
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
import { HieimpMap } from '@/supermap/map-init'
|
import { HieimpMap } from '@/supermap/map-init'
|
||||||
import TiledMap from './components/tiledMap'
|
import TiledMap from './components/tiledMap'
|
||||||
|
@ -121,6 +131,7 @@ import { ElMessage } from 'element-plus'
|
||||||
selectByChannelName,
|
selectByChannelName,
|
||||||
} from '@/api/videoSurveillance'
|
} from '@/api/videoSurveillance'
|
||||||
import { getCameraByCondition,getListForPOI,CameraConditionPlaceType } from '@/api/file'
|
import { getCameraByCondition,getListForPOI,CameraConditionPlaceType } from '@/api/file'
|
||||||
|
import debounce from 'lodash/debounce'
|
||||||
import mybus from '@/myplugins/mybus'
|
import mybus from '@/myplugins/mybus'
|
||||||
import * as turf from '@turf/turf';
|
import * as turf from '@turf/turf';
|
||||||
|
|
||||||
|
@ -133,6 +144,7 @@ import { ElMessage } from 'element-plus'
|
||||||
checkboxGroup: [],
|
checkboxGroup: [],
|
||||||
tabList: [],
|
tabList: [],
|
||||||
state: '',
|
state: '',
|
||||||
|
spinning: false,
|
||||||
timeout: null,
|
timeout: null,
|
||||||
camreaTree: [],
|
camreaTree: [],
|
||||||
camreaTreeIsShow: true,
|
camreaTreeIsShow: true,
|
||||||
|
@ -192,9 +204,14 @@ import { ElMessage } from 'element-plus'
|
||||||
// this.getMapPoint()
|
// this.getMapPoint()
|
||||||
// 点击左侧根据parentId查询摄像头列表
|
// 点击左侧根据parentId查询摄像头列表
|
||||||
mybus.off('getCameraByParentId')
|
mybus.off('getCameraByParentId')
|
||||||
mybus.on('getCameraByParentId', (parentId) => {
|
mybus.on('getCameraByParentId', (val) => {
|
||||||
debugger
|
debugger
|
||||||
this.mapSearchParam.parentId = parentId
|
console.log('倒腾位置1')
|
||||||
|
// 判断是否重置位置
|
||||||
|
if (val.reset) {
|
||||||
|
this.hiMapFun.mapFlyTo({lat:'36.017043',lng: '119.922772'}, 9)
|
||||||
|
}
|
||||||
|
this.mapSearchParam.parentId = val.id
|
||||||
this.mapSearchParam.type = "1"
|
this.mapSearchParam.type = "1"
|
||||||
this.mapSearchParam.pageSize = 10000
|
this.mapSearchParam.pageSize = 10000
|
||||||
this.getCameraByParentId('','department')
|
this.getCameraByParentId('','department')
|
||||||
|
@ -233,6 +250,12 @@ import { ElMessage } from 'element-plus'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
changeComplete(val) {
|
||||||
|
if (val === '') {
|
||||||
|
// console.log('触发清空点位')
|
||||||
|
this.hiMapFun.removeLayerByLayerName('potcon');
|
||||||
|
}
|
||||||
|
},
|
||||||
//查询标签视频
|
//查询标签视频
|
||||||
queryCameraConditionPlace(data) {
|
queryCameraConditionPlace(data) {
|
||||||
let params = {
|
let params = {
|
||||||
|
@ -366,19 +389,12 @@ import { ElMessage } from 'element-plus'
|
||||||
this.mapSearchParam.gpsY = e.layer._latlng.lat
|
this.mapSearchParam.gpsY = e.layer._latlng.lat
|
||||||
this.mapSearchParam.radius = radius
|
this.mapSearchParam.radius = radius
|
||||||
this.mapSearchParam.type = 1
|
this.mapSearchParam.type = 1
|
||||||
const params = {
|
|
||||||
gpsX: this.mapSearchParam.gpsX,
|
|
||||||
gpsY: this.mapSearchParam.gpsY,
|
|
||||||
radius: radius,
|
|
||||||
type: this.mapSearchParam.type,
|
|
||||||
}
|
|
||||||
// mybus.emit('getListByMap', params)
|
|
||||||
this.getCameraByParentId('map')
|
this.getCameraByParentId('map')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getCameraByParentId(type,dataName) {
|
getCameraByParentId : debounce(function(type,dataName) {
|
||||||
if (!this.whoShow1.itShowXiHaiAn) {
|
if (!this.whoShow1.itShowXiHaiAn) {
|
||||||
getCameraByParentId(this.mapSearchParam).then((res) => {
|
getCameraByParentId(this.mapSearchParam).then((res) => {
|
||||||
console.log('根据parent查询摄像头', res.data.data)
|
console.log('根据parent查询摄像头', res.data.data)
|
||||||
|
@ -386,14 +402,11 @@ import { ElMessage } from 'element-plus'
|
||||||
this.addResourceTomap('videoMap', res.data.data)
|
this.addResourceTomap('videoMap', res.data.data)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.hiMapFun.mapFlyTo({lat:'36.017043',lng: '119.922772'}, 9)
|
// this.hiMapFun.mapFlyTo({lat:'36.017043',lng: '119.922772'}, 9)
|
||||||
console.log('根据parent查询摄像头111111',this.mapSearchParam)
|
|
||||||
let params = {
|
let params = {
|
||||||
regionId:
|
regionId:
|
||||||
this.mapSearchParam.parentId ||
|
this.mapSearchParam.parentId ||
|
||||||
'70be8c5b664f4bcf869d82f2e8335051',
|
'70be8c5b664f4bcf869d82f2e8335051',
|
||||||
// pageNum: this.mapSearchParam.pageNum,
|
|
||||||
// pageSize: this.mapSearchParam.type!=0?this.mapSearchParam.pageSize:10,
|
|
||||||
name: this.mapSearchParam.cameraName || '',
|
name: this.mapSearchParam.cameraName || '',
|
||||||
longitude: this.mapSearchParam.gpsX || '',
|
longitude: this.mapSearchParam.gpsX || '',
|
||||||
latitude: this.mapSearchParam.gpsY || '',
|
latitude: this.mapSearchParam.gpsY || '',
|
||||||
|
@ -419,8 +432,11 @@ import { ElMessage } from 'element-plus'
|
||||||
if(dataName){
|
if(dataName){
|
||||||
params.type='0';
|
params.type='0';
|
||||||
}
|
}
|
||||||
|
console.log('位置2')
|
||||||
|
this.spinning = true;
|
||||||
getCameraByCondition(params).then((res) => {
|
getCameraByCondition(params).then((res) => {
|
||||||
//console.log('根据parent查询摄像头44444', res.data.data)
|
//console.log('根据parent查询摄像头44444', res.data.data)
|
||||||
|
this.spinning = false;
|
||||||
if(type=='map'){
|
if(type=='map'){
|
||||||
let params = this.mapSearchParam;
|
let params = this.mapSearchParam;
|
||||||
params.dataSource = res.data.data||0;
|
params.dataSource = res.data.data||0;
|
||||||
|
@ -428,15 +444,15 @@ import { ElMessage } from 'element-plus'
|
||||||
mybus.emit('getListByMap', params);
|
mybus.emit('getListByMap', params);
|
||||||
}
|
}
|
||||||
this.pointAllData = res.data.data;
|
this.pointAllData = res.data.data;
|
||||||
if(this.mapSearchParam.type!=0)
|
// if(this.mapSearchParam.type!=0)
|
||||||
this.addResourceTomap('videoMap', res.data.data)
|
this.addResourceTomap('videoMap', res.data.data)
|
||||||
|
|
||||||
else
|
// else
|
||||||
this.addResourceTomap('videoMap', []) //查询全部时不打点}
|
// this.addResourceTomap('videoMap', []) //查询全部时不打点}
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
}, 1000, { 'leading': true, 'trailing': false }),
|
||||||
// 初始化地址匹配服务
|
// 初始化地址匹配服务
|
||||||
initAddressMatchService() {
|
initAddressMatchService() {
|
||||||
this.L = window.L || {}
|
this.L = window.L || {}
|
||||||
|
@ -508,6 +524,7 @@ import { ElMessage } from 'element-plus'
|
||||||
async searchAddressByKeyWord(queryString, cb, indexX) {
|
async searchAddressByKeyWord(queryString, cb, indexX) {
|
||||||
console.log('querySearch',queryString, cb,this.restaurants)
|
console.log('querySearch',queryString, cb,this.restaurants)
|
||||||
if(queryString){
|
if(queryString){
|
||||||
|
console.log('位置3')
|
||||||
getCameraByCondition({
|
getCameraByCondition({
|
||||||
// pageNum: 1,
|
// pageNum: 1,
|
||||||
// pageSize: 40000,
|
// pageSize: 40000,
|
||||||
|
@ -534,7 +551,7 @@ import { ElMessage } from 'element-plus'
|
||||||
cb([])
|
cb([])
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getCameraAllPage(page) {
|
getCameraAllPage: debounce(function(page) {
|
||||||
let params = {
|
let params = {
|
||||||
regionId: "70be8c5b664f4bcf869d82f2e8335051",
|
regionId: "70be8c5b664f4bcf869d82f2e8335051",
|
||||||
borderPolygonList: []
|
borderPolygonList: []
|
||||||
|
@ -546,7 +563,7 @@ import { ElMessage } from 'element-plus'
|
||||||
// let t2 = new Date().getTime();
|
// let t2 = new Date().getTime();
|
||||||
// console.log("时间#############" + (t2 - t1));
|
// console.log("时间#############" + (t2 - t1));
|
||||||
})
|
})
|
||||||
},
|
},1000, { 'leading': true, 'trailing': false }),
|
||||||
getCameraAllLabel() {},
|
getCameraAllLabel() {},
|
||||||
tabChange(item) {
|
tabChange(item) {
|
||||||
if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
|
if (this.checkboxGroup.indexOf(item.labelName) !== -1) {
|
||||||
|
@ -778,7 +795,7 @@ import { ElMessage } from 'element-plus'
|
||||||
.leaflet-control-attribution {
|
.leaflet-control-attribution {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
svg,.icon-poylon {
|
.icon, .icon-poylon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0.1rem;
|
bottom: 0.1rem;
|
||||||
right: 0.1rem;
|
right: 0.1rem;
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: hisense.liangjunhua
|
* @Author: hisense.liangjunhua
|
||||||
* @Date: 2022-07-12 09:42:44
|
* @Date: 2022-07-12 09:42:44
|
||||||
* @LastEditors: hisense.wuhongjian
|
* @LastEditors: hisense.wuhongjian
|
||||||
* @LastEditTime: 2022-10-26 18:15:01
|
* @LastEditTime: 2022-11-26 14:47:12
|
||||||
* @Description:我的申请 能力申请 查看详情
|
* @Description:我的申请 能力申请 查看详情
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
|
@ -146,12 +146,12 @@
|
||||||
</div>
|
</div>
|
||||||
<div></div>
|
<div></div>
|
||||||
<a-button
|
<a-button
|
||||||
type="primary"
|
type="primary"
|
||||||
v-if="item.approveStatus === '通过'"
|
v-if="item.approveStatus === '通过'"
|
||||||
@click.stop="switchFunction(item)"
|
@click.stop="switchFunction(item)"
|
||||||
>
|
>
|
||||||
查看详情
|
查看详情
|
||||||
</a-button>
|
</a-button>
|
||||||
<!-- <div class="btn" v-if="val.type == '组件服务'">技术文档</div> -->
|
<!-- <div class="btn" v-if="val.type == '组件服务'">技术文档</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="ability-bottom">
|
<div class="ability-bottom">
|
||||||
|
@ -172,7 +172,6 @@
|
||||||
>
|
>
|
||||||
附件下载
|
附件下载
|
||||||
</a-button>
|
</a-button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -225,50 +224,56 @@
|
||||||
style="cursor: pointer"
|
style="cursor: pointer"
|
||||||
@click="
|
@click="
|
||||||
openView(
|
openView(
|
||||||
'http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=' + val.channelCode+'&protocol=wss&transmode=1&streamType=1'
|
'http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=' +
|
||||||
|
val.channelCode +
|
||||||
|
'&protocol=wss&transmode=1&streamType=1'
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ 'http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=' + val.channelCode+'&protocol=wss&transmode=1&streamType=1' }}
|
{{
|
||||||
|
'http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=' +
|
||||||
|
val.channelCode +
|
||||||
|
'&protocol=wss&transmode=1&streamType=1'
|
||||||
|
}}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="button-bottom" v-if="item.approveStatus == '通过'">
|
<div class="button-bottom" v-if="item.approveStatus == '通过'">
|
||||||
<a
|
<a
|
||||||
style="
|
style="
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 88px;
|
width: 88px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #40a9ff;
|
background: #40a9ff;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor:pointer;
|
cursor: pointer;
|
||||||
"
|
"
|
||||||
href="/static/download/InstallRootCert.exe"
|
href="/static/download/InstallRootCert.exe"
|
||||||
>
|
>
|
||||||
证书下载
|
证书下载
|
||||||
</a>
|
</a>
|
||||||
<span
|
<span
|
||||||
style="
|
style="
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 88px;
|
width: 88px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #40a9ff;
|
background: #40a9ff;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-left:40px;
|
margin-left: 40px;
|
||||||
cursor:pointer;
|
cursor: pointer;
|
||||||
"
|
"
|
||||||
@click="downLoadClient()"
|
@click="downLoadClient()"
|
||||||
>
|
>
|
||||||
客户端下载
|
客户端下载
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -280,7 +285,7 @@
|
||||||
wrapClassName="single-preview-modal"
|
wrapClassName="single-preview-modal"
|
||||||
v-model:visible="visible"
|
v-model:visible="visible"
|
||||||
title="视频预览"
|
title="视频预览"
|
||||||
:width="1000"
|
:width="850"
|
||||||
destroyOnClose
|
destroyOnClose
|
||||||
>
|
>
|
||||||
<template #footer></template>
|
<template #footer></template>
|
||||||
|
@ -300,7 +305,11 @@
|
||||||
{{ userInfo.realNameShow }}
|
{{ userInfo.realNameShow }}
|
||||||
</div>
|
</div>
|
||||||
<!-- <vue3VideoPlay v-bind="options" /> -->
|
<!-- <vue3VideoPlay v-bind="options" /> -->
|
||||||
<h5-player :video-url="videoUrl"></h5-player>
|
<h5-player
|
||||||
|
unStopable="true"
|
||||||
|
:video-id="videoId"
|
||||||
|
:video-url="videoUrl"
|
||||||
|
></h5-player>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
@ -315,7 +324,7 @@
|
||||||
import { getStreamByChannelCode } from '@/api/videoSurveillance'
|
import { getStreamByChannelCode } from '@/api/videoSurveillance'
|
||||||
import { getUser } from '@/api/home'
|
import { getUser } from '@/api/home'
|
||||||
import H5Player from '@/views/home/components/H5Player.vue'
|
import H5Player from '@/views/home/components/H5Player.vue'
|
||||||
import {getCameraLiveStream} from '@/api/file'
|
import { getCameraLiveStream } from '@/api/file'
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
|
const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
@ -323,6 +332,7 @@
|
||||||
})
|
})
|
||||||
const whoShow1 = ref(whoShow)
|
const whoShow1 = ref(whoShow)
|
||||||
let visible = ref(false)
|
let visible = ref(false)
|
||||||
|
const videoId = ref('111111111111')
|
||||||
const options = reactive({
|
const options = reactive({
|
||||||
width: '912px', //播放器宽度
|
width: '912px', //播放器宽度
|
||||||
height: '513px', //播放器高度
|
height: '513px', //播放器高度
|
||||||
|
@ -359,7 +369,7 @@
|
||||||
dept.deptName = infrastructure.deptName
|
dept.deptName = infrastructure.deptName
|
||||||
}
|
}
|
||||||
const showThis = () => {
|
const showThis = () => {
|
||||||
console.log('props.refObj.enclosure',props.refObj);
|
console.log('props.refObj.enclosure', props.refObj)
|
||||||
window.open(
|
window.open(
|
||||||
window.SITE_CONFIG.previewUrl +
|
window.SITE_CONFIG.previewUrl +
|
||||||
'hisense_office/onlinePreview?url=' +
|
'hisense_office/onlinePreview?url=' +
|
||||||
|
@ -367,9 +377,10 @@
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
//下载海康客户端
|
//下载海康客户端
|
||||||
const downLoadClient = () => {
|
const downLoadClient = () => {
|
||||||
let url = "https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10";
|
let url =
|
||||||
window.open( url, '_blank')
|
'https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10'
|
||||||
|
window.open(url, '_blank')
|
||||||
}
|
}
|
||||||
const showArr = ref([])
|
const showArr = ref([])
|
||||||
console.log(props.refObj, '=====================================')
|
console.log(props.refObj, '=====================================')
|
||||||
|
@ -515,19 +526,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const videoUrl = ref('')
|
const videoUrl = ref('')
|
||||||
//获取视频控件所需播放地址
|
//获取视频控件所需播放地址
|
||||||
const getVideoUrl = (data) =>{
|
const getVideoUrl = (data) => {
|
||||||
debugger
|
debugger
|
||||||
let param = data;
|
let param = data
|
||||||
getCameraLiveStream(param).then((res) => {
|
getCameraLiveStream(param).then((res) => {
|
||||||
//console.log('555555rrrrr',res)
|
//console.log('555555rrrrr',res)
|
||||||
if(res.data.data){
|
if (res.data.data) {
|
||||||
videoUrl.value = res.data.data.url;
|
videoUrl.value = res.data.data.url
|
||||||
}
|
|
||||||
visible.value = true
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
visible.value = true
|
||||||
|
})
|
||||||
|
}
|
||||||
// 视频预览
|
// 视频预览
|
||||||
const openVideo = (item) => {
|
const openVideo = (item) => {
|
||||||
console.log('打开视频', item)
|
console.log('打开视频', item)
|
||||||
|
@ -578,7 +589,7 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const openView = (url) => {
|
const openView = (url) => {
|
||||||
console.log('valval',url);
|
console.log('valval', url)
|
||||||
//http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=37021100421318000090&protocol=wss&transmode=1&streamType=1
|
//http://10.134.135.92:9537/data_service/getCamera/getCameraLiveStream?cameraIndexCode=37021100421318000090&protocol=wss&transmode=1&streamType=1
|
||||||
window.open(url, '_blank')
|
window.open(url, '_blank')
|
||||||
}
|
}
|
||||||
|
@ -628,9 +639,9 @@
|
||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.downButton{
|
.downButton {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: normal;
|
justify-content: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -658,7 +669,7 @@
|
||||||
.box {
|
.box {
|
||||||
margin-left: 0.1rem;
|
margin-left: 0.1rem;
|
||||||
.ability {
|
.ability {
|
||||||
height: 2.0rem;
|
height: 2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
border-bottom: 1px #eee solid;
|
border-bottom: 1px #eee solid;
|
||||||
padding: 0.1rem 0;
|
padding: 0.1rem 0;
|
||||||
|
@ -766,7 +777,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.button-bottom{
|
.button-bottom {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -29,8 +29,8 @@ const productionGzipExtensions = [
|
||||||
'ico',
|
'ico',
|
||||||
]
|
]
|
||||||
// 是否开启gzip压缩
|
// 是否开启gzip压缩
|
||||||
// const isPro = process.env.NODE_ENV === 'production'
|
const isPro = process.env.NODE_ENV === 'production'
|
||||||
const isPro = false
|
// const isPro = false
|
||||||
if (donation) donationConsole()
|
if (donation) donationConsole()
|
||||||
const { version, author } = require('./package.json')
|
const { version, author } = require('./package.json')
|
||||||
const Webpack = require('webpack')
|
const Webpack = require('webpack')
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
{}
|
|
|
@ -1,21 +0,0 @@
|
||||||
The MIT License (MIT)
|
|
||||||
|
|
||||||
Copyright (c) 2020 Daniel Eden
|
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
|
||||||
in the Software without restriction, including without limitation the rights
|
|
||||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
||||||
copies of the Software, and to permit persons to whom the Software is
|
|
||||||
furnished to do so, subject to the following conditions:
|
|
||||||
|
|
||||||
The above copyright notice and this permission notice shall be included in all
|
|
||||||
copies or substantial portions of the Software.
|
|
||||||
|
|
||||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
||||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
||||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
||||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
||||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
||||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
||||||
SOFTWARE.
|
|
|
@ -1,48 +0,0 @@
|
||||||
# Animate.css
|
|
||||||
|
|
||||||
[![GitHub Version](https://img.shields.io/github/release/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![Github Star](https://img.shields.io/github/stars/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![Github Fork](https://img.shields.io/github/forks/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![License](https://img.shields.io/github/license/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css)
|
|
||||||
|
|
||||||
> If you need the old docs - v3.x.x and under - you can find it [here](https://github.com/animate-css/animate.css/tree/a8d92e585b1b302f7749809c3308d5e381f9cb17).
|
|
||||||
|
|
||||||
## _Just-add-water CSS animation_
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
Install with npm:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
npm install animate.css --save
|
|
||||||
```
|
|
||||||
|
|
||||||
Install with yarn:
|
|
||||||
|
|
||||||
```shell
|
|
||||||
yarn add animate.css
|
|
||||||
```
|
|
||||||
|
|
||||||
## Getting started
|
|
||||||
|
|
||||||
You can find the Animate.css documentation on the [website](https://animate.style/).
|
|
||||||
|
|
||||||
## Accessibility
|
|
||||||
|
|
||||||
Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.
|
|
||||||
|
|
||||||
## Core team
|
|
||||||
|
|
||||||
| ![](https://avatars2.githubusercontent.com/u/439365?s=460&u=512b4cc5324938ae40bbb8f3b7769d335953cd3a&v=4) | ![](https://avatars2.githubusercontent.com/u/5007208?s=460&u=418401ee605824272e5dcb955fd64ea24546a857&v=4) | ![](https://avatars1.githubusercontent.com/u/15052701?s=460&u=9e58364978379536d3f26c4ce5cae1a2a449a0e4&v=4) |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| [Daniel Eden](https://github.com/daneden) | [Elton Mesquita](https://github.com/eltonmesquita) | [Waren Gonzaga](https://github.com/WarenGonzaga) |
|
|
||||||
| Animate.css creator | Maintainer | Core contributor |
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
Animate.css is licensed under the MIT license. <https://opensource.org/licenses/MIT>
|
|
||||||
|
|
||||||
## Code of Conduct
|
|
||||||
|
|
||||||
This project and everyone participating in it is governed by the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [callmeelton@gmail.com](mailto:callmeelton@gmail.com).
|
|
||||||
|
|
||||||
## Contributing
|
|
||||||
|
|
||||||
Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](https://codepen.io). That **last one is important**.
|
|
|
@ -1,78 +0,0 @@
|
||||||
{
|
|
||||||
"name": "animate.css",
|
|
||||||
"version": "4.1.1",
|
|
||||||
"main": "animate.css",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/animate-css/animate.css.git"
|
|
||||||
},
|
|
||||||
"author": {
|
|
||||||
"name": "Animate.css"
|
|
||||||
},
|
|
||||||
"homepage": "https://animate.style/",
|
|
||||||
"license": "MIT",
|
|
||||||
"animateConfig": {
|
|
||||||
"prefix": "animate__"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"start": "npm-run-all raw prod compat",
|
|
||||||
"compat": "npx postcss source/animate.css -o animate.compat.css --no-map --env compat",
|
|
||||||
"dev": "npx postcss source/animate.css -o animate.css --no-map --env development -w",
|
|
||||||
"raw": "npx postcss source/animate.css -o animate.css --no-map --env development",
|
|
||||||
"prod": "npx postcss source/animate.css -o animate.min.css --no-map --env production",
|
|
||||||
"format": "prettier --write \"**/*.{js,json,md,css}\"",
|
|
||||||
"precommit": "lint-staged",
|
|
||||||
"docs:library": "npx postcss source/animate.css -o ./docs/animate.min.css --no-map --env production",
|
|
||||||
"docs:pages": "node ./docsSource/index.js",
|
|
||||||
"docs": "npm-run-all docs:library docs:pages",
|
|
||||||
"version": "npm-run-all start docs && git add -A docs animate.css animate.min.css animate.compat.css",
|
|
||||||
"postversion": "git push && git push --tags"
|
|
||||||
},
|
|
||||||
"browserslist": [
|
|
||||||
"> 3%",
|
|
||||||
"last 2 versions"
|
|
||||||
],
|
|
||||||
"style": "./animate.css",
|
|
||||||
"jspm": {
|
|
||||||
"main": "animate.css!",
|
|
||||||
"format": "global",
|
|
||||||
"directories": {
|
|
||||||
"lib": "./"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"autoprefixer": "^9.7.6",
|
|
||||||
"cssnano": "^4.1.10",
|
|
||||||
"eslint": "^7.8.1",
|
|
||||||
"husky": "^4.2.5",
|
|
||||||
"lint-staged": "^10.3.0",
|
|
||||||
"markdown-it": "^11.0.0",
|
|
||||||
"npm-run-all": "^4.1.5",
|
|
||||||
"postcss": "^7.0.27",
|
|
||||||
"postcss-cli": "^7.1.2",
|
|
||||||
"postcss-header": "^2.0.0",
|
|
||||||
"postcss-import": "^12.0.1",
|
|
||||||
"postcss-prefixer": "^2.1.2",
|
|
||||||
"postcss-preset-env": "^6.7.0",
|
|
||||||
"prettier": "^2.1.1"
|
|
||||||
},
|
|
||||||
"lint-staged": {
|
|
||||||
"*.{js,json,md,css}": [
|
|
||||||
"prettier --write"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"husky": {
|
|
||||||
"hooks": {
|
|
||||||
"pre-commit": "npm-run-all start precommit"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"files": [
|
|
||||||
"animate.compat.css",
|
|
||||||
"animate.min.css",
|
|
||||||
"animate.css",
|
|
||||||
"source/**/*.css"
|
|
||||||
],
|
|
||||||
"__npminstall_done": true,
|
|
||||||
"_from": "animate.css@4.1.1",
|
|
||||||
"_resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz"
|
|
||||||
}
|
|
|
@ -1,68 +0,0 @@
|
||||||
.animated {
|
|
||||||
animation-duration: var(--animate-duration);
|
|
||||||
animation-fill-mode: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.infinite {
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.repeat-1 {
|
|
||||||
animation-iteration-count: var(--animate-repeat);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.repeat-2 {
|
|
||||||
animation-iteration-count: calc(var(--animate-repeat) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.repeat-3 {
|
|
||||||
animation-iteration-count: calc(var(--animate-repeat) * 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.delay-1s {
|
|
||||||
animation-delay: var(--animate-delay);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.delay-2s {
|
|
||||||
animation-delay: calc(var(--animate-delay) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.delay-3s {
|
|
||||||
animation-delay: calc(var(--animate-delay) * 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.delay-4s {
|
|
||||||
animation-delay: calc(var(--animate-delay) * 4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.delay-5s {
|
|
||||||
animation-delay: calc(var(--animate-delay) * 5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.faster {
|
|
||||||
animation-duration: calc(var(--animate-duration) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.fast {
|
|
||||||
animation-duration: calc(var(--animate-duration) * 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.slow {
|
|
||||||
animation-duration: calc(var(--animate-duration) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.slower {
|
|
||||||
animation-duration: calc(var(--animate-duration) * 3);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media print, (prefers-reduced-motion: reduce) {
|
|
||||||
.animated {
|
|
||||||
animation-duration: 1ms !important;
|
|
||||||
transition-duration: 1ms !important;
|
|
||||||
animation-iteration-count: 1 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated[class*='Out'] {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,5 +0,0 @@
|
||||||
:root {
|
|
||||||
--animate-duration: 1s;
|
|
||||||
--animate-delay: 1s;
|
|
||||||
--animate-repeat: 1;
|
|
||||||
}
|
|
|
@ -1,131 +0,0 @@
|
||||||
@import '_vars.css';
|
|
||||||
@import '_base.css';
|
|
||||||
|
|
||||||
/* Attention seekers */
|
|
||||||
@import 'attention_seekers/bounce.css';
|
|
||||||
@import 'attention_seekers/flash.css';
|
|
||||||
@import 'attention_seekers/pulse.css';
|
|
||||||
@import 'attention_seekers/rubberBand.css';
|
|
||||||
@import 'attention_seekers/shakeX.css';
|
|
||||||
@import 'attention_seekers/shakeY.css';
|
|
||||||
@import 'attention_seekers/headShake.css';
|
|
||||||
@import 'attention_seekers/swing.css';
|
|
||||||
@import 'attention_seekers/tada.css';
|
|
||||||
@import 'attention_seekers/wobble.css';
|
|
||||||
@import 'attention_seekers/jello.css';
|
|
||||||
@import 'attention_seekers/heartBeat.css';
|
|
||||||
|
|
||||||
/* Back entrances */
|
|
||||||
@import 'back_entrances/backInDown.css';
|
|
||||||
@import 'back_entrances/backInLeft.css';
|
|
||||||
@import 'back_entrances/backInRight.css';
|
|
||||||
@import 'back_entrances/backInUp.css';
|
|
||||||
|
|
||||||
/* Back exits */
|
|
||||||
@import 'back_exits/backOutDown.css';
|
|
||||||
@import 'back_exits/backOutLeft.css';
|
|
||||||
@import 'back_exits/backOutRight.css';
|
|
||||||
@import 'back_exits/backOutUp.css';
|
|
||||||
|
|
||||||
/* Bouncing entrances */
|
|
||||||
@import 'bouncing_entrances/bounceIn.css';
|
|
||||||
@import 'bouncing_entrances/bounceInDown.css';
|
|
||||||
@import 'bouncing_entrances/bounceInLeft.css';
|
|
||||||
@import 'bouncing_entrances/bounceInRight.css';
|
|
||||||
@import 'bouncing_entrances/bounceInUp.css';
|
|
||||||
|
|
||||||
/* Bouncing exits */
|
|
||||||
@import 'bouncing_exits/bounceOut.css';
|
|
||||||
@import 'bouncing_exits/bounceOutDown.css';
|
|
||||||
@import 'bouncing_exits/bounceOutLeft.css';
|
|
||||||
@import 'bouncing_exits/bounceOutRight.css';
|
|
||||||
@import 'bouncing_exits/bounceOutUp.css';
|
|
||||||
|
|
||||||
/* Fading entrances */
|
|
||||||
@import 'fading_entrances/fadeIn.css';
|
|
||||||
@import 'fading_entrances/fadeInDown.css';
|
|
||||||
@import 'fading_entrances/fadeInDownBig.css';
|
|
||||||
@import 'fading_entrances/fadeInLeft.css';
|
|
||||||
@import 'fading_entrances/fadeInLeftBig.css';
|
|
||||||
@import 'fading_entrances/fadeInRight.css';
|
|
||||||
@import 'fading_entrances/fadeInRightBig.css';
|
|
||||||
@import 'fading_entrances/fadeInUp.css';
|
|
||||||
@import 'fading_entrances/fadeInUpBig.css';
|
|
||||||
@import 'fading_entrances/fadeInTopLeft.css';
|
|
||||||
@import 'fading_entrances/fadeInTopRight.css';
|
|
||||||
@import 'fading_entrances/fadeInBottomLeft.css';
|
|
||||||
@import 'fading_entrances/fadeInBottomRight.css';
|
|
||||||
|
|
||||||
/* Fading exits */
|
|
||||||
@import 'fading_exits/fadeOut.css';
|
|
||||||
@import 'fading_exits/fadeOutDown.css';
|
|
||||||
@import 'fading_exits/fadeOutDownBig.css';
|
|
||||||
@import 'fading_exits/fadeOutLeft.css';
|
|
||||||
@import 'fading_exits/fadeOutLeftBig.css';
|
|
||||||
@import 'fading_exits/fadeOutRight.css';
|
|
||||||
@import 'fading_exits/fadeOutRightBig.css';
|
|
||||||
@import 'fading_exits/fadeOutUp.css';
|
|
||||||
@import 'fading_exits/fadeOutUpBig.css';
|
|
||||||
@import 'fading_exits/fadeOutTopLeft.css';
|
|
||||||
@import 'fading_exits/fadeOutTopRight.css';
|
|
||||||
@import 'fading_exits/fadeOutBottomRight.css';
|
|
||||||
@import 'fading_exits/fadeOutBottomLeft.css';
|
|
||||||
|
|
||||||
/* Flippers */
|
|
||||||
@import 'flippers/flip.css';
|
|
||||||
@import 'flippers/flipInX.css';
|
|
||||||
@import 'flippers/flipInY.css';
|
|
||||||
@import 'flippers/flipOutX.css';
|
|
||||||
@import 'flippers/flipOutY.css';
|
|
||||||
|
|
||||||
/* Lightspeed */
|
|
||||||
@import 'lightspeed/lightSpeedInRight.css';
|
|
||||||
@import 'lightspeed/lightSpeedInLeft.css';
|
|
||||||
@import 'lightspeed/lightSpeedOutRight.css';
|
|
||||||
@import 'lightspeed/lightSpeedOutLeft.css';
|
|
||||||
|
|
||||||
/* Rotating entrances */
|
|
||||||
@import 'rotating_entrances/rotateIn.css';
|
|
||||||
@import 'rotating_entrances/rotateInDownLeft.css';
|
|
||||||
@import 'rotating_entrances/rotateInDownRight.css';
|
|
||||||
@import 'rotating_entrances/rotateInUpLeft.css';
|
|
||||||
@import 'rotating_entrances/rotateInUpRight.css';
|
|
||||||
|
|
||||||
/* Rotating exits */
|
|
||||||
@import 'rotating_exits/rotateOut.css';
|
|
||||||
@import 'rotating_exits/rotateOutDownLeft.css';
|
|
||||||
@import 'rotating_exits/rotateOutDownRight.css';
|
|
||||||
@import 'rotating_exits/rotateOutUpLeft.css';
|
|
||||||
@import 'rotating_exits/rotateOutUpRight.css';
|
|
||||||
|
|
||||||
/* Specials */
|
|
||||||
@import 'specials/hinge.css';
|
|
||||||
@import 'specials/jackInTheBox.css';
|
|
||||||
@import 'specials/rollIn.css';
|
|
||||||
@import 'specials/rollOut.css';
|
|
||||||
|
|
||||||
/* Zooming entrances */
|
|
||||||
@import 'zooming_entrances/zoomIn.css';
|
|
||||||
@import 'zooming_entrances/zoomInDown.css';
|
|
||||||
@import 'zooming_entrances/zoomInLeft.css';
|
|
||||||
@import 'zooming_entrances/zoomInRight.css';
|
|
||||||
@import 'zooming_entrances/zoomInUp.css';
|
|
||||||
|
|
||||||
/* Zooming exits */
|
|
||||||
@import 'zooming_exits/zoomOut.css';
|
|
||||||
@import 'zooming_exits/zoomOutDown.css';
|
|
||||||
@import 'zooming_exits/zoomOutLeft.css';
|
|
||||||
@import 'zooming_exits/zoomOutRight.css';
|
|
||||||
@import 'zooming_exits/zoomOutUp.css';
|
|
||||||
|
|
||||||
/* Sliding entrances */
|
|
||||||
@import 'sliding_entrances/slideInDown.css';
|
|
||||||
@import 'sliding_entrances/slideInLeft.css';
|
|
||||||
@import 'sliding_entrances/slideInRight.css';
|
|
||||||
@import 'sliding_entrances/slideInUp.css';
|
|
||||||
|
|
||||||
/* Sliding exits */
|
|
||||||
@import 'sliding_exits/slideOutDown.css';
|
|
||||||
@import 'sliding_exits/slideOutLeft.css';
|
|
||||||
@import 'sliding_exits/slideOutRight.css';
|
|
||||||
@import 'sliding_exits/slideOutUp.css';
|
|
34
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/bounce.css
generated
vendored
|
@ -1,34 +0,0 @@
|
||||||
@keyframes bounce {
|
|
||||||
from,
|
|
||||||
20%,
|
|
||||||
53%,
|
|
||||||
to {
|
|
||||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
40%,
|
|
||||||
43% {
|
|
||||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
||||||
transform: translate3d(0, -30px, 0) scaleY(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
70% {
|
|
||||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
||||||
transform: translate3d(0, -15px, 0) scaleY(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
transform: translate3d(0, 0, 0) scaleY(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
transform: translate3d(0, -4px, 0) scaleY(1.02);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounce {
|
|
||||||
animation-name: bounce;
|
|
||||||
transform-origin: center bottom;
|
|
||||||
}
|
|
16
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/flash.css
generated
vendored
|
@ -1,16 +0,0 @@
|
||||||
@keyframes flash {
|
|
||||||
from,
|
|
||||||
50%,
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
25%,
|
|
||||||
75% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flash {
|
|
||||||
animation-name: flash;
|
|
||||||
}
|
|
30
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/headShake.css
generated
vendored
|
@ -1,30 +0,0 @@
|
||||||
@keyframes headShake {
|
|
||||||
0% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
6.5% {
|
|
||||||
transform: translateX(-6px) rotateY(-9deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
18.5% {
|
|
||||||
transform: translateX(5px) rotateY(7deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
31.5% {
|
|
||||||
transform: translateX(-3px) rotateY(-5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
43.5% {
|
|
||||||
transform: translateX(2px) rotateY(3deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.headShake {
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
animation-name: headShake;
|
|
||||||
}
|
|
27
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/heartBeat.css
generated
vendored
|
@ -1,27 +0,0 @@
|
||||||
@keyframes heartBeat {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
14% {
|
|
||||||
transform: scale(1.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
28% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
42% {
|
|
||||||
transform: scale(1.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
70% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.heartBeat {
|
|
||||||
animation-name: heartBeat;
|
|
||||||
animation-duration: calc(var(--animate-duration) * 1.3);
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
}
|
|
40
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/jello.css
generated
vendored
|
@ -1,40 +0,0 @@
|
||||||
@keyframes jello {
|
|
||||||
from,
|
|
||||||
11.1%,
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
22.2% {
|
|
||||||
transform: skewX(-12.5deg) skewY(-12.5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
33.3% {
|
|
||||||
transform: skewX(6.25deg) skewY(6.25deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
44.4% {
|
|
||||||
transform: skewX(-3.125deg) skewY(-3.125deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
55.5% {
|
|
||||||
transform: skewX(1.5625deg) skewY(1.5625deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
66.6% {
|
|
||||||
transform: skewX(-0.78125deg) skewY(-0.78125deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
77.7% {
|
|
||||||
transform: skewX(0.390625deg) skewY(0.390625deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
88.8% {
|
|
||||||
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.jello {
|
|
||||||
animation-name: jello;
|
|
||||||
transform-origin: center;
|
|
||||||
}
|
|
20
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/pulse.css
generated
vendored
|
@ -1,20 +0,0 @@
|
||||||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
from {
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: scale3d(1.05, 1.05, 1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pulse {
|
|
||||||
animation-name: pulse;
|
|
||||||
animation-timing-function: ease-in-out;
|
|
||||||
}
|
|
33
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/rubberBand.css
generated
vendored
|
@ -1,33 +0,0 @@
|
||||||
@keyframes rubberBand {
|
|
||||||
from {
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
30% {
|
|
||||||
transform: scale3d(1.25, 0.75, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
transform: scale3d(0.75, 1.25, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: scale3d(1.15, 0.85, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
65% {
|
|
||||||
transform: scale3d(0.95, 1.05, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
transform: scale3d(1.05, 0.95, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rubberBand {
|
|
||||||
animation-name: rubberBand;
|
|
||||||
}
|
|
25
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/shake.css
generated
vendored
|
@ -1,25 +0,0 @@
|
||||||
@keyframes shake {
|
|
||||||
from,
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
10%,
|
|
||||||
30%,
|
|
||||||
50%,
|
|
||||||
70%,
|
|
||||||
90% {
|
|
||||||
transform: translate3d(-10px, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
20%,
|
|
||||||
40%,
|
|
||||||
60%,
|
|
||||||
80% {
|
|
||||||
transform: translate3d(10px, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.shake {
|
|
||||||
animation-name: shake;
|
|
||||||
}
|
|
25
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/shakeX.css
generated
vendored
|
@ -1,25 +0,0 @@
|
||||||
@keyframes shakeX {
|
|
||||||
from,
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
10%,
|
|
||||||
30%,
|
|
||||||
50%,
|
|
||||||
70%,
|
|
||||||
90% {
|
|
||||||
transform: translate3d(-10px, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
20%,
|
|
||||||
40%,
|
|
||||||
60%,
|
|
||||||
80% {
|
|
||||||
transform: translate3d(10px, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.shakeX {
|
|
||||||
animation-name: shakeX;
|
|
||||||
}
|
|
25
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/shakeY.css
generated
vendored
|
@ -1,25 +0,0 @@
|
||||||
@keyframes shakeY {
|
|
||||||
from,
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
10%,
|
|
||||||
30%,
|
|
||||||
50%,
|
|
||||||
70%,
|
|
||||||
90% {
|
|
||||||
transform: translate3d(0, -10px, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
20%,
|
|
||||||
40%,
|
|
||||||
60%,
|
|
||||||
80% {
|
|
||||||
transform: translate3d(0, 10px, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.shakeY {
|
|
||||||
animation-name: shakeY;
|
|
||||||
}
|
|
26
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/swing.css
generated
vendored
|
@ -1,26 +0,0 @@
|
||||||
@keyframes swing {
|
|
||||||
20% {
|
|
||||||
transform: rotate3d(0, 0, 1, 15deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
transform: rotate3d(0, 0, 1, -10deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
transform: rotate3d(0, 0, 1, 5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: rotate3d(0, 0, 1, -5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: rotate3d(0, 0, 1, 0deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.swing {
|
|
||||||
transform-origin: top center;
|
|
||||||
animation-name: swing;
|
|
||||||
}
|
|
|
@ -1,31 +0,0 @@
|
||||||
@keyframes tada {
|
|
||||||
from {
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
10%,
|
|
||||||
20% {
|
|
||||||
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
30%,
|
|
||||||
50%,
|
|
||||||
70%,
|
|
||||||
90% {
|
|
||||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
40%,
|
|
||||||
60%,
|
|
||||||
80% {
|
|
||||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tada {
|
|
||||||
animation-name: tada;
|
|
||||||
}
|
|
35
node_modules/_animate.css@4.1.1@animate.css/source/attention_seekers/wobble.css
generated
vendored
|
@ -1,35 +0,0 @@
|
||||||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
|
||||||
|
|
||||||
@keyframes wobble {
|
|
||||||
from {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
15% {
|
|
||||||
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
30% {
|
|
||||||
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
45% {
|
|
||||||
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wobble {
|
|
||||||
animation-name: wobble;
|
|
||||||
}
|
|
20
node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInDown.css
generated
vendored
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backInDown {
|
|
||||||
0% {
|
|
||||||
transform: translateY(-1200px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: translateY(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backInDown {
|
|
||||||
animation-name: backInDown;
|
|
||||||
}
|
|
20
node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInLeft.css
generated
vendored
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backInLeft {
|
|
||||||
0% {
|
|
||||||
transform: translateX(-2000px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: translateX(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backInLeft {
|
|
||||||
animation-name: backInLeft;
|
|
||||||
}
|
|
20
node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInRight.css
generated
vendored
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backInRight {
|
|
||||||
0% {
|
|
||||||
transform: translateX(2000px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: translateX(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backInRight {
|
|
||||||
animation-name: backInRight;
|
|
||||||
}
|
|
20
node_modules/_animate.css@4.1.1@animate.css/source/back_entrances/backInUp.css
generated
vendored
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backInUp {
|
|
||||||
0% {
|
|
||||||
transform: translateY(1200px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: translateY(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backInUp {
|
|
||||||
animation-name: backInUp;
|
|
||||||
}
|
|
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backOutDown {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: translateY(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateY(700px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backOutDown {
|
|
||||||
animation-name: backOutDown;
|
|
||||||
}
|
|
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backOutLeft {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: translateX(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(-2000px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backOutLeft {
|
|
||||||
animation-name: backOutLeft;
|
|
||||||
}
|
|
20
node_modules/_animate.css@4.1.1@animate.css/source/back_exits/backOutRight.css
generated
vendored
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backOutRight {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: translateX(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(2000px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backOutRight {
|
|
||||||
animation-name: backOutRight;
|
|
||||||
}
|
|
|
@ -1,20 +0,0 @@
|
||||||
@keyframes backOutUp {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: translateY(0px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateY(-700px) scale(0.7);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.backOutUp {
|
|
||||||
animation-name: backOutUp;
|
|
||||||
}
|
|
42
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceIn.css
generated
vendored
|
@ -1,42 +0,0 @@
|
||||||
@keyframes bounceIn {
|
|
||||||
from,
|
|
||||||
20%,
|
|
||||||
40%,
|
|
||||||
60%,
|
|
||||||
80%,
|
|
||||||
to {
|
|
||||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale3d(0.3, 0.3, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: scale3d(1.1, 1.1, 1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
40% {
|
|
||||||
transform: scale3d(0.9, 0.9, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale3d(1.03, 1.03, 1.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
80% {
|
|
||||||
transform: scale3d(0.97, 0.97, 0.97);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale3d(1, 1, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceIn {
|
|
||||||
animation-duration: calc(var(--animate-duration) * 0.75);
|
|
||||||
animation-name: bounceIn;
|
|
||||||
}
|
|
35
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInDown.css
generated
vendored
|
@ -1,35 +0,0 @@
|
||||||
@keyframes bounceInDown {
|
|
||||||
from,
|
|
||||||
60%,
|
|
||||||
75%,
|
|
||||||
90%,
|
|
||||||
to {
|
|
||||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, -3000px, 0) scaleY(3);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 25px, 0) scaleY(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
transform: translate3d(0, -10px, 0) scaleY(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
transform: translate3d(0, 5px, 0) scaleY(0.985);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceInDown {
|
|
||||||
animation-name: bounceInDown;
|
|
||||||
}
|
|
35
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInLeft.css
generated
vendored
|
@ -1,35 +0,0 @@
|
||||||
@keyframes bounceInLeft {
|
|
||||||
from,
|
|
||||||
60%,
|
|
||||||
75%,
|
|
||||||
90%,
|
|
||||||
to {
|
|
||||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-3000px, 0, 0) scaleX(3);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(25px, 0, 0) scaleX(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
transform: translate3d(-10px, 0, 0) scaleX(0.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
transform: translate3d(5px, 0, 0) scaleX(0.995);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceInLeft {
|
|
||||||
animation-name: bounceInLeft;
|
|
||||||
}
|
|
35
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInRight.css
generated
vendored
|
@ -1,35 +0,0 @@
|
||||||
@keyframes bounceInRight {
|
|
||||||
from,
|
|
||||||
60%,
|
|
||||||
75%,
|
|
||||||
90%,
|
|
||||||
to {
|
|
||||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(3000px, 0, 0) scaleX(3);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(-25px, 0, 0) scaleX(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
transform: translate3d(10px, 0, 0) scaleX(0.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceInRight {
|
|
||||||
animation-name: bounceInRight;
|
|
||||||
}
|
|
35
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_entrances/bounceInUp.css
generated
vendored
|
@ -1,35 +0,0 @@
|
||||||
@keyframes bounceInUp {
|
|
||||||
from,
|
|
||||||
60%,
|
|
||||||
75%,
|
|
||||||
90%,
|
|
||||||
to {
|
|
||||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, 3000px, 0) scaleY(5);
|
|
||||||
}
|
|
||||||
|
|
||||||
60% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, -20px, 0) scaleY(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
transform: translate3d(0, 10px, 0) scaleY(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
transform: translate3d(0, -5px, 0) scaleY(0.985);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceInUp {
|
|
||||||
animation-name: bounceInUp;
|
|
||||||
}
|
|
21
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOut.css
generated
vendored
|
@ -1,21 +0,0 @@
|
||||||
@keyframes bounceOut {
|
|
||||||
20% {
|
|
||||||
transform: scale3d(0.9, 0.9, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
50%,
|
|
||||||
55% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale3d(1.1, 1.1, 1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale3d(0.3, 0.3, 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceOut {
|
|
||||||
animation-duration: calc(var(--animate-duration) * 0.75);
|
|
||||||
animation-name: bounceOut;
|
|
||||||
}
|
|
20
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutDown.css
generated
vendored
|
@ -1,20 +0,0 @@
|
||||||
@keyframes bounceOutDown {
|
|
||||||
20% {
|
|
||||||
transform: translate3d(0, 10px, 0) scaleY(0.985);
|
|
||||||
}
|
|
||||||
|
|
||||||
40%,
|
|
||||||
45% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, -20px, 0) scaleY(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, 2000px, 0) scaleY(3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceOutDown {
|
|
||||||
animation-name: bounceOutDown;
|
|
||||||
}
|
|
15
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutLeft.css
generated
vendored
|
@ -1,15 +0,0 @@
|
||||||
@keyframes bounceOutLeft {
|
|
||||||
20% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(20px, 0, 0) scaleX(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-2000px, 0, 0) scaleX(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceOutLeft {
|
|
||||||
animation-name: bounceOutLeft;
|
|
||||||
}
|
|
15
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutRight.css
generated
vendored
|
@ -1,15 +0,0 @@
|
||||||
@keyframes bounceOutRight {
|
|
||||||
20% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(-20px, 0, 0) scaleX(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(2000px, 0, 0) scaleX(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceOutRight {
|
|
||||||
animation-name: bounceOutRight;
|
|
||||||
}
|
|
20
node_modules/_animate.css@4.1.1@animate.css/source/bouncing_exits/bounceOutUp.css
generated
vendored
|
@ -1,20 +0,0 @@
|
||||||
@keyframes bounceOutUp {
|
|
||||||
20% {
|
|
||||||
transform: translate3d(0, -10px, 0) scaleY(0.985);
|
|
||||||
}
|
|
||||||
|
|
||||||
40%,
|
|
||||||
45% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 20px, 0) scaleY(0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, -2000px, 0) scaleY(3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bounceOutUp {
|
|
||||||
animation-name: bounceOutUp;
|
|
||||||
}
|
|
13
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeIn.css
generated
vendored
|
@ -1,13 +0,0 @@
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeIn {
|
|
||||||
animation-name: fadeIn;
|
|
||||||
}
|
|
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInBottomLeft.css
generated
vendored
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeInBottomLeft {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-100%, 100%, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInBottomLeft {
|
|
||||||
animation-name: fadeInBottomLeft;
|
|
||||||
}
|
|
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeInBottomRight {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(100%, 100%, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInBottomRight {
|
|
||||||
animation-name: fadeInBottomRight;
|
|
||||||
}
|
|
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInDown.css
generated
vendored
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInDown {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, -100%, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInDown {
|
|
||||||
animation-name: fadeInDown;
|
|
||||||
}
|
|
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInDownBig.css
generated
vendored
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInDownBig {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(0, -2000px, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInDownBig {
|
|
||||||
animation-name: fadeInDownBig;
|
|
||||||
}
|
|
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInLeft.css
generated
vendored
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInLeft {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-100%, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInLeft {
|
|
||||||
animation-name: fadeInLeft;
|
|
||||||
}
|
|
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInLeftBig.css
generated
vendored
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInLeftBig {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-2000px, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInLeftBig {
|
|
||||||
animation-name: fadeInLeftBig;
|
|
||||||
}
|
|
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInRight.css
generated
vendored
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInRight {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(100%, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInRight {
|
|
||||||
animation-name: fadeInRight;
|
|
||||||
}
|
|
15
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInRightBig.css
generated
vendored
|
@ -1,15 +0,0 @@
|
||||||
@keyframes fadeInRightBig {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(2000px, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInRightBig {
|
|
||||||
animation-name: fadeInRightBig;
|
|
||||||
}
|
|
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInTopLeft.css
generated
vendored
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeInTopLeft {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(-100%, -100%, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInTopLeft {
|
|
||||||
animation-name: fadeInTopLeft;
|
|
||||||
}
|
|
14
node_modules/_animate.css@4.1.1@animate.css/source/fading_entrances/fadeInTopRight.css
generated
vendored
|
@ -1,14 +0,0 @@
|
||||||
@keyframes fadeInTopRight {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translate3d(100%, -100%, 0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeInTopRight {
|
|
||||||
animation-name: fadeInTopRight;
|
|
||||||
}
|
|