123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269 |
- <template>
- <div class="decision-page-1">
- <!-- 查询样式统一处理 样式在 assets/styles/form.less 文件中 -->
- <div class="query mg-b-8">
- <div class="query-items">
- <div class="query-item">
- <div class="lable">场站:</div>
- <div class="search-input">
- <input name="" placeholder="请输入场站信息" />
- <div class="unit svg-icon svg-icon-gray">
- <svg-icon :svgid="'svg-arrow-down'" />
- </div>
- </div>
- </div>
- <div class="query-item">
- <div class="lable">场站:</div>
- <div class="search-input">
- <input name="" />
- <div class="unit svg-icon svg-icon-gray">
- <svg-icon :svgid="'svg-arrow-down'" />
- </div>
- </div>
- </div>
- <div class="query-item">
- <div class="lable">场站:</div>
- <div class="search-input">
- <input name="" />
- <div class="unit svg-icon svg-icon-gray">
- <svg-icon :svgid="'svg-arrow-down'" />
- </div>
- </div>
- </div>
- <div class="query-item">
- <div class="lable">场站:</div>
- <div class="search-input">
- <input name="" />
- <div class="unit svg-icon svg-icon-gray">
- <svg-icon :svgid="'svg-arrow-down'" />
- </div>
- </div>
- </div>
- <div class="query-item">
- <div class="lable">场站:</div>
- <div class="search-input">
- <input name="" />
- <div class="unit svg-icon svg-icon-gray">
- <svg-icon :svgid="'svg-arrow-down'" />
- </div>
- </div>
- </div>
- </div>
- <div class="query-actions">
- <button class="btn green">搜索</button>
- <button class="btn">明细信息</button>
- <button class="btn">导出</button>
- </div>
- </div>
- <div class="actions mg-b-8">
- <button class="btn green">风场</button>
- <button class="btn">项目</button>
- <button class="btn">集电线路</button>
- </div>
- <el-row :type="'flex'" class="content">
- <el-col :span="12" class="pd-r-8">
- <toolbar-panel :title="123" :showLine="false">
- <template v-slot:tools>
- <div class="tools">
- <div class="tool-block">
- <div class="legend bg-green"></div>
- <div class="legend-text">实际电量</div>
- </div>
- <div class="tool-block">
- <div class="legend bg-orange"></div>
- <div class="legend-text">计划检修损失</div>
- </div>
- <div class="tool-block">
- <div class="legend bg-yellow"></div>
- <div class="legend-text">非计划检修损失</div>
- </div>
- <div class="tool-block">
- <div class="legend bg-red"></div>
- <div class="legend-text">限电损失</div>
- </div>
- <div class="tool-block">
- <div class="legend bg-purple"></div>
- <div class="legend-text">受累损失</div>
- </div>
- <div class="tool-block">
- <div class="legend bg-blue"></div>
- <div class="legend-text">性能损失</div>
- </div>
- </div>
- </template>
- <bar-line-chart :height="'calc(100vh - 200px)'"/>
- </toolbar-panel>
- </el-col>
- <el-col :span="12" class="pd-l-8">
- <panel :title="'项目列表'" :showLine="false">
- <div class="project-table">
- <Table :data="tableData"></Table>
- </div>
- </panel>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- import BarLineChart from "../../components/chart/combination/bar-line-chart.vue";
- import SvgIcon from "../../components/coms/icon/svg-icon.vue";
- import Panel from "../../components/coms/panel/panel.vue";
- import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
- import Table from "../../components/coms/table/table.vue";
- export default {
- components: { ToolbarPanel, BarLineChart, Panel, Table, SvgIcon },
- data() {
- return {
- tableData: {
- column: [
- {
- name: "",
- field: "index",
- is_num: false,
- is_light: false,
- },
- {
- name: "名称",
- field: "name",
- is_num: false,
- is_light: false,
- },
- {
- name: "理论发电量",
- field: "lqf",
- is_num: false,
- is_light: false,
- },
- {
- name: "SCADA发电量",
- field: "yggl",
- is_num: false,
- is_light: false,
- },
- {
- name: "风速",
- field: "yyy",
- is_num: false,
- is_light: false,
- },
- {
- name: "非计划检修",
- field: "pcspp",
- is_num: false,
- is_light: false,
- },
- {
- name: "计划检修",
- field: "u1",
- is_num: false,
- is_light: false,
- },
- {
- name: "受累",
- field: "u2",
- is_num: false,
- is_light: true,
- },
- {
- name: "限电",
- field: "v1",
- is_num: false,
- is_light: false,
- },
- {
- name: "性能",
- field: "v2",
- is_num: false,
- is_light: false,
- },
- {
- name: "风能率用率%",
- field: "w1",
- is_num: false,
- is_light: false,
- },
- ],
- data: [
- {
- index: 1,
- name: "MG01-01",
- lqf: "0.1000",
- yggl: "0.1000",
- yyy: "0.10",
- pcspp: "0.1000",
- u1: "0.1000",
- u2: "0.1000",
- v1: "0.1000",
- v2: "0.1000",
- w1: "0.1000",
- w2: "0.1000",
- zca: "0.1000",
- zcb: "0.1000",
- clx: "0.1000",
- clx1: "0.1000",
- clx2: "0.1000",
- jc: "0.1000",
- hh: "0.1000",
- hj: "0.1000",
- is_light: false,
- },
- ],
- },
- };
- },
- created() {
- for (let i = 1; i < 50; i++) {
- this.tableData.data.push(JSON.parse(JSON.stringify(this.tableData.data[0])));
- this.tableData.data[i].index = i + 1;
- }
- },
- };
- </script>
- <style lang="less">
- .decision-page-1 {
- .com-panel .panel-title {
- line-height: 3.4259vh;
- }
- .tools {
- display: flex;
- line-height: 3.4259vh;
- .tool-block {
- display: flex;
- align-items: center;
- margin-left: 0.741vh;
- .legend {
- flex: auto;
- width: 0.741vh;
- height: 0.741vh;
- margin-right: 0.741vh;
- &.long {
- width: 2.963vh;
- height: 0.37vh;
- }
- }
- .legend-text {
- color: @gray-l;
- font-size: @fontsize-s;
- }
- }
- }
- .project-table {
- overflow: auto;
- tbody {
- height: calc(100vh - 24.5vh);
- }
- td {
- color: #b2bdc0 !important;
- }
- }
- }
- </style>
|