123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689 |
- <template>
- <HeaderNav @typeFlag="typeFlag" :isAll="true" />
- <div class="synthesizeTargetSystem">
- <div class="systemData bodys">
- <div class="line">
- <div class="leftContent"><span>数据指标</span></div>
- <div class="rightContent">
- <div class="more" @click="addTargets"><i>+</i>更多指标</div>
- </div>
- </div>
- <el-table
- ref="table"
- :data="stationData"
- :cell-style="cellStyle"
- :header-cell-style="headerStyle"
- height="81vh"
- style="width: 100%"
- fit
- v-loading="loading"
- element-loading-text="加载中..."
- element-loading-background="rgba(4, 12, 11, 0.8)"
- empty-text=" "
- v-if="tableShow"
- stripe
- >
- <el-table-column
- type="index"
- label="序号"
- align="center"
- fixed
- width="52"
- >
- </el-table-column>
- <el-table-column
- v-for="(item, index) in uniformDetial"
- :key="index"
- :prop="item.uniformCode"
- sortable
- align="center"
- header-align="center"
- :resizable="true"
- :min-width="item.width"
- :fixed="index < 2"
- >
- <!-- <template v-slot="scope" v-if="cilent == 'click'">
- <el-tag @click="v(item.uniformCode, scope.$index, item.name)">
- {{ scope.row[`${item.uniformCode}`] }}
- </el-tag>
- </template> -->
- <template v-slot="scope">
- <!-- 名称 容量无曲线 -->
- <el-tag v-if="index < 2">
- {{ scope.row[`${item.uniformCode}`] }}
- </el-tag>
- <el-tag
- v-else
- @contextmenu="v(item.uniformCode, scope.$index, item.name)"
- >
- {{ scope.row[`${item.uniformCode}`] }}
- </el-tag>
- </template>
- <template #header>
- <div v-if="item.name.length > 6">
- {{ item.name }}
- <span v-if="item.valueUnit">({{ item.valueUnit }})</span>
- </div>
- <div v-else>
- <div>{{ item.name }}</div>
- <div v-if="item.valueUnit">({{ item.valueUnit }})</div>
- </div>
- </template>
- </el-table-column>
- </el-table>
- <dialog-check
- :tagCode="tagCode"
- :changeWid="changeWid"
- :changeSer="changeSer"
- :changeAll="changeAll"
- :indexes="indexes"
- :tableData="newTableList"
- :tagName="tagName"
- :xs="xs"
- :ys="ys"
- :NameCode="CZMC"
- :visible="visible"
- v-on:tag="z($event)"
- :tag1="CZAMC"
- :tag2="ZJRL"
- ></dialog-check>
- </div>
- <zbDialog
- ref="zbdialog"
- :uniformName="alluniformName"
- :showname="showname"
- :uniformCode="alluniformCode"
- @tableRefresh="tableRefresh"
- />
- </div>
- </template>
- <script>
- import dialogCheck from "@/components/qushi/dialogCheck.vue";
- import zbDialog from "@/components/zbDialog/index.vue";
- import { getComprehensiveList } from "@/api/monitor/index.js";
- import HeaderNav from "@/components/headerNav/index.vue";
- import { getNewObj, deepClone } from "@/utills/func.js";
- export default {
- components: {
- HeaderNav,
- dialogCheck,
- zbDialog,
- },
- data() {
- return {
- showname: "选择指标",
- newTableList: [], //处理过的tableData
- changeAll: false,
- loading: false,
- CZMC: "CZMC",
- CZAMC: "CZAMC",
- ZJRL: "ZJRL",
- tagCode: "",
- indexes: "",
- tagName: "",
- color: [
- "#1985de",
- "#ff8300",
- "#06a746",
- "#3eede7",
- "#eb0f7c",
- "#dfdc0a",
- "#de0feb",
- "#cca4e3",
- ],
- stse: [],
- sts: [],
- statiomName: [],
- stationTit: null,
- leng: "",
- stationType: null,
- companyCode: null,
- uniformDetial: [],
- uniformDetials: [],
- codeValur: null,
- stationData: null,
- checkList: [],
- moreTargetData: [],
- tableData: [],
- timer: "",
- x: 500,
- y: 250,
- dragging: false,
- currentX: 50,
- currentY: 0,
- initialX: 0,
- initialY: 0,
- tableShow: true,
- tmpData: [],
- detailsValue: [],
- starttime: "",
- endtime: "",
- numgap: 900,
- intervalgap: 7,
- units: [],
- unitDatas: [{ flag: false, min: 0, max: 0, codex: 0 }],
- tagDatas: [],
- handleSwitch: false,
- chartsData: [],
- chartsDataAll: [],
- dialogCurveVisible: false,
- chartName: "趋势曲线",
- ysetDialogVisible: false,
- ysetName: "Y坐标设置",
- visible: false,
- xs: "",
- visibles: "",
- ys: "",
- dete: "",
- cilent: "",
- tableDatas: [],
- pageNow: 1,
- pageSize: 25,
- stationDatasd: [],
- changeSer: false,
- changeWid: false,
- activeTab: "all",
- tabIndex: 0,
- enterpriseIndex: "all",
- targets: "",
- };
- },
- created() {
- this.loading = true;
- let localAllTargets = window.localStorage.getItem("alllocalData");
- // 判断本地是否有指标
- if (localAllTargets != null && JSON.stringify(localAllTargets) != "{}") {
- localAllTargets = JSON.parse(localAllTargets);
- this.uniformDetial = localAllTargets;
- } else {
- this.uniformDetial = [
- { name: "场站名称", uniformCode: "CZMC", valueUnit: "", width: "120" },
- { name: "装机容量", uniformCode: "ZJRL", valueUnit: "kW", width: "80" },
- {
- name: "日限电停机损失电量",
- valueUnit: null,
- uniformCode: "RXDTJSSDL",
- width: "150",
- },
- {
- name: "15分钟自耗电",
- valueUnit: null,
- uniformCode: "ZHD15",
- width: "150",
- },
- {
- name: "15分钟检修损失电量",
- valueUnit: null,
- uniformCode: "JXSSDL15",
- width: "150",
- },
- {
- name: "月限电停机损失电量",
- valueUnit: null,
- uniformCode: "YXDTJSSDL",
- width: "150",
- },
- ];
- window.localStorage.setItem(
- "alllocalData",
- JSON.stringify(this.uniformDetial)
- );
- }
- // this.$nextTick(() => this.firstRender());
- },
- mounted() {
- this.timer = setInterval(() => {
- this.firstRender();
- }, 5000);
- },
- unmounted() {
- clearInterval(this.timer);
- this.timer = null;
- },
- methods: {
- getNewObj,
- deepClone,
- // 头部tab选择
- typeFlag(activeTab, enterpriseIndex) {
- this.activeTab = activeTab;
- this.tabIndex = activeTab == "all" ? 0 : activeTab == "fc" ? -1 : -2;
- this.enterpriseIndex = enterpriseIndex;
- this.$nextTick(() => this.firstRender());
- },
- // 查询数据
- async firstRender() {
- //获取table数据
- const { data } = await getComprehensiveList({
- company:
- this.enterpriseIndex == "all" ? "0" : this.enterpriseIndex.toString(),
- type: this.tabIndex.toString(),
- targets: this.alluniformCode,
- });
- this.getTableDatas(data.data);
- },
- // 处理列表数据
- getTableDatas(list) {
- let tableData = this.deepClone(list);
- let newList = [];
- let newList1 = [];
- let a = this.alluniformCode.split(",");
- tableData.forEach((item) => {
- let b = [];
- let c = [];
- if (item.dataList.length) {
- item.dataList.forEach((subItem, subIndex) => {
- b.push(subItem.pointValueInDouble.toFixed(2));
- c.push(subItem.pointName);
- });
- }
- newList1.push({
- CZMC: item.wpname,
- ZJRL: item.capacity,
- ...this.getNewObj(a, c),
- });
- newList.push({
- CZMC: item.wpname,
- ZJRL: item.capacity,
- ...this.getNewObj(a, b),
- });
- });
- this.newTableList = newList1;
- this.stationData = newList;
- this.loading = false;
- },
- z(s) {
- this.visible = s;
- },
- v(tagCode, index, tagName) {
- this.cilent = process.env.VUE_APP_DIALOG_POINT;
- this.visible = true;
- this.tagCode = tagCode;
- this.indexes = index;
- this.tagName = tagName;
- if (event.clientY > window.innerHeight - 180) {
- this.ys = event.clientY - 106;
- this.changeSer = true;
- this.changeAll = false;
- } else {
- this.ys = event.clientY + 16;
- this.changeSer = false;
- }
- if (
- event.clientY > window.innerHeight - 180 &&
- event.clientX > window.innerWidth - 100
- ) {
- this.changeWid = false;
- this.changeSer = false;
- this.changeAll = true;
- this.ys = event.clientY - 106;
- this.xs = event.clientX - 171;
- } else if (event.clientX > window.innerWidth - 100) {
- this.xs = event.clientX - 171;
- this.changeAll = false;
- this.changeWid = true;
- } else {
- this.xs = event.clientX - 1;
- this.changeWid = false;
- this.changeAll = false;
- }
- event.preventDefault();
- },
- cellStyle({ columnIndex }) {
- if (columnIndex > 2) {
- return {
- "font-family": "Arial",
- padding: "7px 0",
- "font-size": "13px",
- };
- } else {
- return {
- "backdrop-filter": "blur(10px)",
- padding: "7px 0",
- "font-size": "13px",
- };
- }
- },
- headerStyle({ columnIndex }) {
- if (columnIndex < 3) {
- return { "backdrop-filter": "blur(10px)", padding: "6px 0" };
- } else {
- return { padding: "6px 0" };
- }
- },
- //添加指标
- addTargets() {
- if (this.stationData.length)
- this.$refs.zbdialog.openDialog(this.tabIndex.toString());
- },
- //更多指标--确定刷新指标,刷新数据
- tableRefresh(checkList, moreTargetData) {
- this.tableShow = false;
- setTimeout(() => {
- this.tableShow = true;
- }, 100);
- var codeDetial = [];
- //整理选中指标
- var newArr = [...new Set(checkList)];
- newArr.forEach((arr) => {
- const obj = moreTargetData.find((value) => {
- return arr == value.name;
- });
- if (newArr.length > 13) {
- obj.width = "150";
- } else {
- obj.width = "";
- }
- codeDetial.push(obj);
- });
- this.uniformDetial = [
- { name: "场站名称", uniformCode: "CZMC", valueUnit: "", width: "120" },
- {
- name: "装机容量",
- uniformCode: "ZJRL",
- valueUnit: "kW",
- width: "80",
- },
- ...codeDetial,
- ];
- window.localStorage.setItem(
- "alllocalData",
- JSON.stringify(this.uniformDetial)
- );
- //获取table数据
- this.firstRender();
- },
- },
- computed: {
- // 指标code字符串
- alluniformCode() {
- var arr = [];
- if (this.uniformDetial != null) {
- this.uniformDetial.forEach((item, index) => {
- if (index > 1) {
- arr.push(item.uniformCode);
- }
- });
- }
- const codeStr = arr.join(",");
- return codeStr;
- },
- // 指标name字符串
- alluniformName() {
- var arr = [];
- this.uniformDetial.forEach((item, index) => {
- if (index > 1) {
- arr.push(item.name);
- }
- });
- return arr;
- },
- },
- };
- </script>
- <style lang="less" scoped>
- .status {
- width: 100%;
- height: calc(100vh - 7.222vh);
- overflow-y: auto;
- display: flex;
- flex-direction: column;
- .panel-box {
- width: 100%;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- height: 54vh;
- overflow-y: auto;
- .panel-item {
- width: calc(20% - 1.185vh);
- margin-left: 1.481vh;
- margin-bottom: 1.481vh;
- &:nth-child(5n + 1) {
- margin-left: 0;
- }
- }
- }
- .table-box {
- border: 0.093vh solid @darkgray;
- position: relative;
- overflow: auto;
- flex-grow: 1;
- &::after,
- &::before {
- content: "";
- position: absolute;
- width: 0.185vh;
- height: 0.185vh;
- background-color: @write;
- top: 0.37vh;
- }
- &::after {
- left: 0.37vh;
- }
- &::before {
- right: 0.37vh;
- }
- }
- .table-box1 {
- border: 0.093vh solid @darkgray;
- position: relative;
- overflow: auto;
- flex-grow: 1;
- &::after,
- &::before {
- content: "";
- position: absolute;
- width: 0.185vh;
- height: 0.185vh;
- background-color: @write;
- top: 0.37vh;
- }
- &::after {
- left: 0.37vh;
- }
- &::before {
- right: 0.37vh;
- }
- }
- }
- .search-input {
- margin-left: 10px;
- /deep/ .el-input__suffix {
- position: absolute;
- height: 100%;
- right: -65px;
- }
- }
- .customColor {
- background: linear-gradient(
- 180deg,
- rgba(255, 255, 255, 0.4),
- rgba(255, 255, 255, 0.27)
- ) !important;
- }
- .searchColor {
- background-color: rgba(0, 70, 199, 0.2);
- border: 1px solid #3b4c6c;
- color: #b3b3b3;
- font-size: 14px;
- &:hover {
- background-color: rgba(0, 70, 199, 0.5);
- color: #ffffff;
- }
- }
- .el-popper.is-light {
- background: #1a7ccd;
- }
- .el-dropdown-item {
- background: red !important;
- }
- .example-showcase .el-dropdown-link {
- cursor: pointer;
- color: var(--el-color-primary);
- display: flex;
- align-items: center;
- }
- .synthesizeTargetSystem {
- padding: 0 20px;
- }
- .systemData {
- width: 100%;
- height: calc(100% - 70px);
- background-color: rgba(0, 0, 0, 0.45);
- padding: 5px;
- //overflow: hidden;
- overflow-y: auto;
- .font {
- font-family: "Arial" !important;
- }
- }
- .headerNav {
- margin-bottom: 15px;
- }
- .footerButton {
- justify-content: right;
- .el-button:first-child {
- background-color: rgba(0, 70, 199, 0.2) !important;
- color: #b3b3b3;
- border-color: transparent;
- }
- }
- .count {
- color: #fff;
- }
- .el-checkbox {
- width: 180px;
- }
- .line {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- margin-bottom: 5px;
- .leftContent {
- width: 242px;
- height: 41px;
- display: flex;
- align-items: center;
- background: url("../../../assets/imgs/title_left_bg.png");
- span {
- font-size: 16px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #ffffff;
- margin-left: 25px;
- }
- }
- .rightContent {
- position: relative;
- width: 212px;
- height: 28px;
- margin-top: 13px;
- background: url("../../../assets/imgs/title_right_bg.png");
- .more {
- float: right;
- width: 134px;
- height: 28px;
- line-height: 28px;
- text-align: center;
- color: #b3b3b3;
- font-size: 14px;
- cursor: pointer;
- background: url("../../../assets/imgs/buttonBack.png") no-repeat;
- background-size: cover;
- i {
- font-size: 18px;
- margin-right: 5px;
- vertical-align: -1%;
- }
- }
- }
- }
- .el-tag {
- background: none !important;
- border: none !important;
- color: #d8d8d9;
- cursor: pointer;
- }
- .el-tag:hover {
- color: #1c99ff;
- }
- .ststTit {
- width: 96%;
- height: 50px;
- color: #1c99ff;
- font-size: 16px;
- background: rgb(12, 15, 21);
- line-height: 50px;
- border-bottom: 1px solid #323b3c;
- box-sizing: border-box;
- padding-left: 10px;
- margin: 0 10px;
- }
- .overHidd {
- margin-top: 12px;
- overflow: scroll;
- height: 62%;
- }
- .stations {
- height: 40px;
- line-height: 40px;
- width: 97%;
- display: flex;
- justify-content: space-between;
- font-size: 15px;
- margin-left: 10px;
- padding-right: 10px;
- padding-left: 10px;
- border-radius: 4px;
- }
- .stations:hover {
- background: rgba(0, 70, 199, 0.2);
- }
- .header {
- cursor: move;
- }
- </style>
|