test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style(系统设置): 小屏情况下平台集成展示更友好

This commit is contained in:
Jianguo-Genius 2024-04-23 17:37:24 +08:00 committed by 刘瑞斌
parent f45f6298fe
commit a2bb9cdeeb
1 changed files with 46 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
system-setting/frontend/src/business/workspace/integration/BugManagement.vue
View File

@ -5,31 +5,40 @@
{{ $t('organization.integration.select_defect_platform') }} {{ $t('organization.integration.select_defect_platform') }}
</div> </div>
<el-form class="platform-radio"> <el-form style=" margin-left:-20px;">
<el-radio-group v-model="platform" style="margin-top: 10px;width: 100%"> <el-radio-group v-model="platform" style="margin-top: 10px;width: 100%">
<el-row> <table>
<el-col :gutter="20" :span="4"> <tr>
<td>
<el-radio class="platform-radio" label="Tapd"> <el-radio class="platform-radio" label="Tapd">
<img alt="Tapd" class="platform" src="/assets/tapd.png"/> <img alt="Tapd" class="platform" src="/assets/tapd.png"/>
</el-radio> </el-radio>
</el-col> </td>
<el-col :gutter="20" :span="4"> <td>
<el-radio class="platform-radio" label="AzureDevops"> <el-radio class="platform-radio" label="AzureDevops">
<img alt="AzureDevops" class="platform" src="/assets/AzureDevops.png"/> <img alt="AzureDevops" class="platform" src="/assets/AzureDevops.png"/>
</el-radio> </el-radio>
</el-col> </td>
<el-col :gutter="20" :span="16"> <td v-for="config in firstRowPlatformConfigImages" :key="config.key">
</el-col>
</el-row>
<el-row v-for="(row, index) in platformConfigs" :key="index">
<el-col v-for="config in row" :key="config.key" :gutter="20" :span="4">
<span> <span>
<el-radio :label="config.label" class="platform-radio"> <el-radio :label="config.label" class="platform-radio">
<img :alt="config.label" :src="getPlatformImageUrl(config)" class="platform"/> <img :alt="config.label" :src="getPlatformImageUrl(config)" class="platform"
style="width: 150px;height: auto"/>
</el-radio> </el-radio>
</span> </span>
</el-col> </td>
</el-row> </tr>
<tr v-for="(row, index) in otherPlatformConfigImages" :key="index">
<td v-for="config in row" :key="config.key">
<span>
<el-radio :label="config.label" class="platform-radio">
<img :alt="config.label" :src="getPlatformImageUrl(config)" class="platform"
style="width: 150px;height: auto"/>
</el-radio>
</span>
</td>
</tr>
</table>
</el-radio-group> </el-radio-group>
</el-form> </el-form>
@ -61,20 +70,28 @@ export default {
return { return {
loading: false, loading: false,
platformConfigs: [], platformConfigs: [],
firstRowPlatformConfigImages: [],
otherPlatformConfigImages: [],
platform: TAPD, platform: TAPD,
} }
}, },
activated() { activated() {
this.platformConfigs = []; this.platformConfigs = [];
this.firstRowPlatformConfigImages = [];
this.otherPlatformConfigImages = [];
getIntegrationInfo() getIntegrationInfo()
.then((r) => { .then((r) => {
for (let i = 0; i < r.data.length; i++) { for (let i = 0; i < r.data.length; i++) {
let pageNum = Math.floor(i / 5); this.platformConfigs.push(r.data[i]);
if (!this.platformConfigs[pageNum]) { if (i < 2) {
this.platformConfigs.push([]); this.firstRowPlatformConfigImages.push(r.data[i]);
} else {
let pageNum = Math.floor((i - 2) / 4);
if (!this.otherPlatformConfigImages[pageNum]) {
this.otherPlatformConfigImages.push([]);
}
this.otherPlatformConfigImages[pageNum].push(r.data[i]);
} }
this.platformConfigs[pageNum].push(r.data[i]);
} }
}); });