| | |
| | | </div> |
| | | <span :class="stretchStyle" @click="strethTable = !strethTable"></span> |
| | | |
| | | <el-button size="small" type="primary" style="float:right" @click="openDrawer">设置</el-button> |
| | | <el-button |
| | | size="small" |
| | | type="primary" |
| | | style="float:right" |
| | | @click="openDrawer" |
| | | v-if="showSetting" |
| | | >设置</el-button> |
| | | </div> |
| | | |
| | | <el-table |
| | |
| | | height="93%" |
| | | :data="PollData.CameraList" |
| | | border |
| | | :cell-style="cellStyle" |
| | | > |
| | | <el-table-column label="序号" type="index" align="center" width="100px"></el-table-column> |
| | | <el-table-column label="摄像机名称" align="center" show-overflow-tooltip sortable> |
| | | <el-table-column label="序号" type="index" align="center" width="60px"></el-table-column> |
| | | <el-table-column label="摄像机名称" align="center" show-overflow-tooltip > |
| | | <template slot-scope="scope"> |
| | | <span |
| | | :style="scope.row.is_running ? `color:#3d68e1` : '' " |
| | |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="摄像机地址" prop="addr" align="center" show-overflow-tooltip sortable></el-table-column> |
| | | <el-table-column label="摄像机IP" prop="ip" align="center" width="130px" sortable></el-table-column> |
| | | <el-table-column label="摄像机类型" align="center" width="110px" sortable> |
| | | <el-table-column label="摄像机IP" prop="ip" align="center" width="130px" sortable :sort-method="ipSortMethod"></el-table-column> |
| | | <el-table-column label="摄像机类型" align="center" width="120px" > |
| | | <template slot-scope="scope"> |
| | | <span>{{scope.row.run_type | cameraType}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="执行算法" align="center" show-overflow-tooltip sortable> |
| | | <el-table-column label="执行算法" align="center" show-overflow-tooltip > |
| | | <template slot-scope="scope"> |
| | | <span v-if="scope.row.run_type === -1 ">-</span> |
| | | <span v-else>{{scope.row.tasks | taskList}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="运行设备" align="center" width="160px"> |
| | | <el-table-column label="运行设备" align="center" width="160px" sortable> |
| | | <template slot-scope="scope"> |
| | | <span v-if="scope.row.run_type === -1 ">-</span> |
| | | <span v-else>{{scope.row.runServerName}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="状态" align="center" show-overflow-tooltip sortable width="100px"> |
| | | <el-table-column label="状态" align="center" show-overflow-tooltip width="100px"> |
| | | <template slot-scope="scope"> |
| | | <span v-if="scope.row.status === -1 ">-</span> |
| | | <span v-else-if="scope.row.status === 2">{{"处理中"}}</span> |
| | |
| | | title="算力设置" |
| | | :visible.sync="drawer" |
| | | direction="rtl" |
| | | size="350px" |
| | | size="450px" |
| | | custom-class="e-drawer" |
| | | :before-close="closeDrawer" |
| | | > |
| | |
| | | } |
| | | }) |
| | | |
| | | return sumPollingCamera * this.PollData.Config.poll_period |
| | | // 所有轮询的摄像机总数 * 轮询时间 / 轮询算力 - 1 |
| | | let ret = (sumPollingCamera * this.PollData.Config.poll_period) / this.PollData.PollValidCount - 1 |
| | | if (String(ret).indexOf(".") > 0) { |
| | | ret = ret.toFixed(1) |
| | | } |
| | | |
| | | return ret < 0 ? 0 : ret |
| | | }, |
| | | isAdmin() { |
| | | if ( |
| | | sessionStorage.getItem("userInfo") && |
| | | sessionStorage.getItem("userInfo") !== "" |
| | | ) { |
| | | let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username; |
| | | return loginName === "superadmin" || loginName === "basic"; |
| | | } |
| | | |
| | | return false; |
| | | }, |
| | | showSetting() { |
| | | return this.isAdmin || this.buttonAuthority.indexOf("analysisPower:set") > -1 |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | showSysInfo: false, |
| | | drawer: false, |
| | | formData: {}, |
| | | strethTable: false |
| | | strethTable: false, |
| | | buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [], |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | clearTimeout(this.timeout); |
| | | }, |
| | | methods: { |
| | | ipSortMethod(a,b){ |
| | | console.log(a,b); |
| | | // debugger |
| | | if(Number(a.ip.substr(a.ip.lastIndexOf('.')+1)) < Number(b.ip.substr(b.ip.lastIndexOf('.')+1))){ |
| | | return -1; |
| | | } |
| | | if(Number(a.ip.substr(a.ip.lastIndexOf('.')+1)) > Number(b.ip.substr(b.ip.lastIndexOf('.')+1))){ |
| | | return 1; |
| | | } |
| | | return 0; |
| | | }, |
| | | openDrawer() { |
| | | this.initFormData(); |
| | | this.drawer = true; |
| | |
| | | initFormData() { |
| | | this.formData = { |
| | | totalChanle: this.PollData.channelTotal, |
| | | realTime: this.PollData.RealTimeSum, |
| | | //realTime: this.PollData.RealTimeSum, |
| | | realTime: this.PollData.RealTimeValidCount, |
| | | pollEnable: this.PollData.Enabled, |
| | | pollPeriod: this.PollData.Config.poll_period, |
| | | polling: this.PollData.PollChannelTotal, |
| | |
| | | this.formData.polling++ |
| | | } |
| | | // console.log("this.formData.polling:"+this.formData.polling) |
| | | }, |
| | | cellStyle(obj) { |
| | | if (obj.column.label == '摄像机名称' || obj.column.label == '摄像机地址') { |
| | | return 'text-align:left;padding-left:8px;' |
| | | } |
| | | } |
| | | } |
| | | }; |
| | |
| | | .s-poll-setting { |
| | | width: 100%; |
| | | height: 100%; |
| | | min-width: 1609px; |
| | | font-size: 14px; |
| | | position: relative; |
| | | .top { |
| | | width: 100%; |
| | | height: 190px; |
| | | // border-bottom: 1px solid #ccc; |
| | | min-width: 1609px; |
| | | display: flex; |
| | | .sysinfo-box .eCharts-box { |
| | | width: 36%; |
| | | } |
| | | .progressBar { |
| | | width: 26%; |
| | | } |
| | | .percentBall { |
| | | width: 80%; |
| | | width: 84%; |
| | | height: 82%; |
| | | float: left; |
| | | padding-left: 38px; |
| | | //float: left; |
| | | padding-left: 30px; |
| | | box-sizing: border-box; |
| | | // @media screen and (min-width: 1280px) and (max-width: 1440px) { |
| | | // width: 75%; |
| | | // } |
| | | // @media screen and (max-width: 1280px) { |
| | | // width: 80%; |
| | | // } |
| | | } |
| | | .barGraph { |
| | | width: 20%; |
| | | width: 16%; |
| | | height: 100%; |
| | | float: right; |
| | | // @media screen and (min-width: 1280px) and (max-width: 1440px) { |
| | | // width: 25%; |
| | | // } |
| | | // @media screen and (max-width: 1280px) { |
| | | // width: 20%; |
| | | // } |
| | | //float: right; |
| | | #barSimple { |
| | | width: 100%; |
| | | height: 250px; |
| | |
| | | } |
| | | } |
| | | .bottom { |
| | | //width: calc(100% + 76px); |
| | | //height: 100%; |
| | | //height: calc(100% - 220px); |
| | | //position: absolute; |
| | | // top: 220px; |
| | | //left: -38px; |
| | | .tip { |
| | | display: inline-block; |
| | | font-family: PingFangSC-Medium; |
| | |
| | | } |
| | | } |
| | | .content { |
| | | padding: 20px 38px 38px 38px; |
| | | padding: 20px 30px 30px; |
| | | box-sizing: border-box; |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | |
| | | .e-drawer { |
| | | // margin-top: 150px; |
| | | |
| | | font-family: PingFangSC-Medium; |
| | | font-size: 14px; |
| | | &:focus { |
| | | outline: none; |
| | | } |
| | | .el-dialog__close { |
| | | &:focus { |
| | | outline: none !important; |
| | | } |
| | | } |
| | | .dawer_details { |
| | | text-align: left; |
| | | margin-left: 70px; |
| | |
| | | } |
| | | |
| | | .el-drawer__header { |
| | | border-bottom: 2px solid #eee; |
| | | padding-bottom: 10px; |
| | | font-size: 16px; |
| | | margin-bottom: 0px; |
| | | span { |
| | | border: none !important; |
| | | border-image-width: 0 !important; |
| | | &:focus { |
| | | outline: none; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |