diff --git a/src/api/tunnel.js b/src/api/tunnel.js new file mode 100644 index 0000000..c06d5d4 --- /dev/null +++ b/src/api/tunnel.js @@ -0,0 +1,8 @@ +import request from '@/utils/request.js' + +export const getTunnelOption = (siteId) => { + return request({ + url: `/tunnel/tunnel/option/${siteId}`, + method: 'get' + }) +} diff --git a/src/api/user.js b/src/api/user.js new file mode 100644 index 0000000..7fb0961 --- /dev/null +++ b/src/api/user.js @@ -0,0 +1,42 @@ +import request from '@/utils/request.js' + +export const getUser = (params) => { + return request({ + url: '/admin/user/tunnel', + method: 'get', + params + }) +} +export const getUserDetail = (userId) => { + return request({ + url: `/admin/user/info/${userId}`, + method: 'get' + }) +} +export const editUser = (data) => { + return request({ + url: '/admin/user', + method: 'put', + data + }) +} +export const addUser = (data) => { + return request({ + url: '/admin/user', + method: 'post', + data + }) +} +export const deleteUser = (userId) => { + return request({ + url: `/admin/user/${userId}`, + method: 'delete' + }) +} + +export const getRoleOption = () => { + return request({ + url: '/admin/role/option', + method: 'get' + }) +} diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 5d87f08..aaeb918 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -12,7 +12,7 @@ -khtml-user-select: none; /*早期浏览器*/ user-select: none; font-family: "MicrosoftYaHei", "微软雅黑", "Helvetica Neue", Helvetica, Arial, - sans-serif; + sans-serif; } body { @@ -97,6 +97,7 @@ body, .current-site { display: flex; align-items: center; + > span:first-child { color: #f7b500; margin-right: 20px; @@ -486,43 +487,72 @@ body, background: #072247 !important; border: 1px solid #0F82AF !important; } - .el-popper { - max-width: 202px !important; + max-width: 200px !important; box-sizing: border-box; } - .el-popper__arrow::before { display: none; } - -.el-select-dropdown { - width: 200px !important; +.el-select-dropdown{ + width: 200px!important; } - -.el-select-dropdown__item { - color: #fff !important; -} - -.el-select-dropdown__item.hover { - background-color: #072247 !important; -} - -.el-select-dropdown__item:hover { - background-color: #072247 !important; - color: #08B7B8 !important; -} - -.el-select-dropdown__item.selected { - color: #08B7B8 !important; -} - -.el-select-dropdown__list { - .el-select-dropdown__item:first-child { +.el-select-dropdown__item{ + >span{ color: #FFFFFF; + } +} +.el-select .el-input .el-select__caret { + font-size: 35px!important; +} +.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{ + background-color: #064B66!important; + width:198px!important; +} +.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{ + background-color: #064B66!important; + width:200px!important; +} +.el-select-tags-wrapper{ + .el-tag{ + padding: 28px 20px!important; + font-size: 35px; + .el-icon{ + width: 40px; + height: 40px; + font-size: 40px!important; + } + } +} +.current-site { + .el-select-dropdown { + width: 200px !important; + } - &:hover { - color: #08B7B8 !important; + .el-select-dropdown__item { + color: #fff !important; + } + + .el-select-dropdown__item.hover { + background-color: #072247 !important; + } + + .el-select-dropdown__item:hover { + background-color: #072247 !important; + color: #08B7B8 !important; + } + + .el-select-dropdown__item.selected { + color: #08B7B8 !important; + } + + .el-select-dropdown__list { + .el-select-dropdown__item:first-child { + color: #FFFFFF; + + &:hover { + color: #08B7B8 !important; + } } } } @@ -542,8 +572,8 @@ input[type="number"] { width: 40px !important; height: 40px !important; border-radius: 25px !important; - border: 4px solid #05FEFF!important; - background-color: transparent!important; + border: 4px solid #05FEFF !important; + background-color: transparent !important; } .el-checkbox__input.is-checked .el-checkbox__inner { @@ -559,11 +589,11 @@ input[type="number"] { //border-top: 0; border-radius: 25px; top: 6px; - left:6px; + left: 6px; //left: 12px; font-size: 30px; background: #05FEFF; - border-color: transparent!important; + border-color: transparent !important; } //取消 确定按钮 @@ -599,11 +629,13 @@ input[type="number"] { font-size: 38px; } } -.el-pagination.is-background .btn-prev:disabled{ - background-color: transparent!important; - color: #60DDDE!important; + +.el-pagination.is-background .btn-prev:disabled { + background-color: transparent !important; + color: #60DDDE !important; } -.el-pagination.is-background .btn-next:disabled{ - background-color: transparent!important; - color: #60DDDE!important; + +.el-pagination.is-background .btn-next:disabled { + background-color: transparent !important; + color: #60DDDE !important; } diff --git a/src/components/content/airInfo/AirInfo.vue b/src/components/content/airInfo/AirInfo.vue index 957c3dd..af1d516 100644 --- a/src/components/content/airInfo/AirInfo.vue +++ b/src/components/content/airInfo/AirInfo.vue @@ -61,6 +61,7 @@ import ItemInfo from "./childComps/ItemInfo.vue"; import TimeRangeBtn from "@/components/timeRangeBtn/index.vue" import * as echarts from 'echarts'; +import {getEchartsInfo} from "../../../api/largeScreen"; let myEcharts = reactive({}); let myAirEcharts = reactive({}); @@ -69,6 +70,7 @@ const props = defineProps({ airData: Array }); const windSpeed = ref('') +const windSpeedId = ref(0) const airTitle = ref('') const airList = ref([]) const timeList = ref(["年", "月", "日"]); @@ -91,19 +93,39 @@ watch(() => props.airData, (now) => { getAirInfo(now.sensorList) } }, {deep: true}); -const handleOpenChart = () => { - isWindSpeedVisited.value = true - nextTick(() => { - initChart() +const getChartInfo = (equipmentId) => { + getEchartsInfo(equipmentId).then(res => { + if (res?.code === 1000) { + isWindSpeedVisited.value = true + nextTick(() => { + initChart(res.data.dates, res.data.values) + }) + } }) } -const handleOpenAirChart = (item) => { - isAirVisited.value = true - airTitle.value = item.name - nextTick(() => { - initAirChart() +const getGasChartInfo = (equipmentId) => { + getEchartsInfo(equipmentId).then(res => { + if (res?.code === 1000) { + isAirVisited.value = true + nextTick(() => { + initAirChart(res.data.dates, res.data.values) + }) + } }) } +const handleOpenChart = () => { + // isWindSpeedVisited.value = true + getChartInfo(windSpeedId.value) +} + +const handleOpenAirChart = (item) => { + // isAirVisited.value = true + airTitle.value = item.name + getGasChartInfo(item.equipmentId) + // nextTick(() => { + // initAirChart() + // }) +} const timeSelect = (index) => { console.log('选择时间', index) if (index === 0) { @@ -146,13 +168,14 @@ const getAirInfo = (now) => { airObj = changeData(item) airArr.push(airObj) } else if (item.equipmentType === "windSpeed") { + windSpeedId.value = item.equipmentId windSpeed.value = item.value } }) airArr.push(airArr.shift()) airList.value = airArr } -const initChart = () => { +const initChart = (type, values) => { //3.初始化container容器 myEcharts = echarts.init(document.getElementById('containerWind')); //5.传入数据 @@ -190,8 +213,8 @@ const initChart = () => { let content = `
${params[0].name}
-
进风口: ${params[0].value}
-
出风口: ${params[1].value}
+
进风口: ${params[0].value}
+
出风口: ${params[1].value}
`; return content; }, @@ -211,7 +234,8 @@ const initChart = () => { //X轴 xAxis: { type: 'category', - data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'], + // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'], + data:type, axisLabel: { textStyle: { fontSize: 45, @@ -232,7 +256,8 @@ const initChart = () => { //配置项 series: [ { - data: [3, 85, 47, 92, 17, 76, 69, 25, 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 31, 49, 81, 63], + // data: [3, 85, 47, 92, 17, 76, 69, 25, 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 31, 49, 81, 63], + data:values, type: 'line', smooth: true, symbolSize: 24, @@ -249,7 +274,7 @@ const initChart = () => { myEcharts.resize(); } } -const initAirChart = () => { +const initAirChart = (type, values) => { //3.初始化container容器 myAirEcharts = echarts.init(document.getElementById('containerAir')); //5.传入数据 @@ -284,7 +309,7 @@ const initAirChart = () => { let content = `
${params[0].name}
-
${params[0].value}
+
${params[0].value}
`; return content; }, @@ -304,7 +329,8 @@ const initAirChart = () => { //X轴 xAxis: { type: 'category', - data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'], + // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'], + data:type, axisLabel: { textStyle: { fontSize: 45, @@ -325,7 +351,8 @@ const initAirChart = () => { //配置项 series: [ { - data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63], + // data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63], + data:values, type: 'line', smooth: true, symbolSize: 24, @@ -385,8 +412,9 @@ const initAirChart = () => { .input-fan { //margin: 0 26px; - > span:last-child { + > span:first-child { margin-left: 25px; + margin-right: 25px; } } } diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue index ee584e7..5341993 100644 --- a/src/components/content/fanInfo/FanInfo.vue +++ b/src/components/content/fanInfo/FanInfo.vue @@ -354,7 +354,8 @@ input[type="number"] { } #fan_info { - height: 1465px; + //height: 1465px; + height: 1000px; width: 830px; position: absolute; z-index: 100; @@ -382,7 +383,8 @@ input[type="number"] { height: calc(100% - 30px); .fan-item { - height: 33.5%; + //height: 33.5%; + height: 50%; display: flex; flex-direction: column; font-size: 14px; diff --git a/src/components/content/usedEle/UsedEle.vue b/src/components/content/usedEle/UsedEle.vue index 786026d..0b87b24 100644 --- a/src/components/content/usedEle/UsedEle.vue +++ b/src/components/content/usedEle/UsedEle.vue @@ -60,8 +60,9 @@ let myEcharts = reactive({}); const isVisited = ref(false); const eleData = ref([]) const electricityConsumptionMonthly = ref() -const monthlySavings = ref(55555) -const valueA = ref(electricityConsumptionMonthly.value); +const monthlySavings = ref(5) +const length = ref(null); +const valueA = ref(); const valueB = ref(monthlySavings.value); const bgImage = computed(() => isVisited.value @@ -70,6 +71,7 @@ const bgImage = computed(() => ); watch(() => props.eleData, (now) => { getBasicData(now.frequencyChangerList) + // setValue() }, {deep: true}); watch(() => props.list, (now) => { eleData.value.forEach(item => { @@ -84,7 +86,23 @@ watch(() => props.list, (now) => { } }) }) + // setValue() }, {deep: true}); +onMounted(()=>{ + // setValue() +}) +const setValue=()=> { + let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 10000; + console.log('width',electricityConsumptionMonthly.value,width) + valueA.value.style.height = `${width}px`; + // let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max; + // point.value.style.left = `${flag}px`; + // if (width >= flag) { + // value.value.style.background = "#F53839"; + // } else { + // value.value.style.background = "#60DDDE"; + // } +} const getBasicData = (data) => { let tranObj = {} let tranArr = [] @@ -241,8 +259,8 @@ const getImageUrl = (name) => { height: 373px; color: aliceblue; position: absolute; - //top: 1980px; - top: 1680px; + top: 1220px; + //top: 1680px; left: 68px; background-image: url(../../../assets/images/usedEle/bg.png); padding: 21px 62px 35px 62px; diff --git a/src/router/index.js b/src/router/index.js index a83d828..1a9f2fd 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -51,7 +51,7 @@ const routes = [ } }, { - path: '/user', + path: '/user/:siteId(\\d+)', name: 'user', component: () => import('@/views/user/index.vue'), meta: { diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue index 9774a20..e199c0c 100644 --- a/src/views/tunnel/index.vue +++ b/src/views/tunnel/index.vue @@ -86,6 +86,7 @@ const selectIndex = ref(-1); const showFan = ref(false); const drawerLeft = ref(true); const drawerRight = ref(true); +const currentSiteId = ref(0); const currentSite = ref(""); const siteList = ref([]) const currentUser = ref(""); @@ -124,6 +125,7 @@ const getOtherInfo = () => { getLargeScreenInfo().then((res) => { if (res?.code === 1000) { routeList.value = res.data.routeList + currentSiteId.value = res.data.siteOption[0].value currentSite.value = res.data.siteOption[0].label siteList.value = res.data.siteOption tunnelId.value = res.data.tunnelOption[0].value @@ -166,13 +168,12 @@ const manageSelect = (index) => { if (index === 0) { router.push("/site"); } else if (index === 1) { - router.push("/tunnel/1"); + router.push("/tunnel/"+tunnelId.value); } else if (index === 2) { - router.push("/user"); + router.push("/user/"+currentSiteId.value); } }; const handleCommand = (item) => { - console.log('commads', item) currentSite.value = item.label getTunnel(item.value) } diff --git a/src/views/user/index.vue b/src/views/user/index.vue index 78e78d8..c807caa 100644 --- a/src/views/user/index.vue +++ b/src/views/user/index.vue @@ -7,10 +7,10 @@
-
- 全选 -
-
+ + + +
删除
@@ -22,26 +22,29 @@
- 搜索 + 搜索
用户管理
-
添加用户
+
添加用户
- - - - + + + + -